SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
AMD / COMMONJS / ECMA
SCRIPT 6
J A V A S C R I P T
Belgacem Ben ltaif
@GASSTON Développeur javascript / php / ruby 
CTO PowerFul Consulting
Consultant technique en digital 
Activiste en logicel libre "opensource"
Entrepreneur
http://gasston-labs.fr
https://github.com/gasston 
 
AVANTAGE DU
JAVASCRIPT
MODULAIRE
•Autonome
• Évitez la pollution de la portée global (la
portée global n'est pas mauvaise!)
• Tenir le projet organisé
• Améliorer la réutilisabilité du code
• API hautement vérifiable et bien définie
AMD COMMON JS
L E S S O L U T I O N S ?
define({
           age: "16",
           taille: "150"
 });
Objet de retour simple en tant que collection
de paires nom / valeur.
AMD
define(function () {
     // Do setup work here
     return {
          color: "black",
           size: "unisize"
       }
    });
Objet de retour avec la mise en œuvre
""privacy"".
AMD
define(["./notes", "./eleve"],                
function(notes, eleve) {
     var code = "675";
     var getNote = function(){
       return eleve.getNote(code);
};
Retourner l'objet avec l'implémentation et les
dépendances ."
AMD
import eleve from collections;
eleve.getNumber();
Fichier simple qui "importe" les fonctionnalités
COMMONJS
var rest, mime, eleve;
rest = require('rest');
mime = require('rest/interceptor/mime');
Fichier simple et simple qui "exporte" les fonctionnalités à
l'aide de la variable "module"
(Eleve.js)"
COMMO
NJS
ECMA6 MODULES
export, functions and variables
• export function area(radius) {
return Math.PI * radius * radius;
        }
export PI = Math.PI;
• import, modules
ADVANTAGES
Syntaxe compacte et synchrone
• Chargement asynchrone
• Inclusion du module conditionnel
• Promouvoir la modularisation du
code
• Développement de style API
OBJECT.ASSING
var worker = {};
var isAdult = {
   age: '15',
    getAge: function() {
   console.log(`isAdult $this.age`); 
   }};
Copier le comportement d'un objet vers un autre objet
sans utiliser l'héritage des classes ou de prototypes.
ECMA6
OBJECT.IS
Object.is("foo", "foo"); // true
Object.is(window, window); // true
Object.is("foo", "bar"); // false
Object.is([], []); // false
var test = {a: 1};
Object.is(test, test); // true
Méthode d'objet pour déterminer si deux valeurs ont la
même valeur comme l'opérateur strict de l'égalité.
ECMA6
LES PROMESSES SONT LA FAÇON UNIQUE D'ORGANISER
L'AVENIR, CE QUI REND PRÉVISIBLE ET FIABLE DANS LA
MESURE OÙ CELA EST HUMAINEMENT POSSIBLE.
"HANNAH ARENDT"
PROMISES
 • Une promesse est une valeur
asynchrone
• L'objet Promise est utilisé pour les
calcules  différés et asynchrones
• Une promesse est un espace réservé
pour une future valeur possible
ECMA6
PROMISES
 • Une promesse est une valeur
asynchrone
• L'objet Promise est utilisé pour les
calcules  différés et asynchrones
• Une promesse est un espace réservé
pour une future valeur possible
ECMA6
UTILISER UNE PROMISE
var promise =
Promise.resolve($.ajax('/whatever.json'));
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error: "It broke"
});
ECMA6
Une promesse peut être utilisée en invoquant
la méthode then (), elle accepte une
Le succès et un gestionnaire d'échec comme
arguments.
UTILISER UNE PROMISE
var promise =
Promise.resolve($.ajax('/whatever.json'));
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error: "It broke"
});
ECMA6
Une promesse peut être utilisée en invoquant
la méthode then (), elle accepte une
Le succès et un gestionnaire d'échec comme
arguments.
MERCI !!
@ G A S S T O N
B E L G A C E M B E N L T A I F

Contenu connexe

Similaire à AMD/CommonJs/EcmaScript

Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Dr Samir A. ROUABHI
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovyguest6e3bed
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation GroovyJS Bournival
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mareValtech
 
Introduction à Groovy - OpenSource eXchange 2008
Introduction à Groovy - OpenSource eXchange 2008Introduction à Groovy - OpenSource eXchange 2008
Introduction à Groovy - OpenSource eXchange 2008Guillaume Laforge
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScriptKristen Le Liboux
 
Patterns and OOP in PHP
Patterns and OOP in PHPPatterns and OOP in PHP
Patterns and OOP in PHPjulien pauli
 
La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !
La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !
La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !Paris Salesforce Developer Group
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.jsJulien Giovaresco
 
Introduction au langage Go
Introduction au langage GoIntroduction au langage Go
Introduction au langage GoSylvain Wallez
 
