Le document présente Stencil.js, un compilateur de web components créé par Ionic, qui permet de construire des bibliothèques de composants tout en étant inspiré par des frameworks comme Angular et React. Avec des fonctionnalités telles que l'utilisation de TypeScript, le shadow DOM et des adaptateurs pour différents frameworks, Stencil.js facilite la création de composants réutilisables. La technologie est maintenant mature et vise à réduire le coût des migrations futures sans remplacer les frameworks existants.

1. Adopter les Web Components
avec Stencil.js
1

2. SPEAKING
Thomas Champion
Développeur Fullstack JS.
@ReeskaFR
2

3. Sommaire
01 PRÉSENTATION
02 DÉMO
03 PACKAGING
04 TAKE AWAY

4. Stencil.js
La solution complète
4

5. PRÉSENTATION
● Créé par Ionic sortie en 2017 latest : 2.1.0
● Compilateur de Web components
● Inspiré par Angular et React
● But premier : library de composants
● Peut être utilisé comme un framework
5

6. ● API haut niveau avec TypeScript
● Shadow DOM et fallback scoped style si non supporté
● Build customisable qui génère un bundle
● Inclus des polyfills
● Style via le standard CSS
○ Custom Properties
○ Shadow Parts
PRÉSENTATION
6

7. DEMO
7

8. LES ADAPTATEURS
● OutputTarget : Génération de wrappers
● Existent pour la plupart des frameworks
8

9. TAKEAWAY
9

10. ADOPTONS-LES
● Aujourd’hui la technologie est mature
● Le but n’est pas de remplacer nos frameworks
● Idéal pour créer une library de components
● Au final idéal pour créer des components UI...
● … et réduire le coût des migrations futures
10

11. MERCI
CONTACT
Thomas CHAMPION
tchampion@xebia.fr
11