SlideShare une entreprise Scribd logo
RequireJS




Julien Roche

Human Talks Grenoble – le 13/11/2012
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 Mobile

2
La grande question sur la vie, l'univers 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
La réponse


    Cela dépend de l’application, du besoin …




                                                … mais le dernier point semble être le bon


http://blog.blary.be/analyse-diff%C3%A9rentes-fa%C3%A7ons-dint%C3%A9grer-un-script-javascript

4
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: RequireJS




5
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
          • Require



6
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
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
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 fichiers



9
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
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
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
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.js




13
Intérêts de RequireJS


               Maintenabilité

               Gestion de dépendances

               Industrialisation
                 ● tests unitaires

                 ●Passage du mode dev au mode
                  production




14

Contenu connexe

Tendances

Maven
MavenMaven
GWT Principes & Techniques
GWT Principes & TechniquesGWT Principes & Techniques
GWT Principes & Techniques
Rachid NID SAID
 
Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Configuration Management avec Drupal 8
Configuration Management avec Drupal 8
Aurelien Navarre
 
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
Aurelien Navarre
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejsnaholyr
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel phpKhadim Mbacké
 
Drupal - La puissance de Drush
Drupal - La puissance de DrushDrupal - La puissance de Drush
Drupal - La puissance de Drush
Alexandre Marie
 
Gradle
GradleGradle
Gradle
ylemoigne
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012
FastConnect
 
Utilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHPUtilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHP
Jean-Marc Fontaine
 
jQuery
jQueryjQuery
jQuery
Franck SIMON
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
ParisJUG Spring Boot
ParisJUG Spring BootParisJUG Spring Boot
ParisJUG Spring Boot
Julien Sadaoui
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
Antoine Rey
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
 

Tendances (20)

Maven
MavenMaven
Maven
 
GWT Principes & Techniques
GWT Principes & TechniquesGWT Principes & Techniques
GWT Principes & Techniques
 
Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Configuration Management avec Drupal 8
Configuration Management avec Drupal 8
 
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 
Drupal - La puissance de Drush
Drupal - La puissance de DrushDrupal - La puissance de Drush
Drupal - La puissance de Drush
 
Gradle
GradleGradle
Gradle
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012
 
Utilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHPUtilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHP
 
jQuery
jQueryjQuery
jQuery
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
ParisJUG Spring Boot
ParisJUG Spring BootParisJUG Spring Boot
ParisJUG Spring Boot
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 

En vedette

Simon Lighting Ensembles - Kuma RD HID
Simon Lighting Ensembles - Kuma RD HIDSimon Lighting Ensembles - Kuma RD HID
Simon Lighting Ensembles - Kuma RD HID
Mktlighting
 
De ZORBA a ZARA
De ZORBA a ZARADe ZORBA a ZARA
De ZORBA a ZARA
mkinditex
 
Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...
Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...
Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...
Equipe RENARD
 
Innovate - Imad Bougataya
Innovate - Imad BougatayaInnovate - Imad Bougataya
Innovate - Imad Bougataya
Salah Benzakour
 
M sadin
M sadinM sadin
M sadinIRI
 
Lesson 2 Feb 25 2010
Lesson 2 Feb 25 2010Lesson 2 Feb 25 2010
Lesson 2 Feb 25 2010
ingroy
 
Morelos cultura
Morelos culturaMorelos cultura
Morelos cultura
dardz
 
Alfredo garcia mtz
Alfredo garcia mtzAlfredo garcia mtz
Alfredo garcia mtz
Miguel Rivera
 
Test du braun series 5
Test du braun series 5Test du braun series 5
Test du braun series 5
Apprendre reflexologie
 
Terremoto
TerremotoTerremoto
Terremoto
Miriam Gutierrez
 
Unes vacances a Ciutadella
Unes vacances a CiutadellaUnes vacances a Ciutadella
Unes vacances a Ciutadella
Helena Cortès Ripoll
 
Liderazgo y grupos
Liderazgo y  gruposLiderazgo y  grupos
Liderazgo y grupos
Ernesto Adaos
 
