isomorphic i·so·mor·phic (ī’sə-môr’fĭk)
Having a similar structure or appearance but being of different ancestry.
Alright, we all know It is possible to use utilities like Lodash universally with the help of browserify or webpack. What about environment specific things such as AJAX? Check — Isomorphic fetch allows us to do just that. What about moving forms and files around? Check — Isomorphic formdata works perfectly with isomorphic fetch as well! What about if I need to be able to detect my environment; I’m not using meteor?! It’s covered. Even the DOM can now be made isomorphic with the help of the “Virtual DOM” implemented in libraries such as React, Deku and many others. You can even opt out of the virtual DOM altogether and get right back to writing the simple “static” html with tools such as morphdom, set-dom and diffHTML.
This is starting to look pretty cool. I can now write an app that uses the same utilities, ajax and templates in both Node an the browser! Well, we’re not quite there. There’s still too much missing! We need routing (with redirects), sessions, cookies, state management and more to make a universal app! Node lets us delegate most of these tasks to frameworks such as Express and Koa and allows easy organization of features into middleware. You can isolate features and I can test them easily! It’s a simple, top down, pluggable approach to building html — You can easily follow a request through the entirety of your app (Sound like flux anyone?). Why can’t we build DOM in the same organized way? React brings us close, but it’s still not enough. React router brings us closer, but it’s unfamiliar and bulky.
Great. Another framework. What does it do?
Rill is an abstraction over the part of Node we all use most, the HTTP server. However it exposes the http api in an isomorphic way thanks to @rill/http. Routing, redirects, cookies, sessions, refreshes, error handling and even common headers for things like the “user-agent”, “referrer” and “locale”. You can finally access all of the data about a user or request from the same api, client or server, and it just so happens to be the same as Node.
Rill is a bit more than just this though, @rill/http is only one module. Rill (the main library) is more akin to Express or Koa and shares a fairly similar api. It enables middleware in an isomorphic environment and provides the final piece for any app. A way for data to flow. You can check out the documentation here.
Thats it, the index page is now fully capable of being rendered by the browser, or the node server. But thats not very impressive, what about navigation? What about “/away”?
This is just the tip of the iceberg. Modules for this style of development are still being worked on and the limit is yet to be reached. Personally I think tools like “Node Canvas”, and the “Node File API” could open up progressively enhanced image manipulation. For the current list of Rill compatible middleware just click here, or here.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!