Introduction to MVW in JavaScript

Slide 1

Slide 1 text

Introduction to MVW Minko Gechev github.com/mgechev twitter.com/mgechev

Slide 2

Slide 2 text

Topics for discussion • Single-Page Applications • What is MVW? • Why I need MVW? • MVC • Current landscape • Backbone • Event • View • Model • Collection • Router

Slide 3

Slide 3 text

Single-Page Applications

Slide 4

Slide 4 text

Rich Internet Application “A rich Internet application (RIA) is a Web application that has many of the characteristics of desktop application software, typically delivered by way of a site-speciﬁc browser, a browser plug-in, an independent sandbox, extensive use of JavaScript, or a virtual machine.”

Slide 5

Slide 5 text

Single-Page Application “A single-page application (SPA), also known as single- page interface (SPI), is a web application or web site that ﬁts on a single web page with the goal of providing a more ﬂuid user experience akin to a desktop application.” • Loads all the necessary content with the initial page load • Loads the content lazily based on events

Slide 6

Slide 6 text

Nothing more than… Server Browser GET /users/torvalds HTTP/1.1 Host: api.github.com HTTP/1.1 200 OK Server: GitHub.com { "login": "torvalds", "id": 1024025 }

Slide 7

Slide 7 text

Problems with large-scale JavaScript applications • JavaScript is weakly typed • JavaScript has no classes and will never have (yes, even after ES6) • Testability • Spaghetti code • A lot of boilerplates

Slide 8

Slide 8 text

MVW

Slide 9

Slide 9 text

Model View Controller Model View Presenter  Model View View-Model Model View Whatever…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Why MVW?

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Separation of Concerns

Slide 15

Slide 15 text

MVC

Slide 16

Slide 16 text

Model View Controller • Initially introduced in SmallTalk-80 • Used in: • Ruby on Rails • ASP.NET MVC • Django • Backbone? • etc…

Slide 17

Slide 17 text

MVC (server-side)

Slide 18

Slide 18 text

Controller Model View Creates

Slide 19

Slide 19 text

Controller Model View Delegates

Slide 20

Slide 20 text

Controller Model View Manipulates

Slide 21

Slide 21 text

Controller Model View Notiﬁes

Slide 22

Slide 22 text

MVC in Patterns According to “Gang of Four” MVC is: “…set of classes to build a user interface…” • Observer • Strategy • Composite

Slide 23

Slide 23 text

Strategy In computer programming, the strategy pattern (also known as the policy pattern) is a software design pattern that enables an algorithm's behavior to be selected at runtime. The strategy pattern: • deﬁnes a family of algorithms, • encapsulates each algorithm, and • makes the algorithms interchangeable within that family.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Composite “The composite pattern is a structural design pattern. The composite pattern describes that a group of objects are to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies.”

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Observer “The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notiﬁes them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.”

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

MVW frameworks

Slide 30

Slide 30 text

Framework vs Library • A library provides a set of functions. We can reuse the functionality provided by the library in our application (jQuery, Underscore). • A framework provides a base for given family of applications. We can build our application on top of the solid base provided by the framework (AngularJS, Backbone.js) • Reuse of functionality • Reuse of micro-architecture

Slide 31

Slide 31 text

How frameworks help? • Helps with boilerplates • Base “classes” out of the box • Communication bus out of the box • Easier reuse of custom components across applications • Level of abstraction (we don’t need to think about details) • Testability • Implicit conventions (extremely useful in teams)

Slide 32

Slide 32 text

Current MVW landscape in the JavaScript world…

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

A few MVW frameworks… • Backbone.js • AngularJS • Ember.js • KnockoutJS • Dojo • YUI • Agility.js • Knockback.js • CanJS • Maria • Polymer

Slide 35

Slide 35 text

A few MVW frameworks… • React • cujoJS • Montage • Sammy.js • Stapes • Epitome • soma.js • DUEL • Kendo UI • PureMVC • Olives

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

A few MVW frameworks… • PlastronJS • Dijon • rAppid.js • Aria Templates • SAPUI5 • Exoskeleton • Atma.js • Ractive.js • ComponentJS • Vue.js

Slide 38

Slide 38 text

Backbone.js

Slide 39

Slide 39 text

Backbone.js “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”

Slide 40

Slide 40 text

Backbone.js • Backbone.js is minimalistic (6.5kb miniﬁed and gzipped) • Backbone.js depends on • Underscore • jQuery/Zepto

Slide 41

Slide 41 text

Backbone.js main components • Events • Views • Models • Collections • Router

Slide 42

Slide 42 text

Backbone.Events

Slide 43

Slide 43 text

Backbone.Events var obj = $.extend({}, Backbone.Events); obj.on('event', function () { console.log(42); }); obj.on('event', function () { console.log(1.618); }); obj.trigger('event');

Slide 44

Slide 44 text

Backbone.View

Slide 45

Slide 45 text

Backbone.View /* global Backbone, $ */ var GitHubApp = GitHubApp || {}; GitHubApp.Views = GitHubApp.Views || {}; GitHubApp.Views.Home = Backbone.View.extend({ events: { 'click #add-btn' : 'addUser', 'click .delete-btn': 'removeUser' }, initialize: function () { 'use strict'; this.model.on('change', this.render, this); }, addUser: function () {}, removeUser: function (e) {}, render: function () {} });

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Backbone.View var View = Backbone.View.extend({ el: '#parent', template: _.template('<%= name %>'), render: function () { this.$el.html(this.template(this.model)); return this; } }); var v = new View({ model: { name: 'foo' } }); v.render();

Slide 48

Slide 48 text

Backbone.Model

Slide 49

Slide 49 text

Backbone.Model var Developer = Backbone.Model.extend({ defaults: { name : 'foo', languages: ['JavaScript', 'Ruby', 'Perl'], age : 42 }, initialize: function () { console.log('Do some initialisation stuff'); }, incrementAge: function () { this.set('age', this.get('age') + 1); } });

Slide 50

Slide 50 text

Backbone.Model var dev = new Developer({ name: 'bar' }); dev.on('change', function (e) { console.log(Object.keys(e.changed) .toString(), 'changed'); }); dev.incrementAge();

Slide 51

Slide 51 text

Backbone.Model var Developer = Backbone.Model.extend({ url: function () { return 'https://api.github.com/users/' + this.get('name'); } }); var dev = new Developer({ name: 'mgechev' }); dev.fetch(); //GET https://api.github.com/users/mgechev

Slide 52

Slide 52 text

Backbone.Collection /* global Backbone */ var GitHubApp = GitHubApp || {}; GitHubApp.Models = GitHubApp.Models || {}; GitHubApp.Models.UserCollection = Backbone.Collection.extend({ model: GitHubApp.Models.User }); var collection = new GitHubApp.Models.UserCollection(); collection.on('add', function () { console.log('User added'); }); collection.on('remove', function () { console.log('User removed'); }); var user = new User(); collection.add(user); collection.remove(user);

Slide 53

Slide 53 text

Backbone.Router

Slide 54

Slide 54 text

Backbone.Router /* global Backbone, $ */ var GitHubApp = GitHubApp || {}; var GitHubAppRouter = Backbone.Router.extend({ routes: { '' : 'home', 'user/:username': 'user', 'statistics' : 'stats' }, initialize: function () {}, home: function () {}, user: function (login) {}, stats: function () {} }); GitHubApp.router = new GitHubAppRouter(); Backbone.history.start();