As you may already know, Airbnb developers have built rich web applications and experienced some great things. In 2011, they developed a single-page app for their mobile website and launched their wishlist and search tabs.
The web has had a profound impact on the lives of millions of people. Once upon a time, whenever a browser requested a particular page, the server used to generate an HTML page and send it over the wire.
Single-Page Applications (SPAs)
Also, Ember.Js, Angular.Js, and Backbone.Js are considered MVC and MVVM libraries.
Apparently, application logic (models, templates, views, controllers, internationalization, etc.) resides on the client, while data is accessed through an API. Servers are written in Python, Ruby, and Java, which are responsible for rendering wireframe pages.
Navigation between different pages is robust and faster thanks to the definite app loading process without the need to refresh the page. If the process is smooth, it can also work offline.
This approach doesn’t work for so many reasons. Let’s examine these issues and absurd situations below:
As a result of client-side applications, crawlers have a difficult time supporting HTML pages, leading to flaws in SEO practices and poor SEO results since the landing page is not indexed.
We all know web crawlers send requests to web servers and then interpret their results. In case, however, web servers return blank pages, then it would be of no use.
Between the server and client, some application logic or view logic is duplicated (often in different languages). Examples include currency and date formatting, routing logic, and form validation. Maintenance and support become a nightmare, especially for more complicated apps.
It is sometimes difficult to realize the negative impact of building a single-page application.
Numerous studies have shown that a slow website can negatively impact users and revenue.
Amazon claims the following:
“Each 100ms reduction in page load time raises revenue by 1%. Twitter spent a year and 40 engineers rebuilding their site to render on the server instead of the client, claiming a 5x improvement in perceived loading time.”
The Hybrid Approach: What Is It?
This hybrid approach claims to create a win-win situation as everyone wants server-side fully-formed HTML for the best SEO and performance. As well as this, we want client-side application logic to be flexible and fast.
In this scenario, some view and application logic can be executed both on the server and the client-side. Optimizes SEO and performance delivers more stateful apps and provides high maintenance.
Render was another library Airbnb used to run the backbone.js framework on both the server and client side.
There are also many other companies that use Node.Js for their applications.
Incorporate A Set Of Abstractions
There is no doubt that the server and client are two distinct environments, so the only thing that needs to be done is to create a set of abstractions that isolate application logic from primary implementations to create a single API for app developers.
To map URI (uniform resource identifier) patterns to route handlers, a single set of routers is required. The route handlers should be able to access HTML headers, URI information, cookies, and to particularize redirects without directly accessing req and res (Node.js) and window. location (browser).
2- Data Fetching & Persistence
You should know that the resources needed to render a specific page or component are described independently of the fetching mechanism. A resource descriptor is a URI that points to a JSON endpoint.
For larger applications, it is recommended to enclose resources in models and specify a class and primary key, which are then translated to URIs after a period of time.
3- Page generation (Review Rendering)
It doesn’t matter whether you use DOM (Document Object Model), a string-based HTML template, or a UI component library with DOM abstraction, you have to generate markup isomorphically.
Depending on the application, we should learn how to render views on the client or the server.
4- Construction and packaging
For larger apps, you can simply combine all the application code, templates, and views into a single bundle (this could result in hundreds of KBs to download).
Creating dynamic bundles and introducing lazy-loading assets make it more complex.
Esprima (static-analysis tool) allows ambitious developers to perform advanced-level optimization and meta-programming to reduce boilerplate code.
The Combination of Small Modules
- Less Coding – Since the codes are shared between the client and server sides, fewer coding lines are needed when compared to single-page applications (SPA). In short, less time is consumed.
In addition, unlike SPAs, where the first request loads the application and the required data is gathered afterwards.
As a result, isomorphic apps offer fast first-page processing and even faster subsequent processing.
- Amazing Load Speed: Isomorphic apps load quickly.