Anatomy of a SPA: Client-side MVC

Size: px

Start display at page:

Download "Anatomy of a SPA: Client-side MVC"

Jesse Simon
5 years ago
Views:

1 11/12/11 10:35 AM Anatomy of a SPA: Client-side MVC SPA: Single Page Application MVC: Model-View-Controller file:///users/baguirre/downloads/rubyconf-slides/index.html#1

2 11/12/11 10:36 AM My name is Alvaro Mouriño. I like hats. I'm a web developer. Actually, I'm a django developer. Hola! file:///users/baguirre/downloads/rubyconf-slides/index.html#2

3 11/12/11 10:36 AM I come in Peace file:///users/baguirre/downloads/rubyconf-slides/index.html#3

4 11/12/11 10:36 AM Introduction to client-side MVC. How Backbone.js does it. Pros and cons. What else is out there: Alternatives. More concepts than code. And some flames About this talk file:///users/baguirre/downloads/rubyconf-slides/index.html#4

5 11/12/11 10:37 AM A django models generator. The biggest SPA I've made. Which is not huge, but somewhat complex. Fork it! Askani.net file:///users/baguirre/downloads/rubyconf-slides/index.html#5

6 11/12/11 10:37 AM file:///users/baguirre/downloads/rubyconf-slides/index.html#6

7 11/12/11 10:37 AM OK, breath... file:///users/baguirre/downloads/rubyconf-slides/index.html#7

8 11/12/11 10:37 AM If you use rails you use it all the time. Abstraction and encapsulation of domain logic. Decouples logic from presentation. Increases modularity. Weakens and removes dependencies between layers. Reduces complexity. Increases maintainability. And a long list of awesomeness... MVC...? Why? file:///users/baguirre/downloads/rubyconf-slides/index.html#8

9 11/12/11 10:38 AM file:///users/baguirre/downloads/rubyconf-slides/index.html#9

10 11/12/11 10:38 AM JavaScript! Think of the objects in your application. But forget about the data model of the backend. But in the browser? How? file:///users/baguirre/downloads/rubyconf-slides/index.html#10

11 11/12/11 10:38 AM JavaScript? That's not even a real language! file:///users/baguirre/downloads/rubyconf-slides/index.html#11

12 11/12/11 10:38 AM Lord forgive them, for they know not what they say file:///users/baguirre/downloads/rubyconf-slides/index.html#12

13 11/12/11 10:38 AM JavaScript is a great programming language. (with some bad ideas) People never take the time to learn it. Yes, it's object oriented. Forget coffeescript. Be a man! Read JavaScript: The Good Parts. JavaScript file:///users/baguirre/downloads/rubyconf-slides/index.html#13

14 11/12/11 10:39 AM file:///users/baguirre/downloads/rubyconf-slides/index.html#14

15 11/12/11 10:39 AM It's evolution, baby file:///users/baguirre/downloads/rubyconf-slides/index.html#15

16 11/12/11 10:39 AM Modularization, decoupling, abstraction and encapsulation. Are all the natural evolution of any system that wants to grow beyond a script. Is like switching from PHP to a real programming language. It's evolution, baby file:///users/baguirre/downloads/rubyconf-slides/index.html#16

17 11/12/11 10:39 AM The MVC pattern. A metaphor to better understand it. The MVC pattern is like cookies. Sort of. The cookie pattern! Alvaro Mouriño file:///users/baguirre/downloads/rubyconf-slides/index.html#17

18 11/12/11 10:39 AM Models file:///users/baguirre/downloads/rubyconf-slides/index.html#18

19 11/12/11 10:40 AM Organizes the business data. Is an abstract representation of the actors in the system. Represents behaviour and communication. Models file:///users/baguirre/downloads/rubyconf-slides/index.html#19

20 11/12/11 10:40 AM Views file:///users/baguirre/downloads/rubyconf-slides/index.html#20

21 11/12/11 10:40 AM Defines how the information will be presented. The same information can have many looks. Or even be displayed using different media. Views file:///users/baguirre/downloads/rubyconf-slides/index.html#21

22 11/12/11 10:40 AM Controllers file:///users/baguirre/downloads/rubyconf-slides/index.html#22

