Javascript Frameworks
Download as PPT, PDF2 likes424 views
This document provides an overview and comparison of popular JavaScript MV* frameworks, including AngularJS, Knockout, Backbone, and Ember. It outlines the frameworks, compares their dependencies, data binding, routing, views, testing support, how to get data from servers, their communities and documentation, and third-party integration. Guidelines are provided that frameworks should fit tasks naturally and have low learning curves for development teams.
Javascript Frameworks
- 1. JavaScript MV* Frameworks By Mitesh Gandhi - MetaSys Software
- 2. Outline • MV* Patterns • Big Four Frameworks • Framework Comparison: – Dependencies – Data Binding – Routers – Views – Testing Mitesh Gandhi - MetaSys Software
- 3. Outline … • Framework Comparison: – Data – Community – Third Party Integration – Development Tools • React • React vs AngularJS • Guide Lines Mitesh Gandhi - MetaSys Software
- 4. Outline … • Principle of Natural Fit • Team Adaptability & Learning Curve Mitesh Gandhi - MetaSys Software
- 5. MV* Patterns Mitesh Gandhi - MetaSys Software
- 6. MVW (Modal-View-Whatever) Mitesh Gandhi - MetaSys Software
- 7. Big Four Frameworks AngularJS Knockout Backbone Ember Developed / Maintained Brat Tech LLC, Google and community Steve Sanderson Jeremy Ashkenas Yehuda Katz Design Paradigm MVW MVVM MVP MVC Year Released 2009 2010 2010 2011 Current Stable Release 1.4.7 / Sep. 29, 2015. 3.3.0 / Feb. 18, 2015 1.2.3 / Sep. 03, 2015 2.1.0 / Oct. 4, 2015 File Size 144 kb 21 kb 22.5 kb 427 kb License MIT MIT MIT MIT Website angularjs.org knockoutjs.com backbonejs.org emberjs.com Mitesh Gandhi - MetaSys Software
- 8. Comparison - Dependencies Framework Dependencies AngularJS No Dependencies Knockout No Dependencies Backbone - Underscore.js - jQuery Ember - Handlebars - jQuery Mitesh Gandhi - MetaSys Software
- 9. Comparison – Data Binding Mitesh Gandhi - MetaSys Software • Process that establishes a connection between the application UI (User Interface) and business logic
- 10. Comparison – Data Binding … • Data-binding is fully supported • Models use standard JSON properties (e.g. car.color = "red";) • Provides Option for Creating custom bindings Mitesh Gandhi - MetaSys Software
- 11. Comparison – Data Binding … • Data-binding is fully supported • Data can be bind into many attributes like text, value, options, enable etc.. • Provides Option for Creating custom bindings Mitesh Gandhi - MetaSys Software
- 12. Comparison – Data Binding … • Data-binding is not supported by default. • There are plugins available to support Data-binding Mitesh Gandhi - MetaSys Software
- 13. Comparison – Data Binding … • Data-binding is fully supported • Models use getters and setters but the binding is automatically and better than Backbone. Mitesh Gandhi - MetaSys Software
- 14. Comparison – ROUTERS Mitesh Gandhi - MetaSys Software • Used for routing your applications URL's when using hash tags(#) • Maps an url to a javaScript function
- 15. Comparison – ROUTERS … • Router is very simple Mitesh Gandhi - MetaSys Software /person/12/101
- 16. Comparison – ROUTERS … • Knockout does not support routing by default • Still Routing is easily configurable by following third party libraries Mitesh Gandhi - MetaSys Software
- 17. Comparison – ROUTERS … • Routing is very simple Mitesh Gandhi - MetaSys Software /person/12/101
- 18. Comparison – ROUTERS … • Router is extremely capable, but very complex • Supported embedded routes Mitesh Gandhi - MetaSys Software /person/12/101
- 19. Comparison – Views Mitesh Gandhi - MetaSys Software • How the stuffs are displayed in the screen
- 20. Comparison – Views … • Uses HTML as templating language • Automatically pulls in HTML templates via AJAX when needed Mitesh Gandhi - MetaSys Software
- 21. Comparison – Views … • Uses HTML as templating language Supports • Native templates – Using default control flow bindings • String based templates – Third-party template engine Mitesh Gandhi - MetaSys Software
- 22. Comparison – Views … • Simple and straight forward. • Easy for developer with JQuery and DOM skills • Simply extend Backbone.View, grab an element and put stuff in it • No Official Templating, but easy to add using Mitesh Gandhi - MetaSys Software
- 23. Comparison – Views … • Extensive view type support • Very easy to create re-usable components • Handlebars are used for templating Mitesh Gandhi - MetaSys Software
- 24. Comparison – Testing Mitesh Gandhi - MetaSys Software • Support for testing application
- 25. Comparison – Testing … • Fantastic test support. • Designed from the beginning to be easy to test. • Karma developed by Angular JS team is popular test runner Mitesh Gandhi - MetaSys Software
- 26. Comparison – Testing … • As of now, no default debugging tools • Functions like Console.log(), ko.toJSON() helps debugging process • Can use following third party solutions Mitesh Gandhi - MetaSys Software
- 27. Comparison – Testing … • No default test solution; • Test it your own • Can use following third party solutions Mitesh Gandhi - MetaSys Software
- 28. Comparison – Testing … • Poor testing initially • Pretty good testing support now Mitesh Gandhi - MetaSys Software
- 29. Comparison – Data Mitesh Gandhi - MetaSys Software • How do I get data from the sever?
- 30. Comparison – Data … • No JQuery • Can do with Angular’s $http but much better using $resource • Very good API Mitesh Gandhi - MetaSys Software
- 31. Comparison – Data … • Uses JQuery’s $.ajax • Uses knockout mapping plugin • Maps JavaScript object into a view model with the appropriate observables Mitesh Gandhi - MetaSys Software
- 32. Comparison – Data … • Uses JQuery’s $.ajax to power Backbone. • Default behavior is relatively easy to override • Nothing is free in Backbone. Backbone gives you some useful events to listen for and lets you handle it yourself. But you must wire up all the data binding yourself. Mitesh Gandhi - MetaSys Software
- 33. Comparison – Data … • Uses JQuery’s $.ajax under the covers • Just “getting data” is relatively easy to do e.g. Mitesh Gandhi - MetaSys Software • Doing things the “Ember way” is a bit more complex
- 34. Comparison – Community Mitesh Gandhi - MetaSys Software Metric AngularJS Backbone.js Ember.js Knockout Stars on Github 40.2k 18.8k 14.1k 6.8k Third-Party Modules 1488 ngmodules 256 backplugs 1155 emberaddons 208 npmjs & GitHub StackOverflow Questions 104k 18.2k 15.7k 14.8K YouTube Results ~93k ~10.6k ~9.1k ~17.6 K GitHub Contributors 96 265 501 61 Chrome Extension Users 275k 15.6k 66k 29.7k Open Issues 922 13 413 188 Closed Issues 5,520 2,062 3,350 1,145
- 35. Comparison – Community… Mitesh Gandhi - MetaSys Software Google Trends Interest Over Time – Web Search – Worldwide – Aug. 2011 to Oct. 2015
- 36. Comparison – Community / Documentation Mitesh Gandhi - MetaSys Software
- 37. Comparison – Third Party Integration Mitesh Gandhi - MetaSys Software
- 38. Comparison – Development Tools Mitesh Gandhi - MetaSys Software
- 39. • An open-source JavaScript Library released in 2013. • Maintained by Facebook, Instagram and the open source community. • Built as a component for Facebook to quickly update dynamic content • Around 30,000 stars on its Github page • Specific version for iOS development called React Native esh Gandhi - MetaSys Software
- 40. React • Most performant way to manage your DOM • Specifically when using large sets of data • Implements one-way reactive data flow • Considered to only be the view • Library AngularJS • Primary goal SinglePageApplication • Load New content without leaving the page • Two-way data binding • MVW • Framework Mitesh Gandhi - MetaSys Software
- 41. • Following are just guidelines and one should not treat them like line carved in stone. They are meant to be bent as required. Mitesh Gandhi - MetaSys Software
- 42. Principle of Natural Fit • Some libraries are natural fit for certain tasks. • For example, Backbone.js apparent choice for RESTful JSON applications. • Frameworks like Angular, Backbone are good choice for building Single Page Applications. Mitesh Gandhi - MetaSys Software
- 43. Team Adaptability & Learning Curve • Especially in case of rapid prototyping, it helps development teams to select libraries with less learning curve and easier adaption. • Library like Knockout or Kendo UI is easier to catch on for WPF or Silverlight developers as their philosophy is based on same MVVM pattern. Mitesh Gandhi - MetaSys Software
- 44. Thank You! Mitesh Gandhi - MetaSys Software
Editor's Notes
- #2: Polymer – Web component Vue - Intuitive, Fast and Composable MVVM for building interactive interfaces.
- #6: Architecture presentation patterns UI has complicated logic to manipulate the user interface objects and second it also maintains state of the application
- #8: Yehuda Katz – Member of jQuery and Ruby on Rail Steve Sanderson – Microsoft Employee Jeremy Ashkenas – Also developed Underscore.JS and CoffeeScript
- #9: Backbone - Underscore.js(For RESTful persistence and DOM manipulation with Backbone.View) include jQuery ( >= 1.11.0), and json2.jsfor older Internet Explorer support.
- #15: You need this feature if you’re in a client-side app and virtually switching pages on the client-side. So, whenever you click a link or change an URL in the address bar, that URL change or window.location change is being intercepted on the client, and a new virtual template will be loaded with new data.
- #16: Router is similar to Backbone
- #21: Router is similar to Backbone
- #26: Router is similar to Backbone
- #31: Router is similar to Backbone
- #33: On the other hand, nothing is free in Backbone. Backbone gives you some useful events to listen for and lets you handle it yourself. But you must wire up all the data binding yourself. --Very Easy to understand
- #35: Community is one of the most important factors to consider when choosing a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials…you get the point. I have put together a table with the numbers, as of June 30, 2015.
- #39: How easy to integrate another JS library?
- #46: Ember – SPA Ember Desktop - Apple Music,[8] a feature of the iTunes desktop application.