ParisJS #10 : RequireJS

Dependency Management with RequireJS http://requirejs.org/

Who ?Julien CabanèsFront End Developpermail : julien@zeeagency.comtwitter : @JulienCabanesgithub : github.com/ZeeAgency

What are we talkin’ about?• RequireJS.org : Script Module Loader• Browsers && Node && Rhino• Dependencies• Global Pollution• Optimization

ContextLibs of choice jQuery Backbone

ContextLibs of choice Plugins jQuery Backbone

ContextLibs of choice Plugins Your Code jQuery Backbone

Bad ContextLibs of choice Plugins Your Code jQuery Backbone

Good ContextLibs of choice Plugins Your Code jQuery Backbone

DependenciesLibs of choice Plugins Your Code jQuery Backbone

Solution ?<script src="jquery.min.js"></script><script src="backbone.min.js"></script>...<script src="jquery.plugin.js"></script><script src="jquery.plugin.js"></script>...<script src="my-code.js"></script><script src="my-code.js"></script><script src="my-code.js"></script><script src="my-code.js"></script><script src="my-code.js"></script>...

Async Solution ?<script src="LAB.js"></script><script type="text/javascript">$LAB .script(jquery.min.js) .script(backbone.min.js) ... .script(jquery.plugin.js) .script(jquery.plugin.js) .script(jquery.plugin.js) ... .script(my-code.js) .script(my-code.js) .script(my-code.js);</script>

Namespace ?var MyNamespace = {};MyNamespace.Config = {…};MyNamespace.Product = function() {…};MyNamespace.Video = function() {…};MyNamespace.Audio = function() {…};MyNamespace.Mail = function() {…};

AMDNot your CPU...Asynchronous Module Deﬁnitionhttps://github.com/amdjs/amdjs-api/wiki/AMD

deﬁne()APIdefine(id?, dependencies?, factory);Usagedefine(My-Module, [Another-Module], function(AnotherModule) { // Do Something });

Example// App/Conf.jsdefine(function() { return { path: ..., debug: true, ... };});

Example// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... };});

Scope vs. Global Pollution// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); },... };});

Plugins Example// App/View/Product.jsdefine([ order!FirstModule, order!SecondModule, i18n!fr/some-i18n-bundle, text!some-text-file.txt, cs!some-coffee, tpl!App/View/Product.tpl], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } });});

Order Plugin// App/View/Product.jsdefine([ order!FirstModule, // Keep execution order order!SecondModule, // requirejs.org/docs/api.html#order i18n!fr/some-i18n-bundle, text!some-text-file.txt, cs!some-coffee, tpl!App/View/Product.tpl], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } });});

i18n Plugin// App/View/Product.jsdefine([ order!FirstModule, order!SecondModule, i18n!fr/some-i18n-bundle, // Load i18n bundle text!some-text-file.txt, // requirejs.org/docs/api.html#i18n cs!some-coffee, tpl!App/View/Product.tpl], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } });});

Text Plugin// App/View/Product.jsdefine([ order!FirstModule, order!SecondModule, i18n!fr/some-i18n-bundle, text!some-text-file.txt, // Guess what ? cs!some-coffee, // requirejs.org/docs/api.html#text tpl!App/View/Product.tpl], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } });});

CoffeeScript Plugin// App/View/Product.jsdefine([ order!FirstModule, order!SecondModule, i18n!fr/some-i18n-bundle, text!some-text-file.txt, cs!some-coffee, // returns compiled CoffeeScript ! tpl!App/View/Product.tpl // github.com/jrburke/require-cs], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } });});

Template Plugin// App/View/Product.jsdefine([ order!FirstModule, order!SecondModule, i18n!fr/some-i18n-bundle, text!some-text-file.txt, // My Favorite Plugin ! (mine...) cs!some-coffee, // Returns a compiled template ! tpl!App/View/Product.tpl // github.com/ZeeAgency/requirejs-tpl], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } });});

Optimizationnode r.js -o name=bootstrap out=built.js baseUrl=js http://requirejs.org/docs/optimization.html

Remember ?Libs of choice Plugins Your Code jQuery Backbone

Optimized !Libs of choice Ready for Production jQuery

Optimized !Libs of choice Ready for Production jQuery CoffeeScript ?

Optimized !Libs of choice Ready for Production jQuery CoffeeScript ? Templates ?

Optimized !Libs of choice Ready for Production jQuery CoffeeScript ? Templates ? Compiled & Miniﬁed so browser doesn’t need to...

Optimized !Libs of choice Ready for Production jQuery CoffeeScript ? Templates ? Compiled & Miniﬁed

http://lanyrd.com	15
https://twitter.com	5
http://a0.twimg.com	4
http://twitter.com	2
http://trunk.ly	1
http://wiki.onakasuita.org	1

ParisJS #10 : RequireJS

by Julien Zee on Sep 02, 2011

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 28

Statistics

ParisJS #10 : RequireJS Presentation Transcript