Aperçu de RequireJS

2,548 views

Published on

La conception d'application Web complexe se reposant sur un socle JavaScript devient monnaie courante.

De ce fait, nous nous devons de nous outiller, ainsi que d'utiliser des frameworks adéquats.

Cette présentation a pour but de vous faire découvrir l'un de ces frameworks: RequireJS.

Nous verrons alors que nous pouvons produire des applications modulaires avec gestion de dépendances simplement, permettant ainsi d'avoir des applications qui se chargent rapidement alors que nous avons un découpage complexe, mais aussi des applications maintenables et testables facilement.

Voir: http://humantalks.com/talks/26-apercu-de-requirejs

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

  • Be the first to like this

No Downloads
Views
Total views
2,548
On SlideShare
0
From Embeds
0
Number of Embeds
116
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aperçu de RequireJS

  1. 1. RequireJSJulien RocheHuman Talks Grenoble – le 13/11/2012
  2. 2. Speaker  Julien Roche @rochejul  Ingénieur d’étude et formateur sur Java, Web et Web Mobile pour Objet Direct  Ancien commiter du projet OpenSource “wiQuery”  Expérience Web Mobile depuis 2 ans  Auteur de formations sur HTML5 et le Web Mobile  Référent HTML5 et Web Mobile2
  3. 3. La grande question sur la vie, lunivers et le reste  Comment devons-nous charger nos fichiers JavaScripts ? ●Dans la balise HEAD ? ●En bas de la balise BODY ? ●En utilisant les attributs async (HTML5) ou defer ? • Async: chargement asynchrone • Defer: chargement asynchrone avec garantie que le « document ready » soit déclenché à la fin du chargement des fichiers ●Via JavaScript, en injectant un nœud ? ●Via JavaScript, en injectant un nœud, au moment de l’événement « Load », en utilisant « defer » ?3
  4. 4. La réponse Cela dépend de l’application, du besoin … … mais le dernier point semble être le bonhttp://blog.blary.be/analyse-diff%C3%A9rentes-fa%C3%A7ons-dint%C3%A9grer-un-script-javascript4
  5. 5. Et si on allait plus loin ?  Ne pourrions nous pas avoir un framework qui fasse du chargement asynchrone ●Chargement optimisé  Mais également ●Une gestion de dépendances ? ●Un chargement des templates ? ●Une gestion de l’internalisation ?  Et qui soit léger ?  Une solution: RequireJS5
  6. 6. RequireJS  Github: https://github.com/jrburke/requirejs  Documentation: http://requirejs.org/  Compatible sur la quasi-totalité des navigateurs ●IE6+ ●Firefox 2+ ●Safari 3.2+, Chrome 3+ ●Opera 10+  Repose sur l’AMD: ●Asynchronous Module Definition • https://github.com/amdjs/amdjs-api/wiki/AMD ●Repose sur deux méthodes: • Define • Require6
  7. 7. Déclencheur et configuration  Pour utiliser RequireJS, nous devons le placer dans le header de la page HTML … <script data-main="javascripts/app" src="javascripts/frameworks/require.min.js"></script>  … tout en précisant le fichier JavaScript de configuration  Un exemple de contenu: /* First, we define shortcuts */ require.config({ paths: { "Model": "./require-model", "View": "./require-view" } }); /* Now, the core of our application */ require( ["Model", "View"], function(Model, View){ // Do something } );7
  8. 8. Define  Permet de définir un module  La méthode va contenir entre deux et trois paramètres ●Un tableau de dépendances, et le corps du module ●Un nom, un tableau de dépendances et le corps du module • Bonne pratique: mettre le nom du module en minuscule ! • Le tableau de dépendances peut – soit utiliser des raccourcis, – soit être un chemin relatif vers le fichier JavaScript (en omettant à la fin le ‘.js’).  Le corps du module peut renvoyer un objet. ●Quand celui-ci sera appelé, il sera passé en paramètre du corps du module. define( "mymodule" ["mypreviousmodule", "myanotherpreviousmodule"], function(a, b){ // Do something // Return something return { "a": "a" }; } );8
  9. 9. Require  Permet d’exiger le chargement immédiat des modules  Prend en paramètre un tableau de dépendances et un corps de module require( ["Underscore", "jquery", "Backbone", "Model", "View", "Bootstrap"], function(_, $, Backbone, Model, View){ // Do something } );  Il est à noter que nous ne sommes pas obligés de faire une application entièrement en RequireJS. ●Nous pouvons n’utiliser que RequireJS pour charger des fichiers9
  10. 10. Ordre  Parfois, il est important de charger des modules dans un certain ordre ●Par exemple, pour le framework BackboneJS, il faut que UnderscoreJS et jQuery soient chargés avant  Etant donné que le chargement se fait habituellement de manière asynchrone (non garant de l’ordre), il faut l’obliger en utilisant la propriété « shim » require.config({ paths: { "jquery": "./frameworks/jquery-1.8.1.min", "Underscore": "./frameworks/underscore.min", "Backbone": "./frameworks/backbone.min" }, // To force ordered loading. See https://github.com/jrburke/requirejs/wiki/Upgrading-to-RequireJS-2.0#wiki-shim shim: { "Backbone": { deps: ["Underscore", "jquery"], //These script dependencies should be loaded before loading Backbone exports: "Backbone" //Once loaded, use the global Backbone as the module value. }, "Underscore": { exports: "_" }, "jquery": { exports: "jQuery" } } });10
  11. 11. Système à base de plugins  Il est possible d’écrire un plugin pour RequireJS  Il en existe certains de base, comme ●« text », pour importer le contenu de fichier • Utile pour le templating ●« i18n », pour l’internalisation  Exemple d’utilisation require.config({ paths: { "template": "../templates", "text": "../frameworks/text.min" } }); require( ["text!../template/view-main.html"], function(templateMain){ // Do what you want } );11
  12. 12. Rendre son framework compatible AMD  Pour rendre son framework compatible amd, il suffit de détecter que ●« define » soit bien une fonction ●Et que « define.amd » soit bien définie  Un exemple concret: (function(){ function myModule($){ return { "a": "a" }; }; if (typeof define === "function" && define.amd ) { define( "mymodule", ["jquery"], myModule ); } else if(window.jQuery) { myModule(jQuery); } })();12
  13. 13. Optimisation  RequireJS a un plugin NodeJS permettant ●De concaténer et de minifier les fichiers JavaScripts ●http://requirejs.org/docs/optimization.html  Et cela en respectant l’ordre de chargement des modules et de leurs dépendances ●https://github.com/jrburke/r.js  Il suffit alors de l’installer > npm install -g requirejs  Et de le lancer soit sur le module qui nous intéresse, soit sur toute l’application > node ../../r.js -o baseUrl=. paths.requireLib=../../require name=main include=requireLib out=main-built.js13
  14. 14. Intérêts de RequireJS  Maintenabilité  Gestion de dépendances  Industrialisation ● tests unitaires ●Passage du mode dev au mode production14

×