Todo web app created with Riot.js, SkeletonCSS, animate.css, and foundation-icons.
This project was originally created to unit-test py-component-controller, but was later revised as a general todo application to help learn and understand Riot.js workflow.
The design pattern used in this project is entirely opinionated.
Though React.js and Vue.js are currently in the spotlight, I find Riot.js to be a happy medium sharing the same phiolosphy (isolated web components), and carry less overhead.
build/
├── webpack.conf.js
src/
├── assets/
│ ├── images/
│ └── styles/
│ └── *.scss
├── components/
│ └── *.tag
├── router/
│ ├── views/
│ | └── *.tag
│ └── index.js
│ └── *.tag
├── services/
│ └── *.js
├── app.tag
└── main.js
This app uses webpack with the riot-tag-loader to help bundle tags and other resources.
To simplify and modernize routing, this app uses riot-view-router rather than the vanilla routing mechanisms for Riot.js; allowing us to route using tag views.
Rather than isolating functionality related to manipulating app data to individual tags and trying to funnel opts around, shared funtionality has been moved to services. This allows us to identify, control, and manage the manipulation of any data within our Riot.js application.
app.tag is our root tag, which should be mounted as soon as our router is instantiated. Using this development pattern, no other riot tag should need to be manually mounted.
- Riot.js 3
- riot-view-router
- Sass
- SkeletonCSS
- animate.css
- Foundation (icons)
- Webpack
- riot-tag-loader
- Webpack Extract Text Plugin
- Webpack Google Font Plugin
Bundles can be built like so,
npm run buildTo serve the website,
npm run appYou may alternatively run the website in the background,
npm run app:detached
- John Nolette (john@neetgroup.net)
Contributing guidelines are as follows,
- Branches for bugs and features should be structured like so,
issue-x-username. - Include your name and email in the contributors list.
Copyright (c) 2017 John Nolette Licensed under the MIT license.