RequireJS

5,031 views
4,797 views

Published on

Talk given at NDC, Oslo - June 2013

Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,031
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

RequireJS

  1. 1. RequireJSSebastiano Armeli-Battana@sebarmeliNDC 2013, Oslo (Norway)Thursday, June 13, 13
  2. 2. Thursday, June 13, 13
  3. 3. Thursday, June 13, 13
  4. 4. Thursday, June 13, 13
  5. 5. Thursday, June 13, 13
  6. 6. 123456Thursday, June 13, 13
  7. 7. app.jsview.jsThursday, June 13, 13
  8. 8. view.js------------Thursday, June 13, 13
  9. 9. app.js------------Thursday, June 13, 13
  10. 10. 4646Thursday, June 13, 13
  11. 11. Thursday, June 13, 13
  12. 12. Thursday, June 13, 13
  13. 13. app.js view.jshelpers.jsview2.jshelpers2.jsmodel.jsThursday, June 13, 13
  14. 14. app.js view.jshelpers.jsview2.jshelpers2.jsmodel.js123546Thursday, June 13, 13
  15. 15. app.js view.jshelpers.jsview2.jshelpers2.jsmodel.js123546413256Thursday, June 13, 13
  16. 16. Thursday, June 13, 13
  17. 17. Thursday, June 13, 13
  18. 18. <script data-main=”js/main.js” src=”require.js” />Thursday, June 13, 13
  19. 19. <script data-main=”js/main.js” src=”require.js” />AMDThursday, June 13, 13
  20. 20. <script data-main=”js/main.js” src=”require.js” />AMDThursday, June 13, 13
  21. 21. Thursday, June 13, 13
  22. 22. var module = (function(){// private variables, methodsvar title = “”;function f1() {}return {// public/privileged methodsgetTitle: function(){return title;}}}()) ;MODULE PATTERNThursday, June 13, 13
  23. 23. define(function () {var title = “”;function f1() {}return {getTitle: function() {return title;}}});RJS MODULE PATTERNThursday, June 13, 13
  24. 24. define(id?, dependencies?, factory)Thursday, June 13, 13
  25. 25. index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.jsview1.js------------define([‘helpers’],function(helpers){return {init: function(){}}});define(function(){// code here});helpers.js------------Thursday, June 13, 13
  26. 26. index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.jsview1.js------------define([‘helpers’],function(helpers){return {init: function(){}}});define(function(){// code here});helpers.js------------Thursday, June 13, 13
  27. 27. define([‘module1’, module2’],function (dep1, dep2) {// do something})Multiple DependenciesThursday, June 13, 13
  28. 28. require(dependencies?, factory)Thursday, June 13, 13
  29. 29. index.html------------<script src=”js/vendor/require.js”data-main=”js/main.js”main.js------------require([‘view1’],function(view1){view1.init();});index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.jsThursday, June 13, 13
  30. 30. Thursday, June 13, 13
  31. 31. main.js------------require.config({baseUrl: ‘./js’,paths: {‘view1’: ‘app/views/view1’}});require([‘view1’],function(view1){view1.init();});index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.jsThursday, June 13, 13
  32. 32. NO blocking!Thursday, June 13, 13
  33. 33. Thursday, June 13, 13
  34. 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 LoaderThursday, June 13, 13
  35. 35. require() asynchronousde!ne() - de!ne.amdAMDwell suited for browserThursday, June 13, 13
  36. 36. exports.render = function() {};var module = require(‘view1’);NO de!ne()require() synchronousServer-side approachThursday, June 13, 13
  37. 37. Simplified CommonJS Wrapperdefine(function(require, exports, module){// Module required before the callback runsvar helpers = require(‘helpers’);exports.render = function() {helpers.doSomething();}});Thursday, June 13, 13
  38. 38. define([“dep1”], function(require){var helpers = require(‘helpers’);//code here});Thursday, June 13, 13
  39. 39. define([“dep1”], function(require){var helpers = require(‘helpers’);//code here});Thursday, June 13, 13
  40. 40. Thursday, June 13, 13
  41. 41. Thursday, June 13, 13
  42. 42. if ( typeof define === "function" &&define.amd ) {define( "jquery", [], function () {return jQuery;});}Thursday, June 13, 13
  43. 43. Thursday, June 13, 13
  44. 44. index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.js-- backbone.js-- underscore.js-- jquery.jsmain.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. 45. index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.js-- backbone.js-- underscore.js-- jquery.jsmain.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. 46. LOADER PLUGINS• i18n!, async!, domReady!• text!, css!, json!, cs!, hbs![plugin Module ID]![resource ID]Thursday, June 13, 13
  47. 47. main.js------------require.config({baseUrl: ‘./js’});require([‘text!partials/file.txt’],function(txt) {// txt goes here});index.htmljs /-- main.js-- vendor /-- require.js-- text.js-- partials /-- !le.txtThursday, June 13, 13
  48. 48. main.js------------require.config({baseUrl: ‘./js’});require([‘css!../css/style.css’],function() {// After css is loaded});index.htmljs /-- main.js-- vendor /-- require.js-- css.jscss /-- style.cssThursday, June 13, 13
  49. 49. Thursday, June 13, 13
  50. 50. 3 requests!Thursday, June 13, 13
  51. 51. r.jsnpm install -g requirejsOPTIMIZERThursday, June 13, 13
  52. 52. r.js -o tools/build.jsThursday, June 13, 13
  53. 53. build.js------------({appDir:../,mainConfigFile: ../js/main.js,dir: "../build",modules: [{name: "../main"}]})index.htmljs /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.jstools /-- build.jsThursday, June 13, 13
  54. 54. build/js/main.js----------------index.htmlbuild /-- index.html-- build.txt-- js /-- main.js-- helpers.js-- app /-- views /-- view1.js-- vendor /-- require.js-- tools /-- build.jsjs/vendor/../main.js----------------js/helpers.jsjs/vendor/view1.jsjs/vendor/../main.jsbuild/build.txt----------------Thursday, June 13, 13
  55. 55. OPTIMIZER1 request!Thursday, June 13, 13
  56. 56. ({appDir:../,mainConfigFile: ../js/main.js,dir: "../build",preserveLicenseComments: false,removeCombined: true,optimize: "uglify2",modules: [{name: "../main",excludeShallow: ["view1"]}]})Thursday, June 13, 13
  57. 57. SOURCE MAPS({// other optionsgenerateSourceMaps: true,optimize: ‘uglify2’})Thursday, June 13, 13
  58. 58. Testingdefine([“view1”], function(view1) {describe(“view1”, function(){it(“should do something”, function(){// expectations});});});Thursday, June 13, 13
  59. 59. runner.html------------runner.htmlspec /-- view1Spec.js-- main.jsjs /-- 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. 60. runner.htmlspec /-- view1Spec.js-- main.jsjs /-- vendor /-- require.js-- domReady.jsrequire.config({...});require([“domReady!”,“spec/view1Spec”],function(document){jasmine.getEnv().addReporter(new jasmine.HtmlReporter());jasmine.getEnv().execute();});main.js------------Thursday, June 13, 13
  61. 61. GRUNT integration??npm install -g grunt-cliGrunt!leHow to get Grunt?Thursday, June 13, 13
  62. 62. GRUNT integration??grunt-contrib-requirejsnpm install -g grunt-clinpm install grunt-contrib-require-js --save-devGrunt!leHow to get Grunt?Thursday, June 13, 13
  63. 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. 64. grunt requirejsThursday, June 13, 13
  65. 65. ES6 - ModulesModule de!nitionmodule [module ID]export [variable | function]Module dependencyimport { [var | fn] } from [module ID]Thursday, June 13, 13
  66. 66. ES6 - Modulesmodule “helpers” {}module “view1” {import helpers from “helpers”;exports function init() {...};}Thursday, June 13, 13
  67. 67. RecapThursday, June 13, 13
  68. 68. Recap• ModularityThursday, June 13, 13
  69. 69. Recap• No globals• ModularityThursday, June 13, 13
  70. 70. Recap• Async Script loader• No globals• ModularityThursday, June 13, 13
  71. 71. Recap• Async Script loader• No globals• Optimization• ModularityThursday, June 13, 13
  72. 72. Recap• Async Script loader• Future proof• No globals• Optimization• ModularityThursday, June 13, 13
  73. 73. http://requirejs.comhttps://github.com/asciidisco/grunt-requirejs@sebarmelihttps://github.com/amdjs/amdjs-api/wiki/AMDhttp://wiki.ecmascript.org/doku.php?id=harmony:modulesThursday, June 13, 13

×