Slide 1

Slide 1 text

Beyond the To-Do List

Slide 2

Slide 2 text

About Me ● Front end dev @ trivago ● @janvanthoor ● G & M, Assembler, SSE, C++, PHP, JS

Slide 3

Slide 3 text

Back to the basics ● No app frameworks, just JS ● Module pattern ● AMD ● Backbone

Slide 4

Slide 4 text

Background ● “High performance” Javascript ● ABC testing ● Browser support

Slide 5

Slide 5 text

AMD (Asynchronous Module Definition) “The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded."

Slide 6

Slide 6 text

AMD - define() ● Global function. ● Only one required parameter (factory). define([id], [dependencies], factory);

Slide 7

Slide 7 text

AMD - define() - [dependencies] ● Array literal of the required modules. ● Are passed to the factory function as parameters (in same order). define(‘ironMan’ , [‘stark.tony’, ‘ego.massive’, ‘suit’] , function(Tony, Ego, Suit) {});

Slide 8

Slide 8 text

AMD - define() - factory ● Function that should be executed to instantiate the module or object. ● Only executed once. define(‘ironMan’ , [‘stark.tony’, ‘ego.massive’, ‘suit’] , function(Tony, Ego, Suit) { return Tony.apply(Ego).don(Suit); });

Slide 9

Slide 9 text

AMD - require() ● Global function. ● dependencies: array literal of modules to instantiate require([‘ironMan’, ‘blackWidow’] , function(Tony, Natasha) { // CENSORED });

Slide 10

Slide 10 text

Module Pattern ● Common JS coding pattern. ● Encapsulates “privacy” using closures. ● Returns an object literal as public API.

Slide 11

Slide 11 text

Module Pattern: Code var DeepThought = function() { var _theAnswer = 42; return { tellUsTheAnswer: function() { return _theAnswer; } } }; DeepThought.tellUsTheAnswer();

Slide 12

Slide 12 text

Definition: module ● Self-contained implementation of a website component. ● Initialization of event bindings. ● Instantiates and glues MV* components.

Slide 13

Slide 13 text

Module Communication ● Events (pub / sub via mediator) ○ Passive! ○ Past tense! ○ Verb + target (“found:theAnswer”, “added:bookmark”) ● Public APIs (accessible via dependency) ○ imperative actions (tellUsTheAnswer)

Slide 14

Slide 14 text

What is MV* ● Separation of concerns. ● Most modules implementations include: ○ Rendering / updating user interfaces. ○ Handling user input. ○ Server communication. ● MV* is too simplistic when applied to large- scale JS architecture, however, when applied to a module….

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Backbone ● “Magic library” for structuring web applications. ● Not a full-stack framework, more “convention than code”. ● Data is represented as a model. ● Views react to changes in models and user interaction.

Slide 17

Slide 17 text

Underscore ● Utility library for Javascript. ● Does not extend any built-in JS objects. ● Uses “_” as a global alias. ● Functions map to native implementations where possible.

Slide 18

Slide 18 text

AMD + Backbone ● Can use AMD to define MV* components (or just define views in module) ● The factory function should return the extended prototype of Backbone.* ● Instances are created with new keyword.

Slide 19

Slide 19 text

AMD + Backbone: Code define(“lovelyView”, function() { return Backbone.View.extend({ events: {...} , onClick: function() {...} }); }); new (require(“lovelyView”));

Slide 20

Slide 20 text

Improvements ● Sandboxing: use one central dependency with message bus for module communication. ● Standardized module definition: all modules contain references to the app instance and other shared resouces.

Slide 21

Slide 21 text

?’s @janvanthoor @milchjieper