Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RequireJS

Sebastiano Armeli-Battana
June 13, 2013
Programming
5
320

 RequireJS

Talk given at NDC,Oslo - June 2013

Sebastiano Armeli-Battana

June 13, 2013
Tweet

More Decks by Sebastiano Armeli-Battana

See All by Sebastiano Armeli-Battana
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
45
Managing a software engineering team
sebarmeli
1
330
Enforcing coding standards in a JS project
sebarmeli
0
430
Enforcing Coding Standards
sebarmeli
1
94
ES6: The future is now
sebarmeli
2
420
EcmaScript 6 - the future is here
sebarmeli
5
6.7k
Dependency management and Package management in JavaScript
sebarmeli
0
520
Karma - JS Test Runner
sebarmeli
1
650
Lazy Load Everything!
sebarmeli
3
280

Other Decks in Programming

See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Hasura の Relationship と権限管理
karszawa
0
180
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
400
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
590
WordPress（再）入門 - 基礎知識・環境編
oleindesign
1
140
AWSとCPUのムフフな関係
cmdemura
0
480
PHP でガチの電卓を作る
memory1994
PRO
2
160
Qiita Night PHP 2023
fuwasegu
0
11k
Step Functions Distributed Map を使ってみた
codemountains
0
120
2023年にクル（かもしれない）通信ミドルウェア技術（仮）
s_hosoai
0
220

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Scaling GitHub
holman
453
140k
Music & Morning Musume
bryan
37
4.6k
Building Your Own Lightsaber
phodgson
96
4.9k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
For a Future-Friendly Web
brad_frost
166
7.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
4 Signs Your Business is Dying
shpigford
171
20k
The Language of Interfaces
destraynor
149
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Into the Great Unknown - MozCon
thekraken
2
300

