Swarm.js+React — real-time, offline-ready Holy Grail web apps

Swarm.js works like Firebase but with the addition of offline client-side storage that is sync’ed to the server later

The new Swarm+React TodoMVC demo can:

– synchronize in real-time (WebSocket),

– cache data at the client (WebStorage),

– load and work completely offline (Application Cache).

The app employs Swarm models and React views. It is important to notice that the code is written like it is a local MVC app. The only network-aware call in client-side code is connect() which “plugs” the model into the server’s sync “outlet”. Later on, all the sync is done by Swarm in the background; update events are delivered to views using the popular on()/off() subscription pattern, and even that is hidden inside ReactMixin.

The app is optimized for instant load using the Holy Grail approach. All the views, models and even the router are shared between client and server. The server-side code prerenders React views so the browser gets static HTML (fast). The page is made live once scripts and data arrive (slower). Holy Grail is critical, considering that React.js is rather heavy. The resulting page load latency is quite close to RTT.

Categories

Meta

Ken Snyder is a Software Craftsman specializing in PHP and JavaScript. Ken works in Salt Lake city for Right Intel.
He is the co-founder of UtahJS, an educational non-profit aimed at promoting JavaScript in Utah.