Single Page Apps and modern web applications developments

A Single Page Application is a Web application or a website that fits on a single web page. The goal is to provide a more fluid user experience akin to a desktop application.

Thereby, Single Page Applications (SPA) are as rich and responsive as a desktop app but built with HTML5, CSS and Javascript. The page does not reload at any point in the process, the appropriate resources being dynamically loaded and added to the page as necessary.

single page

A modern web application architecture.

AngularJS vs. Backbone.js vs. Ember.js

At Agilisoft, we are keen to choose the right framework for your project: it can have a huge impact on your ability to maintain your app in the future.

All the frameworks we use at Agilisoft to build Single Page Applications have a lot in common: they are open-sourced, released under the permissive MIT license, and try to solve the problem of creating Single Page Web Applications using the MV* design pattern. They all have the concept of views, events, data models and routing.

Community is one of the most important factors to consider

A large community means more questions answered, more third-party modules, more  YouTube tutorials …

Angular is definitely the winner here, being the 6th most-starred project on GitHub.

community

August 16, 2014

Framework size and page load times

Page load times are crucial for the success of your web site. Javascript assets are usually served minified and gzipped, so we are going to compare the size of the minified-gzipped versions.

However, merely looking at the framework is not enough. Backbone.js, despite being the smallest (only 6.5kb), requires both Underscore.js (5kb) and jQuery (32kb) or Zepto (9.1kb), and you will probably need to add some third party plug-ins to the mix.

framework

AngularJS

The Good Parts

Angular has brought many innovative concepts to the world of web developers. Two-way data binding saves a lot of boilerplate code.

Look at the following jQuery code snippet:

Thanks to Angular’s two-way-binding, you never have to write this code yourself. You just declare the bindings in your HTML template:

Pain Points

  • Complexity of the Directives API.
  • The scope hierarchy in Angular uses Prototypal Inheritance, which is a new concept to grasp for people coming from Object Oriented languages such as Java and C#.
  • In many cases, mistakes such as misspelling a directive name or calling an undefined scope function are silently ignored and can be challenging to find, especially when you throw into the mix the complexity of the directive API and the scope inheritance mentioned above.
  • In general, for pages with a lot of interactive elements, Angular becomes really slow.
    A good rule of thumb is not to have more than 2,000 active bindings on the same page.

Backbone.js.

The Good Parts

  • Backbone is lightweight, fast and has a small memory footprint. The learning curve is very linear, and there are only a few simple concepts to grasp (Models/Collections, Views, Routes).
  • It has great documentation, the code is simple and heavily documented.

Pain Points

  • Backbone does not provide structure but some basic tools to use to create structure
  • Things such as memory management have to be carefully considered. The lack of view lifecycle management makes route/state changes prone to memory leaks.

Ember.js.

The Good Parts

Performance has been a major goal in the design of Ember.js.

The ability to precompile the HandleBars templates during the build time or on your server, help to keep your application load and run fast.

Pain Points

Ember’s API changed much before it stabilized. Therefore, there is a lot of outdated content and examples that no longer work, making it confusing for developers who are making their first steps in the framework.