Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview...
Transcript of Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview...
![Page 1: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/1.jpg)
Single-Page JavaScript Apps
with RequireJS and Backbone.js
Mihai Bîrsan
![Page 2: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/2.jpg)
Who is this guy?
Mihai Bîrsan Sr. Web Development Engineer
Email Tools Team
Amazon Development Center Romania
→ We’ve recently rebuilt our project’s UI using Backbone.js and Require.js (among others)
![Page 3: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/3.jpg)
• Single-Page Applications explained
• Example application
• MVC and Backbone.js
• AMD and Require.js
![Page 4: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/4.jpg)
What are Single-Page Applications?
• Recent new way to develop web applications
![Page 5: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/5.jpg)
What are classic web applications?
• Request → Page response
• Page-by-page
• The web was invented as a collection of static documents
![Page 6: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/6.jpg)
What are Single-Page Applications?
• JavaScript client application
• Pulls data with AJAX
• Has an internal state that’s not necessarily represented on the server
![Page 7: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/7.jpg)
Examples in the wild
Classic web applications • Forums • Every web application
before AJAX
Single Page Applications • Gmail • Amazon Search Page
![Page 8: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/8.jpg)
![Page 9: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/9.jpg)
How do we develop TodoMVC
• Think about the architecture of the app
• Separate concerns –data: the actual to-do items
–presentation: displaying data
–behavior: creating and filtering data
![Page 10: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/10.jpg)
How do we develop TodoMVC
Model
Controller
View data
behavior
presentation
![Page 11: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/11.jpg)
MVC and Single Page Applications
• Built around user input → Events
• No single point of control → No Controller
![Page 12: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/12.jpg)
How do we develop TodoMVC
Model
Events
View data
behavior
presentation
![Page 13: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/13.jpg)
Scaffolding: Basic structure
• index.html — obviously, the container
• styles/*.css — the presentation
• javascripts/*.js — the behavior
• javascripts/main.js — app entry point
![Page 14: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/14.jpg)
Backbone.js Library Overview
• Models & Collections
• Views
• Events
• Router
![Page 15: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/15.jpg)
Backbone Model
• A special type of object
• Keeps track of changed attributes
• Fires events when its internal state changes
![Page 16: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/16.jpg)
var TodoModel = Backbone.Model.extend({ // Default attributes for the todo // and ensure that each todo created
// has `title` and `completed` keys. defaults: { title: '', completed: false }, // Toggle the `completed` state of this todo item. toggle: function () { this.save({ completed: !this.get('completed') }); } });
Todo Model
![Page 17: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/17.jpg)
Model usage example
var todo = new TodoModel({ text: "Do the dishes." });
// Later: Update the text
todo.set("text", "Do the dishes NOW!");
todo.save();
// Even later: Mark the task as complete
todo.toggle();
![Page 18: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/18.jpg)
Todos Collection
var TodosCollection = Backbone.Collection.extend({ // Reference to this collection's model. model: Todo, // Filter down the list: all finished todo items. completed: function () { return this.filter(function (todo) { return todo.get('completed'); }); }, // Filter down the list: all incomplete todo items. remaining: function () { return this.without.apply(this, this.completed()); } });
![Page 19: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/19.jpg)
Collection usage example
var todos = new TodosCollection([ { text: "Get milk" }, { text: "Make cake" }, { text: "Eat the cake" } ]);
// Mark the first item as completed todos.at(0).toggle();
// Check number of incomplete items console.log(todos.remaining().length);
![Page 20: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/20.jpg)
Displaying information
• Application View –displays the whole collection
–uses Todo views to display each model
• Todo View –displays a single Todo model
![Page 21: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/21.jpg)
Todo View
var TodoView = Backbone.View.extend({ tagName: 'li', // This is a function that generates HTML template: _.template(todosTemplate), render: function () { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass( 'completed', this.model.get('completed') ); this.toggleVisible(); this.$input = this.$('.edit'); return this; },
![Page 22: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/22.jpg)
Tying it up with events
• View events trigger changes in the model – click the check mark → toggle the completeness
– edit the input → update the text
![Page 23: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/23.jpg)
Todo View’s own events
var TodoView = Backbone.View.extend({
events: { 'click .toggle': 'toggleCompleted', 'dblclick label': 'edit', 'click .destroy': 'clear', 'keypress .edit': 'updateOnEnter', 'blur .edit': 'close' },
// Toggle the `"completed"` state of the model. toggleCompleted: function () { this.model.toggle(); },
some lines hidden
![Page 24: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/24.jpg)
Tying it up with events
• Model events trigger updates in the view –when any code makes a Todo invisible → the view hides it
–when any attribute of the model changes → the view re-renders
![Page 25: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/25.jpg)
Todo View’s model events
var TodoView = Backbone.View.extend({
initialize: function () { this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'destroy', this.remove); this.listenTo(
this.model, // the object to listen to
'visible', // the event name this.toggleVisible // the function to call
); },
toggleVisible: function () { this.$el.toggleClass('hidden', this.isHidden()); },
};
some lines hidden
some lines hidden
![Page 26: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/26.jpg)
More interesting code
• app.js — the main application view
• router.js — Backbone Router to respond to URL changes and update it
• templates/*.html — partial HTML documents, transformed with _.template()
![Page 27: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/27.jpg)
Interconnected modules
App View
Todo View
Todo Model
Todos Collection
Todo Model
![Page 28: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/28.jpg)
Interconnected modules, actually
App View
Todo View
template todos.html
Todo Model
template stats.html
Todos Collection
Todo Model
jQuery Backbone
Underscore Utilities
![Page 29: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/29.jpg)
Require.js Library Overview
• Define dependencies
• Asynchronously load dependencies
![Page 30: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/30.jpg)
Dependencies in app.js
define([ 'jquery', 'underscore', 'backbone', 'collections/todos', 'views/todos', 'text!templates/stats.html', 'common' ], function ($, _, Backbone, Todos, TodoView, statsTmpl, Common) {
some lines missing
![Page 31: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/31.jpg)
Prettier define call, IMHO
define(function (require) { var $ = require('jquery'), _ = require('underscore'), Backbone = require('backbone'), Todos = require('collections/todos'), TodoView = require('views/todos'), statsTmpl = require('text!templates/stats.html'), Common = require('common');
some lines missing
![Page 32: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/32.jpg)
How definition works
• Each file contains one module
• Modules are defined by calling define
• The callback passed to define returns the actual module object
![Page 33: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/33.jpg)
The definition of Todo Model
define([ 'underscore', 'backbone' ], function (_, Backbone) { 'use strict'; var TodoModel = Backbone.Model.extend({ }); return TodoModel; });
some lines hidden
![Page 34: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/34.jpg)
How dependencies are loaded
• The string passed to define or require is the path of the JavaScript file
• If require has already loaded the file the associated module is returned
• Else the module is being loaded
• The callback is called once all modules have been loaded
![Page 35: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/35.jpg)
The require function
• In the simplified version of define call, it is magically transformed → require("...") is never called!
• Will always return immediately
–the module, if already loaded
–null, if not loaded; also starts loading
• Can be passed a callback
![Page 36: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/36.jpg)
The require function
// In an arbitrary script (not in define) var _ = require('underscore'); // _ is null, because require hasn't loaded Underscore yet
// Much later, after Underscore has been loaded var _ = require('underscore'); // _ is the expected Underscore object
// Altogether, if necessary require(['underscore'], function (_) { // Underscore is loaded when this function is called });
![Page 37: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/37.jpg)
What about saving the data?
• localStorage is used for this example
• after the break we talk about a back-end solution for storing data, working out of the box with Backbone
![Page 38: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/38.jpg)
When not to use this
• Not all problems have to be solved with the MVW pattern
• Choose the pattern that best suits the situation
• One-off scripts and hacks don’t need this
![Page 39: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/39.jpg)
Hack it today!
• http://todomvc.com/
• http://backbonejs.org/
• http://requirejs.org/
fork it on
![Page 40: Single-Page JavaScript Appsromania.amazon.com/academy/pdf/day2_1.pdfBackbone.js Library Overview •Models & Collections •Views •Events •Router Backbone Model •A special type](https://reader030.fdocuments.net/reader030/viewer/2022040611/5ed593d9362aaf1b226c600b/html5/thumbnails/40.jpg)
Thank you! Questions?