Best JavaScript Frameworks

The period 2012-2013 has seen a major surge in HTML5 Technologies especially the JS Frameworks. All of these can be categorized into MV* patterns. The reason for the sudden rise in popularity for JS frameworks largely goes to the fact that numerous smart-phones are now available with literally any resolution and sizes and websites and applications are forced to adapt quickly or fall apart. As the User Experience plays an important role than ever before, one page websites became the future replacing PHP powered websites to use PHP just for back-end purpose.

What Is MVC, Or Rather MV*?

These modern frameworks provide developers an easy path to organizing their code using variations of a pattern known as MVC (Model-View-Controller). MVC separates the concerns in an application down into three parts:

  • Models represent the domain-specific knowledge and data in an application. Think of this as being a ‘type’ of data you can model — like a User, Photo or Note. Models should notify anyone observing them about their current state (e.g Views).
  • Views are typically considered the User-interface in an application (e.g your markup and templates), but don’t have to be. They should know about the existence of Models in order to observe them, but don’t directly communicate with them.
  • Controllers handle the input (e.g clicks, user actions) in an application and Views can be considered as handling the output. When a Controller updates the state of a model (such as editing the caption on a Photo), it doesn’t directly tell the View. This is what the observing nature of the View and Model relationship is for.

MV*-architecture is not a kind of fashion, or killer-feature, or something that could be thrown out. It is a pragmatical way to organize rich UI-applications to tackle complexity of the modern programs.

Why use Modular Pattern?

  1. Not everyone structures code by default. Frameworks enforce structure to some extent. This extent is variable based on how much scaffolding they provide. Too much scaffolding usually translates to steeper learning curve.
  2. Frameworks generally encapsulate design/programming patterns from the collective experience of a larger community, so in some cases there will already be structure in there, while you will build and re-factor.
  3. Mostly developers will come and go, using popular/standard frameworks makes it easier for developers other than the original developer to understand the structure. Good frameworks are well documented and have active communities to be able to ask for help.
  4. As you move from project, you most likely copy/paste code from previous project that you now require in a new project. In case you use a framework even if its your own MV* framework, you just import and include this framework each time.

Possible Disadvantages

  • It tends to be heavy weight for implementing. Where you could have gotten away with 1 class, you’ll now have three. On smaller projects, you’re right to question the benefits of MVC.
  • It can be frustrating to stay within the structure of MVC. There’s always the temptation to let Controller code bleed into the View, or let the View directly access the Model. After you write your umpteenth wrapper function, you’ll wonder why you’re doing it.
  • MVC presumes your app will live forever and will change technologies. If you never change the UI, the data source, or the business logic then you kind of wasted your time in encapsulating those layers in anticipation of change.

Framework or just a Library?

Before you pick to work on a particular JavaScript Framework or a Library, it’s important to understand the difference between the two. Libraries just fit into your existing architecture and add a specific functionality whereas a Framework gives you an architecture and you will need to follow the rules. To make it simpler for you – Backbone.js and Knockout.js are JavaScript libraries and Ember.js and Angular.js are frameworks. Lets discuss briefly about each one of them.

Angular.js

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

The Key components for an Angular.js powered application will be :

  • Template : An Angular template is the declarative specification that, along with information from the model and controller, becomes the rendered view that a user sees in the browser. It is the static DOM, containing HTML, CSS, and angular-specific elements and angular-specific element attributes. The Angular elements and attributes direct angular to add behavior and transform the template DOM into the dynamic view DOM.
  • Directives : At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS’s HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
  • Model : A model notifies its associated views and controllers when there has been a change in its state. This notification allows the views to produce updated output, and the controllers to change the available set of commands. A passive implementation of MVC omits these notifications, because the application does not require them or the software platform does not support them.
  • Scope :  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created automatically when compiled HTML template is executed.)

Backbone.js

backbone.js

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, 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 was created by Jeremy Ashkenas, who is also known for CoffeeScript.

Backbone.js is composed of the following modules:
  • Models – Models are the heart of any Javascript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
  • Collections – Collections are ordered sets of models. You can bind “change” events to be notified when any model in the collection has been modified, listen for “add” and “remove” events, fetch the collection from the server, and use a full suite of Underscore.js methods. Any event that is triggered on a model in a collection will also be triggered on the collection directly, for convenience. This allows you to listen for changes to specific attributes in any model in a collection.
  • Routers – Web applications often provide linkable, bookmarkable, shareable URLs for important locations in the app. Until recently, hash fragments (#page) were used to provide these permalinks, but with the arrival of the History API, it’s now possible to use standard URLs (/page). Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events. For browsers which don’t yet support the History API, the Router handles graceful fallback and transparent translation to the fragment version of the URL. Views – Backbone views are almost more convention than they are code — they don’t determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view’s render function to the model’s “change” event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.
  • Events – Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events. Events do not have to be declared before they are bound, and may take passed arguments.

Knockout.js

Knockout is a standalone JavaScript implementation of the Model-View-View-Model(MVVM) pattern with templates. Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), Knockout can help you implement it more simply and maintainable.

knockoutjs
knockoutjs

Knockout includes the following features:

  • Declarative bindings – a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.
  • Automatic UI refresh (when the data model’s state changes, the UI updates automatically) – automatically updates the right parts of your UI whenever your data model changes.
  • Templating (using a native template engine although other templating engines can be used, such as jquery.tmpl)

Ember.js

Ember.js is an open-source client-side JavaScript web application framework based on the Model-View-Controller (MVC) architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

emberjs

 Main concepts are :

  • Models : All the database connections and synching with view happens here.
  • Router : Routers are used to query the model, from their model hook, to make it available in the controller and in the template.
  • Controllers : Controllers makes the bridge between the model and the view or template.
  • Views : Views represent particular parts of your application (the visual parts that the user can see in the browser). A View is associated with a Controller, a Handlebars template and a Route.
  • Component : A Component is a completely isolated View that has no access to the surrounding context.
  • Templates : A template is the view’s HTML markup.
  • Helpers : Handlebars helpers are functions that modify data before it is rendered on the screen.

Basically all the above mentioned framework/library is suited according to the requirement. Like if you want a light weight application with constant database updation and client side logic, then one should opt for backbone.js and if you have a very large application which is maintained by a lot of developers, then Angular.js will be the best solution. Learn one and the others would be much easier to grasp. And stick to the one that you feel is good for your method of development.

Hope you liked it. Thanks for reading. Cheers.

Resources

3 Comments on "Best JavaScript Frameworks"


  1. Hey there would you mind letting me know which web host you’re working with?
    I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good hosting provider at a reasonable price?
    Kudos, I appreciate it!

    Reply

    1. Hi McKenzie, try enabling g-zip and etags. Further optimize your website using tools like gtmetrix. This is what i did. Hosting surely dragged a lot before i did some server-side changes. Let me know if you need any help.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *