Développement et architecture des

Applications Web Modernes

Retrouver les fondamentaux

Codes d'exemple

Vous retrouverez dans cette archives certains codes d'exemple issus du livre "Développement et architecture des Applications Web Modernes" édité en 2021 aux éditions ENI.

Les mini-projets de démonstration sont présentés par chapitre dans la liste ci-dessous. Cliquez sur le lien pour tester un projet dans votre navigateur.

La liste complète de fichiers source utilisés dans le livre est donnée par ordre d'apparition. Cliquez sur la flèche à gauche du nom de chaque mini-projet pour faire apparaître le chemin vers tous les fichiers (partant du dossier src/). Le hash tag en fin de chemin indique la région du fichier présentée dans le livre (#region <clef>).

Ressources en ligne

Cette archive ne contient qu'une partie des codes d'exemple utilisés dans le livre, certains pouvant être trop complexes ou volumineux. Par ailleurs, ceux-ci ne recevront pas ou peu de mises-à-jour, afin de rester précisément conformes au contenu imprimé.

Pour consulter l'ensemble du code ainsi que des contenus complémentaires, rendez-vous sur fullweb.dev.

Chapitre 3 : Adopter une approche par composants

1. Introduction à la programmation par composant

1.5 Les limites initiales du développement Web

Simples examples
  1. CBSE/introduction/prototype.js
  2. CBSE/introduction/class.js

2. Premières fondations pour le Web

2.1 Plug-ins

Plugin JQuery (slider)
  1. CBSE/jquery/slider-plugin.js#add-function
  2. CBSE/jquery/slider.html#css
  3. CBSE/jquery/slider.html#scripts
  4. CBSE/jquery/slider.html#html
  5. CBSE/jquery/slider.html#run
  6. CBSE/jquery/result.html

2.3 Cas d'étude : AngularJS

v1.0 - directive
  1. CBSE/angularjs/directive/hello-world.html#input
  2. CBSE/angularjs/directive/hello-world.html#rendering
  3. CBSE/angularjs/directive/hello-world.js#directive
  4. CBSE/angularjs/directive/hello-world.html#directive
  5. CBSE/angularjs/directive/hello-world.js#template
v1.2 - controllerAs
  1. CBSE/angularjs/controller-as/hello-world.js#controllerAs
  2. CBSE/angularjs/controller-as/hello-world.js#scope
  3. CBSE/angularjs/controller-as/hello-world.html#controller
  4. CBSE/angularjs/controller-as/hello-world.js#controller
v1.3 - bindToController
  1. CBSE/angularjs/bindtocontroller/hello-world.js#directive
v1.5+ - component helper
  1. CBSE/angularjs/component-helper/hello-world.js#component

3. Liens avec une approche fonctionnelle

3.2 Approche générale

React sans JSX
Hello World
  1. CBSE/react/hello-world.js#function
composition
  1. CBSE/react/composition.js#components
props

Modifiez le projet pour tester tous les exemples

  1. CBSE/react/composition-props.js#components
  2. CBSE/react/composition-props.js#render

3.3 Représenter HTML dans JavaScript

React avec JSX
Hello World
  1. CBSE/react/hello-jsx.jsx#component
  2. CBSE/react/hello-jsx.jsx#rendering
  3. CBSE/react/hello-jsx.js
Exemple de fonction non-pure
  1. CBSE/react/composition-props.js#not-pure

3.4 Le problème du rendering

fonction composant
Hello World
  1. CBSE/function/hello-world.js#render-fn
  2. CBSE/function/hello-world.js#hello-world
  3. CBSE/function/hello-world.js#render-hello-world
Mise à jour via des paramètres (mauvaise pratique)
  1. CBSE/function/components/Home.mjs#home
  2. CBSE/function/components/SayHello.mjs#say-hello
  3. CBSE/function/bad-update.mjs#render
  4. CBSE/function/bad-update.mjs#update
Mise à jour via des paramètres (non pure)
  1. CBSE/function/params.mjs#update
Avec lit-html
  1. CBSE/function/with-lit-html.mjs#import
  2. CBSE/function/with-lit-html.mjs#say-hello
  3. CBSE/function/with-lit-html.mjs#home
  4. CBSE/function/with-lit-html.mjs#render