Tema iv comunicación entre procesos
Tema iv comunicación entre procesosTema iv comunicación entre procesos
Tema iv comunicación entre procesos
Pablo Hurtado
 
Présentation des Méthodes Agiles pour l'association AnnexEthique
Présentation des Méthodes Agiles pour l'association AnnexEthiquePrésentation des Méthodes Agiles pour l'association AnnexEthique
Présentation des Méthodes Agiles pour l'association AnnexEthique
David Brocard
 
Métriques pour l'évaluation de l'Annotation
Métriques pour l'évaluation de l'AnnotationMétriques pour l'évaluation de l'Annotation
Métriques pour l'évaluation de l'Annotation
Jean-Philippe Fauconnier
 
Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...
Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...
Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...
Retis be
 
Cómic 6
Cómic 6Cómic 6
Cómic 6
joseluis84
 
Prensa para ONG - Casos prácticos - septiembre 2010
 Prensa para ONG - Casos prácticos - septiembre 2010 Prensa para ONG - Casos prácticos - septiembre 2010
Prensa para ONG - Casos prácticos - septiembre 2010
prensaparaong
 
Capítulo 2. un tesoro
Capítulo 2. un tesoroCapítulo 2. un tesoro
Capítulo 2. un tesoro
nabintou
 

En vedette (20)

Simon Lighting Ensembles - Kuma RD HID
Simon Lighting Ensembles - Kuma RD HIDSimon Lighting Ensembles - Kuma RD HID
Simon Lighting Ensembles - Kuma RD HID
 
De ZORBA a ZARA
De ZORBA a ZARADe ZORBA a ZARA
De ZORBA a ZARA
 
Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...
Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...
Francine Blackburn - ACFAS 2013 - Soutenir et accompagner les organisations d...
 
Innovate - Imad Bougataya
Innovate - Imad BougatayaInnovate - Imad Bougataya
Innovate - Imad Bougataya
 
M sadin
M sadinM sadin
M sadin
 
Lesson 2 Feb 25 2010
Lesson 2 Feb 25 2010Lesson 2 Feb 25 2010
Lesson 2 Feb 25 2010
 
Happyday
HappydayHappyday
Happyday
 
Morelos cultura
Morelos culturaMorelos cultura
Morelos cultura
 
Alfredo garcia mtz
Alfredo garcia mtzAlfredo garcia mtz
Alfredo garcia mtz
 
Test du braun series 5
Test du braun series 5Test du braun series 5
Test du braun series 5
 
Terremoto
TerremotoTerremoto
Terremoto
 
Unes vacances a Ciutadella
Unes vacances a CiutadellaUnes vacances a Ciutadella
Unes vacances a Ciutadella
 
Liderazgo y grupos
Liderazgo y  gruposLiderazgo y  grupos
Liderazgo y grupos
 
Tema iv comunicación entre procesos
Tema iv comunicación entre procesosTema iv comunicación entre procesos
Tema iv comunicación entre procesos
 
Présentation des Méthodes Agiles pour l'association AnnexEthique
Présentation des Méthodes Agiles pour l'association AnnexEthiquePrésentation des Méthodes Agiles pour l'association AnnexEthique
Présentation des Méthodes Agiles pour l'association AnnexEthique
 
Métriques pour l'évaluation de l'Annotation
Métriques pour l'évaluation de l'AnnotationMétriques pour l'évaluation de l'Annotation
Métriques pour l'évaluation de l'Annotation
 
Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...
Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...
Faut il craindre d'acheter ou de vendre en ligne ? Le point sur la fraude en ...
 
Cómic 6
Cómic 6Cómic 6
Cómic 6
 
Prensa para ONG - Casos prácticos - septiembre 2010
 Prensa para ONG - Casos prácticos - septiembre 2010 Prensa para ONG - Casos prácticos - septiembre 2010
Prensa para ONG - Casos prácticos - septiembre 2010
 
