Tweet
Tweet

Slide 1

Slide 1 text

Using RequireJS for building modular JavaScript applications Sebastian Kurfürst jQuery Europe 2013 Freitag, 22. Februar 13

Slide 2

Slide 2 text

@skurfuerst Freitag, 22. Februar 13

Slide 3

Slide 3 text

Freitag, 22. Februar 13

Slide 4

Slide 4 text

Web Applications Freitag, 22. Februar 13

Slide 5

Slide 5 text

Web Applications Consulting Freitag, 22. Februar 13

Slide 6

Slide 6 text

Web Applications Consulting Training Freitag, 22. Februar 13

Slide 7

Slide 7 text

Freitag, 22. Februar 13

Slide 8

Slide 8 text

Freitag, 22. Februar 13

Slide 9

Slide 9 text

Website Seamless Frontend Editing Freitag, 22. Februar 13

Slide 10

Slide 10 text

Neos RequireJS EmberJS Aloha VIE CreateJS Hallo Frontend Editing Freitag, 22. Februar 13

Slide 11

Slide 11 text

Freitag, 22. Februar 13

Slide 12

Slide 12 text

Freitag, 22. Februar 13

Slide 13

Slide 13 text

Collaboration Freitag, 22. Februar 13

Slide 14

Slide 14 text

http://parkerlab.bio.uci.edu/pictures/photography%20pictures/2010_03_27_Select/IMG_5331%20(2)_tweak.jpg Freitag, 22. Februar 13

Slide 15

Slide 15 text

http://www.sxc.hu/photo/1398986 Freitag, 22. Februar 13

Slide 16

Slide 16 text

How to build modular JavaScript applications? Freitag, 22. Februar 13

Slide 17

Slide 17 text

let's build a simple app http://www.sxc.hu/photo/338064 Freitag, 22. Februar 13

Slide 18

Slide 18 text

jQuery needed by app Freitag, 22. Februar 13

Slide 19

Slide 19 text

jQuery needed by Freitag, 22. Februar 13

Slide 20

Slide 20 text

jQuery needed by Freitag, 22. Februar 13

Slide 21

Slide 21 text

http://www.sxc.hu/photo/791394 http://www.sxc.hu/browse.phtml?f=view&id=759509 Freitag, 22. Februar 13

Slide 22

Slide 22 text

http://www.sxc.hu/photo/791394 http://www.sxc.hu/browse.phtml?f=view&id=759509 + http://www.sxc.hu/browse.phtml?f=view&id=759509 http://www.sxc.hu/photo/1022988 Freitag, 22. Februar 13

Slide 23

Slide 23 text

A Module = a file Freitag, 22. Februar 13

Slide 24

Slide 24 text

Application Freitag, 22. Februar 13

Slide 25

Slide 25 text

Application Freitag, 22. Februar 13

Slide 26

Slide 26 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 27

Slide 27 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 28

Slide 28 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 29

Slide 29 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 30

Slide 30 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 31

Slide 31 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 32

Slide 32 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 33

Slide 33 text

jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13

Slide 34

Slide 34 text

http://www.sxc.hu/photo/338064 Freitag, 22. Februar 13

Slide 35

Slide 35 text

a real application http://commons.wikimedia.org/wiki/File:Lego_Chicago_City_View_2001.jpg Freitag, 22. Februar 13

Slide 36

Slide 36 text

Freitag, 22. Februar 13

Slide 37

Slide 37 text

Freitag, 22. Februar 13

Slide 38

Slide 38 text

managing 100s of dependencies is hard Freitag, 22. Februar 13

Slide 39

Slide 39 text

http://www.sxc.hu/photo/978138 slow Freitag, 22. Februar 13

Slide 40

Slide 40 text

Freitag, 22. Februar 13

Slide 41

Slide 41 text

Freitag, 22. Februar 13

Slide 42

Slide 42 text

Freitag, 22. Februar 13

Slide 43

Slide 43 text