23 11/12/11 10:40 AM They orchestrate the show. Ask you which cookies you like. Make the cookies. Paint them. And put them on the table. Like grandma does! Controllers file:///users/baguirre/downloads/rubyconf-slides/index.html#23

24 11/12/11 10:40 AM So... Backbone? file:///users/baguirre/downloads/rubyconf-slides/index.html#24

25 11/12/11 10:41 AM Yes, backbone.js. Gives you the tools to implement MVC on the browser. Even though they call it a little different, is the same concept. file:///users/baguirre/downloads/rubyconf-slides/index.html#25

26 11/12/11 10:41 AM Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it. Models Backbone.js website file:///users/baguirre/downloads/rubyconf-slides/index.html#26

27 11/12/11 10:41 AM Models // You extend Backbone.Model with your domain-specific methods, // and Model provides a basic set of functionality for managing // changes. var Cookie = Backbone.Model.extend({ defaults: { 'flavour': 'N/A', 'haschips': false }, getflavour: function() { return this.get('flavour'); } }); // Simple... huh? file:///users/baguirre/downloads/rubyconf-slides/index.html#27

28 11/12/11 10:41 AM Inheritance // Extends from Cookie and sets some properties. var ChocolateCookie = Cookie.extend({ // If you define an initialize() function, it will be // invoked when the model is created. initialize: function() { this.set({ 'flavour': 'chocolate' }); }, // Overriding the set method. set: function (attributes, options) { // Do something interesting } // Invoking the parent object's implementation of the // overriden method. Cookie.prototype.create.call(this, attributes, options); }); file:///users/baguirre/downloads/rubyconf-slides/index.html#28

29 11/12/11 10:41 AM Using models // Default parameters. var mycookie = new ChocolateCookie({ 'haschips': false }); mycookie.get('flavour'); // -> 'chocolate' // This cookie has chips. mycookie.set({ 'haschips': true }); // Triggers a 'destroy' event and performs the DELETE action on the // storage backend. mycookie.destroy(); // Check all the available methods on the doc (A.K.A. RTFM) file:///users/baguirre/downloads/rubyconf-slides/index.html#29

30 11/12/11 10:41 AM Backbone views are almost more convention than they are code they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. Views Backbone.js website file:///users/baguirre/downloads/rubyconf-slides/index.html#30

31 11/12/11 10:41 AM Views var CookieView = Backbone.View.extend({ tagname: "div", classname: "cookie", template: _.template($('#cookietemplate').html()), events: { "click.cookie": }, "pickcookie" initialize: function() { this.model.bind('change', this.render, this); }, render: function() { $(this.el).html(this.template(this.model.tojson())); return this; } }); file:///users/baguirre/downloads/rubyconf-slides/index.html#31

32 11/12/11 10:42 AM Using views var mycookie = new ChocolateCookie, var view = CookieInAJarView({ 'model': mycookie }); // Render a cookie in a jar. view.render(); var view = CookieOnAPlateView({ 'model': mycookie }); // Now render a cookie on a plate. // Exactly the same, only changes the View object. view.render(); file:///users/baguirre/downloads/rubyconf-slides/index.html#32

33 11/12/11 10:42 AM For the $ selector Backbone.js depends on jquery or Zepto. From backbone.js source code: // For Backbone's purposes, either jquery or Zepto owns the // `$` variable. var $ = this.jquery this.zepto; This sucks. The jquery/zepto dependency file:///users/baguirre/downloads/rubyconf-slides/index.html#33

34 11/12/11 10:42 AM Collections are ordered sets of models. You can bind events to be notified when any model in the collection has been modified and fetch the collection from the server. Backbone.js website Collections file:///users/baguirre/downloads/rubyconf-slides/index.html#34

