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