3.5 Le problème de la gestion d'état

Composants React (props)

Modifiez le projet pour tester tous les exemples

  1. CBSE/react/composition-props.js#class
  2. CBSE/react/composition-props.js#function
  3. CBSE/react/composition-props.js#render-class
  4. CBSE/react/hello-world-class-fn.js
Composant React Stateful
  1. class Increment (exemple embarqué)
  2. CBSE/react/stateful-class.jsx#handle-click
  3. CBSE/react/stateful-class.jsx#render
  4. CBSE/react/stateful-class.jsx#dom-render
  5. CBSE/react/stateful-class.jsx#constructor
  6. CBSE/react/stateful-class.jsx#component

3.6 Vers un langage fonctionnel ?

Hooks

Inspiré d'une démo créée par Dan Abramov

  1. CBSE/react/stateful-hooks.jsx#component
  2. CBSE/react/responsive-component/useWindowWidth.js
  3. CBSE/react/responsive-component/MyResponsiveComponent.jsx#component

4. Naissance d'un standard

4.1 Les prédécesseurs

JSF
  1. CBSE/jsf/resources/fullwebdev/register.xhtml#html
  2. CBSE/jsf/default.xhtml#html

4.3 Introduction aux Web Components

Module
  1. exemple HTML embarqué
  2. exemple JS embarqué

Chapitre 4 : Faire bon usage des Web Components

2. Étendre le vocabulaire HTML

2.1 Définir un élément personnalisé

Élément personnalisé autonome (Hello World)
  1. web-components/custom-elements/autonomous/hello-world.html#custom-element
Élément intégré personnalisé (Hello World)
  1. web-components/custom-elements/customized-built-in/hello-world.html#custom-element
Élément personnalisé autonome (define)
  1. web-components/custom-elements/autonomous/hello-world.js#define
Élément intégré personnalisé (define)
  1. web-components/custom-elements/customized-built-in/hello-world.js#define

2.3 Utiliser un nom valide

Validité des noms
  1. web-components/custom-elements/names/index.js#PotentialCustomElementName
  2. web-components/custom-elements/names/workaround-emoji.js

2.4 Créer une classe

Classes vides
  1. web-components/custom-elements/empty.component.js#class
  2. web-components/custom-elements/customized-built-in/hello-world.js#empty-component
  3. web-components/custom-elements/empty.component.js#function

2.5 Afficher un message

Élément personnalisé autonome (innerHTML)
  1. web-components/custom-elements/hello-world.component.js#class
  2. web-components/custom-elements/life-cycle/index.html#descriptive

2.6 Créer un élément personnalisé programmatiquement

Appeler le constructeur avant la définition de l'élément personnalisé
  1. web-components/custom-elements/life-cycle/before-define/index.js#define
  2. web-components/custom-elements/life-cycle/before-define/before-define.js#createElement
  3. web-components/custom-elements/life-cycle/before-define/before-define.js#append
  4. web-components/custom-elements/life-cycle/before-define/index.html#scripts
  5. web-components/custom-elements/life-cycle/before-define/before-define.js#DOMContentLoaded
  6. web-components/custom-elements/life-cycle/before-define/before-define.js#whenDefined
  7. logs (embarqués)
Appeler le constructeur après la définition de l'élément personnalisé
  1. web-components/custom-elements/life-cycle/after-define/index.js#createElement
  2. logs (embarqués)

2.7 Cycle de vie

connectedCallback
  1. web-components/custom-elements/life-cycle/connected/hello-world.component.js#connectedCallback
  2. web-components/custom-elements/life-cycle/connected/index.js#createConnectedElement
  3. web-components/custom-elements/life-cycle/connected/hello-world.component.js#disconnectedCallback
  4. web-components/custom-elements/life-cycle/good-hello-world.component.js#class

2.8 Support

chargement des polyfills
  1. web-components/custom-elements/load-polyfil.js

3. Créer et utiliser un arbre fantôme

3.1 Notions fondamentales

Associer un arbre fantôme à un élément (attachShadow)
  1. web-components/shadow-dom/attach/index.js#attach-element
  2. web-components/shadow-dom/attach/index.js#element-append
  3. web-components/shadow-dom/attach/index.css
  4. web-components/shadow-dom/attach/index.html#content

