![Page 1: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/1.jpg)
Comparative Analysis of JavaScript Framework
VS VS
By Nishant KumarTech Author @MozillaUI Engineering Lead @ Cloud Startup Teaching Assistant @Bits Pilani, Pilani
![Page 2: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/2.jpg)
![Page 3: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/3.jpg)
Single Page Application
![Page 4: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/4.jpg)
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
![Page 5: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/5.jpg)
Traditional Web-App Architecture
![Page 6: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/6.jpg)
Single Web-page Architecture
![Page 7: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/7.jpg)
How SPA works ?
Hit Like Trigger click event
Update Like count
Thanks
![Page 8: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/8.jpg)
Do you have an example of SPA ?
![Page 9: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/9.jpg)
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
![Page 10: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/10.jpg)
Why JavaScript Framework at Frontend ?
![Page 11: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/11.jpg)
Model View Controller (MVC) Framework
![Page 12: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/12.jpg)
Model View ViewModel(MVVM) Framework
![Page 13: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/13.jpg)
Model View Presenter (MVP) Framework
![Page 14: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/14.jpg)
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
![Page 15: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/15.jpg)
Angular Code Snippet
![Page 16: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/16.jpg)
Backbone View Code Snippet
HTML Page is not Injected like Angular.js
![Page 17: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/17.jpg)
Proposed Solutions
We will be creating a new MVC Framework which will have the advantages of all three frameworks.
Proposed Framework
![Page 18: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/18.jpg)
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
![Page 19: Comparative analysis of java script framework](https://reader034.vdocuments.site/reader034/viewer/2022050714/55bdd3dbbb61ebb80a8b45b4/html5/thumbnails/19.jpg)
Thank YouThank YouAny Questions ?Any Questions ?