WeBlog
  • Agile Culture
    • Agile methodologies
    • Skills and expertises
    • Creativity and innovation
  • Management and Organization
    • Leadership
    • Team collaboration
    • Transformation and Change
  • Tech and Digital
    • Artificial Intelligence
    • DevOps and Craftsmanship
    • User experience and Digital Delivery
    • Data and Cybersecurity
    • Architecture and Technologies
  • World of Work
    • Well-being at work
    • Career
  • EN
No result found
View all result
Discover Wemanity
WeBlog
  • Agile Culture
    • Agile methodologies
    • Skills and expertises
    • Creativity and innovation
  • Management and Organization
    • Leadership
    • Team collaboration
    • Transformation and Change
  • Tech and Digital
    • Artificial Intelligence
    • DevOps and Craftsmanship
    • User experience and Digital Delivery
    • Data and Cybersecurity
    • Architecture and Technologies
  • World of Work
    • Well-being at work
    • Career
  • EN
No result found
View all result
Discover Wemanity
WeBlog

Isomorphism, and How to Bring Your Webapp to the Next Level

by Wemanity
01/2016
in Tech and Digital
Isomorphism, and How to Bring Your Webapp to the Next Level

Isomorphism or how to handle complex webapps development with both front & server rendering?

A brief web app history

