Stencil

Stencil est un compilateur moderne qui transforme du code TypeScript/JSX en Web Components standards, natifs et hautement optimisés. Développé par l'équipe Ionic, il combine les meilleures pratiques des frameworks modernes (Virtual DOM, réactivité, TypeScript) tout en produisant du code vanilla JavaScript exploitant les standards du web. Cette approche permet de créer des composants réutilisables dans n'importe quel contexte, sans dépendance runtime.

Fondements de Stencil

Compilateur, pas framework : génère du code standard sans runtime supplémentaire
Web Components natifs : Custom Elements, Shadow DOM, et slots standards
Developer Experience moderne : TypeScript, JSX, décorateurs, hot reload
Output optimisé : lazy loading automatique, code splitting, polyfills conditionnels

Avantages de Stencil

Framework-agnostic : composants utilisables avec React, Vue, Angular ou vanilla JS
Performance native : pas de Virtual DOM en runtime, seulement pendant le build
Bundle size minimal : chaque composant charge uniquement ce dont il a besoin
Standards du web : s'appuie sur les APIs natives pour une pérennité maximale
Écosystème robuste : utilisé en production par Ionic, Microsoft, Apple
TypeScript intégré : typage fort et autocomplétion sans configuration

Exemple concret de composant

my-counter.tsx

import { Component, Prop, State, h } from '@stencil/core';

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true
})
export class MyCounter {
  @Prop() initialValue: number = 0;
  @State() count: number;

  componentWillLoad() {
    this.count = this.initialValue;
  }

  increment = () => {
    this.count += 1;
  }

  render() {
    return (
      <div class="counter">
        <p>Count: {this.count}</p>
        <button onClick={this.increment}>
          Increment
        </button>
      </div>
    );
  }
}

Ce composant peut ensuite être utilisé comme simple tag HTML dans n'importe quelle application : <my-counter initial-value="10"></my-counter>

Mise en œuvre dans un projet

Initialiser le projet : npm init stencil component my-library
Développer les composants avec décorateurs @Component, @Prop, @State, @Event
Compiler avec npm run build : génération des bundles optimisés
Publier sur npm : les composants sont distribués comme package standard
Consommer dans n'importe quel framework via import ou CDN
Générer des wrappers framework-spécifiques pour meilleure intégration

Conseil Pro

Utilisez le générateur automatique de wrappers React/Angular/Vue de Stencil pour offrir une expérience native dans chaque framework tout en maintenant une seule source de vérité. Configurez le lazy loading pour charger les composants uniquement quand ils apparaissent dans le DOM, réduisant drastiquement le time-to-interactive.

Outils et écosystème associés

Ionic Framework : bibliothèque de composants mobile construite avec Stencil
Stencil Router : routage pour applications Web Components
Stencil Testing : testing intégré avec Jest et Puppeteer
Storybook : documentation et showcase de composants
Design Systems : Shoelace, Microsoft FAST, utilisent Stencil

Impact business et pérennité

Stencil répond aux enjeux de maintenabilité long terme en créant des composants basés sur les standards du web plutôt que sur des abstractions propriétaires. Pour les design systems d'entreprise, cela signifie une bibliothèque de composants utilisable indépendamment des choix technologiques des équipes, réduisant la dette technique et facilitant les migrations. Les performances natives et le bundle size minimal se traduisent par de meilleures métriques Core Web Vitals, impactant directement le SEO et les taux de conversion. L'investissement initial dans Stencil est amorti par la réutilisabilité maximale du code et l'indépendance vis-à-vis des cycles de vie des frameworks JavaScript.