Journey Through The Javascript MVC Jungle

8,898 views

Published on

- From Spaghetti Code to Ravioli Code
- Spaghetti Code and Ravioli Code Examples
- What Is MVC?
- What does MV* give us?
- MVC vs. MVP vs. MVVM
- TodoMVC: A Common Application For Learning And Comparison
- Suggested Criteria For Selecting A MV* Framework
- Top 5 MVC frameworks
- Backbone.js
- Ember.js
- Angular.js
- Knockout.js
- Batman.js
- RequireJS

Published in: Software, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,898
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Journey Through The Javascript MVC Jungle

  1. 1. Journey Through The JavaScript MVC Jungle Baris Aydinoglu July 30, 2015
  2. 2. Agenda: Spaghetti to Ravioli What is MVC? MVC vs MVP vs MVVM Top 5 MVC Frameworks Suggested Criteria for Selection
  3. 3. Spaghetti to Ravioli
  4. 4. The Main Problems: Where the one block of code begins and where the other ends?
  5. 5. The Main Problems: Where the one block of code begins and where the other ends? Violates SRP (Single Responsibility Principle)
  6. 6. The Main Problems: Where the one block of code begins and where the other ends? Violates SRP (Single Responsibility Principle) Global scope pollution
  7. 7. The Main Problems: Where the one block of code begins and where the other ends? Violates SRP (Single Responsibility Principle) Global scope pollution Violates DRY (Don’t Repeat Yourselt)
  8. 8. The Main Problems: Where the one block of code begins and where the other ends? Violates SRP (Single Responsibility Principle) Global scope pollution Violates DRY (Don’t Repeat Yourselt) Not easy to maintain, test and debug
  9. 9. Spaghetti Example
  10. 10. Ravioli Example
  11. 11. What is MVC?
  12. 12. Model
  13. 13. Model View updates
  14. 14. Model View updates User sees
  15. 15. Model View updates User sees Controller uses manipulates
  16. 16. ”Easier overall maintenance.
  17. 17. ”Decoupling models and views & easy unit tests.
  18. 18. ”Eliminates duplication of low-level model and controller code.
  19. 19. ”Allows core developers and UI developers work simultaneously.
  20. 20. MVC: View Controller Model
  21. 21. ”View can access entire Model. (security and performance costs)
  22. 22. ”Controller can be shared across views.
  23. 23. ”Controller can be responsible for determining which view to display.
  24. 24. MVP: View Presenter Model
  25. 25. ”View is more loosely coupled to the Model.
  26. 26. ”View to Presenter map one to one. (usually)
  27. 27. ”Complex Views may have multi Presenters.
  28. 28. MVVM: View Data Binding ViewModel Model
  29. 29. ”ViewModel is not required.
  30. 30. Top 5 MVC Frameworks
  31. 31. Backbone.js: Provides models with key-value binding and custom events, collections, and connects it all to your existing API over a RESTful JSON interface.
  32. 32. The job of the controller tends to more be done partially by Views and Routers Views contain UI logic along with representing data
  33. 33. Pros: Extensive documentation Strong community and lots of momentum Routers map URLs to functions Underscore.js (which it uses heavily) is also a great framework
  34. 34. Cons: Lacks strong abstractions and leaves something to be desired The entire framework is surprisingly lightweight and results in lots of boilerplate The larger an application becomes, the more this becomes apparent
  35. 35. Ember.js: Provides template written in the Handlebars templating language, views, controllers, models and a router.
  36. 36. Ember’s main features are its data binding Objects can bind properties to each other, so the objects are kept in sync Automatically updates its views when data changes Views usually written in Handlebars.js
  37. 37. Pros: Extremely rich templating system with composed views and UI bindings
  38. 38. Cons: Relatively new Documentation leaves lots to be desired
  39. 39. AngularJS: A toolset based on extending the HTML vocabulary for your application.
  40. 40. Google’s offering Data binding directly in HTML Its data binding is bi-directional Angular leaves you with much leaner controllers and less JavaScript to write
  41. 41. Pros: Very well thought out with respect to template scoping and controller design Has a dependency injection system Supports a rich UI-Binding syntax to make things like filtering and transforming values a breeze
  42. 42. Cons: Codebase appears to be fairly sprawling and not very modular
  43. 43. Knockout: Aims to simplify JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.
  44. 44. It is a MVVM (Model-View-View Model) framework written in pure JavaScript Bindings inserted as attributes similar to Angular.js
  45. 45. Pros: Binding support Great documentation and amazing tutorial system Performance
  46. 46. Cons: Awkward binding syntax and lacks a solid view component hierarchy
  47. 47. Batman.js: A framework for building rich web applications with CoffeeScript.
  48. 48. Written in CoffeeScript It can be used with JavaScript or CoffeeScript Your code will look much cleaner in CoffeeScript Wrapper class includes Controller and Models Batman uses data-bindings in the Views
  49. 49. Pros: Very clean codebase Has a nice simple approach to binding, persistence, and routing
  50. 50. Cons: Singleton controllers are not efficient
  51. 51. Suggested Criteria for Selection
  52. 52. ”What is the framework really capable of?
  53. 53. ”Has the framework been proved in production?
  54. 54. ”Is the framework mature?
  55. 55. ”Is the framework flexible or opinionated?
  56. 56. ”Have you really played with the framework?
  57. 57. ”Does the framework have a comprehensive set of documentation?
  58. 58. ”What is the total size of the framework, factoring in minification, gzipping and any modular building that it supports?
  59. 59. ”Have you reviewed the community around the framework?
  60. 60. Figure: TodoMVC, Helping you select an MV* framework
  61. 61. Go Deeper: www. infoq. com/ research/ top-javascript-mvc-frameworks todomvc. com backbonejs. org emberjs. com angularjs. org knockoutjs. com batmanjs. org
  62. 62. ?
  63. 63. That’s all Folks! @barisaydinoglu github.com/barisaydinoglu baris@aydinoglu.info

×