The Sampson Project

Building an Isomorphic JavaScript app with Electrode

« Back to Blogs

How I built my website to use the best of SPA and Server-Side Rendering

What is Isomorphic JavaScript?

Isomorphic JavaScript (a.k. a. Universal JavaScript) is the concept of pre-rendering the first visited page of a single page app, so that your users don't have to wait for your SPA to bootstrap.  This is a huge deal for users that don't want to have to wait even longer after the page initially loads. It also also can be a huge pain for developers: How do you avoid overwriting already rendered content? What if a user clicks on something you've pre-rendered before you app is done bootstrapping? What if your app relies on data from an API? How do you avoid writing the same page content twice?

The Problem Solvers

Ever since the creation of NodeJS, the feasibility of Isomorphic Javascript has greatly increased. Your app can now share the same codebase on the front end and back end.  Frameworks like Angular (with Universal) and Ember (Fastboot) have been attempting to create their own plugins to solve the isomorphic app problem, but they can be tricky to get set up.

ReactJS the Hero of Heros

ReactJS is by far the front runner of Isomorphic JS.  Search react isomorphic or react universal on google, and you will quickly find that there have been no shortage of solutions on the react front. There are hundreds of boiler plates on hapi, express, koa, rails, you name it. The problem then actually becomes picking the one that works for you.

The Front Runners

I like to boil it down to three front runners: este, next.js, and

Este is a fantastic boiler plate with react-intl integration, as well as built-in firebase integration, but it actually has a few TOO many features for my tastes. It's a large framework compared to next and electrode, which only bring what you need to run your app.

Next.js is extremely simple to use, featuring a file structure base routing system.  All you do is install and make a file for each route.  But, it's a little bit too abstracted.  It makes me feel like im working in wordpress. All the dev work is done, and It takes more work than it should to implement API only routes.

Electrode: The best of both worlds.  Electrode features an amazing yeoman generator for getting down to the nitty gritty. It has a variety of options, with generators for express, hapi, and a few other node frameworks, even including an option to generate a service worker for creating a Progressive Web App. You get full access to your server, and can add or remove features as needed.

Getting Started

The first thing you'll need is Node 6+, and NPM 4+ (you can technically use 4, and 3.3 respectively, but I don't promote old softwares)

Install the yeoman, gulp and the generator for electrode:

npm i -g yo gulp generator-electrode

Then make your new app:

mdir your-cool-app-name && cd your-cool-app-name
yo electrode

Fill out the form that is presented, an you are on your way!