Design patterns en JS Maxime Durand – Romain Petit 04/06/2013 Plan

• Problème auquel répond l’utilisation de • 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 « A Pattern Language » en 1977 • Petit à petit utilisation de ce document par les développeurs « pros » pendant 30 ans • En 1995 « : 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-/ • « 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 ▫ ▫ Factory Pattern ▫ Mixin 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 ▫ ▫ Facade Pattern ▫ Observer Pattern ▫ 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…)