Under the dinosaurs area (I mean a long time ago, before 2010), Web used to belong to the server (I will not speak about flash). Front-end development was not a job, all app logic was handled by the server in a server specific language (php, C#, java…). JavaScript was just here to bring some sugar to the pages, with the help of jQuery (slideshows etc.).

No problems then, but not a very friendly environment for webapps, constant page reloading, poor UI interactivity and reactivity, heavy bandwidth usage etc.

And here came the JavaScript MVC frameworks (AngularJS, Backbone, Amber…), revolution!

Goodbye server side rendering and hello single page applications! No more page reloading, more reactive and complex interface… But all that goodness came with one painful cost: Initial page is just blank.

  • Longer perceived loading time (with the Flash Of Unstyled Content, aka FOUC). Obviously all JavaScript has to be loaded before rendering start.
  • Poor SEO. Despite of the enhancement of Google crawler JavaScript interpretation, single page application SEO is still very poor and uncertain.

So we fall into a hybrid approach almost every times: serve a fully or partially rendered page to the client and then take over with complex JavaScript.

Every developer who did that know how the Hell it is to build and to maintain. Many pieces of code (string formatting, templates…) have to be written on the server (in php, java, C#…) and on the client (JavaScript). You inevitably ends up with errors.

Here came NodeJS

With the revolution (once again) of NodeJs, a magic thing occurs: we can execute JavaScript code on the server. Yes, the same exact language which is executed by browsers.

Imagine you could, on the server, get your front JavaScript code, write something like “App.render()”, exactly the same way you do it on the client, and end up with a fully rendered page?

That what is Isomorphism, the JavaScript application of the old well known java paradigm “Write once run everywhere”. You write your logic one time in JavaScript, render it to string on the server, send it to the client and then execute the same application on the client.

Practice over theory

Look simple and obvious, but an issue quickly rise, the DOM.

Indeed, many popular JavaScript libraries heavily depend upon the DOM, which do not exist in server environment. Frameworks like AngularJS or jQuery are not environment agnostic, they depend upon the DOM and thus can be rendered only in a browser.

That’s why a new kind of view framework appear: ReactJS-like frameworks.

These frameworks abstract the DOM, so every piece of the app can be renderer to string.

Another gap is still there (at least for a NodeJS driven app). The language is the same, but there are still differences between the NodeJs dependencies management, driven by npm and require([modulename]) and front end, driven by bower and import statements.

Here come some nice tools to our rescue: Babel, Webpack and Browserify. These tools mimic the NodeJs dependencies management for the browser. They pack all your app into a single file, browser compliant application.

Grasp the ideal architecture

There is some all-in-one frameworks for building Isomorphic applications, like Meteor, but I will present a more tunable and handcrafted architecture.

For example I set up a little git project implementing these features :

  • Server-side rendering
  • Standard rendering server (for performances comparison)
  • Standalone rest server (API)
  • App working on browser without javascript (try is by disabling js in the dev console)

The view

The ideal is to have a standalone NodeJs server, the entry point of the app. It would be handling first user request, rendering template (Written with a framework like ReactJs) and serving rendered pages and packed app files (with the help of Webpack) to the client. No data here, just views!

It is a good practice to ensure that the app runs well without javascript, it’s tricky but it brings reliability to the app.

The data

We would develop an API only server, with whatever language you want. This server will handle all application logic and data. As the server is only handling json or XML and no html it can be more performant than classic full stack framework (no heavy rendering libraries like twig or Razor, lighter dataflow).

Upload / Content / Images etc …

Uploads (images, files) would be stored on a specific server, like amazon service or similar.

Conclusion

Yes, isomorphism is not an easy thing to setup, but it is worth it, it brings to the user a huge enhancement in reliability and performance, and to the developer an easy way to maintain app.

Moreover isomorphic architecture presents some very good side effects: a complete separation of concern. You have independent tiles doing only one task at a time. So very maintainable, easily expandable (imagine you want to add a mobile app tile, you already have a working Api and uploads management).

With the arrival of Angular V2 (which is not as coupled on the DOM as V1), the acceleration of NodeJs development and new ES2015 browser and server capacities, isomorphic JavaScript should evolve more quickly and should be more and more used in a near future !

Sources and resources:

  • http://isomorphic.net/
  • http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
  • http://maketea.co.uk/2014/06/30/building-robust-web-apps-with-react-part-4.html
  • https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY/edit

Wemanity

Wemanity

Wemanity is a unique consulting group that helps its clients become customer-centric, flexible and high-performing in a sustainable way.

Related posts

Une IA et une blockchain
Tech and Digital

Blockchain and AI: A revolutionary alliance

Artificial intelligence and blockchain are together transforming the technological landscape. Their synergy is based on a mutual relationship: AI makes...

3 weeks ago
Hacker
Tech and Digital

Become cyber-resilient in the face of AI

Cyber attacks are becoming more frequent and more complex. It's no longer a question of whether your business will fall...

1 month ago
Hand touching a planet with a bright light
Tech and Digital

Experimentation and Potential: Integrating Generative AI into Business

We've all seen those futuristic computers in science fiction movies—machines capable of understanding human speech, executing complex tasks, and instantly...

2 months ago
Robot thinking
Tech and Digital

Wemanity AI Lab: Accelerate the adoption of AI and automation in your business

Artificial intelligence is no longer a vision of the future; it is already reshaping the way businesses innovate, automate processes,...

2 months ago

Recommended

7Ps Framework: give your meetings the thought and preparation they deserve

7Ps Framework: Give your Meetings the Thought and Preparation they Deserve

March 16, 2022
Hand and puzzle

How Systems Thinking Enables Organisational Improvements

February 1, 2024
pink guitar on orange background

Become a Good Trainer: The Keys to Catch Your Audience Like a Rock Star

October 17, 2023
A white meeting table with graphics and data on top of it. 8 chairs around the table on a concrete floor.

7 Techniques to Facilitate a Meeting

September 24, 2024

Categories

  • Agile Culture
  • Management and Organization
  • Tech and Digital
  • World of Work
Powered by Wemanity logo

Categories

  • Agile Culture
  • Management and Organization
  • Tech and Digital
  • World of Work

Join our community and receive our newsletter.

Rejoignez notre communauté et recevez nos dernières actus.

Sluit je aan bij onze community en verkrijg onze newsletter.

No result found
View all result
  • Agile Culture
    • Agile methodologies
    • Skills and expertises
    • Creativity and innovation
  • Management and Organization
    • Leadership
    • Team collaboration
    • Transformation and Change
  • Tech and Digital
    • Artificial Intelligence
    • DevOps and Craftsmanship
    • User experience and Digital Delivery
    • Data and Cybersecurity
    • Architecture and Technologies
  • World of Work
    • Well-being at work
    • Career
  • EN