Code Samples

Une page d’accueil en français, suivant le déroulement du livre “Développement et architecture des Applications Web Modernes” publié par les éditions ENI, est également disponible.

Component Based Software Engineering

1. Intro
   • JQuery Plugin
2. AngularJS
   1. v1.0 - directive
   2. v1.2 - controllerAs
   3. v1.3 - bindToController
   4. v1.5+ - component helper
3. React
   • without JSX
     • basics
     • composition
     • props
   • JSX
   • State
   • Shared Hook (from Dan Abramov)
4. Function-based
   • Hello World
   • Using Parameters (bad practice)
   • Using Parameters (not pure)
   • With lit-html (not pure)

Web Components

1. Custom Elements
   • autonomous
   • life cycle
     • call constructor before define
     • call constructor after define
     • connectedCallback
   • customized built-in
   • conflict
   • names validity
2. Shadow DOM
   • attach
   • open vs. closed
   • workaround to closed mode
     • using a private field
     • using a WeakMap
   • style
     • shared style
     • constructable stylesheet
     • host
     • context
     • CSS Custom Properties
3. Template
   • basics
   • programmatic
4. Composition
   • basics
   • named slots
5. attributes and properties
   • basics
   • attribute

Routing

1. Single Page Applications
2. Location API
3. HashRoute
   • Update
   • Replace
4. History API
5. Routes
   • asynchronous (bad practice)
   • synchronous
   • redirect
6. Data
   • route parameters
   • route parameters with path-to-regexp
   • query parameters
   • history state
7. Navigation
   • onclick callback
   • global handling

Rendering

1. Introduction
   • Network limitations
   • Performance API
   • DOM Freeze
2. create elements
   1. DOM API
      • simple example
      • component
      • DocumentFragment
   2. innerHTML
      • very bad example
      • using handlers functions as string (bad practice)
      • local handlers
      • global handler
      • better example
   3. HyperScript
      • minimal component example
3. Memorization
   1. child element cache
      1. DOM API
         • with fragment
      2. innerHTML
      3. HyperScript
   2. children
      1. deep
      2. on call
      3. without copy
   3. state
      1. DOM API
   4. memoize
      1. latest update
      2. children

Libraries

1. Rendering
   • RE:DOM
2. Routing
   • Page.js
   • universal-router
3. Reactive Programming
   • RxJS
     • cold observable
   • Bacon.js
4. State Management
   • Redux
     • Simple Counter
     • Realistic Example
     • with a wrapper component
5. Tagged Templates
   • introduction
6. Components
   1. lit-element
      • hello world
      • with es-module-shims