## 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