SlideShare une entreprise Scribd logo
Javascript


    La POO
Bonnes pratiques




       Jean-pierre VINCENT (indépendant)
Qui ça ?
     Jean-pierre VINCENT

braincracking.org (veille techno)
@theystolemynick

12 ans de Web
Expertise technique, formateur,
consultant
Voici John l'ingénieur
Lvl 1 : décorateur de page
Lvl 1 : décorateur de page

<script>
$('#id').randomPlugin();
</script>
Démo plugin easySlider
Moralité


JavaScript ça se copie / colle
Lvl 2 : scripteur
Lvl 2 : scripteur
<script>
function init( id ) {
    $(id).randomPlugin();
};

$(document).ready( function() {
    init( '#main' );
    init( '#side' );
});
</script>
Lvl 2 : scripteur débogueur
Ajouts :

●
 Pubs
●
 Widgets sociaux
●
 Trackers
●
 Autres plugins
●
 Autres scripts maison
Lvl 2 : scripteur débogueur
Ajouts :

●
 Pubs
●
 Widgets sociaux
●
 Trackers
●
 Autres plugins
●
 Autres scripts maison
Lvl 2 : scripteur débogueur
<script>
function init( id ) {
    $(id).randomPlugin();
};

// init se fait écraser
$(document).ready( function() {
    init( '#main' );
    init( '#side' );
});
</script>
Pollution globale
Pollution globale
2 exemples complètement au hasard
●
 Gmail : 33 variables globales (450K lignes
de code)


●
    Lemonde.fr : 480 variables globales
Actions
✓pattern module anonyme + var

✗ Function action() {}
✓ var action = function() {
      var myVariable;
  }

✓namespaces
Création d'un scope
Rappel
(function(){ // début de scope local
     var private = true;

    // ici je suis chez moi

})(); // fin de scope local
Lvl 3 : scripteur prudent
Correction 1
(function(){ // début de scope local
     var init = function( id ) {
          $(id).randomPlugin();
     };
     $(document).ready( function() {
         init( '#main' );
         init( '#side' );
     });
})(); // fin de scope local
Namespaces
var MY = {};
Namespaces
var MY = {};

MY.init = function() {};
Namespaces
var MY = {};

MY.init = function() {};

MY.utils = {};
Namespaces
var MY = {};

MY.init = function() {};

MY.utils = {};

MY.utils.XHR = function() {};
Namespaces
var MY = {};

MY.init = function() {};

MY.utils = {};

MY.utils.XHR = function() {};

MY.utils.XHR.instances = {};
Namespaces - astuce

récupérer ou créer un namespace

MY = window.MY || {};

MY.utils = MY.utils || {};
Lvl 4 scripteur organisé
(function(){
     MY = window.MY || {};
     MY.init = function( id ) {
         $(id).randomPlugin();
    };
})( );
$(document).ready( function() {
    MY.init( '#main' );
    MY.init( '#side' );
});
Lvl 4 scripteur organisé


Démo code final namespaces
Lvl 5 : développeur
Programmation
Orienté
Objet
POO Classique
new, class, static, public,
private, __construct, $this,
const, self::, extends,
protected, parent::,
abstract, final, interface,
implements, instanceof
POO JS
    EcmaScript 3

new (optionnel)
this (particulier)
instanceof
POO JS

new (optionel)
this (particulier)
instanceof

  Rien n'est littéral
  Tout est simulable
Le choix

Prototype ou closure ?
Le choix
Prototype ou closure ?

●
    Prototype :
       • The JS way
       • performance (grand nombres)

●
    Closure :
       • variables privées
       • plus lisible ?
Closure
myClass = function () {
  var privateVariable = 0;
  // public methods




};
Closure
myClass = function () {
   var privateVariable = 0;
   // public methods
   return {
     decrement:function() {
        console.log( --privateVariable );
     },
     increment:function() {
        console.log( ++privateVariable );
     }
   }
};
Renvoi d'objets
myClass = function () {
   return {
     decrement:function() {   },
     increment:function() {   }
   }
};
myObject = myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
myObject2 = myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2
Lvl 5 : développeur


 Démo « interface publique »
Implémentation d'un « next »
Lvl 6 : développeur
Développeur
    DHTML
    AJAX
    2.0
    HTML5 !
Lvl 6 : programmation
     événementielle


Démo « événements »
Tout est émulable
●
    Pattern factory
Statiques
myClass = function () {
   return {
     publicMethod:function() {}
   }
};
myClass.staticMethod = function() {};
Statiques
myClass = function () {
   return {
     publicMethod:function() {}
   }
};
myClass.staticMethod = function() {};

