Cela fait des années que l'on entend parler des Web components, mais ils sont aujourd'hui encore peu utilisés dans notre écosystème. En effet, ils sont souvent écartés par méconnaissance ou par la peur de se confronter à un nième framework qui remplacera encore une fois le code des applications existantes qu'on vient juste de refondre. Cependant, il faut plutôt voir les Web components comme complémentaire aux technologies que nous utilisons tous les jours et ce pour répondre à des problématiques bien précises. De plus désormais il existe une pléthore d'outils facilitant leur mise en place, et leur intégration à des applications existantes. Alors pourquoi s'en passer ? Je vous propose dans ce slot de voir ensemble ce que sont concrètement les web components, et d'illustrer leur usage avec un cas concret en utilisant Stenciljs.

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