Comparative Analysis of JavaScript Framework: This slides contains brief about Single Page Architecture and Existing gaps in framework like Angular, Backbone, Knockout.js and proposed solutions.

1. Comparative Analysis of
JavaScript Framework
VS VS
By Nishant Kumar
Tech Author @Mozilla
UI Engineering Lead @ Cloud Startup
Teaching Assistant @Bits Pilani, Pilani

3. Single Page Application

4. 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

5. Traditional Web-App Architecture

6. Single Web-page Architecture

7. How SPA works ?
Hit Like Trigger click event
Update Like count
Thanks

8. Do you have an example of SPA ?

9. 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

10. Why JavaScript Framework at
Frontend ?

11. Model View Controller (MVC) Framework

12. Model View ViewModel(MVVM) Framework

13. Model View Presenter (MVP) Framework

14. 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

15. Angular Code Snippet

16. Backbone View Code Snippet
HTML Page is
not Injected
like Angular.js

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

18. 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

19. Thank YouThank You
Any Questions ?Any Questions ?