myObject = myClass();
MyClass .staticMethod();    // OK
MyObject .publicMethod();   // OK
Statiques
myClass = function () {
   return {
     publicMethod:function() {}
   }
};
myClass.staticMethod = function() {};

myObject   = myClass();
MyClass    .staticMethod();   //   OK
MyObject   .publicMethod();   //   OK
MyObject   .staticMethod();   //   Error
MyClass    .publicMethod();   //   Error
Factory



Démo « factory »
Lvl 6 : développeur objet
Tout est émulable
●
  programmation évènementielle
●
  patterns classiques :
   ●
     MVC,
    ●
        observer,
    ●
        facade, proxy,
    ●
        singleton, factory ...
Librairies

 Frameworks divers :
●
  Tests U
●
  Events
●
  MVC
●
  Data-bindings
Librairies
Conclusion

●
    Javascript est différent, apprenez le

●
    OOP réutilisable
Questions ?

Jean-pierre VINCENT
braincracking.org
@theystolemynick

RDV maintenant :
stand Generative Objects
(N° 55 à côté HP)
Function.prototype
Tout est objet
"abc".indexOf('a'); // 0

[1,2,3].slice(1); // [2, 3]

13.3714 .toFixed(1); // "13.4"

/[0-9]/g.test('10/11/2011'); // true
Function.prototype
Tout est objet
var myFunction = function() {};

myFunction.prototype; // object
Function.prototype
var myClass = function () {
   // pas de variable privée
   this.publicVariable = 0;
};
myClass.prototype = {
   decrement:function() {
     console.log( --this.publicVariable );
   },
   increment:function() {
     console.log( ++this.publicVariable );
   }
};
Héritage
var subClass = function() {
     this.publicVariable = 10;
};

subClass.prototype = myClass.prototype;
Héritage
var subClass = function() {
     this.publicVariable = 10;
};

subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
Héritage
var subClass = function() {
     this.publicVariable = 10;
};

subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;


myObject2 = new subClass();
myObject2.increment(); // 11
myObject2.increment(); // 12
Héritage
var subClass = function() {
     this.publicVariable = 10;
};

subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
subClass.prototype.square = function(){}

myObject2 = new subClass();
myObject2.square(); // 100
Héritage
var subClass = function() {
     this.publicVariable = 10;
};

subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
subClass.prototype.square = function(){}

myObject2 = new subClass();
myObject2.square(); // 100

Contenu connexe

Tendances

Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
Kristen Le Liboux
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
Jean-Pierre Vincent
 
PHP 7 et Symfony 3
PHP 7 et Symfony 3PHP 7 et Symfony 3
PHP 7 et Symfony 3
Eddy RICHARD
 
Nouveautés php 7
Nouveautés php 7Nouveautés php 7
Nouveautés php 7
Cyrille Grandval
 
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
 
Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?
Ruau Mickael
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6Julien CROUZET
 
Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?
Ruau Mickael
 
Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
Julien CROUZET
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
davrous
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
Abdoulaye Dieng
 
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Stéphanie Hertrich
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
Abbes Rharrab
 
Présentation JavaScript
Présentation JavaScriptPrésentation JavaScript
Présentation JavaScript
tarkan_
 

Tendances (20)

Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
PHP 7 et Symfony 3
PHP 7 et Symfony 3PHP 7 et Symfony 3
PHP 7 et Symfony 3
 
Nouveautés php 7
Nouveautés php 7Nouveautés php 7
Nouveautés php 7
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
 
Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?
 
Cours php
Cours phpCours php
Cours php
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6
 
Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?
 
Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Javascript
JavascriptJavascript
Javascript
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 
Présentation JavaScript
Présentation JavaScriptPrésentation JavaScript
Présentation JavaScript
 

En vedette

Ce bon vieux propel
Ce bon vieux propelCe bon vieux propel
Ce bon vieux propel
Francois Zaninotto
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
Quelle solution technique pour un projet web ?
Quelle solution technique pour un projet web ?Quelle solution technique pour un projet web ?
Quelle solution technique pour un projet web ?
Core-Techs
 
Frameworks : A history of violence
Frameworks : A history of violenceFrameworks : A history of violence
Frameworks : A history of violence
Francois Zaninotto
 
Developing for Developers
Developing for DevelopersDeveloping for Developers
Developing for Developers
Francois Zaninotto
 
Symfony2 meets propel 1.5
Symfony2 meets propel 1.5Symfony2 meets propel 1.5
Symfony2 meets propel 1.5
Francois Zaninotto
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 

En vedette (7)

Ce bon vieux propel
Ce bon vieux propelCe bon vieux propel
Ce bon vieux propel
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
 