Transcript

  1. RequireJS Sebastiano Armeli-Battana @sebarmeli NDC 2013, Oslo (Norway) Thursday, June

    13, 13

  2. Thursday, June 13, 13

  3. Thursday, June 13, 13

  4. Thursday, June 13, 13

  5. Thursday, June 13, 13

  6. 1 2 3 4 5 6 Thursday, June 13, 13

  7. app.js view.js Thursday, June 13, 13

  8. view.js ------------ Thursday, June 13, 13

  9. app.js ------------ Thursday, June 13, 13

  10. 4 6 4 6 Thursday, June 13, 13

  11. Thursday, June 13, 13

  12. Thursday, June 13, 13

  13. app.js view.js helpers.js view2.js helpers2.js model.js Thursday, June 13, 13

  14. app.js view.js helpers.js view2.js helpers2.js model.js 1 2 3 5

    4 6 Thursday, June 13, 13

  15. app.js view.js helpers.js view2.js helpers2.js model.js 1 2 3 5

    4 6 4 1 3 2 5 6 Thursday, June 13, 13

  16. Thursday, June 13, 13

  17. Thursday, June 13, 13

  18. <script data-main=”js/main.js” src=”require.js” /> Thursday, June 13, 13

  19. <script data-main=”js/main.js” src=”require.js” /> AMD Thursday, June 13, 13

  20. <script data-main=”js/main.js” src=”require.js” /> AMD Thursday, June 13, 13

  21. Thursday, June 13, 13

  22. var module = (function(){ // private variables, methods var title

    = “”; function f1() {} return { // public/privileged methods getTitle: function(){ return title; } } }()) ; MODULE PATTERN Thursday, June 13, 13

  23. define(function () { var title = “”; function f1() {}

    return { getTitle: function() { return title; } } }); RJS MODULE PATTERN Thursday, June 13, 13

  24. define(id?, dependencies?, factory) Thursday, June 13, 13

  25. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js view1.js ------------ define([‘helpers’], function(helpers){ return { init: function(){} } }); define(function(){ // code here }); helpers.js ------------ Thursday, June 13, 13

  26. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js view1.js ------------ define([‘helpers’], function(helpers){ return { init: function(){} } }); define(function(){ // code here }); helpers.js ------------ Thursday, June 13, 13

  27. define([‘module1’, module2’], function (dep1, dep2) { // do something }

    ) Multiple Dependencies Thursday, June 13, 13

  28. require(dependencies?, factory) Thursday, June 13, 13

  29. index.html ------------ <script src=”js/vendor/require.js” data-main=”js/main.js” main.js ------------ require([‘view1’],function(view1){ view1.init(); });

    index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Thursday, June 13, 13

  30. Thursday, June 13, 13

  31. main.js ------------ require.config({ baseUrl: ‘./js’, paths: { ‘view1’: ‘app/views/view1’ }

    }); require([‘view1’],function(view1){ view1.init(); }); index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Thursday, June 13, 13

  32. NO blocking! Thursday, June 13, 13

  33. Thursday, June 13, 13

  34. var node = document.createElement('script'); node.async = true; node.setAttribute('data-requirecontext', context.contextName); node.setAttribute('data-requiremodule',

    moduleName); node.src = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(node); Script Loader Thursday, June 13, 13

  35. require() asynchronous de!ne() - de!ne.amd AMD well suited for browser

    Thursday, June 13, 13

  36. exports.render = function() {}; var module = require(‘view1’); NO de!ne()

    require() synchronous Server-side approach Thursday, June 13, 13

  37. Simplified CommonJS Wrapper define(function(require, exports, module){ // Module required before

    the callback runs var helpers = require(‘helpers’); exports.render = function() { helpers.doSomething(); } }); Thursday, June 13, 13

  38. define([“dep1”], function(require){ var helpers = require(‘helpers’); //code here }); Thursday,

    June 13, 13

  39. define([“dep1”], function(require){ var helpers = require(‘helpers’); //code here }); Thursday,

    June 13, 13

  40. Thursday, June 13, 13

  41. Thursday, June 13, 13

  42. if ( typeof define === "function" && define.amd ) {

    define( "jquery", [], function () { return jQuery; }); } Thursday, June 13, 13

  43. Thursday, June 13, 13

  44. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js -- backbone.js -- underscore.js -- jquery.js main.js ------------ require.config({ baseUrl: ‘js/vendor’, shim: { ‘underscore’:{ exports: ‘_’ }, ‘backbone’: { deps: [‘jquery’, ‘underscore’], exports: ‘Backbone’ } } }); require([‘backbone’],function(Backbone){ Backbone.history.start(); }); Thursday, June 13, 13

  45. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js -- backbone.js -- underscore.js -- jquery.js main.js ------------ require.config({ baseUrl: ‘js/vendor’, shim: { ‘underscore’:{ exports: ‘_’ }, ‘backbone’: { deps: [‘jquery’, ‘underscore’], exports: ‘Backbone’ } } }); require([‘backbone’],function(Backbone){ Backbone.history.start(); }); Thursday, June 13, 13

  46. LOADER PLUGINS • i18n!, async!, domReady! • text!, css!, json!,

    cs!, hbs! [plugin Module ID]![resource ID] Thursday, June 13, 13

  47. main.js ------------ require.config({ baseUrl: ‘./js’ }); require([‘text!partials/file.txt’], function(txt) { //

    txt goes here }); index.html js / -- main.js -- vendor / -- require.js -- text.js -- partials / -- !le.txt Thursday, June 13, 13

  48. main.js ------------ require.config({ baseUrl: ‘./js’ }); require([‘css!../css/style.css’], function() { //

    After css is loaded }); index.html js / -- main.js -- vendor / -- require.js -- css.js css / -- style.css Thursday, June 13, 13

  49. Thursday, June 13, 13

  50. 3 requests! Thursday, June 13, 13

  51. r.js npm install -g requirejs OPTIMIZER Thursday, June 13, 13

  52. r.js -o tools/build.js Thursday, June 13, 13

  53. build.js ------------ ({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", modules: [

    { name: "../main" } ] }) index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js tools / -- build.js Thursday, June 13, 13

  54. build/js/main.js ---------------- index.html build / -- index.html -- build.txt --

    js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js -- tools / -- build.js js/vendor/../main.js ---------------- js/helpers.js js/vendor/view1.js js/vendor/../main.js build/build.txt ---------------- Thursday, June 13, 13

  55. OPTIMIZER 1 request! Thursday, June 13, 13

  56. ({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", preserveLicenseComments: false, removeCombined: true,

    optimize: "uglify2", modules: [ { name: "../main", excludeShallow: [ "view1" ] } ] }) Thursday, June 13, 13

  57. SOURCE MAPS ({ // other options generateSourceMaps: true, optimize: ‘uglify2’

    }) Thursday, June 13, 13

  58. Testing define([“view1”], function(view1) { describe(“view1”, function(){ it(“should do something”, function(){

    // expectations }); }); }); Thursday, June 13, 13

  59. runner.html ------------ runner.html spec / -- view1Spec.js -- main.js js

    / -- vendor / -- require.js <script src=”js/vendor/require.js” data-main=”spec/main.js” require.config({ baseUrl: ‘js/vendor’, paths: { ‘view1’: ..., ‘spec’: ‘../../spec’ } }); main.js ------------ Thursday, June 13, 13

  60. runner.html spec / -- view1Spec.js -- main.js js / --

    vendor / -- require.js -- domReady.js require.config({ ... }); require( [“domReady!”,“spec/view1Spec”], function(document){ jasmine.getEnv().addReporter( new jasmine.HtmlReporter() ); jasmine.getEnv().execute(); }); main.js ------------ Thursday, June 13, 13

  61. GRUNT integration?? npm install -g grunt-cli Grunt!le How to get

    Grunt? Thursday, June 13, 13

  62. GRUNT integration?? grunt-contrib-requirejs npm install -g grunt-cli npm install grunt-contrib-require-js

    --save-dev Grunt!le How to get Grunt? Thursday, June 13, 13

  63. module.exports = function(grunt) { var config = require(“build”); grunt.initConfig({ requirejs:

    { compile: { options: config } } grunt.loadNpmTasks('grunt-contrib-requirejs'); } Gruntfile.js ------------ Thursday, June 13, 13

  64. grunt requirejs Thursday, June 13, 13

  65. ES6 - Modules Module de!nition module [module ID] export [variable

    | function] Module dependency import { [var | fn] } from [module ID] Thursday, June 13, 13

  66. ES6 - Modules module “helpers” { } module “view1” {

    import helpers from “helpers”; exports function init() {...}; } Thursday, June 13, 13

  67. Recap Thursday, June 13, 13

  68. Recap • Modularity Thursday, June 13, 13

  69. Recap • No globals • Modularity Thursday, June 13, 13

  70. Recap • Async Script loader • No globals • Modularity

    Thursday, June 13, 13

  71. Recap • Async Script loader • No globals • Optimization

    • Modularity Thursday, June 13, 13

  72. Recap • Async Script loader • Future proof • No

    globals • Optimization • Modularity Thursday, June 13, 13

  73. http://requirejs.com https://github.com/asciidisco/grunt-requirejs @sebarmeli https://github.com/amdjs/amdjs-api/wiki/AMD http://wiki.ecmascript.org/doku.php?id=harmony:modules Thursday, June 13, 13