Stencil: un compiler per i web component

Il settore dello sviluppo web è in costante espansione e la community dei web developer è sempre alla ricerca di nuovi modi per sviluppare in modo rapido ed efficiente web component e web application. Stencil è in questo senso uno dei progetti più interessanti, perché consente di realizzare web component compatibili al 100% con gli standard web.

I web component sono set di funzionalità aggiunte dal W3C alle specifiche HTML e DOM, che consentono la creazione di widget e componenti riutilizzabili nelle pagine web e nelle web application. L'obbiettivo di questa scelta è portare il component-based software engineering all'interno del mondo del web development. Il modello dei Component permette l'incapsulamento e l'interoperabilità di singoli elementi HTML.

I Web Component consistono in 4 feature principali che possono essere usate separatamente oppure tutte assieme:

• Custom Element - API che definiscono nuovi elementi HTML;
• Shadow DOM - Encapsulated DOM e styling con composition;
• HTML Imports - Metodi dichiarativi per importare documenti HTML in altri documenti;
• HTML Templates - l'elemento che consente ai documenti di contenere inert chunk di DOM.

Stencil combina i migliori concept dei frontend frameworks più popolari. Questo tool prende il codice TypeScript, JSX o anche dei piccoli virtual DOM layer, e li rende disponibili per il data binding, successivamente fa passare il tutto in una pipeline per il rendering asincrono (simile a React Fiber) per generare un web component basato sugli standard che può girare su tutti i browser che supportano la versione 1 delle specifiche per i Custom Elements.

A seconda delle proprie esigenze Stencil può essere usato anche come sostituto per i tradizionali frontend framework o è possibile integrarlo con Angular, React, Ember, Vue e jQuery. Inoltre questo tool permette di sfruttare diverse funzionalità accessorie come il Server Side Rendering (SSR) senza la necessità di eseguire un browser headless.

Stencil rappresenta quindi un nuovo approccio per realizzare in modo veloce web application, sfruttando pienamento le potenzialità dei browser moderni che consentono di ottenere diverse feature in modo nativo senza l'utilizzo di plugin esterni.

Via Stencil