Préface de Hubert Sablonnière - Développeur et conférencier spécialiste du Web
Postface de Wassim Chegham - Sr. JavaScript Developer Advocate Engineer chez Microsoft

Les années 2010 ont bouleversé à jamais le développement web. HTML5, ECMAScript 6, les Web Components et de nombreuses nouvelles capacités permettent enfin de créer nativement des applications ambitieuses et performantes. Pourtant, l'ensemble du secteur donne aujourd'hui l'impression de se résumer à un trio Angular-React-Vue.

Un courant de développement web moderne questionne l'importance de ces frameworks et bibliothèques en s’appuyant sur les innovations les plus récentes. Pourquoi avoir ajouté tant de complexité ? Devrions-nous persévérer dans cette direction ? Les capacités natives de la plateforme ne pourraient-elles pas suffire ?

S'inscrivant dans la continuité de ce mouvement, ce livre permet à chacun, du développeur web débutant (disposant d'une première expérience de JavaScript et HTML), à l'architecte le plus confirmé, d'adopter une plus large perspective du développement applicatif web, en trois étapes. En décomposant les bases communes à toute application web moderne, ce livre expose une approche originale permettant d'appréhender le développement web moderne dans son ensemble.

Dans les deux premiers chapitres, l'auteur revient tout d'abord sur l'histoire et l'organisation du Web (et ses standards) ainsi que sur les navigateurs, permettant ainsi au lecteur de mieux comprendre la situation actuelle et d'anticiper les évolutions futures.

Les quatre chapitres qui suivent, constituant le cœur de l'ouvrage, présentent pas-à-pas et à l'aide d'exemples actuels et concrets, les éléments les plus fondamentaux du développement applicatif : la programmation orientée composant, les Web Components, le routage des applications monopages et enfin le rendering.

Pour finir, un ultime chapitre répertorie et met en perspective les approches architecturales concrètes applicables au quotidien, illustrées par une présentation complète de nombreuses micro-bibliothèques.

Le code source des exemples du livre est disponible en téléchargement sur le site www.editions-eni.fr et des compléments sont disponibles sur le site de l’auteur fullweb.dev.

Téléchargements

• DPAWM (2 422 Ko)

Préface

1. Déconstruire pour ensuite mieux (re)construire

Introduction

1. Pourquoi ce livre ?
   1. 1. État des lieux
   2. 2. Approche générale
   3. 3. Modernité et minimalisme
   4. 4. À qui s’adresse ce livre ?
2. Contenu
   1. 1. Déroulement
   2. 2. Chapitres
   3. 3. Conseils de lecture

Comprendre l’histoire du Web et de ses standards

1. Être un "bon citoyen" du Web
2. IETF, les réseaux et Internet
   1. 1. Origines de la standardisation des réseaux
   2. 2. Indépendance et internationalisation
   3. 3. RFC : un fondamental de la collaboration
3. Invention de l’hypertexte
   1. 1. Modéliser la connaissance
   2. 2. Première implémentation
4. Origines du Web
5. W3C, standardiser et promouvoir le Web
   1. 1. Origines (1991-1997)
   2. 2. Fonctionnement
   3. 3. Organisation générale
   4. 4. Préévaluation par la communauté
   5. 5. Élaboration des recommandations
   6. 6. Working groups
6. WHATWG, HTML et DOM
   1. 1. Critiques et dissensions au W3C
   2. 2. Le Web comme plateforme de développementapplicatif
   3. 3. Ouverture et réconciliation
   4. 4. Domaines d’autorité
   5. 5. Développement continu
   6. 6. Processus et hiérarchie
7. TC39, de JavaScript à ECMAScript
   1. 1. Première standardisation
   2. 2. Évolutions de JavaScript
   3. 3. Moderniser le développement web pour de bon
   4. 4. Processus actuel
   5. 5. Organisation
8. Références

Suivre les évolutions de la plateforme

1. Les précurseurs
   1. 1. Les premiers navigateurs (1993-1994)
   2. 2. Dynamiser le Web (1994-1995)
2. De Netscape à Internet Explorer
   1. 1. La première guerre des navigateurs (1995-2001)
   2. 2. Naissance de Mozilla (1998-2004)
   3. 3. Internet Explorer contre Firefox (2004-2010)
3. Naissance de Chrome et de Safari
4. L'entrée dans le Web moderne
   1. 1. Le succès des smartphones (2011-2017)
   2. 2. Le règne de Google (2017-?)
   3. 3. Situation actuelle (2021)
