Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe


Poster un commentaire

Les modules JavaScript: utilisation pratique

J’ai discuté les différentes architectures de module rencontrées en JavaScript dans un précédent article:

https://amethyste16.wordpress.com/2017/06/24/les-architectures-de-modules-en-javascript/

 

OK, maintenant j’ai créé une série de modules. Comment je les intègre de façon concrète dans un vrai projet?

Il y a je pense 3 options:

  1. Les chargeurs de module
  2. Les constructeurs de bundle
  3. Chargement via des <script>

La première installe dans le site lui-même un chargeur de module, comme par exemple RequireJS, qui s’occupera de charger le module et l’ensemble de ses dépendances.

La deuxième vise à rassembler dans un même fichier le module et l’ensemble de ses dépendances dans l’ordre qui convient. On créée un nouveau fichier, appelons le bundle.js, qui est le résultat de la « bundlelisation ». On n’a alors plus besoin de référencer de chargeurs de module, il suffit de référencer bundle.js directement.

La dernière est la méthode traditionnelle si je puis dire. On a N fichiers *.js à charger, on écrit N déclarations <script> et on gère à la main le bon ordre. C’est très simple, très utilisé, mais peut devenir vite laborieux.

Surtout cette méthode encourage guère à écrire des modules propres, c’est à dire avec une empreinte minimale sur le scope global. Laissons de côté cette méthode qui ne concerne en rien cet article.

Lire la suite


Poster un commentaire

Les architectures de modules en JavaScript

Les bonnes pratiques modernes de codage en JavaScript poussent de plus en plus vers la structuration du code en modules. En général on débute avec les modules est via certains patterns comme Revealling Pattern Module (RPM), mais il est important de connaître d’autres architectures plus performantes.

Les 4 plus fréquentes sont les suivants:

  1. Revealling Pattern module (UMD)
  2. CommonJS
  3. AMD
  4. Modules ES6

 

RPM est pour l’essentiel l’exploitation des capacités de closure proposées par les fonctions Javascript tandis que les modules ES6 sont des extensions du langage… mais des extensions assez récentes donc pas toujours supportées. On les trouvent mises en œuvre dans TypeScript par exemple.

 

CommonJS et AMD c’est différent, il s’agit de spécifications. Pour les mettre en œuvre on doit utiliser un framework capable de gérer des modules au format CommonJS ou AMD. Différents chargeur de script existent à cet effet, mais certains sont plus typiques que d’autres.

CommonJS est étroitement lié à NodeJS par exemple, tandis que vous profiterez des joies de AMD avec RequireJS ou Angular 1. Mais cela ne se traduit pas par des barrières pour autant. Un chargeur de scripts est après tout lui-même un module.

Par ailleurs, les chargeurs de scripts sont souvent capables de prendre en charge plusieurs formats.

 

Mais pourquoi plusieurs définitions de modules?

C’est une question de choix personnel et les besoins ne sont pas forcément les même d’ailleurs. Les différents formats de modules ne correspondent pas à des bonnes pratiques ou des patterns en tant que tels. Il s’agit simplement d’implémentations différentes de l’idée de module.

Par exemple CommonJS charge les dépendances de façon synchrone ce qui n’est pas une option favorable dans un contexte Web où l’on préfèrera AMD ou ES6. ES6 n’est pas supporté par tous les navigateurs par contre.

 

Je propose de présenter une démonstration complète de ces 3 architectures dans cet article. Au menu:

  • Préparation de l’environnement de test
    Projet de test
    Serveur web
  • CommonJS
    Démo Node
    Démo Web avec SystemJS
  • AMD
    Démo Node avec RequireJS
    Démo Web
  • ES6

Lire la suite


Poster un commentaire

Angular 1: les directives

Après les services, le binding et les routes, les directives sont le dernier grand pilier de l’architecture Angular. Partons à leur découverte ce qui clôturera ma série de tutoriel Angular 1 avant d’attaquer Angular 2.

Pour des raisons que j’ignore, la majorité des exemples que je trouve sur le net sont, me semble t’il, très compliqués. Je préfère nettement faire 10 démos très simples, plutôt qu’une seule qui démontre 10 concepts en même temps.

 

Alors c’est quoi?

Les sites modernes ne se contentent plus d’utiliser HTML comme un langage statique de description de pages. On a besoin de transformer HTML en véritable langage et notamment disposer d’un support pour l’extensibilité.

En attendant l’arrivée future des Web Component, les directives Angular fournissent une alternative qui a le mérite de fonctionner pour tous les navigateurs ou presque.

De façon très simple, les directives sont un outil pour étendre les fonctionnalités d’HTML.

Lire la suite


Poster un commentaire

Controller As en Angular

La syntaxe controller As est une nouvelle syntaxe qui offre une alternative à $scope depuis la version 1.2.0 d’Angular et permet de remplacer une construction Angular en code JavaScript un peu plus standard.

On va se faire la main sur un contrôleur très simple, celui du menu trouvé dans le projet de routage déjà présenté:

https://plnkr.co/edit/LjiLN6jT9fKso4nWkslC?p=info

Lire la suite


Poster un commentaire

Angular 1: le routage

Je continue ma série Angular avec le routage. Un outil indispensable pour écrire des Single Page Applications (SPA).

Angular propose un service de navigation dans une application SPA appelée ngRoute. Une route est simplement une correspondance entre une url de l’application et un couple vue/contrôleur.

 

NgRoute met à notre disposition un gestionnaire de routes Angular qui permet de configurer la table de routage.

Celle-ci est normalement mise en place dans un bloc de code Angular (une configuration) pour être chargée dès le démarrage de l’application. Ainsi chaque fois qu’une route est réclamée, en général en cliquant sur un lien, Angular sera capable de ‘rediriger’ l’application vers le lien associé.

Souvenez vous bien que dans tous les cas on reste en fait sur la même page, c’est juste l’expérience utilisateur qui donne l’illusion d’une navigation sur le site.

Lire la suite