Single-Page JavaScript Apps

Transcription

1 Single-Page JavaScript Apps with RequireJS and Backbone.js Mihai Bîrsan

2 Who is this guy? Mihai Bîrsan Sr. Web Development Engineer Tools Team Amazon Development Center Romania We ve recently rebuilt our project s UI using Backbone.js and Require.js (among others)

3 Single-Page Applications explained Example application MVC and Backbone.js AMD and Require.js

4 What are Single-Page Applications? Recent new way to develop web applications

5 What are classic web applications? Request Page response Page-by-page The web was invented as a collection of static documents

6 What are Single-Page Applications? JavaScript client application Pulls data with AJAX Has an internal state that s not necessarily represented on the server

7 Examples in the wild Classic web applications Forums Every web application before AJAX Single Page Applications Gmail Amazon Search Page

8

9 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

10 How do we develop TodoMVC data Model View Controller presentation behavior

11 MVC and Single Page Applications Built around user input Events No single point of control No Controller

12 How do we develop TodoMVC data Model View Events presentation behavior

13 Scaffolding: Basic structure index.html obviously, the container styles/*.css the presentation javascripts/*.js the behavior javascripts/main.js app entry point

14 Backbone.js Library Overview Models & Collections Views Events Router

15 Backbone Model A special type of object Keeps track of changed attributes Fires events when its internal state changes

16 Todo Model 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') }); }

17 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();

18 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()); }

19 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);

20 Displaying information Application View displays the whole collection uses Todo views to display each model Todo View displays a single Todo model

21 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;

22 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

23 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' }, some lines hidden // Toggle the `"completed"` state of the model. togglecompleted: function () { this.model.toggle(); },

24 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

25 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, some lines hidden // 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

26 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()

27 Interconnected modules App View Todo View Todos Collection Todo Model

28 Interconnected modules, actually App View jquery Backbone Underscore Utilities template todos.html Todo View template stats.html Todo Model Todos Collection

29 Require.js Library Overview Define dependencies Asynchronously load dependencies

30 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

31 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

32 How definition works Each file contains one module Modules are defined by calling define The callback passed to define returns the actual module object

33 The definition of Todo Model define([ 'underscore', 'backbone' ], function (_, Backbone) { 'use strict'; var TodoModel = Backbone.Model.extend({ }); some lines hidden }); return TodoModel;

34 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

35 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

36 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 });

37 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

38 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

39 Hack it today! fork it on

40 Thank you! Questions?