5. À l’écoute des nouveaux standards
   1. 1. L’inintelligibilité supposéedes standards
   2. 2. Trouver et suivre les propositions
6. Progresser avec les navigateurs modernes
   1. 1. Trois approches distinctes
   2. 2. Google Chrome
   3. 3. Apple Safari et WebKit
   4. 4. Mozilla et Firefox
   5. 5. Veille et montée en compétences
   6. 6. Perspectives présentes et futures
7. Références

Adopter une approche par composant

1. Introduction à la programmation par composant
   1. 1. Un cadre de référence nécessaire
   2. 2. Niveau de complexité et réutilisabilité
   3. 3. Qu’est-ce qu’un composant ?
   4. 4. Définir un composant
   5. 5. Les limites initiales du développement web
2. Premières fondations pour le Web
   1. 1. Plug-ins
   2. 2. Une seconde génération de frameworks
   3. 3. Cas d’étude : AngularJS
3. Liens avec une approche fonctionnelle
   1. 1. Fonctions et réactivité
   2. 2. Approche générale
   3. 3. Représenter HTML dans JavaScript
   4. 4. Le problème du rendering
   5. 5. Le problème de la gestion d’état
   6. 6. Vers un langage fonctionnel ?
4. Naissance d’un standard
   1. 1. Les prédécesseurs
   2. 2. Première émergence des Web Components
   3. 3. Introduction aux Web Components
   4. 4. Anticiper et dépasser le standard
5. Références

Faire bon usage des Web Components

1. Introduction
2. Étendre le vocabulaire HTML
   1. 1. Définir un élément personnalisé
   2. 2. Éviter les conflits
   3. 3. Utiliser un nom valide
   4. 4. Créer une classe
   5. 5. Afficher un message
   6. 6. Créer un élément personnalisé programmatiquement
   7. 7. Cycle de vie
   8. 8. Support
3. Créer et utiliser un arbre fantôme
   1. 1. Notions fondamentales
   2. 2. light DOM et shadow DOM
   3. 3. Restreindre l’accès au shadom DOM
4. Définir le style d’un Web Component
   1. 1. Style externe
   2. 2. Élément hôte
   3. 3. Style par défaut de l’élémenthôte
   4. 4. Contexte
   5. 5. Customisation
5. Templates et composition
   1. 1. <template></template>
   2. 2. <slot> et composition</slot>
   3. 3. Slots nommés
6. Attributs et propriétés
   1. 1. Principe : suivre la logique du standard HTML
   2. 2. Mise en place d’un Web Component de démonstration
   3. 3. Exposer l’état du composant
   4. 4. Effectuer des actions simples
   5. 5. Récupérer des valeurs primitives
   6. 6. Réagir aux changements de valeur d’unattribut
   7. 7. Manipuler des valeurs non primitives
   8. 8. Charger des propriétés dynamiquement
7. Limites des Web Components
8. Références

Développer une application monopage

1. Structure et objectifs
   1. 1. Les défauts des sites web multipages
   2. 2. Offrir une meilleure expérience utilisateur
   3. 3. Architecture
2. Principes essentiels du routage
3. Manipuler l’URL du document
   1. 1. L’interface Location
   2. 2. Utiliser l’identificateur de fragment del’URL
   3. 3. Hash et historique
   4. 4. L’interface History
   5. 5. Compatibilité
   6. 6. Réécriture des URL côté serveur
4. Définir des routes
   1. 1. Uniformiser le rendu dynamique
   2. 2. Définir une collection de routes
   3. 3. Définir une route par défaut
   4. 4. Approche des principaux frameworks
5. Transmettre des données
   1. 1. Paramètres de route
   2. 2. Paramètres d’URL
   3. 3. Objets état associés à l’historique
6. Navigation et changement de route
   1. 1. Gestion globale
   2. 2. Évènement popstate
7. Au-delà du routage
   1. 1. Modularité
   2. 2. Limitations du routage
8. Références

Afficher des données dynamiquement

1. Optimiser le chargement initial
   1. 1. Faire primer l’expérience utilisateur
   2. 2. Capturer l’attention des utilisateurs
   3. 3. Audit des performances du chargement initial
   4. 4. Éviter les contenus bloquants
   5. 5. Améliorer le chargement des scripts
   6. 6. Accélérer l’affichage d’untexte
   7. 7. Ne charger que les styles utiles
   8. 8. Au-delà du simple chargement
2. Comparer différentes approches
   1. 1. Présentation de la solution employée
   2. 2. Implémentation des tests de performance
   3. 3. Est-il vraiment important de comparer les performances?
