Using Meteor to get started with Isomorphic Web Apps

While the last blog post introduced the concept of Isomorphic Web Apps to Marketers this post will now take a look at the architecture and more details. Basically covering what you should know before getting started.

The Isomorphic approach

Isomorphic Web apps use the same code on the client side and on the server. The code can ‘adapt’ to its environment.

The traditional approach is to have the client side completely different from the server side and in most organisations, there is a team responsible for the backend and one for the frontend. This separation of concern leads to communication issues that generate delays or misunderstandings between the involved teams. These differences also mean that when the client creates a mark-up change in the frontend, the server-side developers have to insert the new mark-up in their templates, which generates errors and results in loss of time. With the Isomorphic approach, you can have just one team of developers with a similar technical skill set. While you’ll still have front- and backend specialists, both streams have to work closer together, which translates to a faster and cheaper implementation.

Optimistic UI

Meteor is one of the biggest and most powerful full stack frameworks for isomorphic apps. All you need for a minimal setup to get started is getting NodeJS & Meteor on the server of your choice running and understanding the concept of Optimistic UI. An example implementation of an isomorphic will be covered in this blog post. At its core Meteor uses a design pattern called “Optimistic UI”. Every input done by the user first happens on the client side and is then synced back to the server. This gives a fully latency-free feeling to the end user and increases the user experience of your website, which translates at the end to higher user satisfaction.

Using Meteor for your isomorphic app

Meteor takes care of sharing everything between the client side and server side. Partials of the MongoDB are synced inside the MinimongoDB on the client side. The developer specifies which data is accessible and which is not. No configuration objects or data attributes anymore. The same calls are executed everywhere, server and client side. You have direct access to the database located on the client. Security is also very good because it is handled in just one place in your application. It is or all open or all close, so is hard to forget something. Developers only have to subscribe from the server to the client side and then to the right database rows. The communication is handled between the client side and server using web-sockets. This allows the server to push information directly to the client. This means no delay between the communication of two web clients.

Applying Meteor and Optimistic UI for a chat app

To show the practical value of this concept let’s take the example of a chat. Old school servers had to listen to the client requests and only then they were able to execute a task. This means that both clients need to have a continuous pooling logic, asking the server every X seconds if there is something new. This is a lot of unneeded requests! With web-sockets, there will be no unnecessary data transfer. With Meteor and Optimistic UI the only latency occurs between the text entered on the first client and the text appearing on the second client is the network. For developers, to understand this better, check out my chat demo app on GitHub. It is done with Meteor, React and Kadira’s flow router. It allows us to have perfect SSR (server side rendering) and also gives you an example how an isomorphic app is built.

Debugging and Deploying

Since your code runs on both sides, it is also very easy to debug server side code by using the client console (make sure to publish it to the client, otherwise it is not accessible for security reasons). Building and deployment is also very easy, as they are lots of third parties packages that take care of it. Further Meteor and NodeJS is also very scalable and should work with load balancers as well.

Creating Mobile Apps

When it comes to mobile web apps, Meteor can help you out a lot! It has out of the box Cordova support, which compiles your single page mobile web site into a mobile app. It is also easy to setup the HTML5 application cache with Meteor, which brings your web application offline support.

Conclusion

This is a powerful approach for well-made apps with great UX, easy setup, cheap and universal. It is also scalable and thought for big enterprise solutions.

The biggest advantages for developers are:

High performance due to the implementation of Optimistic UI

The whole app (backend and frontend) can be written with JavaScript Version 2015 (ES6) or TypeScript

Meteor is Open Source with a large community and its own package repository

Out of the box support for native apps with Cordova

Quick setup time and works on Linux, Windows and Mac servers

Never miss an update by following us and subscribing to our monthly newsletter!