3.2 light DOM et shadow DOM

avec un élément personnalisé
  1. web-components/shadow-dom/attach/index.js#custom-element
  2. web-components/shadow-dom/attach/index.html#custom-element
Ajouter un élément (Light / Shadow DOM)
  1. web-components/shadow-dom/access/bases/index.js#append-to-component
  2. ```js
  3. ```
  4. web-components/shadow-dom/access/bases/index.js#append-to-open-shadow

3.3 Restreindre l'accès au shadom DOM

définir un arbre fantome fermé
  1. web-components/shadow-dom/access/bases/index.js#closed-constructor
  2. web-components/shadow-dom/access/bases/index.js#append-to-closed-shadow
  3. web-components/shadow-dom/access/bases/index.js#add-text
  4. web-components/shadow-dom/access/bases/index.js#use-add-text
  5. web-components/shadow-dom/access/bases/index.js#append-long-text
restreindre l'accès via un attribut privé
  1. web-components/shadow-dom/access/workaround/private-field/index.js#el-with-private-field
  2. web-components/shadow-dom/access/workaround/private-field/syntax-error-private.js#append
utiliser une WeakMap
  1. web-components/shadow-dom/access/workaround/weak/index.js#el-in-block
  2. web-components/shadow-dom/access/workaround/weak/index.js#workaround
  3. web-components/shadow-dom/access/workaround/weak/index.js#append

4. Définir le style d'un Web Component

élément <style>
  1. web-components/shadow-dom/attach/index.js#styled
  2. web-components/shadow-dom/attach/index.html#styled

4.1 Style externe

style externe
  1. web-components/shadow-dom/attach/index.js#ext-styled
  2. web-components/shadow-dom/attach/index.html#preload-css
partage de style
  1. web-components/shadow-dom/style/shared/demo-component-lib/common-style.js
  2. web-components/shadow-dom/style/shared/demo-component-lib/hello.component.js
  3. web-components/shadow-dom/style/shared/demo-component-lib/index.js
  4. web-components/shadow-dom/style/shared/demo-component-lib/bye.component.js
Constructable Stylesheet
  1. web-components/shadow-dom/style/constructable/demo-component-lib/common-style.js
  2. web-components/shadow-dom/style/constructable/demo-component-lib/hello.component.js
  3. web-components/shadow-dom/style/constructable/demo-component-lib/bye.component.js

4.3 Style par défaut de l'élément hôte

Style par défaut de l'élément hôte
  1. web-components/shadow-dom/style/host/index.js#constructor
  2. exemple javascript (embarqué)
  3. web-components/shadow-dom/style/host/index.html#content
  4. web-components/shadow-dom/style/host/index.css#body
  5. web-components/shadow-dom/style/host/index.css#in-main

4.4 Contexte

Contexte
  1. web-components/shadow-dom/style/context/component.css#host-context
  2. web-components/shadow-dom/style/context/component.css#host-fn
  3. web-components/shadow-dom/style/context/index.html#title

4.5 Customisation

Propriétés CSS personnalisées
  1. web-components/shadow-dom/style/custom-props/component.css#text-color
  2. web-components/shadow-dom/style/custom-props/index.css#random-text-color
  3. web-components/shadow-dom/style/custom-props/component.css#span-color
  4. web-components/shadow-dom/style/custom-props/index.css#body-text-color

5. Templates & Composition

5.1 <template>

Template : principes de base
  1. web-components/template/basics/index.html#template
  2. web-components/template/basics/index.js#component
définition programmatique d'un Template
  1. web-components/template/prog/index.js#template

5.2 <slot> et composition

principe
  1. exemple html (embarqué)
  2. exemple html (embarqué)
Slots : principes de base
  1. web-components/slot/basics/index.html#content
  2. web-components/slot/basics/index.js#template
  3. web-components/slot/basics/flat.fake.html

5.3 Slots nommés

Slots nommés
  1. web-components/slot/named/index.html#multiple
  2. web-components/slot/named/index.js#template
  3. web-components/slot/named/flat.fake.html#multiple

6. Attributs et propriétés

Principes de base

