Write once, run everywhere, is a well known slogan of Java around the web. Can we apply this to JavaScript? The short answer is yes. In this post, we will try to discuss the idea of isomorphic JavaScript applications, explaining what they are and which resources can help you in your development process.
Some history
Several years ago, web pages were only using HTML (and eventually CSS) without many interactive elements. Each user action required servers to create and serve an entirely new page. Once JavaScript and Ajax emerged, web developers created pages that do not need to reload while communicating with servers (dynamic content).
Single Page Applications (SPA)
Need to build a web application?
With cross platform compatibility, web apps remain the ultimate medium for a product. Tell us about your project for a free consult.
Modern day client-side code shares a lot of responsibilities, which introduced a new kind of application, referred to as the single-page application (SPA). In an SPA, all the necessary assets are retrieved with a single page load, or dynamically loaded and added to the page as necessary. Some examples of SPAs are Gmail and the StackEdit editor.
SPAs are good at interactivity because they keep communications with the server as low as possible. However, they do have some problems. Let’s dig in.
Performance
As SPAs download all the required data during the initial load, the first load-up is slower than normal. If the load times are too long, it can lead to an increased bounce rate, and ultimately a loss of revenue. According to a research, “a 10ms increase in page load time costs the site $250K in revenue annually.”
Search Engine Optimization (SEO)
Search Engine Optimization of SPAs is difficult, because web crawlers find them difficult to index. One reason for this difficulty is the lack of HTML content. Servers don’t produce HTML content, because they heavily rely on JavaScript execution. Web crawlers analyze the data from servers as raw text.
Search engine giant Google has recently updated its web crawler so that it can work with JavaScript-based pages, however, other search engines like Bing and Yahoo are not using this approach as yet. Good indexing is vital for any website, especially for e-commerce websites, as it usually leads to more visits and higher revenue.
Isomorphic JavaScript Applications
An Isomorphic JavaScript application can run both on the client and on the server. Therefore, you can write the code once and then run it on the server to render static pages and on the client side to allow fast interactions. This approach takes the best of the two worlds and lets you avoid the two issues described above. These apps can provide UIs that feel faster and more interactive than traditional web apps.
Frameworks for developing isomorphic apps
There are a lot of frameworks that can help you in developing isomorphic JavaScript applications. One of them is Meteor, which is an open-source JavaScript framework, written on top of Node.js, that focuses on real-time web applications. Another small library developed by Airbnb is Rendr, which let you run Backbone.js apps on both the client and the server. A lot of companies are adopting Node.js for their products. Sharing code between the client and server is becoming a more natural choice, and is possibly the future of web development.
Some pros and cons of using Isomorphic JavaScript frameworks
Pros
- Efficiency: Save time to write code for server & client.
- Straightforward: It makes reactive programming straightforward.
- Less training and skills required to create an app.
Cons
- Frameworks grows quickly, thus require developers to update apps frequently.
React is helping
React by Facebook is new to the lot, but it is significantly gaining popularity in the JavaScript community. There are several reasons for this:
- It introduces the concept of “Component”, which allows you to create your own element and then let you manipulate it easily. You can also reuse your components.
- React.js uses a special syntax called JSX, which allows you to mix HTML with JavaScript.
- It makes debugging easy with a simple Google Chrome extension.
Wrap Up
In this post, we have discussed the concept of isomorphic JavaScript applications along with some frameworks to create such apps. This is relatively a new approach to develop web apps that combines the best of server-side and client-side programming.
