Example todo apps made with different rendering engines.
If you've written any kind of single-page app, you've probably worked with a client-side routing library - you give it different route strings, like /home and /about and maybe /post/:postId, and when one of those routes is visited the routing library calls the right function.
Or maybe if you use AngularJS, you've been lucky enough to use ui-router. ui-router lets you nest multiple "states", so that the URL can change and show you content, but without you having to reload the whole page.
If you're just not sure what the point is, check out "Why your webapp needs a state-based router".
To see it in action, open one of the implementations below and click around the demo app - note how when you click on the different topics, the list of tasks changes - but nothing else in the app has to reload.
These are meant to serve as an example of what a "real" application might look like with various rendering engines. They span multiple directories, are built with browserify, have templates in their own file, use local storage, etc.
If you just want to see an example of abstract-state-router being used without all the trappings, check out simplest-abstract-state-router-usage and read the source in index.html.
It uses Ractive's mustache templating, but other than that it's straight vanilla JS all in a single file.
You can read the docs over on Github, but this site is here to serve as a proof of concept (you really can use a state router what whatever templating library you want!) and give people some code to copy/paste.
These examples use node-style require() calls made possible in the browser with Browserify.
Ractive.js is my favorite templating/DOM manipulation library at the moment. A simple API that lets you interact with live content in the DOM and gives you the ability to write custom extensions your webapp will need, but gets out of your way for everything else.
Redux is a pretty compelling way to manipulate state - by restricting yourself to a pure function that takes in the old state and returns the new state, you gain simplicity, plus some cool features like easy undo/time travel.
Using the sexily-named state-router-redux-ractive library with abstract-state-router, you can associate a reducer function and optional side effects with your routing state. Not every state in the example has a reducer, just the ones involving more "documenty" view state. You can use reducers as you please.
Riot sells itself with its small code footprint, and even more attractive, its small API that lets you write self-contained tags that you can use on any web page.
Implemented by ArtskydJ
Implemented by crissdev
Any components you write with Svelte can be used by other developers, even if they use a completely different framework.
Even without code splitting, it produces the smallest example todo app. It uses a smart mustache templating implementation. It's pretty hot.
Do it! That's the point of the state router being abstract - you get powerful routing with whatever templating setup you prefer.
The easiest way to start is probably to fork this example repo and make a new copy of either the riot/ractive folder, and then to copy either the Riot renderer or the Ractive renderer and overwrite the methods with whatever makes sense for your dom manipulation shenanigans.
If you're new to Browserify, I can help you get set up. If you don't want to touch Browserify and would like to help umd-ify the abstract-state-router, I'm open to pull requests - I just don't have any motivation to support non-browserify environments until someone comes along and asks for it.
I'm planning on using the abstract-state-router for my own webapps going forward, but I would be happy to help other people use it. Ask me if you have any questions.