6.2 Mise en place d’un Web Component de démonstration

  1. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#constructor
  2. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#privateFields
  3. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#render
  4. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#connectedCallback
  5. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#getRandomText

6.3 Exposer l’état du composant

  1. web-components/custom-elements/attrs-and-props/basics/index.js#getLengthHack
  2. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#getText
  3. web-components/custom-elements/attrs-and-props/basics/index.js#getLength

6.4 Effectuer des actions simples

  1. web-components/custom-elements/attrs-and-props/basics/random-text.component.js#newText
  2. web-components/custom-elements/attrs-and-props/basics/index.html#new-text-button
  3. web-components/custom-elements/attrs-and-props/basics/index.js#newText
Gestion des propriétés

4.6.5 - Récupérer des valeurs primitives

  1. web-components/custom-elements/attrs-and-props/attribute/index.html#random-text
  2. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#positiveIntOrNull
  3. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#get-length
  4. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#repeatOrCutToLength
  5. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#get-text
  6. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#render

4.6.6 - Réagir aux changements de valeur d'un attribut

  1. web-components/custom-elements/attrs-and-props/attribute/index.html#length
  2. web-components/custom-elements/attrs-and-props/attribute/index.js#newLength
  3. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#observedAttributes
  4. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#attributeChangedCallback
  5. web-components/custom-elements/attrs-and-props/attribute/index.js#newLengthProp
  6. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#set-length

4.6.7 - Manipuler des valeurs non-primitives

  1. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#possible-texts
  2. web-components/custom-elements/attrs-and-props/attribute/index.js#setPossibleTexts

4.6.8 - Propriétés lazy loadées

  1. web-components/custom-elements/attrs-and-props/attribute/index.html#scripts
  2. web-components/custom-elements/attrs-and-props/attribute/pre.js#all
  3. web-components/custom-elements/attrs-and-props/attribute/pre.js#set-props
  4. web-components/custom-elements/attrs-and-props/attribute/random-text.component.js#lazyProp

Chapitre 5 : Développer une application monopage

Dans ce chapitre, nous construisons pas à pas différentes applications monopage minimalistes. Pour assurer la cohérence de l'ensemble, celle-ci utilisent intensivement des ES Modules, chaque étape faisant appel à des modules définits dans les étapes précédentes.

Pour accéder directement à certaines routes de ces applications, il vous sera nécessaire de lancer localement un serveur HTTP, comme évoqué dans la section "3.6 Réécriture des URL côté serveur".

1. Structure et objectifs

1.3 Architecture

Fondamentaux
  1. minimal-spa/1-fundamentals/index.html#main
  2. minimal-spa/1-fundamentals/fetch.js#getPostData
  3. minimal-spa/1-fundamentals/rendering.js#render
  4. minimal-spa/1-fundamentals/index.html#header
  5. minimal-spa/1-fundamentals/index.js#show

3. Manipuler l'URL du document

3.1 L'interface Location

Location API
  1. minimal-spa/2-location/ie-location.js
  2. minimal-spa/2-location/url.js#update-url
  3. minimal-spa/2-location/index.js#show

3.2 Utiliser l'identificateur de fragment de l'URL

Hash Routing : mise à jour du chemin
  1. minimal-spa/3-hashroute/path.js#updatePath
  2. minimal-spa/3-hashroute/update/index.js#show

3.3 Hash et historique

Hash Routing : remplacement du chemin
  1. minimal-spa/3-hashroute/path.js#replacePath
  2. minimal-spa/3-hashroute/replace/index.js#show

3.4 L'interface History

History API
  1. minimal-spa/4-history-api/path.js#updatePath
  2. minimal-spa/4-history-api/path.js#replacePath
  3. (embarqué) html
  4. minimal-spa/4-history-api/base-url.js#base
  5. minimal-spa/4-history-api/base-url.js#export
  6. minimal-spa/4-history-api/path.js#updatePath
  7. minimal-spa/4-history-api/index.js#show

3.5 Compatibilité

Initialisation du routeur
  1. minimal-spa/5-routes/router.js#support
  2. minimal-spa/5-routes/router.js#updatePath
  3. minimal-spa/5-routes/router.js#replacePath
Compléments
  1. minimal-spa/5-routes/frameworks/vue.js
  2. (embarqué) js

