Design patterns en JS Maxime Durand – Romain Petit
04/06/2013
Plan
• Problème auquel répond l’utilisation de Design Pattern
• Etat de l'art
• Description
▫ Carte d'identité
▫ Généralités
▫ Utilisation
• Démo
• Conclusion
Problème auquel répond l’utilisation
de Design Pattern
• Répétition de code
• Structure de code
▫ Lisible
▫ Structuré
• Optimisations
• Aide à la conception
Etat de l’art
• Premières esquisses de Design Pattern par Christopher Alexander « A Pattern Language » en 1977
• Petit à petit utilisation de ce document par les développeurs « pros » pendant 30 ans
• En 1995 « Design Patterns: Elements of Reusable Object-Oriented Software » par le Gang of Four
• Utilisation de Design Pattern dans beaucoup d’entreprises
Carte d’identité
• Les patterns : ▫ sont des solutions éprouvées ▫ sont facilement réutilisables ▫ sont expressifs ▫ se « reposent » sur l’expérience combinée de
nombreux développeurs. On ne réinvente pas la roue.
• Optimisations du code • Attention : ce ne sont pas des solutions exactes
qui fonctionnent tout le temps
URLs et livres
• Très bon ebook (EN) de Addy Osmani qui est un développeur de Chrome :
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
• Tutorial pour les 3 patterns les plus utilisés : http://net.tutsplus.com/tutorials/javascript-
ajax/digging-into-design-patterns-in-javascript/ • « Patterns Of Enterprise Application
Architecture » par Martin Fowler • « JavaScript Patterns » par Stoyan Stefanov
Généralités
• Principe de fonctionnement
▫ Le nom du patron sert de vocabulaire commun entre le concepteur et le programmeur
▫ Pattern Singleton (instanciation d'une classe à un objet unique), Factory (interface générique pour créer des objets) etc
Généralités
• Architecture ▫ Nom et description ▫ Contexte ▫ Enoncé du problème ▫ Solution ▫ Conception ▫ Mise en œuvre ▫ Illustrations ▫ Exemples ▫ Relations ▫ Utilisations connues ▫ Discussions
Généralités
• JavaScript Design Patterns ▫ Constructor Pattern ▫ Module Pattern ▫ Revealing Module Pattern ▫ Singleton Pattern ▫ Observer Pattern ▫ Mediator Pattern ▫ Prototype Pattern ▫ Command Pattern ▫ Facade Pattern ▫ Factory Pattern ▫ Mixin Pattern ▫ Decorator Pattern ▫ Flyweight Pattern
Généralités
• JavaScript MV* Patterns
▫ MVC Pattern
▫ MVP Pattern
▫ MVVM Pattern
• Modern Modular JavaScript Design Patterns
▫ AMD
▫ CommonJS
▫ ES Harmony
Généralités
• Design Patterns In jQuery
▫ Composite Pattern
▫ Adapter Pattern
▫ Facade Pattern
▫ Observer Pattern
▫ Iterator Pattern
▫ Lazy Initialization Pattern
▫ Proxy Pattern
▫ Builder Pattern
Spécificité
• Quelques exemples de patterns (leurs implémentations en JS)
▫ Pattern Création
▫ Pattern Module
▫ Pattern Singleton
▫ Pattern MVP/MVC/MVVM
Exemples de Code
• Pattern Creation (utilisation sans prototype)
Exemples de Code
• Pattern Creation (utilisation avec prototype)
Exemples de Code
• Pattern Module ▫ Le pattern Module permet à l’origine de définir des
méthodes privées et publiques pour les classes dans les langages objets. En javascript, il émule le concept de classe.
▫ Exemple de module se contenant lui même. la variable counter est privée. les méthodes incrementCounter et resetCounter sont publiques.
▫ ExtJs et Dojo permettent de créer des modules.
Exemples de Code
• Pattern Module
Pattern Singleton :
Pattern Singleton
Pattern MVC/MVP/MVVM: Il n’existe pas d’implémentation prédéfinie en javascript pour faire une application javascript avec le pattern MVC/MVP/MVVM. L’utilisation de BackBone ou de KnockoutJS permet l’implémentation d’applications de type MVC/MVP/MVVM.
Démo
Conclusion
• Se reposer sur l’expérience de développeurs qui ont réfléchis sur ces problèmes pendant des années
• Essentiel de savoir comment et quand les utiliser.
• Étudier les avantages et les inconvénients de chaque modèle avant de les employer.
Conclusion
• Avantages :
Optimisés : code robuste, performante et propre
• Désavantages :
Plus long à développer (chercher les pour et les contre de chaque pattern, les comprendre…)