Les tests comportementaux avec aspnet core
Les tests comportementaux avec aspnet coreLes tests comportementaux avec aspnet core
Les tests comportementaux avec aspnet coreArnaud Auroux
 
Design poo togo_jug_final
Design poo togo_jug_finalDesign poo togo_jug_final
Design poo togo_jug_finalDuchess France
 
Design poo togo_jug_final
Design poo togo_jug_finalDesign poo togo_jug_final
Design poo togo_jug_finalagnes_crepet
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Ruau Mickael
 
Test unitaires - refactoring - clean code
Test unitaires - refactoring - clean codeTest unitaires - refactoring - clean code
Test unitaires - refactoring - clean codeHadrien Blanc
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Créer des applications Java avec MongoDB
Créer des applications Java avec MongoDBCréer des applications Java avec MongoDB
Créer des applications Java avec MongoDBMongoDB
 
PHP 5.3, PHP Next
PHP 5.3, PHP NextPHP 5.3, PHP Next
PHP 5.3, PHP NextSQLI
 

Similaire à AMD/CommonJs/EcmaScript (20)

Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
Introduction à Groovy - OpenSource eXchange 2008
Introduction à Groovy - OpenSource eXchange 2008Introduction à Groovy - OpenSource eXchange 2008
Introduction à Groovy - OpenSource eXchange 2008
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Patterns and OOP in PHP
Patterns and OOP in PHPPatterns and OOP in PHP
Patterns and OOP in PHP
 
La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !
La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !
La Tooling API, est-ce pour moi ? Bien sûr, viens voir pourquoi !
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.js
 
Introduction au langage Go
Introduction au langage GoIntroduction au langage Go
Introduction au langage Go
 
Les tests comportementaux avec aspnet core
Les tests comportementaux avec aspnet coreLes tests comportementaux avec aspnet core
Les tests comportementaux avec aspnet core
 
De legacy à symfony
De legacy à symfonyDe legacy à symfony
De legacy à symfony
 
Design poo togo_jug_final
Design poo togo_jug_finalDesign poo togo_jug_final
Design poo togo_jug_final
 
Design poo togo_jug_final
Design poo togo_jug_finalDesign poo togo_jug_final
Design poo togo_jug_final
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
 
Test unitaires - refactoring - clean code
Test unitaires - refactoring - clean codeTest unitaires - refactoring - clean code
Test unitaires - refactoring - clean code
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Créer des applications Java avec MongoDB
Créer des applications Java avec MongoDBCréer des applications Java avec MongoDB
Créer des applications Java avec MongoDB
 
Dynamic Languages
Dynamic LanguagesDynamic Languages
Dynamic Languages
 
PHP 5.3, PHP Next
PHP 5.3, PHP NextPHP 5.3, PHP Next
PHP 5.3, PHP Next
 

Dernier

Actions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdf
Actions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdfActions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdf
Actions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdfalainfahed961
 
présentation sur la logistique (4).
présentation     sur la  logistique (4).présentation     sur la  logistique (4).
présentation sur la logistique (4).FatimaEzzahra753100
 
Câblage, installation et paramétrage d’un réseau informatique.pdf
Câblage, installation et paramétrage d’un réseau informatique.pdfCâblage, installation et paramétrage d’un réseau informatique.pdf
Câblage, installation et paramétrage d’un réseau informatique.pdfmia884611
 
CHAPITRE 2 VARIABLE ALEATOIRE probabilité.ppt
CHAPITRE 2 VARIABLE ALEATOIRE probabilité.pptCHAPITRE 2 VARIABLE ALEATOIRE probabilité.ppt
CHAPITRE 2 VARIABLE ALEATOIRE probabilité.pptbentaha1011
 
SciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdfSKennel
 
Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...
Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...
Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...maach1
 

Dernier (8)

Actions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdf
Actions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdfActions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdf
Actions du vent sur les bâtiments selon lEurocode 1 – Partie 1-4.pdf
 
Note agro-climatique n°2 - 17 Avril 2024
Note agro-climatique n°2 - 17 Avril 2024Note agro-climatique n°2 - 17 Avril 2024
Note agro-climatique n°2 - 17 Avril 2024
 
présentation sur la logistique (4).
présentation     sur la  logistique (4).présentation     sur la  logistique (4).
présentation sur la logistique (4).
 
Câblage, installation et paramétrage d’un réseau informatique.pdf
Câblage, installation et paramétrage d’un réseau informatique.pdfCâblage, installation et paramétrage d’un réseau informatique.pdf
Câblage, installation et paramétrage d’un réseau informatique.pdf
 
CAP2ER_GC_Presentation_Outil_20240422.pptx
CAP2ER_GC_Presentation_Outil_20240422.pptxCAP2ER_GC_Presentation_Outil_20240422.pptx
CAP2ER_GC_Presentation_Outil_20240422.pptx
 
