The Etch ecosystem is pretty small at the moment. Whilst Atom makes heavy use of it not much else does and you are going to have to write a lot of utility code to make full use of it.
Etch Router is my submission into this ecosystem.
Etch Router is built using Etch components which allows you build your routes in the same way as you build anything else. This is the same as react-router which honestly is where I got my inspiration.
Etch-Router is available on npm. Etch is a peer dependency and needs installing by you as well, this gives you control of the etch version in your project.
npm install –save etch etch-router
Once it is installed require its components and begin building!
This is a very quick example which doesn’t touch on half of Etch Routers features. For a better guide see the quick start guide in the docs.
I used Etch-Router with Jekyll to create the docs site (http://etch-router.arcath.net). This site uses all the hooks and features to create a nice UI.
In our Customer Support App, I swapped out React & React-Router for Etch & Etch-Router which was rather painless. After doing so the renderer webpack bundle went from 1.2MB to 414KB which is a pretty huge saving. Functionally there is no difference to the end user and I only needed to add a couple of functions to make Etch work a bit more like react.
My main addition to all my components was a setProp function which works the same as react’s setState.
As you can see this merges the new props with the old ones and then triggers an update of the component.
I have plans for how Etch-Router can be used in the long run. I can see me dropping a few more etch-* packages on NPM as I use Etch Router in more and more places.