¿Qué es Stencil (del equipo de Ionic)?

De acuerdo con su sitio web, es un compilador para generar o construir Componentes Web (Web Components), siendo más específicos Custom Elements, combina conceptos de varios frameworks populares como React y Angular.

Stencil genera componentes web que cumplen con el estándar, los cuales ya contienen caracteristicas como:

• DOM virtual
• Async rendering (renderización asincrónica)
• Reactive data-binding (vinculación reactiva de datos)
• JSX
• TypeScript

Estos componentes pueden ser incluidos en frameworks como los que ya mencionamos, o ser utilizados sin framework alguno ya que son sencillamente componentes web, además, Stencil habilita algunas capacidades encima de los componentes como por ejemplo SSR (Server side rendering), objetos como propiedades en lugar de simplemente propiedades de tipo cadenas (strings), pre rendering, etc. Con el uso de JSX, DOM virtual y renderización asincrónica hacen que sea más fácil y rápido utilizar el API de Stencil para escribir componentes web que utilizar directamente Custom Elements.

¿Por qué me debe interesar Stencil?

El equipo de Ionic creó Stencil con el objetivo de crear componentes que sean más rápidos y que puedan ser utilizados con la mayoría de los frameworks populares como ya hemos dicho, de modo que ayude a aliviar el problema de interoperabilidad que la fragmentación de frameworks que existen hoy en día ha creado donde componentes creados en uno no pueden ser utilizados en otros.

Aún cuando es posible crear aplicaciones completas con Stencil, la idea más bien es utilizarlo para crear componentes que podemos utilizar en diversos frameworks. La próxima versión mayor de Ionic se va a construir utilizando Stencil y aunque vamos a poder seguir usando Angular para escribir nuestras aplicaciones de Ionic, el framework va a estar desacoplado de modo que podamos escribir las aplicaciones utilizando Vue, React o simple JavaScript si así lo deseamos.

¿Cómo empezar?

Vamos a ver rápidamente cómo crear una aplicación a partir del proyecto de inicio de Stencil.

Para crear nuestro lo hacemos a partir del repo del proyecto inicial de Stencil, clonamos el repositorio y borramos el enlace al repositorio remoto:

git clone https://github.com/ionic-team/stencil-starter.git prueba-stencil
cd prueba-stencil
git remote rm origin

Luego instalamos las dependencias y ejecutamos la aplicación:

npm install
npm start

En un próximo post vamos a examinar un componente web creado con Stencil.

Para más información les recomiendo este video (en inglés):

Si te gustó el post ayuda a compartirlo en tus redes sociales 🙂