3.6 Réécriture des URL côté serveur

Exemples de configuration
  1. minimal-spa/4-history-api/server/local-web-server.session.sh
  2. minimal-spa/4-history-api/server/web-dev-server.session.sh
  3. minimal-spa/4-history-api/server/example.apache.conf#directory
  4. minimal-spa/4-history-api/server/example.nginx.conf
  5. minimal-spa/4-history-api/server/firebase.json

4. Définir des routes

4.1 Uniformiser le rendu dynamique

Refactoring du rendering
  1. minimal-spa/5-routes/2-sync/index.html#main
  2. minimal-spa/5-routes/rendering.js#home
  3. minimal-spa/5-routes/rendering.js#render
  4. minimal-spa/1-fundamentals/fetch.js#getPostData
  5. minimal-spa/5-routes/rendering.js#post

4.2 Définir une collection de routes

Routage asynchrone (mauvaise pratique)
  1. minimal-spa/5-routes/1-async/router.js#routes
Routage synchrone
  1. minimal-spa/5-routes/2-sync/router.js#routes
  2. minimal-spa/5-routes/2-sync/router.js#navigate
  3. minimal-spa/5-routes/2-sync/index.html#nav

4.3 Définir une route par défaut

Compléments
  1. (embarqué) javascript
  2. minimal-spa/5-routes/router.js#getPath
  3. minimal-spa/5-routes/2-sync/index.js#navigate
Redirections
  1. minimal-spa/5-routes/3-redirect/router.js#routes
  2. (embarqué) javascript
  3. minimal-spa/5-routes/rendering.js#error
  4. minimal-spa/5-routes/3-redirect/router.js#errorRoute
  5. minimal-spa/5-routes/3-redirect/router.js#navigate

4.4 Approche des principaux frameworks

Exemples
  1. minimal-spa/5-routes/frameworks/angular-routes.ts
  2. minimal-spa/5-routes/frameworks/angular-resolver.ts
  3. minimal-spa/5-routes/frameworks/vue.js
  4. minimal-spa/5-routes/frameworks/page.js
  5. minimal-spa/5-routes/frameworks/react.jsx

5. Transmettre des données

5.1 Paramètres de route

Paramètres de route
  1. minimal-spa/5-routes/3-redirect/router.js#postRoutes
  2. minimal-spa/6-data/1-route-params/routes.js#postPath
  3. minimal-spa/6-data/1-route-params/router.js#simpleMatch
  4. minimal-spa/6-data/1-route-params/routes.js#post
  5. minimal-spa/6-data/1-route-params/router.js#match
  6. minimal-spa/6-data/1-route-params/router.js#callMatch
  7. minimal-spa/6-data/1-route-params/router.js#data
  8. minimal-spa/6-data/1-route-params/routes.js#default
  9. minimal-spa/6-data/1-route-params/router.js#redirect
  10. minimal-spa/6-data/1-route-params/router.js#navigate

(bonus) Paramètres de route avec path-to-regexp

5.2 Paramètres d'URL

Paramètres d'URL
  1. minimal-spa/6-data/rendering.js#postDataError
  2. minimal-spa/6-data/2-query-params/fetch.js#postData
  3. minimal-spa/6-data/2-query-params/routes.js#postError
  4. minimal-spa/6-data/2-query-params/router.js#data
  5. minimal-spa/6-data/2-query-params/router.js#initialGetParams
  6. minimal-spa/6-data/2-query-params/router.js#mergeParams
  7. minimal-spa/6-data/2-query-params/router.js#concatPath
  8. minimal-spa/6-data/rendering.js#postError

5.3 Objets état associés à l’historique

Objet état
  1. minimal-spa/6-data/3-history-state/fetch.js#checkInt
  2. minimal-spa/6-data/3-history-state/routes.js#error
  3. (embarqué) js
  4. minimal-spa/6-data/3-history-state/router.js#data
  5. minimal-spa/6-data/rendering.js#error

6. Navigation et changement de route

via onclick
  1. minimal-spa/7-navigation/1-callback/index.html#link
  2. minimal-spa/7-navigation/1-callback/index.js#callback
gestion globale