Quelle solution technique pour un projet web ?
Quelle solution technique pour un projet web ?Quelle solution technique pour un projet web ?
Quelle solution technique pour un projet web ?
 
Frameworks : A history of violence
Frameworks : A history of violenceFrameworks : A history of violence
Frameworks : A history of violence
 
Developing for Developers
Developing for DevelopersDeveloping for Developers
Developing for Developers
 
Symfony2 meets propel 1.5
Symfony2 meets propel 1.5Symfony2 meets propel 1.5
Symfony2 meets propel 1.5
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 

Similaire à Patterns et bonnes pratiques autour de JavaScript

Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
neuros
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Olivier Le Goaër
 
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
Valtech
 
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
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 
Open close principle, on a dit étendre, pas extends !
Open close principle, on a dit étendre, pas extends !Open close principle, on a dit étendre, pas extends !
Open close principle, on a dit étendre, pas extends !
Engineor
 
Patterns and OOP in PHP
Patterns and OOP in PHPPatterns and OOP in PHP
Patterns and OOP in PHPjulien pauli
 
JQuery
JQueryJQuery
Programmation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulationProgrammation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulation
ECAM Brussels Engineering School
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
zaghir
 
Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?
FlorianBoulay
 
Algo poo ts
Algo poo tsAlgo poo ts
Algo poo ts
mohamed El babili
 
Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet Spartan
Microsoft
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
Raphaël Semeteys
 
Android Optimisations Greendroid
Android Optimisations GreendroidAndroid Optimisations Greendroid
Android Optimisations GreendroidGDG Nantes
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovyguest6e3bed
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation GroovyJS Bournival
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 

Similaire à Patterns et bonnes pratiques autour de JavaScript (20)

Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
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
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
Open close principle, on a dit étendre, pas extends !
Open close principle, on a dit étendre, pas extends !Open close principle, on a dit étendre, pas extends !
Open close principle, on a dit étendre, pas extends !
 
Patterns and OOP in PHP
Patterns and OOP in PHPPatterns and OOP in PHP
Patterns and OOP in PHP
 
JQuery
JQueryJQuery
JQuery
 
Programmation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulationProgrammation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulation
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
 
Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?
 
Algo poo ts
Algo poo tsAlgo poo ts
Algo poo ts
 
Playing With PHP 5.3
Playing With PHP 5.3Playing With PHP 5.3
Playing With PHP 5.3
 
Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet Spartan
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
 
Android Optimisations Greendroid
Android Optimisations GreendroidAndroid Optimisations Greendroid
Android Optimisations Greendroid
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 

Plus de Microsoft Technet France

Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Microsoft Technet France
 
Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10
Microsoft Technet France
 
OMS log search au quotidien
OMS log search au quotidienOMS log search au quotidien
OMS log search au quotidien
Microsoft Technet France
 
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
 Fusion, Acquisition - Optimisez la migration et la continuité des outils col... Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
Microsoft Technet France
 
Wavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semainesWavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semaines
Microsoft Technet France
 
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités AzureRetour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
Microsoft Technet France
 
Scénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + SecurityScénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + Security
Microsoft Technet France
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
Microsoft Technet France
 
Stockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le mondeStockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le monde
Microsoft Technet France
 
Bien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a ServiceBien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a Service
Microsoft Technet France
 
Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365
Microsoft Technet France
 
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Microsoft Technet France
 
Comprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de MicrosoftComprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de Microsoft
Microsoft Technet France
 
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Microsoft Technet France
 
Sécurité des données
Sécurité des donnéesSécurité des données
Sécurité des données
Microsoft Technet France
 
Déploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloudDéploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloud
Microsoft Technet France
 
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Microsoft Technet France
 
SharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybridesSharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybrides
Microsoft Technet France
 
Gestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderneGestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderne
Microsoft Technet France
 
Office 365 dans votre Système d'Informations
Office 365 dans votre Système d'InformationsOffice 365 dans votre Système d'Informations
Office 365 dans votre Système d'Informations
Microsoft Technet France
 

Plus de Microsoft Technet France (20)

Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
 
Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10
 
OMS log search au quotidien
OMS log search au quotidienOMS log search au quotidien
OMS log search au quotidien
 
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
 Fusion, Acquisition - Optimisez la migration et la continuité des outils col... Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
 
Wavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semainesWavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semaines
 
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités AzureRetour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
 
Scénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + SecurityScénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + Security
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
 
Stockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le mondeStockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le monde
 
Bien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a ServiceBien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a Service
 
Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365
 
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
 
Comprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de MicrosoftComprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de Microsoft
 
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
 
Sécurité des données
Sécurité des donnéesSécurité des données
Sécurité des données
 
Déploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloudDéploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloud
 
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
 
SharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybridesSharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybrides
 
Gestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderneGestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderne
 
Office 365 dans votre Système d'Informations
Office 365 dans votre Système d'InformationsOffice 365 dans votre Système d'Informations
Office 365 dans votre Système d'Informations
 

Patterns et bonnes pratiques autour de JavaScript

  • 1. Javascript La POO Bonnes pratiques Jean-pierre VINCENT (indépendant)
  • 2. Qui ça ? Jean-pierre VINCENT braincracking.org (veille techno) @theystolemynick 12 ans de Web Expertise technique, formateur, consultant
  • 3.
  • 5. Lvl 1 : décorateur de page
  • 6.
  • 7.
  • 8. Lvl 1 : décorateur de page <script> $('#id').randomPlugin(); </script>
  • 11. Lvl 2 : scripteur
  • 12. Lvl 2 : scripteur <script> function init( id ) { $(id).randomPlugin(); }; $(document).ready( function() { init( '#main' ); init( '#side' ); }); </script>
  • 13. Lvl 2 : scripteur débogueur Ajouts : ● Pubs ● Widgets sociaux ● Trackers ● Autres plugins ● Autres scripts maison
  • 14. Lvl 2 : scripteur débogueur Ajouts : ● Pubs ● Widgets sociaux ● Trackers ● Autres plugins ● Autres scripts maison
  • 15. Lvl 2 : scripteur débogueur <script> function init( id ) { $(id).randomPlugin(); }; // init se fait écraser $(document).ready( function() { init( '#main' ); init( '#side' ); }); </script>
  • 17. Pollution globale 2 exemples complètement au hasard ● Gmail : 33 variables globales (450K lignes de code) ● Lemonde.fr : 480 variables globales
  • 18. Actions ✓pattern module anonyme + var ✗ Function action() {} ✓ var action = function() { var myVariable; } ✓namespaces
  • 19. Création d'un scope Rappel (function(){ // début de scope local var private = true; // ici je suis chez moi })(); // fin de scope local
  • 20. Lvl 3 : scripteur prudent Correction 1 (function(){ // début de scope local var init = function( id ) { $(id).randomPlugin(); }; $(document).ready( function() { init( '#main' ); init( '#side' ); }); })(); // fin de scope local
  • 22. Namespaces var MY = {}; MY.init = function() {};
  • 23. Namespaces var MY = {}; MY.init = function() {}; MY.utils = {};
  • 24. Namespaces var MY = {}; MY.init = function() {}; MY.utils = {}; MY.utils.XHR = function() {};
  • 25. Namespaces var MY = {}; MY.init = function() {}; MY.utils = {}; MY.utils.XHR = function() {}; MY.utils.XHR.instances = {};
  • 26. Namespaces - astuce récupérer ou créer un namespace MY = window.MY || {}; MY.utils = MY.utils || {};
  • 27. Lvl 4 scripteur organisé (function(){ MY = window.MY || {}; MY.init = function( id ) { $(id).randomPlugin(); }; })( ); $(document).ready( function() { MY.init( '#main' ); MY.init( '#side' ); });
  • 28. Lvl 4 scripteur organisé Démo code final namespaces
  • 29. Lvl 5 : développeur
  • 31. POO Classique new, class, static, public, private, __construct, $this, const, self::, extends, protected, parent::, abstract, final, interface, implements, instanceof
  • 32. POO JS EcmaScript 3 new (optionnel) this (particulier) instanceof
  • 33. POO JS new (optionel) this (particulier) instanceof Rien n'est littéral Tout est simulable
  • 35. Le choix Prototype ou closure ? ● Prototype : • The JS way • performance (grand nombres) ● Closure : • variables privées • plus lisible ?
  • 36. Closure myClass = function () { var privateVariable = 0; // public methods };
  • 37. Closure myClass = function () { var privateVariable = 0; // public methods return { decrement:function() { console.log( --privateVariable ); }, increment:function() { console.log( ++privateVariable ); } } };
  • 38. Renvoi d'objets myClass = function () { return { decrement:function() { }, increment:function() { } } }; myObject = myClass(); myObject.decrement(); // -1 myObject.decrement(); // -2 myObject2 = myClass(); myObject2.increment(); // 1 myObject2.increment(); // 2
  • 39. Lvl 5 : développeur Démo « interface publique » Implémentation d'un « next »
  • 40. Lvl 6 : développeur Développeur DHTML AJAX 2.0 HTML5 !
  • 41. Lvl 6 : programmation événementielle Démo « événements »
  • 42. Tout est émulable ● Pattern factory
  • 43. Statiques myClass = function () { return { publicMethod:function() {} } }; myClass.staticMethod = function() {};
  • 44. Statiques myClass = function () { return { publicMethod:function() {} } }; myClass.staticMethod = function() {}; myObject = myClass(); MyClass .staticMethod(); // OK MyObject .publicMethod(); // OK
  • 45. Statiques myClass = function () { return { publicMethod:function() {} } }; myClass.staticMethod = function() {}; myObject = myClass(); MyClass .staticMethod(); // OK MyObject .publicMethod(); // OK MyObject .staticMethod(); // Error MyClass .publicMethod(); // Error
  • 47. Lvl 6 : développeur objet
  • 48. Tout est émulable ● programmation évènementielle ● patterns classiques : ● MVC, ● observer, ● facade, proxy, ● singleton, factory ...
  • 49. Librairies Frameworks divers : ● Tests U ● Events ● MVC ● Data-bindings
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 57. Conclusion ● Javascript est différent, apprenez le ● OOP réutilisable
  • 58. Questions ? Jean-pierre VINCENT braincracking.org @theystolemynick RDV maintenant : stand Generative Objects (N° 55 à côté HP)
  • 60. Tout est objet "abc".indexOf('a'); // 0 [1,2,3].slice(1); // [2, 3] 13.3714 .toFixed(1); // "13.4" /[0-9]/g.test('10/11/2011'); // true
  • 61. Function.prototype Tout est objet var myFunction = function() {}; myFunction.prototype; // object
  • 62. Function.prototype var myClass = function () { // pas de variable privée this.publicVariable = 0; }; myClass.prototype = { decrement:function() { console.log( --this.publicVariable ); }, increment:function() { console.log( ++this.publicVariable ); } };
  • 63. Héritage var subClass = function() { this.publicVariable = 10; }; subClass.prototype = myClass.prototype;
  • 64. Héritage var subClass = function() { this.publicVariable = 10; }; subClass.prototype = myClass.prototype; subClass.prototype.constructor= subClass;
  • 65. Héritage var subClass = function() { this.publicVariable = 10; }; subClass.prototype = myClass.prototype; subClass.prototype.constructor= subClass; myObject2 = new subClass(); myObject2.increment(); // 11 myObject2.increment(); // 12
  • 66. Héritage var subClass = function() { this.publicVariable = 10; }; subClass.prototype = myClass.prototype; subClass.prototype.constructor= subClass; subClass.prototype.square = function(){} myObject2 = new subClass(); myObject2.square(); // 100
  • 67. Héritage var subClass = function() { this.publicVariable = 10; }; subClass.prototype = myClass.prototype; subClass.prototype.constructor= subClass; subClass.prototype.square = function(){} myObject2 = new subClass(); myObject2.square(); // 100

Notes de l'éditeur

  1. 2/7/12
  2. 2/7/12
  3. 2/7/12
  4. 2/7/12
  5. 2/7/12
  6. 2/7/12
  7. 2/7/12
  8. 2/7/12
  9. 2/7/12
  10. 2/7/12
  11. 2/7/12
  12. 2/7/12
  13. 2/7/12
  14. 2/7/12
  15. 2/7/12
  16. 2/7/12
  17. 2/7/12
  18. 2/7/12
  19. 2/7/12
  20. 2/7/12
  21. 2/7/12
  22. 2/7/12
  23. 2/7/12
  24. 2/7/12
  25. 2/7/12
  26. 2/7/12
  27. 2/7/12
  28. 2/7/12
  29. 2/7/12
  30. 2/7/12
  31. 2/7/12
  32. 2/7/12
  33. 2/7/12
  34. 2/7/12
  35. 2/7/12
  36. 2/7/12
  37. 2/7/12
  38. 2/7/12
  39. 2/7/12
  40. 2/7/12
  41. 2/7/12
  42. 2/7/12
  43. 2/7/12
  44. 2/7/12
  45. 2/7/12
  46. 2/7/12
  47. 2/7/12
  48. 2/7/12
  49. 2/7/12
  50. 2/7/12
  51. 2/7/12
  52. 2/7/12
  53. 2/7/12
  54. 2/7/12
  55. 2/7/12
  56. 2/7/12
  57. 2/7/12
  58. 2/7/12
  59. 2/7/12
  60. 2/7/12
  61. 2/7/12
  62. 2/7/12
  63. 2/7/12
  64. 2/7/12
  65. 2/7/12
  66. 2/7/12
  67. 2/7/12