35 11/12/11 10:42 AM Collections var ChocolateCookieList = Backbone.Collection.extend({ }); model: ChocolateCookie, localstorage: new Store('cookies'), initialize: function() { // Constructor } file:///users/baguirre/downloads/rubyconf-slides/index.html#35

36 11/12/11 10:42 AM Using collections var cookies = new ChocolateCookieList([cookie1, cookie2, cookie3]); // Get the cookies stored in the backend. cookies.fetch(); // Get the first inserted cookie. var first = cookies.at(0); newcookie = new Cookie({ 'flavour': 'pajarito' }); // Triggers an 'add' event and persists the object. cookies.add(newcookie); file:///users/baguirre/downloads/rubyconf-slides/index.html#36

37 11/12/11 10:42 AM file:///users/baguirre/downloads/rubyconf-slides/index.html#37

38 11/12/11 10:43 AM Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. Backbone.js website Sync (A.K.A. Storage) file:///users/baguirre/downloads/rubyconf-slides/index.html#38

39 11/12/11 10:43 AM By default, it uses (jquery/zepto).ajax to make a RESTful JSON request. You can override it in order to use a different persistence strategy. Sync (A.K.A. Storage) (cont.) Backbone.js website file:///users/baguirre/downloads/rubyconf-slides/index.html#39

40 11/12/11 10:43 AM RESTful JSON WebSockets XML transport LocalStorage Persistence strategies file:///users/baguirre/downloads/rubyconf-slides/index.html#40

41 11/12/11 10:43 AM Depends on jquery/zepto. This sucks. Sends the object serialized. Do you really want to send everything? RESTful JSON file:///users/baguirre/downloads/rubyconf-slides/index.html#41

42 11/12/11 10:43 AM How to use it? <script type="text/javascript" src="js/backbone.js"></script> <script type="text/javascript" src="js/backbone-localstorage.js"> </script> var ChocolateCookieList = Backbone.Collection.extend({... localstorage: new Store('cookies'),... }); LocalStorage file:///users/baguirre/downloads/rubyconf-slides/index.html#42

43 11/12/11 10:43 AM You handle mostly Collections. Collections contain models. You instantiate the view you want to use and pass it a Model. That way you can style a given model in different ways. You could also have a generic View that receives a Model and a View object. So you don't have to know which View you are using. Putting it all to work file:///users/baguirre/downloads/rubyconf-slides/index.html#43

44 11/12/11 10:44 AM Save() Uses Storage < Model < View ^ ^ Has many Collection ^ Your application file:///users/baguirre/downloads/rubyconf-slides/index.html#44

45 11/12/11 10:44 AM Routes History Events Again... RTFM. But wait, there's more! file:///users/baguirre/downloads/rubyconf-slides/index.html#45

46 11/12/11 10:44 AM Other backbones: Alternatives file:///users/baguirre/downloads/rubyconf-slides/index.html#46

47 11/12/11 10:44 AM Alternatives Knockout.js SproutCore PureMVC JavascriptMVC (requires jquery) emvc (requires Dojo) Dojo toolkit ExtJS YUI 3 AngularJS eyeballs.js file:///users/baguirre/downloads/rubyconf-slides/index.html#47

48 11/12/11 10:44 AM "use strict"; JSLint your code. Don't use jquery, is the PHP of the JavaScript libraries. Easy to get started but harder to scale. Therefore, harder to maintain. Be a grown up, use Dojo. My recommendation file:///users/baguirre/downloads/rubyconf-slides/index.html#48

49 11/12/11 10:44 AM file:///users/baguirre/downloads/rubyconf-slides/index.html#49

50 11/12/11 10:45 AM Go with micro if you can. microjs.com Otherwise get something modular. Dojo is modular. Micro vs. full file:///users/baguirre/downloads/rubyconf-slides/index.html#50

51 11/12/11 10:45 AM To MVC or not to MVC file:///users/baguirre/downloads/rubyconf-slides/index.html#51

52 11/12/11 10:45 AM When not doing a SPA. When not to use MVC file:///users/baguirre/downloads/rubyconf-slides/index.html#52

53 11/12/11 10:45 AM Thanks for listening file:///users/baguirre/downloads/rubyconf-slides/index.html#53

54 11/12/11 10:45 AM Questions? file:///users/baguirre/downloads/rubyconf-slides/index.html#54

11/12/11 10:46 AM Thank you! Github: tooxie @tuxie_ alvaro@mourino.

55 11/12/11 10:46 AM Thank you! Github: file:///users/baguirre/downloads/rubyconf-slides/index.html#55

Client-side Kung-Fu. with Backbone.js. Gur

Client-side Kung-Fu. with Backbone.js. Gur Client-side Kung-Fu with Backbone.js Gur Dotan @gurdotan http://github.com/gurdotan Credits igloolab.com @iloveigloo michele.berto.li @MicheleBertoli Agenda Preface Why Backbone.js Backbone.js Architecture