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/essentialjsdesi gnpatterns/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…)