When it comes to the development of a single page web application for mobile devices performance is a big deal. Smartphones are significantly less powerful than a desktop PC. Therefore, a test was setup to measure the time for different approaches in creating html on the client.
The problem of all of these frameworks is that they have to render the HTML. There are a lot of interesting blog posts, which discuss the pros and cons of client and server side rendering (e.g. the post of Karl Seguin). Most of the authors are saying that client side rendering is very slow and should be rather done on the server. However, client side rendering brings some positive points so it become an established procedure especially when an app with smooth page transitions and less data transfer has to be developed.
For the test a simple NodeJS server was set up. The intention of the test is to render the same HTML structure by different approaches. The following approaches were tested:
- server side rendering with jade templating
- client side rendering with string concatenation
- client side rendering with underscore as templating engine
For testing purposes a local database is set up and seeded with tweets from Twitter. These local saved entities have to be rendered. The time measurement starts as soon as the requested entities are available: either fetched from the database (server side rendering) or the Ajax request (client side rendering). It ends as soon as the last entity is rendered as html. The test starts with rendering one entity with each component and finishes with rendering 1000 entities. The entities have to render the following markup:
Server side rendering needed almost a constant amount of time for rendering the HTML document while the client side rendering defines a linear increase. A huge benefit of server side rendering is that you have the control of the performance of the server hardware whereas client side rendering is dependent of the performance of the device on which you do not have any control. The application can be accessed by a high-end device like a desktop PC or by a smartphone with little performance. Performance is a crucial factor for the test result. In another test two different smartphones were used to measure the time for client side.
The smartphones are clearly slower than the PC because of lacking hardware performance. One major advantage of client side rendering is that the server can generate JSON faster than a complete HTML template. The JSON is also smaller than the rendered HTML document. This is big advantage for the vendor of the application. He can reduce server and traffic costs by sourcing out the rendering on the client. This has especially an effect for pages with a lot of visitors. For visitors who access the page with a smartphone, less traffic by serving a JSON object instead of a HTML document is also a big plus.
AngularJS is by far the slowest solution for the client side rendering, but the development of the angularjs app was the fastest one. The application requires only a few lines of code (about 30 lines) whereas the BackboneJS counterpart needed more than 100 lines of code.
The test is open source available at Github. Feel free to contribute. You can see the full client vs server performance test and its documentation in here: GitHub: Zarlex/Client-Vs-Server-Performance-Test