5.6.1 - Gestion globale

  1. (embarqué) javascript
  2. minimal-spa/7-navigation/2-global/navigation.js#exclusions
  3. minimal-spa/7-navigation/2-global/navigation.js#click

5.6.2 - Évènement `popstate`

  1. minimal-spa/7-navigation/2-global/navigation.js#onpopstate
  2. minimal-spa/7-navigation/2-global/router.js#navigate

Chapitre 6 : Afficher des données dynamiquement

De nombreux exemples utilisés dans ce chapitre sont issus des projets "Benchmark" et modern-helpers, et ne sont donc pas disponibles dans cette archive. Vous pourrez cependant les retrouver en suivant le lien indiqué.

1. Optimiser le chargement initial

1.3 Audit des performances du chargement initial

Performance API
  1. rendering/performance-api/observer.js#observer
  2. rendering/performance-api/observer.js#callback

2. Comparer différentes approches

Freeze
  1. (embarqué) js
  2. rendering/limitations/dom-api/heavy-rendering/create-content.js#render

2.2 Implémentation des tests de performance

Benchmark : vanillajs-create-el
  1. (benchmark) frameworks/keyed/vanillajs-create-el-for-doc/index.html#table
  2. (embarqué) html
  3. (benchmark) frameworks/keyed/vanillajs-create-el-for-doc/index.html#jumbotron
  4. (benchmark) frameworks/keyed/vanillajs-create-el-for-doc/src/Main.js#main-constructor

3. Bien utiliser la DOM API

3.1 Créer un ensemble d'éléments

Benchmark : vanillajs-create-el

frameworks/keyed/vanillajs-create-el/src/Main.js#create-row

3.2 Mettre à jour le contenu d’un élément

Benchmark : vanillajs-no-mem-query
  1. (benchmark) frameworks/keyed/vanillajs-no-mem-query/src/Main.js#update
  2. (benchmark) frameworks/keyed/vanillajs-no-mem/src/Main.js#update

4. Littéraux de gabarits & innerHTML

mauvaise pratique
  1. rendering/create-element/innerHTML/very-bad/create-elements.js

4.1 Gérer les évènements

conversion des handlers en chaînes de caractères (mauvaise pratique)
  1. rendering/create-element/innerHTML/bad-handlers/create-elements.js#render
  2. rendering/create-element/innerHTML/bad-handlers/rendered.html
  3. rendering/create-element/innerHTML/bad-handlers/create-elements.js#count
handlers locaux
  1. rendering/create-element/innerHTML/handlers/local/create-elements.js#component
  2. rendering/create-element/innerHTML/handlers/local/create-elements.js#create
handler global
  1. rendering/create-element/innerHTML/handlers/global/create-elements.js#constructor

4.2 Mettre à jour le contenu de l’élément

bonnes pratiques
  1. rendering/create-element/innerHTML/better/create-elements.js#render
  2. rendering/create-element/innerHTML/better/create-elements.js#update
  3. rendering/create-element/innerHTML/better/create-elements.js#actions

4.3 Performances

Benchmark : vanillajs-innerhtml
  1. (benchmark) frameworks/keyed/vanillajs-innerhtml/src/Main.js#create-row
  2. (embarqué) js
  3. (benchmark) frameworks/keyed/vanillajs-innerhtml-no-mem/src/Main.js#update

5. HyperScript

5.4 Créer une fonction HyperScript

Exemple de helper HyperScript
  1. (embarqué) bash
  2. (embarqué) js
  3. (helpers) el/index.js
  4. rendering/create-element/hyperscript/index.js#render

6. Minimiser les accès au DOM

6.2 Fragments

Exemple d'utilisation d'un fragment
  1. rendering/create-element/dom-api/fragment/create-elements.js#createDocumentFragment
  2. rendering/create-element/dom-api/fragment/create-elements.js#counter
  3. rendering/create-element/dom-api/fragment/create-elements.js#createActions
  4. rendering/create-element/dom-api/fragment/create-elements.js#attach

6.3 Mise en cache des éléments

Exemple simple
  1. rendering/caching/elements/dom-api/create-elements.js#render
  2. rendering/caching/elements/dom-api/create-elements.js#update
Benchmark : vanillajs-no-mem
  1. (benchmark) frameworks/keyed/vanillajs-no-mem/src/Main.js#update
