How To Build Amazing Apps Using Isomorphic Applications

Categories: Technology |

The evolution of JavaScript continues to rapidly accelerate. Full stack development with JavaScript has become very popular.

In this blog post I will take a look at a new concept called “isomorphic applications”, explore what they are, and compare some of the new bleeding edge technologies for developing full stack isomorphic applications with NodeJS.

NodeJs

Some years ago, web development architecture delegated everything to a server that had to return an html file to the browser at each page load, and almost every interaction the user had, required an entire page reload. Then Ajax and jQuery technologies popularized and let things get more dynamic for web applications but still there was a huge gap to get the interactive feeling of native applications.

Single page applications (SPA) were the next step in the evolution of web applications. A typical SPA architecture needs a client-side component-application that runs on the browser and delegates the server-side to providing an API. So far so good. Now, web technologies are evolving to get the most from the frontend-backend architecture. JavaScript has an advantage because it runs on every browser and thanks to the very powerful V8 engine behind NodeJS, we can use one language to rule both sides.

Isomorphic applications FTW!

Isomorphic applications are applications that can run at the server and at the client. This creates some great opportunities for code reuse (code one time and run everywhere), testing (server-side rendering), search engine optimization friendly, fast first page load and means you can take full advantage of the great real time networking capabilities of NodeJS for free.

SPA’s popularized the concept of client-side MVC, so for a full stack application, we had to define routes, models, controllers and validations for the API, and routes, models, controllers and validations for the UI while keeping both updated with each other’s structure. SPA frameworks had limitations for search engine optimizations because the first page load is not pre-rendered by the server. Isomorphic applications are also SPA’s but can solve this limitation.

Developing an isomorphic application is a perfect fit when you want to create a real time interactive application in a very short time and only use one language. For example, creating a real time chat room with this technology could be super easy compared to the work you would need to do to integrate other technologies.

However, a word of caution: study well your project’s long term goals before choosing this approach. The simplification of the front-end and back-end architecture would require serious refactorization if we want a different architecture later.

That said, building a real time single page application couldn’t be more easy thanks to isomorphic technologies. Let’s take a look at some of the most interesting ones available:

MteorJs

1 – Meteor

The most popular of the isomorphic frameworks by far. Some consider it as the new generation Ruby on Rails and I totally understand why.

Meteor stack: Blaze (for a reactive user interface), DDP (real time updates protocol on top of websockets), Minimongo (mongodb at the UI level), MongoDB (the only database compatible), Velocity (testing framework).

Pros:

  • Super easy to learn, with lots of documentation and resources.
  • Received $11.2 million development budget in mid 2012.
  • Authentication (instant account system).
  • UI component based development thanks to meteor-blaze-components.
  • Mobile support ready (pre-builded cordova integration).
  • Build and scale tools.
  • Big community.
  • Testing framework.

Cons:

  • Only works with MongoDB (Redis implementation is on the way).
  • Partial support for server side rendering.
  • Very opinionated.

derby js

2 – Derby

Derby is Meteor’s biggest competitor, and it’s architecture is built on top of the most popular libraries at the NodeJS environment. It can do the same stuff as Meteor and for some cases even perform better, but is not as a mature project.

 Derby stack: ExpressJS (nodejs application), RacerJS (model synchronization), ShareJS (multi-user real time interactions), LiveDB (frontend DB), MongoDB (supports other DB’s using ORM’s like SequelizeJS).

 Pros:

  • Full server side rendering support.
  • Conflict resolution (consistent multi-clients synchronization).
  • Better file structure than Meteor.
  • Authentication (thanks to racer-access).
  • Uses NPM.
  • Search engine optimization friendly.

Cons:

  • Still at early development.
  • Not a lot of updated documentation.

backbonejs

3.- Rendr

Rendr defines itself as: “A small library that allows you to run your Backbone.js apps seamlessly on both the client and the server. It’s an interesting alternative if you come/like the  backboneJS approach to user interface MVC”. It’s not a development framework. Instead, it’s a small library that integrates a set of external libraries and technologies to play together nicely for isomorphic development.

 Render stack: BackboneJS (frontend MVC), HandlebarsJS (minimal templates), ExpressJS (nodejs application), MongoDB.

 Pros:

  • Support from a lot of the backbone community.
  • Full server-side rendering capabilities.
  • Very flexible (it’s just a lib).
  • Search engine optimization friendly.

Cons:

  • Not a lot of updated documentation.
  • Not an “everything is done for you” framework.

4.- EsteJS

EsteJS describes itself as: “The most complete React/Flux dev stack and starter kit for isomorphic functional web apps. Forget about evil frameworks, learn laser focused libraries and patterns instead. This dev stack is web dev panacea”. As stated, this is not a framework, but a preconfigured great development isomorphic stack. It follows Facebook’s recommended UI architecture, is reactive (http://www.reactivemanifesto.org/en) and aims to the future because it provides all the tools to write better JavaScript (BabelJS + FlowType).

 EsteJS stack: ReactJS (UI components), Flux (vanilla Flux architecture),  ExpressJS (server application), BabelJS (JS transpiler), FlowType (static type checker), Jest (unit testing), react-router (for routing on client and server side).

 Pros:

  • Facebook’s UI architecture.
  • Great documentation and resources for React+Flux.
  • Full server-side rendering capabilities.
  • Very flexible (it’s just a preconfigured development stack).
  • Search engine optimization friendly.
  • Better JavaScript (BabelJS + FlowType).
  • Immutable global app state (like ClojureScript’s Om).
  • Component based development oriented.
  • Fantastic performance.

Cons:

  • Larger learning curve.

We have looked at some great and promising technologies for web development. Sadly, AngularJS still lacks isomorphic capabilities because it’s architecture is very closely related to DOM, but changes are coming for its 2.0 version ( including isomorphic support, being rewritten with TypeScript, shadow dom, one way data binding, and fully component based oriented).

Personally I like MeteorJS a lot for its very fast development capabilities and being a “will do magical things for you framework”. I also like EsteJS’s stack for it’s great tools, fantastic performance and because it aims to the future of JavaScript – a future that is already happening (ES7/ES7 + static types). Please feel free to comment with your experiences developing isomorphic applications.