What if each module defines its dependencies? Freitag, 22. Februar 13

Slide 44

Slide 44 text

Freitag, 22. Februar 13

Slide 45

Slide 45 text

app view jQuery controller model Freitag, 22. Februar 13

Slide 46

Slide 46 text

app view jQuery controller model I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 47

Slide 47 text

app view jQuery controller model I need model, controller, view to do my job. I need jQuery to do my job. Freitag, 22. Februar 13

Slide 48

Slide 48 text

// app.js define( dependencies, callback ); app I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 49

Slide 49 text

// app.js define( dependencies, callback ); module name == file name except .js file extension app I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 50

Slide 50 text

// app.js define( dependencies, callback ); module name == file name as soon as those are loaded... ... execute this callback except .js file extension app I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 51

Slide 51 text

// app.js define( ["model", "controller", "view"], callback ); app I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 52

Slide 52 text

// app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); dependent modules are passed as arguments app I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 53

Slide 53 text

// app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); dependent modules are passed as arguments app I need model, controller, view to do my job. Freitag, 22. Februar 13

Slide 54

Slide 54 text

// controller.js define( ["jQuery"], function($) { var controller = {}; // build up controller as needed return controller; } ); the module is returned from the callback function controller I need jQuery to do my job. Freitag, 22. Februar 13

Slide 55

Slide 55 text

Freitag, 22. Februar 13

Slide 56

Slide 56 text

A M D asynchronous module definitions Freitag, 22. Februar 13

Slide 57

Slide 57 text

•define() modules •file name == module name •callback arguments == module dependencies •return value == module A M D Freitag, 22. Februar 13

Slide 58

Slide 58 text

A M D Framework Agnostic! Freitag, 22. Februar 13

Slide 59

Slide 59 text

RequireJS Freitag, 22. Februar 13

Slide 60

Slide 60 text

Is an implementation of an AMD- compliant module loader. Freitag, 22. Februar 13

Slide 61

Slide 61 text

Is a dependency management solution for JavaScript. Freitag, 22. Februar 13

Slide 62

Slide 62 text

James Burke Open source web developer. Mozilla Labs, RequireJS, volo. Freitag, 22. Februar 13

Slide 63

Slide 63 text

// app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); // controller.js define( ["jQuery"], function($) { var controller = {}; // build up controller as needed return controller; } ); 1 AMD modules Freitag, 22. Februar 13

Slide 64

Slide 64 text

// app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); // controller.js define( ["jQuery"], function($) { var controller = {}; // build up controller as needed return controller; } ); 1 AMD modules 2 bootstrap Freitag, 22. Februar 13

Slide 65

Slide 65 text

The Build Process Freitag, 22. Februar 13

Slide 66

Slide 66 text

Freitag, 22. Februar 13

Slide 67

Slide 67 text

r.js -o buildconfig.js Freitag, 22. Februar 13

Slide 68

Slide 68 text

r.js -o buildconfig.js Freitag, 22. Februar 13

Slide 69

Slide 69 text

// buildconfig.js baseUrl: 'src/', paths: { 'jQuery': 'lib/jquery/jquery' }, shim: {} // lots of other options base URL path mapping non-AMD code Freitag, 22. Februar 13

Slide 70

Slide 70 text

Application Freitag, 22. Februar 13

Slide 71

Slide 71 text

Application Freitag, 22. Februar 13

Slide 72

Slide 72 text

use minified files in production Freitag, 22. Februar 13

Slide 73

Slide 73 text

Freitag, 22. Februar 13

Slide 74

Slide 74 text

Power User Features Freitag, 22. Februar 13

Slide 75

Slide 75 text

// frontend/app.js define([ 'components/jquery', ], function(....) {...}) relative module names 'frontend/model/application', Freitag, 22. Februar 13

Slide 76

Slide 76 text

// frontend/app.js define([ 'components/jquery', ], function(....) {...}) relative module names './model/application', Freitag, 22. Februar 13

Slide 77

Slide 77 text