Benchmark : vanillajs-create-el-query
  1. (benchmark) frameworks/keyed/vanillajs-create-el-query/src/Main.js#initRows
  2. (benchmark) frameworks/keyed/vanillajs-create-el-query/src/Main.js#appendRows
  3. (benchmark) frameworks/keyed/vanillajs-create-el-query/src/Main.js#update
Benchmark : vanillajs-create-el
  1. (benchmark) frameworks/keyed/vanillajs-create-el/src/Main.js#update

6.5 Comparaison avec les littéraux de gabarits

innerHTML avec mise en cache de l'élément enfant
  1. rendering/caching/elements/innerHTML/create-elements.js#render
  2. rendering/caching/elements/innerHTML/create-elements.js#update
Benchmark : vanillajs-innerhtml-cpnt
  1. (benchmark) frameworks/keyed/vanillajs-innerhtml-cpnt/src/Main.js#create-row
  2. (benchmark) frameworks/keyed/vanillajs-innerhtml-cpnt/src/Main.js#update

6.6 Mettre en cache un élément avec HyperScript

HyperScript avec mise en cache de l'élément enfant
  1. rendering/caching/elements/hyperscript/index.js#render
  2. rendering/caching/elements/hyperscript/index.js#update
Benchmark : modern-helpers
  1. (benchmark) frameworks/keyed/modern-helpers/src/index.js#create-row
  2. (benchmark) frameworks/keyed/modern-helpers/src/index.js#update

6.6 Mise en cache de l'état

mise en cache de l'état (DOM API)
  1. rendering/caching/state/dom-api/latest-count/create-elements.js#input
  2. rendering/caching/state/dom-api/latest-count/create-elements.js#set
  3. rendering/caching/state/dom-api/latest-count/create-elements.js#update

6.7 Mettre en cache l’état

Memoïsation (DOM API)
  1. rendering/memoize/utils/latest.js
  2. rendering/memoize/utils/latest-with-context.js#memoization

7. Optimiser pour la répétition

7.1 Optimiser la mise en cache des éléments avec cloneNode()

Mise en cache sans copie
  1. rendering/caching/children/without-copy/create-elements.js#memoization
  2. rendering/caching/children/without-copy/create-elements.js#render
  3. rendering/caching/children/without-copy/create-elements.js#get
  4. rendering/caching/children/on-call/create-elements.js#get
Benchmark : vanillajs-prog
  1. (benchmark) frameworks/keyed/vanillajs-prog/src/Main.js#row-template
  2. (benchmark) frameworks/keyed/vanillajs-prog/src/Main.js#createRow

7.2 Utiliser innerHTML pour améliorer la lisibilité

Benchmark : vanillajs-dx-opti
  1. (benchmark) frameworks/keyed/vanillajs-dx-opti/src/Main.js#row-template

7.3 Construire sa propre solution

Benchmark : modern-helpers
  1. (helpers) el/index.js
  2. (benchmark) frameworks/keyed/modern-helpers/src/index.js#create-row
  3. (helpers) template/index.js#part
  4. (embarqué) js
Benchmark : modern-helpers-template
  1. (helpers) template/index.js#constructor
  2. (benchmark) frameworks/keyed/modern-helpers-template/src/index.js#template
  3. (helpers) template/index.js#parse
  4. (helpers) template/index.js#createElement
  5. (helpers) template/index.js#renderInit
  6. (helpers) template/index.js#loopMeta
  7. (helpers) template/index.js#proxy
  8. (benchmark) frameworks/keyed/modern-helpers-template/src/index.js#update
  9. (benchmark) frameworks/keyed/modern-helpers-template/src/index.js#select

Chapitre 7 : Utiliser les bons outils

2. Vanilla Web et les microbibliothèques

2.5 Aides à la manipulation du DOM

Benchmark : jquery
  1. (benchmark) frameworks/keyed/jquery/src/index.js#create-row

2.7 RE:DOM

RE:DOM (minimal-spa)
  1. (embarqué) js
  2. minimal-spa/redom/views/home.js#Home
  3. minimal-spa/redom/views/post.js#Post
  4. minimal-spa/redom/views/not-found.js#NotFound
  5. minimal-spa/redom/router.js#router
  6. minimal-spa/redom/router.js#navigate
  7. (embarqué) js
  8. minimal-spa/redom/components/menu.js#Menu
  9. minimal-spa/redom/components/app.js#App
  10. minimal-spa/redom/main.js#mount

