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…) .