non-AMD code Freitag, 22. Februar 13

Slide 78

Slide 78 text

// simplified var root = window; root.Backbone = {}; // remaining backbone here non-AMD code Freitag, 22. Februar 13

Slide 79

Slide 79 text

define(['underscore', 'jquery'], function(_, jQuery) { var root = {}; root.Backbone = {}; // remaining backbone here return root.Backbone; }); non-AMD code fail Freitag, 22. Februar 13

Slide 80

Slide 80 text

non-AMD code use shims Freitag, 22. Februar 13

Slide 81

Slide 81 text

// before loading require.js require.config({ shim: { 'backbone': { exports: 'Backbone', deps: ['underscore', 'jquery'] } } }); non-AMD code use shims Freitag, 22. Februar 13

Slide 82

Slide 82 text

var myTemplate = 'Welcome {name} ... I hope you enjoy {conferenceName}'; text dependencies fail Freitag, 22. Februar 13

Slide 83

Slide 83 text

var myTemplate = 'Welcome {name}\ \ ... I hope you enjoy {conferenceName}'; text dependencies Freitag, 22. Februar 13

Slide 84

Slide 84 text

var myTemplate = 'Welcome {name}\ \ ... I hope you enjoy {conferenceName}'; text dependencies var myTemplate = ['Welcome {name}', '', '... I hope you enjoy {conferenceName}' ].join("\n"); Freitag, 22. Februar 13

Slide 85

Slide 85 text

var myTemplate = 'Welcome {name}\ \ ... I hope you enjoy {conferenceName}'; text dependencies var myTemplate = ['Welcome {name}', '', '... I hope you enjoy {conferenceName}' ].join("\n"); fail Freitag, 22. Februar 13

Slide 86

Slide 86 text

// frontend/app.js define([ 'text!templates/myTemplate.html' ], function(myTemplate) {...}) text dependencies Freitag, 22. Februar 13

Slide 87

Slide 87 text

// frontend/app.js define([ 'text!templates/myTemplate.html' ], function(myTemplate) {...}) text dependencies loader plugin Freitag, 22. Februar 13

Slide 88

Slide 88 text

// frontend/app.js define([ 'text!templates/myTemplate.html' ], function(myTemplate) {...}) text dependencies loader plugin template is now inside this variable Freitag, 22. Februar 13

Slide 89

Slide 89 text

// app.coffee define( ['cs!model', 'cs!controller'] (model, controller) -> # do something here ) CoeeScript Freitag, 22. Februar 13

Slide 90

Slide 90 text

Quick Development Development slow Freitag, 22. Februar 13

Slide 91

Slide 91 text

Quick Development Development Application vs Production slow fast Freitag, 22. Februar 13

Slide 92

Slide 92 text

Quick Development Application view settings main Freitag, 22. Februar 13

Slide 93

Slide 93 text

Quick Development Application view settings main r.js -o buildconfig.js excludeShallow=view,main,settings Freitag, 22. Februar 13

Slide 94

Slide 94 text

Freitag, 22. Februar 13

Slide 95

Slide 95 text

Freitag, 22. Februar 13

Slide 96

Slide 96 text

Arbitrary Web Site Web Widget Freitag, 22. Februar 13

Slide 97

Slide 97 text

Arbitrary Web Site Web Widget prevent interaction Freitag, 22. Februar 13

Slide 98

Slide 98 text

Wrapped Modules http://requirejs.org/docs/faq-advanced.html Web Widget rename require.js using namespace Freitag, 22. Februar 13

Slide 99

Slide 99 text

Wrapped Modules http://requirejs.org/docs/faq-advanced.html Web Widget rename require.js using namespace Freitag, 22. Februar 13

Slide 100

Slide 100 text

RequireJS and jQuery Freitag, 22. Februar 13

Slide 101

Slide 101 text

RequireJS and jQuery // make sure to specify a shim config for // jquery.slider and jquery.tooltip define( ["jquery", "jquery.slider", "jquery.tooltip"], function($) { // the jquery.slider.js and jquery.tooltip.js // have been loaded. $(function() { $('body').slider(); }); }); Freitag, 22. Februar 13

Slide 102

Slide 102 text

RequireJS and jQuery // make sure to specify a shim config for // jquery.slider and jquery.tooltip define( ["jquery", "jquery.slider", "jquery.tooltip"], function($) { // the jquery.slider.js and jquery.tooltip.js // have been loaded. $(function() { $('body').slider(); }); }); Freitag, 22. Februar 13

Slide 103

Slide 103 text

RequireJS and jQuery app jQuery jQuery.slider Freitag, 22. Februar 13

Slide 104

Slide 104 text

RequireJS and jQuery app jQuery jQuery.slider dependency specification Freitag, 22. Februar 13

Slide 105

Slide 105 text

RequireJS and jQuery app jQuery jQuery.slider dependency specification added to $ object side-effect Freitag, 22. Februar 13

Slide 106

Slide 106 text

RequireJS and jQuery app jQuery jQuery.slider dependency specification jQuery.tooltip added to $ object side-effect Freitag, 22. Februar 13

Slide 107

Slide 107 text

Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13

Slide 108

Slide 108 text

Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13

Slide 109

Slide 109 text

Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13

Slide 110

Slide 110 text

Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13

Slide 111

Slide 111 text

Finding Missing Dependencies // in all JS files: define(..., function() { if (window._requirejsLoadingTrace) window._requirejsLoadingTrace.push('jquery.slider'); // source code follows here }); 1 instrumentation Freitag, 22. Februar 13

Slide 112

Slide 112 text

Finding Missing Dependencies // for error and successful runs, // do the following in console: window._requirejsLoadingTrace 2 collect traces http://git.typo3.org/FLOW3/Packages/TYPO3.TYPO3.git/blob/HEAD:/Scripts/missing-javascript-dependency-finder.php put them into the dependency finder: $successfulRuns = array( json_decode('["jquery", "jquery.slider", "jquery.tooltip", "app"]') ); $errorRuns = array( 'error description' => json_decode('["jquery.slider", "jquery", "jquery.tooltip", "app"]') ) Freitag, 22. Februar 13

Slide 113

Slide 113 text

Finding Missing Dependencies $ php missing-javascript-dependency-finder.php jquery.slider -> jquery Found 1 orders which might be responsible for loading order problems. 3 check output Freitag, 22. Februar 13

Slide 114

Slide 114 text

Freitag, 22. Februar 13

Slide 115

Slide 115 text

Further Resources Official Docs: http://requirejs.org Blogs of James Burke: http://jrburke.com/ http://tagneto.blogspot.de/ Freitag, 22. Februar 13

Slide 116

Slide 116 text

Further Resources Official Docs: http://requirejs.org Blogs of James Burke: http://jrburke.com/ http://tagneto.blogspot.de/ Freitag, 22. Februar 13

Slide 117

Slide 117 text

Future Freitag, 22. Februar 13

Slide 118

Slide 118 text

ES6 Modules Freitag, 22. Februar 13

Slide 119

Slide 119 text

Conclusion Freitag, 22. Februar 13

Slide 120

Slide 120 text

Use RequireJS Freitag, 22. Februar 13

Slide 121

Slide 121 text

solves JS dependency management problem Freitag, 22. Februar 13

Slide 122

Slide 122 text

robust build tools Freitag, 22. Februar 13

Slide 123

Slide 123 text

framework agnostic Freitag, 22. Februar 13

Slide 124

Slide 124 text

oers clean encapsulation Freitag, 22. Februar 13

Slide 125

Slide 125 text

! Freitag, 22. Februar 13

Slide 126

Slide 126 text

Thanks! http://speakerdeck.com/skurfuerst @skurfuerst http://lanyrd.com/profile/skurfuerst/ Freitag, 22. Februar 13

Slide 127

Slide 127 text

Freitag, 22. Februar 13