Organiser son code JavaScript
Qui suis-je ?
Thomas ZILLIOX, développeur web freelance sur Lyon.
- Spécialisé dans l'industrialisation du CSS :
Formation, conseil, mise en place d'outils et de bonnes pratiques. - Développe aussi en JS & PHP ;
- Blog (rarement) sur mon site tzi.fr ;
- Tweete (plus souvent) sur @iamtzi.
Revoir cette présentation en ligne git.io/ModulesJS.
1. Pourquoi organiser
1.A. Pourquoi organiser son code en modules ?
Le but principal est de limiter l'exposition inutile de variables et de fonctions pour :
- Éviter les conflits (et les bugs) ;
- Améliorer la maintenabilité ;
- Permettre la réutilisation de projet en projets ;
- Expliciter les options.
1.B. D'où viennent les conflits ?
Savez-vous ce que va afficher ce script ?
1.B. D'où viennent les conflits ?
L'espace de nommage est partagé entre variables et fonctions.
1.B. D'où viennent les conflits ?
Savez-vous ce que va afficher ce script ?
1.B. D'où viennent les conflits ?
L'espace de nommage est partagé en cascade.
1.B. D'où viennent les conflits ?
Savez-vous ce que va afficher ce script ?
1.B. D'où viennent les conflits ?
L'espace de nommage est lié, il n'est pas figé à la déclaration.
1.B. D'où viennent les conflits ?
L'espace de nommage est celui de déclaration, pas celui d'exécution.
1.B. D'où viennent les conflits ?
L'éxecution d'une fonction crée un nouvel espace de nommage.
2. Écrire des modules
2.A. L'état de l'art des modules JavaScript
L'histoire des modules JavaScript en un slide :
- Pas de modules, un seul fichier
main.js
; - Modules en augmentant l'isolation, 1 module = 1 fichier ;
- Modules en utilisant des patterns CommonJS, AMD, UMD ;
- Modules natifs node ;
- Modules natifs ES6 / ES2015.
2.B. Isoler son code
Les 50 nuances de fonctions.
2.B. Isoler son code
Tous les types natifs JavaScript sont des objets. C'est plus sûr de faire du "casting".
2.B. Isoler son code
Utiliser les fonctions anonymes pour protéger ses variables.
2.B. Isoler son code
Utiliser des fonctions en mode strict.
2.C. Module Vanilla I - Avec isolation
Un modèle pour exposer un service global.
2.C. Module Vanilla I - Avec isolation
Un exemple avec un service de sortie d'écran.
2.D. Module Vanilla II - Avec multi-services
Un modèle pour exposer un ensemble de services.
2.D. Module Vanilla II - Avec multi-services
Un exemple avec un service de sortie d'écran.
2.D. Module Vanilla II - Avec multi-services
Un exemple avec un service de géolocalisation (simplifié).
2.E. Module Vanilla III - Avec multi-instances
Un modèle pour gérer plusieurs instances.
2.E. Module Vanilla III - Avec multi-instances
Un exemple avec un service de sortie d'écran.
2.F. Module Vanilla IV - Avec dépendances dynamiques
Un modèle pour gérer les dépendances.
2.F. Module Vanilla IV - Avec dépendances dynamiques
Un exemple avec un service de sortie d'écran.
2.G. Module Vanilla V - Avec dépendances statiques
Un modèle pour gérer les dépendances statiques.
2.G. Module Vanilla V - Avec dépendances statiques
Un exemple avec un service de sortie d'écran.
2.H. Module AMD I - Avec RequireJS
Un modèle pour gérer des arbres de dépendances.
2.H. Module AMD I - Avec RequireJS
Un exemple avec un service de sortie d'écran.
2.I. Module AMD II - Avec RequireJS
Un modèle AMD avec multi-instances.
2.I. Module AMD II - Avec RequireJS
Un exemple avec un service de sortie d'écran.
3. jQuery plugins
3.A. Pourquoi utiliser des plugins jQuery ?
Le but principal est de limiter / d'améliorer la maintenance :
- Lier facilement du code à un élément DOM ;
- Réduire la quantité de coder en utilisant les APIs jQuery ;
- Augmenter la lisibilité ;
3.B. Plugin jQuery I - Avec multi-éléments
Un modèle pour commencer.
3.B. Plugin jQuery I - Avec multi-éléments
Un exemple avec les liens de partage. Tweet !
3.C. Plugin jQuery II - Avec options
Un modèle qui permet d'avoir des options.
3.C. Plugin jQuery II - Avec options
Un exemple avec les liens de partage. Tweet !
3.D. Plugin jQuery III - Avec sous-actions
Un modèle qui permet de gérer des sous-actions.
3.D. Plugin jQuery III - Avec sous-actions
Un exemple avec les liens de partage. Tweet !
3.E. Plugin jQuery IV - Sans la structure jQuery
Un modèle qui permet d'avoir une gestion globale, et non n instances indépendantes.
3.E. Plugin jQuery IV - Sans la structure jQuery
Un exemple avec les liens de partage. Tweet !