3. Bien utiliser la DOM API
   1. 1. Créer un ensemble d’éléments
   2. 2. Mettre à jour le contenu d’un élément
4. Littéraux de gabarit et innerHTML
   1. 1. Gérer les évènements
   2. 2. Mettre à jour le contenu de l’élément
   3. 3. Performances
5. HyperScript
   1. 1. Une bibliothèque, une fonction et une syntaxe
   2. 2. HyperScript, React et les VDOM
   3. 3. Syntaxes alternatives pour HyperScript
   4. 4. Créer une fonction HyperScript
   5. 5. Performances
6. Minimiser les accès au DOM
   1. 1. Identifier les responsabilités de chacun
   2. 2. Fragments
   3. 3. Mettre en cache les éléments
   4. 4. Liens avec la programmation orientée composant
   5. 5. Comparaison avec les littéraux de gabarits
   6. 6. Mettre en cache un élément avecHyperScript
   7. 7. Mettre en cache l’état
7. Optimiser pour la répétition
   1. 1. Optimiser la mise en cache des élémentsavec cloneNode()
   2. 2. Utiliser innerHTML pour améliorer la lisibilité
   3. 3. Construire sa propre solution
   4. 4. Performances
8. Conclusion
9. Références

Définir une architecture cohérente

1. Comment faire "le bon choix" ?
   1. 1. Déterminer l’approche optimale enfonction du contexte
   2. 2. Trouver le bon équilibre entre abstractionet dette technique
2. Vanilla Web et les microbibliothèques
   1. 1. De Vanilla JS au modern Web
   2. 2. Complexité et poids d’un code JavaScript
   3. 3. Évolution d’une bibliothèquedans le temps
   4. 4. Quand et pourquoi utiliser des microbibliothèques
   5. 5. Aides à la manipulation du DOM
   6. 6. Réalité du "Vanilla"
   7. 7. RE:DOM
3. Bibliothèques de rendering
   1. 1. Principe des étiquettes de gabarits
   2. 2. Bibliothèques de rendering utilisant les étiquettesde gabarits
   3. 3. Naissance et évolution de lit-html
   4. 4. Fonctionnement de lit-html
   5. 5. Exemple d’application
   6. 6. Les directives lit-html
   7. 7. JSX face aux littéraux de gabarits
   8. 8. React est-il vraiment une bibliothèque derendering ?
4. Modularité et programmation orientée composant
   1. 1. Principes de lit-element
   2. 2. Démarrer un projet avec lit-element
   3. 3. web component par compilation avec Stencil
5. Programmation réactive
   1. 1. Notions fondamentales
   2. 2. RxJS
   3. 3. Observables et opérateurs
   4. 4. Combiner des observables
   5. 5. hot et cold observables
   6. 6. Alternatives à RxJS
   7. 7. Forces et faiblesses de la programmation réactive
6. Gestion d’état
   1. 1. Créer un conteneur d’étatavec Redux
   2. 2. Permettre à des composants de partager un état
   3. 3. Rendre les composants indépendants de l’étatglobal
7. Routeurs
   1. 1. Page.js
   2. 2. Universal-router
8. Framework
   1. 1. Définition
   2. 2. Microframeworks
   3. 3. React, Vue et Angular : frameworks ou écosystèmes?
   4. 4. Metaframeworks
9. Synthèse
   1. 1. Vanilla JS et Vanilla Web : comment développersans assistance ?
   2. 2. Le modern Web face aux compilateurs et aux frameworks
10. Références

Conclusion

1. Conclusion
2. Postface

Annexes

1. Les bibliothèques, les frameworks et les outils
   1. 1. Le rendering
      1. a. Les manipulations du DOM
      2. b. Les tagged template literals
      3. c. JSX et React
   2. 2. La programmation orientée composant
   3. 3. Le routage et la navigation
   4. 4. La programmation réactive et les gestionnairesd’état
   5. 5. Les frameworks
   6. 6. Les outils de développement
   7. 7. Les polyfills et les shims
2. Groupes de travail du W3C
   1. 1. Note à propos des abréviations
   2. 2. Fondamentaux front-end
   3. 3. Accessibilité (WAI)
   4. 4. Web API
   5. 5. Sémantique et données
   6. 6. Divers
   7. 7. Références
3. Glossaire
4. Principes fondamentaux de Chrome
   1. 1. Multiprocessing
   2. 2. V8, l’interpréteur JavaScript
   3. 3. Expérience utilisateur
   4. 4. Sécurité
   5. 5. Gears, standards et open source