What is Isomorphic Javascript?

Edit




Lately I came across a term called "Isomorphic Javascript". The short definition of it is that "Javascript code that is runnable both on the server and on the client side". But that definition keeps confusing me. Thus, I keep reading and searching and found this easy to understand explanation! 

The main concept behind the isomorphic achitecture is the following:

  • The application state and code is shared between your browser and the server.  
  • After the server has received the request it creates a new flux-react application instance and renders the view then passes the state of the storages (app) into the rendered HTML output: <script>var STATE = ...</script>.  The server responds with this rendered file.  
  • The browser loads the same code (built with Browserify/Webpack) and bootstraps the application from the shared state. (shared by the server and injected into the global/window scope). This means that our application can continue from the point where the server has finished.  
  • The user gets a fully rendered site at the first load like in the old times, but also able to continue the surfing with a super fast SPA application.  
  • Because the site content is viewable without JavaScript, the search engines can index it.


Hope that could help you to understand and explain to others what Isomorphic Javascript is :)

Reference : Isomorphic Javascript - Page 1 - RisingStack Engineering
What is Isomorphic Javascript? What is Isomorphic Javascript? Reviewed by DF on 11:17:00 PM Rating: 5
©DF. Powered by Blogger.