CHAPITRE 2 VARIABLE ALEATOIRE probabilité.ppt
CHAPITRE 2 VARIABLE ALEATOIRE probabilité.pptCHAPITRE 2 VARIABLE ALEATOIRE probabilité.ppt
CHAPITRE 2 VARIABLE ALEATOIRE probabilité.ppt
 
SciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_APC.pdf
 
Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...
Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...
Cours-de-Ponts Cours de Ponts Principes généraux - Conception Méthodes de con...
 

AMD/CommonJs/EcmaScript

  • 1. AMD / COMMONJS / ECMA SCRIPT 6 J A V A S C R I P T Belgacem Ben ltaif
  • 2. @GASSTON Développeur javascript / php / ruby  CTO PowerFul Consulting Consultant technique en digital  Activiste en logicel libre "opensource" Entrepreneur http://gasston-labs.fr https://github.com/gasston   
  • 3. AVANTAGE DU JAVASCRIPT MODULAIRE •Autonome • Évitez la pollution de la portée global (la portée global n'est pas mauvaise!) • Tenir le projet organisé • Améliorer la réutilisabilité du code • API hautement vérifiable et bien définie
  • 4. AMD COMMON JS L E S S O L U T I O N S ?
  • 5. define({            age: "16",            taille: "150"  }); Objet de retour simple en tant que collection de paires nom / valeur. AMD
  • 6. define(function () {      // Do setup work here      return {           color: "black",            size: "unisize"        }     }); Objet de retour avec la mise en œuvre ""privacy"". AMD
  • 7. define(["./notes", "./eleve"],                 function(notes, eleve) {      var code = "675";      var getNote = function(){        return eleve.getNote(code); }; Retourner l'objet avec l'implémentation et les dépendances ." AMD
  • 8. import eleve from collections; eleve.getNumber(); Fichier simple qui "importe" les fonctionnalités COMMONJS
  • 9. var rest, mime, eleve; rest = require('rest'); mime = require('rest/interceptor/mime'); Fichier simple et simple qui "exporte" les fonctionnalités à l'aide de la variable "module" (Eleve.js)" COMMO NJS
  • 10. ECMA6 MODULES export, functions and variables • export function area(radius) { return Math.PI * radius * radius;         } export PI = Math.PI; • import, modules
  • 11. ADVANTAGES Syntaxe compacte et synchrone • Chargement asynchrone • Inclusion du module conditionnel • Promouvoir la modularisation du code • Développement de style API
  • 12. OBJECT.ASSING var worker = {}; var isAdult = {    age: '15',     getAge: function() {    console.log(`isAdult $this.age`);     }}; Copier le comportement d'un objet vers un autre objet sans utiliser l'héritage des classes ou de prototypes. ECMA6
  • 13. OBJECT.IS Object.is("foo", "foo"); // true Object.is(window, window); // true Object.is("foo", "bar"); // false Object.is([], []); // false var test = {a: 1}; Object.is(test, test); // true Méthode d'objet pour déterminer si deux valeurs ont la même valeur comme l'opérateur strict de l'égalité. ECMA6
  • 14. LES PROMESSES SONT LA FAÇON UNIQUE D'ORGANISER L'AVENIR, CE QUI REND PRÉVISIBLE ET FIABLE DANS LA MESURE OÙ CELA EST HUMAINEMENT POSSIBLE. "HANNAH ARENDT"
  • 15. PROMISES  • Une promesse est une valeur asynchrone • L'objet Promise est utilisé pour les calcules  différés et asynchrones • Une promesse est un espace réservé pour une future valeur possible ECMA6
  • 16. PROMISES  • Une promesse est une valeur asynchrone • L'objet Promise est utilisé pour les calcules  différés et asynchrones • Une promesse est un espace réservé pour une future valeur possible ECMA6
  • 17. UTILISER UNE PROMISE var promise = Promise.resolve($.ajax('/whatever.json')); promise.then(function(result) { console.log(result); // "Stuff worked!" }, function(err) { console.log(err); // Error: "It broke" }); ECMA6 Une promesse peut être utilisée en invoquant la méthode then (), elle accepte une Le succès et un gestionnaire d'échec comme arguments.
  • 18. UTILISER UNE PROMISE var promise = Promise.resolve($.ajax('/whatever.json')); promise.then(function(result) { console.log(result); // "Stuff worked!" }, function(err) { console.log(err); // Error: "It broke" }); ECMA6 Une promesse peut être utilisée en invoquant la méthode then (), elle accepte une Le succès et un gestionnaire d'échec comme arguments.
  • 19. MERCI !! @ G A S S T O N B E L G A C E M B E N L T A I F