Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

DIY 2 – Un routeur SPA en JavaScript

Lorsqu’on pense aux frameworks JavaScript modernes comme Angular, React ou Vue, on peut se demander comment l’architecture monopage intègre la navigation dans ses outils offerts aux développeurs. Pour ce deuxième article de la série DIY (Do It Yourself), je vous propose de regarder ensemble comment on peut créer un routeur de navigation comme celui des frameworks populaires.

Le code source de cet article est disponible sur GitLab.

Objectif

Créer un routeur configurable qui charge paresseusement (lazy loading) des composants selon certains paramètres de route de l’URL. Pour des fins académiques, la syntaxe JavaScript ES5 sera utilisée.

Plan

  1. Installer un serveur de test
  2. Créer la structure du projet
  3. Démontrer le module pattern
  4. Créer un chargeur de composant
  5. Créer un routeur
  6. Deux vues
  7. Initialiser et configurer le routeur dans un main

Prérequis

  • Une base avec JavaScript
  • Bonne compréhension de l’OO
  • Node.js

Étape 1 – Installer un serveur de test

Un de mes packages npm favoris est http-server. Il permet de créer une instance de serveur web localement sans configuration. Installez-le via :

Avec cet outil, vous pourrez lancer un serveur dont la racine sera le répertoire en cours.

Étape 2 – Créer la structure du projet

Dans un premier temps, je crois qu’il est primordial de se dessiner une petite architecture sur une napkin. Voici ce que nous allons tenter d’implémenter :

Donc ici, on doit comprendre que l’utilisateur va demander une page spécifique à via l’URL. Puis, le routeur va réagir à l’URL pour déterminer la page à charger. Cette dernière le sera via un chargeur de composant et finalement injectée dans le DOM (Document Objet Model). Lorsque l’utilisateur demandera une nouvelle page, le precessus recommencera :

Dans un répertoire vide, créer les répertoires suivants :

  • scripts
  • views
  • view-models
  • styles

Puis créer un fichier index.html à la racine.

Étape 3 – Démonstration du module pattern

JavaScript n’a pas de concept de membre privé. L’encapsulation est donc légèrement plus difficile à implémenter, mais pas impossible. Pour ce faire, nous devons utiliser le module pattern.

Créer une fonction anonyme :

Vous le savez, les variables déclarées avec var sont de portée fonction, ce qui signifit qu’elles ne sont accessibles que de l’intérieur de la fonction. Ensuite, faites en sorte que cette fonction retourne un objet littéral :

Cet objet servira à exposer les variables et fonctions déclarées à l’intérieur de la fonction anonyme pour les rendre accessibles de l’extérieur. Par exemple :

De cette façon, _privateVariable  est encapsulée. Elle reste accessible lorsqu’on appelle someMethodToBeExposed()  à cause du principe closure et de chaînage de portée (ang.), mais elle est complètement inaccessible de l’extérieur de la fonction anonyme.

On peut s’imaginer cette dernière comme un constructeur. La dernière étape au patron est de rendre cette fonction auto-exécutable ou immediately-invoked function expression (IIFE) (ang.). Pour ce faire, il faut simplement entourer la fonction anonyme de parenthèses, comme pour l’isoler, puis mettre deux autres parenthèses à la suite pour l’appeler.

L’objet JSON retourné peut alors être récupéré dans une variable.

De plus, on pourrait passer des dépendances comme jQuery dans ses paramètres comme ceci :

Étape 4 – Créer un chargeur de composant

La responsabilité unique du chargeur de composant est, comme son nom l’indique, de charger une vue pour l’afficher dans le DOM. Les vues seront stockées dans le répertoire views en HTML.

Étape 5 – Créer un routeur

La responsabilité du routeur est de simplement réagir aux changements de l’URL pour appeler le chargeur de composant avec la bonne vue. Pour ce faire, il faut créer une méthode d’initialisation qui accepte des configurations de route comme ceci :

Une fois la configuration des routes établie par l’appelant, le routeur peut ressembler à ceci :

Étape 6 – Créer deux vues

Chacune des vues de l’application aura une interface en HTML et un module JavaScript responsable de réagir aux comportements de l’utilisateur. Créer simplement une vue et un module ViewModel comme ceci :

Répéter pour une autre vue, par exemple « about ».

Étape 7 – Initialiser et configurer le routeur dans un main

Pour lancer le routeur et l’application par le fait même, il nous faut un autre module. Ce module appelera uniquement la méthode de configuration du routeur.

Puis, intégrer le tout dans index.html

Conslusion

Gosso modo, voici comment fonctionne un routeur d’application monopage. J’espère sincèrement que vous appréciez cette série d’articles qui n’en est qu’à ses balbutiments. Si vous l’avez manqué, vous pouvez relire le premier article qui montre comment créer un module Angular et le publier sur npm de A à Z. Si ce n’est déjà fait, payez-nous une bière pour nous encourager à produire du contenu gratuit et sans pub pour vous 🙂

À la semaine prochaine!

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 11 autres abonnés