As the web is evolving, fast new technologies arise, and old methodologies quickly become irrelevant. Thus selecting the right framework for your project will have a huge effect on both your ability to deliver on time, and your ability to preserve and sustain your code in the future.
Importance of Framework Size
Page load times are essential for the success of your web site. Users are not bound to exhibit much patience when it comes to the speed of browsing so it is preferred to do everything possible to make your application load as fast as possible in many situations if you want to retain the user. Two important aspects to look at when considering the impact of the framework on the loading time of your application are framework size and the time it requires for the framework to bootstrap.
Commonly referred to as Angular in software development, it is an open-source web application framework maintained by Google and by a community of individual developers and corporations. It aims to address the challenges encountered in developing single-page applications. It is designed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture. Angular works in a wide range of use cases from small projects to enterprise applications.
One of the most notable feature of this framework is two-way binding. The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. In Angular, both the Model and the View can update the data, thus the “two-way” descriptor. This form of data binding allows for a reduction in the amount of code required to create dynamic views. Angular lets you classify your application building blocks into several types: Controllers, Directives, Services and Views (templates). These are later turned into modules and are dependent upon each other. Each type of building block has a different role. Views do the UI, controllers processes the logic behind the UI, services take care of communication with the backend , while directives make it easy to create reusable components and allows you to extend HTML vocabulary for your application. The resulting environment is expressive, readable, and quick to develop.
Backbone is known for being lightweight and has only dependency Underscore.js. It is designed for developing single-page web applications, and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized. Backbone.js gives framework to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. It provides an event-driven communication between views and models and lets you attach event listeners to any attribute of a model, thereby giving you effective control over what you change in the view. The backbone.js events are developed on top of regular DOM events making the mechanism very versatile and extensible. With one line of code, for example, you can introduce a publish/subscribe pattern to backbone that ties all of your views together.
CanJS is another framework for designing web applications that provides a lightweight inheritance system, observable objects and values, and a powerful MVC architecture core with live-bound templates, among other resources.
CanJS is flexible and can work across shared libraries. With its basic functionality it can be extended with plugins to handle things like setters, serialization/deserialization, jQuery plugin generation, validations, calling super methods thus helps in making 3rd party plugin development easy. Using templated event binding, CanJS controls can listen to events on objects other than their element preventing memory leak.
It favors convention over configuration which implies that instead of writing a pile of code, Ember can automatically understand much of the configuration itself, such as automatically inferring the name of the route and the controller when defining a router resource. Unlike AngularJS and Backbone.js Ember can automatically create the controller for your resource if you don't define one yourself. Also pretty much everything you need to create a web app including a template library, routing, and plenty of other things that are intended is built-in which makes the developers free from writing routine code and allows them to focus on the bigger problems that are unique to their project. It also provides support for developing against mock API and testing.
Backbone doesn’t provide UI binding, however is really good job at reusable, components but loses when it comes to Routing. Ember on the other hand keeps things clean and simple by introducing naming conventions. However, the approach of extending HTML with custom syntax, the easy-to-use data binding features combined with the power of plug-ins and a clear routing mechanism makes Angular preferred choice for web developers and works well works well both for quick prototyping projects and large-scale applications.