Comparative Analysis of JavaScript Framework

VS VS

By Nishant KumarTech Author @MozillaUI Engineering Lead @ Cloud Startup Teaching Assistant @Bits Pilani, Pilani

Single Page Application

Single Page Application (SPA) Architecture - Definition

“A single page application is a web app that fits on a single page with a goal of providing a more fluid user experience” from Wikipedia

“..A web app which handle majority of user interaction with app on the page (client end) without reaching to server every time…” from me

Traditional Web-App Architecture

Single Web-page Architecture

How SPA works ?

Hit Like Trigger click event

Update Like count

Thanks

Do you have an example of SPA ?

Overview: JavaScript Frameworks

“This describes a given structure of "how" you should present your code. Pretty much like a code-template, along some helpers, constructors etc. to solve/simplify a specific problem or bring your architecture in "order".

From

Why JavaScript Framework at Frontend ?

Model View Controller (MVC) Framework

Model View ViewModel(MVVM) Framework

Model View Presenter (MVP) Framework

Gaps in Existing Frameworks

• Backbone lacks support for two-way data binding, meaning you will have to write a lot of boilerplate to update the view whenever your model changes, and to update your model whenever the view changes.

• Views in Backbone manipulate the DOM directly, making them really hard to unit-test, more fragile and less reusable.

• Angular embeds its directive into html , which becomes very difficult to maintain as the size of the application grows. (Separation of concern between view and model is violated)

• jQuery or another DOM parsing framework in directives may be painful to use (need more tests) because of the way angular compiles templates.

• Manual Serialization : Doesn’t provide model synchronization with server • No Routing : URL map doesn’t support

Angular Code Snippet

Backbone View Code Snippet

HTML Page is not Injected like Angular.js

Proposed Solutions

We will be creating a new MVC Framework which will have the advantages of all three frameworks.

Proposed Framework

References:

http://jasmine.github.io/

http://www.johnpapa.net/spa/

http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter

http://www.slideshare.net/MassimoIacolare/single-page-applications

https://muut.com/blog/technology/riotjs-the-1kb-mvp-framework.html

http://backbonejs.org/https://github.com/gianarb/awesome-angularjs

Thank YouThank YouAny Questions ?Any Questions ?