Journey Through The Javascript MVC Jungle
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Journey Through The Javascript MVC Jungle

  • 8,150 views
Uploaded on

- From Spaghetti Code to Ravioli Code ...

- 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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,150
On Slideshare
8,146
From Embeds
4
Number of Embeds
3

Actions

Shares
Downloads
13
Comments
0
Likes
2

Embeds 4

http://www.linkedin.com 2
http://www.slideee.com 1
http://www.slidesearchengine.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ğl u .info dıno dinoglu y ş Ay Barı /baris.a :/ ht t p Journey Th rough The JavaS cript MVC Jungl e
  • 2. Agenda • 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 2
  • 3. From Spaghetti Code to Ravioli Code We know a lot about how to make our Java code much better We split out our Java code to classes, put the classes to modules, put the modules to layers, etc But we never do the same for our JavaScript code And that's why we have a lot of Spaghetti Code inside our apps The main problems with function spaghetti code are: • 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 3
  • 4. Spaghetti Code and Ravioli Code Examples Spaghetti Example: $('#messagebox').text('Welcome to Code Camp, John'); Ravioli Example: alerter.showMessage(); 4
  • 5. What Is MVC? Modern JavaScript frameworks provide MVC MVC = Model-View-Controller Variations of MVC: • MVP (Model-View-Presenter) • MVVM (Model-View ViewModel) 5
  • 6. What Is MVC? • Models • represent the domain-specific knowledge and data in an application • Think of this as being a ‘type’ of data you can model — like a User, Photo or Note • Models should notify anyone observing them about their current state (e.g Views) • Views • are typically considered the User-interface in an application (e.g your markup and templates), but don’t have to be • They should know about the existence of Models in order to observe them, but don’t directly communicate with them • Controllers • handle the input (e.g clicks, user actions) in an application and Views can be considered as handling the output • When a Controller updates the state of a model (such as editing the caption on a Photo), it doesn’t directly tell the View • This is what the observing nature of the View and Model relationship is for. 6
  • 7. What does MV* give us? • Easier overall maintenance. • Decoupling models and views (easy unit tests) • Eliminates duplication of low-level model and controller code • Allows core developers and UI developers work simultaneously 7
  • 8. MVC vs. MVP vs. MVVM • MVC • View  Controller  Model • View  entire Model (security and performance costs) • MVP • Controller  Presenter • Presenters & Views at the same level • View  Presenter  Model (events) • MVVM • View  subset Model • ViewModel (Presenter) is not required 8
  • 9. TodoMVC: A Common Application For Learning And Comparison • So much MV* frameworks • TodoMVC offers the same Todo application implemented in most of the popular JavaScript MV* frameworks • http://todomvc.com/ 9
  • 10. Suggested Criteria For Selecting A MV* Framework • What is the framework really capable of? • Has the framework been proved in production? • Is the framework mature? • Is the framework flexible or opinionated? • Have you really played with the framework? • Does the framework have a comprehensive set of documentation? • What is the total size of the framework, factoring in minification, gzipping and any modular building that it supports? • Have you reviewed the community around the framework? 10
  • 11. Top 5 MVC frameworks • Backbone.js • Ember.js • Angular.js • Knockout.js • Batman.js 11
  • 12. Top 5 MVC frameworks Backbone.js • Extensive documentation • The job of the controller tends to more be done partially by Views and Routers • Views contain UI logic along with representing data 12
  • 13. Top 5 MVC frameworks Backbone.js • Routers map URLs to functions var TodoList = Backbone.Collection.extend({ ... done: function() { return this.filter(function(todo){ return todo.get('done'); }); } ... }); 13
  • 14. Top 5 MVC frameworks Backbone.js • Pros • Strong community and lots of momentum • Underscore.js (which it uses heavily) is also a great framework • 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 14
  • 15. Top 5 MVC frameworks Ember.js • 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 15
  • 16. Top 5 MVC frameworks Ember.js • Another main feature is the ability to define functions on an object that you can then treat as properties fullName: function() { var firstName = this.get('firstName'); var lastName = this.get('lastName'); return firstName + ' ' + lastName; }.property('firstName', 'lastName') • Views usually written in Handlebars.js <p>Hello, <b>{{fullName}}</b>!</p> 16
  • 17. Top 5 MVC frameworks Ember.js • Pros • Extremely rich templating system with composed views and UI bindings • Cons • Relatively new • Documentation leaves lots to be desired 17
  • 18. Top 5 MVC frameworks • • • • Angular.js 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 18
  • 19. Top 5 MVC frameworks Angular.js • Sample View: <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> 19
  • 20. Top 5 MVC frameworks Angular.js • 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 • Cons • Codebase appears to be fairly sprawling and not very modular 20
  • 21. Top 5 MVC frameworks Knockout.js • It is a MVVM (Model-View-View Model) framework written in pure JavaScript • Bindings inserted as attributes similar to Angular.js 21
  • 22. Top 5 MVC frameworks Knockout.js • Sample View: <p>First name: <strong data-bind="text: firstName"></strong></p> • View-models: • pure JavaScript • a code representation of your data along with exposing methods for manipulating the data • as close to controllers as an MVVM framework comes function AppViewModel() { this.firstName = ko.observable(‘Baris’); }; 22
  • 23. Top 5 MVC frameworks Knockout.js • Pros • Binding support • Great documentation and amazing tutorial system • Cons • Awkward binding syntax and lacks a solid view component hierarchy 23
  • 24. Top 5 MVC frameworks Batman.js • Batman is written in CoffeeScript. • It can be used with JavaScript or CoffeeScript • Your code will look much cleaner in CoffeeScript 24
  • 25. Top 5 MVC frameworks Batman.js • Wrapper class includes Controller and Models class Todo extends Batman.App @global yes @root 'todos#index' • Batman uses data-bindings in the Views <li data-foreach-product="Product.all"> <a data-route="product" data-bind="product.name">name will go here</a> </li> 25
  • 26. Top 5 MVC frameworks Batman.js • Pros • Very clean codebase • Has a nice simple approach to binding, persistence, and routing • Cons • Singleton controllers are not efficient 26
  • 27. RequireJS • RequireJS handles the dependency resolution for javascript modules • RequireJS helps: • Defines modules • Resolve module dependencies • Load scripts in the proper order (and asynchronously) 27
  • 28. Thanks… 28