Si estás atento a la evolución de Ionic, habrás oído hablar de StencilJS, y quizá hasta te habrá entrado el pánico…

¿Cómo?

¿Qué?

¿Un nuevo framework?

¿Y Angular?

Se acabaron las dudas. Aquí estoy yo, como siempre, para contarte qué es esto de StencilJS y cómo va a afectar al futuro de Ionic. Vamos por partes.

Stencil JS

Stencil JS es una herramienta de los creadores de Ionic, que definen como «El generador mágico de web components reusables». Es decir, Stencil JS permite crear de forma sencilla y sin grandes esfuerzos web components nativos, si si, esos que han entrado en el estándar HTML5.

Tanto Angular como React como la mayoría de frameworks hoy día apuestan por una aproximación basada en componentes, pero tiran de su propia implementación con más o menos diferencias con respecto al estándar, que al final se transpila a simple javascript. Además, uno de los principales inconvenientes es que esos componentes no pueden utilizarse tal cual en cualquier web, sino que dependen de las librerías del framework con el que ha sido creado.

StencilJS, en cambio, es una apuesta diferente. Es un framework ligero que añade su propia salsa para facilitarte la creación de componentes que al final se compilan a componentes nativos estandar HTML5 que puedes reutilizar en cualquier web.

Inspirado por los frameworks de moda

Si hay algo que está claro en StencilJS es que se ha inspirado en los frameworks más populares como Angular y React, para coger lo mejor de cada mundo. Además, la jugada maestra es que el producto resultante son componentes web estándar, independientes del framework. ¡Brillante!

Si entramos en comparativas entre frameworks, podríamos decir que se han inspirado más en React. La baja curva de aprendizaje y que se trata de un framework de renderizado (frente a Angular que es una plataforma más completa), seguramente han tenido mucho que ver.

En todo caso, las características clave que emula son:

• Virtual DOM (React)
• Async rendering (React Fiber)
• Reactive data-binding (React, también Angular)
• Decoradores TypeScript (Angular)
• JSX (React)

Tanto Angular como React se basan en DSLs (Domain Specific Language) para facilitarle la vida al developer a la hora de crear componentes. Si existe una diferencia radical entre ambos, es que en Angular separas de forma muy marcada el template (HTML) y su controlador (TS), mientras que en React ambos están entremezclados en un solo archivo (JSX).

A pesar de que soy más fan de Angular por la claridad que proporciona esa separación, reconozco que JSX puede ser más sencillo de usar. No hay que aprender sintaxis tipo *ngFor, sino solo mezclar HTML y JS (aunque sea horroroso) así que la curva de aprendizaje es casi nula.

Además, aprovechando que el hype de React está de capa caída después de meter un caballo de Troya en su licencia «Open Source», puede que la jugada le salga redonda a la gente de Ionic y atraigan muchos de los developers que se han sentido traicionados por React, como está pasando con VueJS. Ya se verá.

En todo caso, estarás pensando…

…

¿y que tiene que ver todo esto con Ionic?

Buena pregunta. A eso voy.

StencilJS y el futuro de Ionic

La cuestión es que el equipo de Ionic NO ha creado Stencil para reemplazarlo y embarcarse en una nueva aventura.

El equipo de Ionic se ha dado cuenta de que los componentes web nativos tienen un rendimiento realmente bueno, ya que los soportan los propios navegadores, así que en su búsqueda por mejorar el rendimiento de su proyecto, empezaron a migrar los componentes de Ionic a componentes nativos. Imagino que StencilJS es una herramienta que nació durante el proceso de migración.

En todo caso, lo que debes saber es que StencilJS no es un rival de Ionic, sino la herramienta con la que se generará el framework Ionic 4. Es decir, los componentes de Ionic que existen actualmente (ion-header, ion-content, ion-tabs, ion-nav, etc), también existirán en el futuro Ionic v4, con la diferencia de que serán web components HTML5 estandar.

Ojo, NO SIGNIFICA que tengas que aprender a usar StencilJS y tengas que abandonar Angular. Al contrario, como la futura versión de Ionic estará implementada mediante componentes web estándar, significa que podrás usar esos componentes desde:

• Angular (como funciona ahora mismo Ionic)
• React
• Vue
• Ember
• Cualquier otro framework que utilices para tu desarrollo

Promesas y cambios

Mejor rendimiento y puedo usarlo igual… hasta ahora todo pinta bien ¿no? La verdad es que sí, pero falta un pequeño detalle. Está claro que la nueva versión de Ionic te puede ofrecer unos componentes con la misma forma externa y una implementación más eficiente. Incluso las propiedades de entrada y salida pueden ser las mismas. Esto es genial.

Pero… ¿qué pasa con las APIs? Ionic 3 dispone de varios servicios Angular para interactuar con los componentes del framework desde código, como la clase NavParams que te permite obtener los parámetros que se pasan desde otra vista durante la navegación. ¿Que pasará ahora con ese código, si el planteamiento de Ionic es que sea framework agnostic?

Ese es un punto que no está tan claro, aunque tampoco es para espantarse.

En el peor de los casos, en lugar de importar un servicio de Angular, sencillamente importarás una clase Typescript con métodos similares, de forma que se pueda usar desde otros frameworks como React o Vue.

En el mejor, te seguirán proporcionando ese servicio Angular, y ofrecerán librerías equivalentes para otros frameworks (entiendo que en ese caso no serían más que wrappers de la clase anterior). De hecho, tiene pinta que la cosa, de momento, irá por esta línea.

Ya lo avisan:

«(sobre Stencil)…. All these benefits will also be shipping with the next release of Ionic-Angular, v4.0.0, with only minimal breaking changes.»

Ah amigos. Las palabras temidas. Como lo odio.

«breaking changes»

Lo cierto es que el cambio es para bien, pero lógicamente puede producirse alguna incompatibilidad necesaria y ya sabemos lo poco que se cortan estos de Ionic a la hora de decidir cambios…

Falta ver si esos «breaking changes» son realmente mínimos y el proceso de actualización de una app antigua va a ser un juego de niños, o si por lo contrario va a ser algo más duro de lo que prometen.

El futuro de StencilJS

Te he hablado del futuro de Ionic, que gracias a esta herramienta pinta prometedor: con unos componentes más eficientes que nunca y abierto a otros frameworks de desarrollo como puedan ser React o Vue. En cambio, no te he hablado mucho de la vida de Stencil JS fuera de Ionic, y ojo, por que puede dar mucho de que hablar.

Así de entrada, parece una seria amenaza a frameworks centrados en el renderizado como React, que además no está pasando por su mejor momento. Pero es que además, la promesa de compilar a componentes nativos es realmente atractiva.

Supongo que en los próximos años veremos salir frameworks similares que también aborden el problema con una perspectiva framework agnostic -incluso no me extrañaría que Angular hiciera un movimiento similar-, pero podríamos decir que este es el pionero y tiene buena pinta.

¿Lo cambiaría por Angular? Quizá, pero solo en casos muy concretos.

Está claro que para el desarrollo de toda una web app Angular te da una plataforma completa a la que le veo pocos rivales. Pero… ¿y si quieres crear una librería de componentes? Angular es genial, pero si creas un componente en Angular, solo funcionará en Angular (de momento).

Imagina en cambio que ese componente rechulón que acabas de crear, se puede usar tanto en Angular como en React, como en Ember, como en JS plano de toda la vida. Sí, sinceramente creo que para crear componentes reutilizables, especialmente si quieres hacerlos Open Source y publicarlos en NPM, StencilJS puede tener mucho sentido.

¿Y tú? ¿Qué opinas?

Si te ha gustado este artículo, compártelo 😉