3. Bibliothèques de rendering

3.1 Principe des étiquettes de gabarits

Introduction aux tagged templates
  1. (embarqué) js
  2. (embarqué) js
  3. (embarqué) js
  4. rendering/tagged-template/index.js#tag
  5. rendering/tagged-template/index.js#create

3.5 Exemple d'application

Benchmark : lit-html
  1. (embarqué) typescript
  2. (benchmark) frameworks/keyed/lit-html-for-doc/src/index.js#row-template
  3. (embarqué) js
  4. (embarqué) js
  5. (embarqué) js
  6. (embarqué) js
  7. (benchmark) frameworks/keyed/lit-html-for-doc/src/index.js#render
  8. (benchmark) frameworks/keyed/lit-html-for-doc/src/index.js#update

4. Modularité et programmation orientée composants

4.1 Principes de lit-element

Hello World (lit-element)
  1. (embarqué) js
  2. libs/lit-element/helloworld.js#component
  3. libs/lit-element/async-helloworld.js#render
  4. libs/lit-element/async-helloworld.js#properties
  5. libs/lit-element/async-helloworld.js#constructor
  6. libs/lit-element/async-helloworld.js#styles

5. Programmation réactive

RxJS

7.5.3 - Observable et opérateurs

  1. libs/reactive/rxjs/complete/index.js#observable
  2. (embarqué) js
  3. (embarqué) text
  4. libs/reactive/rxjs/complete/index.js#map
  5. libs/reactive/rxjs/complete/index.js#filter
  6. libs/reactive/rxjs/complete/index.js#distinctUntilChanged
  7. libs/reactive/rxjs/complete/index.js#debounceTime
  8. libs/reactive/rxjs/complete/index.js#tap

7.5.4 - Combiner des observables

  1. (embarqué) js
  2. libs/reactive/rxjs/complete/index.js#fromFetch
  3. libs/reactive/rxjs/complete/index.js#switchMap

5.5 hot et cold observables

Cold Observable
  1. libs/reactive/rxjs/complete/cold/index.js#observable
  2. libs/reactive/rxjs/complete/index.js#subscription
  3. libs/reactive/rxjs/complete/index.js#console

5.6 Alternatives à RxJS

Bacon.js
  1. libs/reactive/baconjs/index.js#bacon

6. Gestion d'état

6.1 Créer un conteneur d’état avec Redux

Redux : compteur simple
  1. libs/reactive/redux/simple-counter/store.js
  2. libs/reactive/redux/simple-counter/redux-counter.js#component

6.2 Permettre à des composants de partager un état

Redux : composant wrapper
  1. libs/reactive/redux/wrapped-counter/demo-counter.js#component
  2. libs/reactive/redux/wrapped-counter/demo-nav.js#component
  3. (embarqué) js

6.3 Rendre les composants indépendants de l'état global

Redux : composant wrapper
  1. (embarqué) js
  2. libs/reactive/redux/wrapped-counter/redux-wrapper.js#bindParam
  3. libs/reactive/redux/wrapped-counter/redux-wrapper.js#subscribe
  4. (embarqué) js
  5. libs/reactive/redux/wrapped-counter/index.html#props
  6. libs/reactive/redux/wrapped-counter/redux-wrapper.js#actionsParam
  7. libs/reactive/redux/wrapped-counter/redux-wrapper.js#dispatch
  8. libs/reactive/redux/wrapped-counter/index.html#actions

Bonus: Redux : exemple plus réaliste

7. Routeurs

7.1 Page.js

minimal-spa avec Page.js
  1. minimal-spa/8-pagejs/index.js#routes
  2. minimal-spa/8-pagejs/index.js#config
  3. minimal-spa/8-pagejs/index.html#link

7.2 Universal-router

minimal-spa avec Universal-router
  1. minimal-spa/9-universal-router/index.js#routes
  2. minimal-spa/9-universal-router/index.js#resolve
  3. minimal-spa/9-universal-router/index.js#navigate