Capítulo 2. un tesoro
Capítulo 2. un tesoroCapítulo 2. un tesoro
Capítulo 2. un tesoro
 

Similaire à Aperçu de RequireJS

AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
Jquery
JqueryJquery
Jquery
krymo
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
Présentation1
Présentation1Présentation1
Présentation1
Boulkenafet samir
 
Présentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - ZenikaPrésentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - ZenikaZenika
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Aurélien Maury
 
tp-spring.pdf
tp-spring.pdftp-spring.pdf
tp-spring.pdf
badrfathallah2
 
tp-spring.pdf
tp-spring.pdftp-spring.pdf
tp-spring.pdf
seydou4devops
 
Présentation de BackBone.JS
Présentation de BackBone.JSPrésentation de BackBone.JS
Présentation de BackBone.JSNoirdes
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
ENSET, Université Hassan II Casablanca
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Corinne Schillinger
 
HTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilitéHTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilité
Julien Dubois
 

Similaire à Aperçu de RequireJS (20)

AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Gradle_LyonJUG
Gradle_LyonJUGGradle_LyonJUG
Gradle_LyonJUG
 
Springioc
SpringiocSpringioc
Springioc
 
Jquery
JqueryJquery
Jquery
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Gradle_ToulouseJUG
Gradle_ToulouseJUGGradle_ToulouseJUG
Gradle_ToulouseJUG
 
Gradle_BreizJUG
Gradle_BreizJUGGradle_BreizJUG
Gradle_BreizJUG
 
Présentation1
Présentation1Présentation1
Présentation1
 
Gradle_ToursJUG
Gradle_ToursJUGGradle_ToursJUG
Gradle_ToursJUG
 
Présentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - ZenikaPrésentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - Zenika
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Java Server Faces 2
Java Server Faces 2Java Server Faces 2
Java Server Faces 2
 
Gradle_BordeauxJUG
Gradle_BordeauxJUGGradle_BordeauxJUG
Gradle_BordeauxJUG
 
tp-spring.pdf
tp-spring.pdftp-spring.pdf
tp-spring.pdf
 
tp-spring.pdf
tp-spring.pdftp-spring.pdf
tp-spring.pdf
 
Présentation de BackBone.JS
Présentation de BackBone.JSPrésentation de BackBone.JS
Présentation de BackBone.JS
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
 
HTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilitéHTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilité
 

Plus de VISEO

Tendances Mobile 2018
Tendances Mobile 2018Tendances Mobile 2018
Tendances Mobile 2018
VISEO
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
VISEO
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
VISEO
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
VISEO
 
Phonegap
PhonegapPhonegap
Phonegap
VISEO
 
Faire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxxFaire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxx
VISEO
 
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012   Gregory Weinbach - il n y a pas de bon modele metierDevoxx 2012   Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
VISEO
 
Sexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobileSexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobile
VISEO
 

Plus de VISEO (9)

Tendances Mobile 2018
Tendances Mobile 2018Tendances Mobile 2018
Tendances Mobile 2018
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
Phonegap
PhonegapPhonegap
Phonegap
 
Faire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxxFaire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxx
 
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012   Gregory Weinbach - il n y a pas de bon modele metierDevoxx 2012   Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
 
Sexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobileSexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobile
 

Aperçu de RequireJS

  • 1. RequireJS Julien Roche Human Talks Grenoble – le 13/11/2012
  • 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 Mobile 2
  • 3. La grande question sur la vie, l'univers 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. La réponse Cela dépend de l’application, du besoin … … mais le dernier point semble être le bon http://blog.blary.be/analyse-diff%C3%A9rentes-fa%C3%A7ons-dint%C3%A9grer-un-script-javascript 4
  • 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: RequireJS 5
  • 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 • Require 6
  • 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. 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. 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 fichiers 9
  • 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. 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. 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. 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.js 13
  • 14. Intérêts de RequireJS  Maintenabilité  Gestion de dépendances  Industrialisation ● tests unitaires ●Passage du mode dev au mode production 14