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.
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.
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:
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).
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).
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.
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).
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).
February 13 / 2020
December 17 / 2019
Digital technology enables organizations to boost productivity and better engage with customers. However, many technology initiatives continue to see cost overrun, damaging the bottom line and undermining the value...Read post