Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

StencilJS y el futuro de Ionic

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 😉

Published inAngular 2ionicIonic 2Ionic 3

15 Comments

  1. Fran Fran

    Me han encantado el articulo, gracias por ponernos sobre aviso del futuro de ionic.

    • Enrique Oriol Enrique Oriol

      Lo sé lo sé, es abrumador… pero divertido a la vez 😀

  2. Gabriel Bustos Padilla Gabriel Bustos Padilla

    Hola Enrique, enhorabuena por el artículo. ¿Podríamos hacer la analogía entre StencilJS y Polymer en cuanto que generan componentes totalmente agnósticos y aplicables a cualquier plataforma web que deseemos? Un saludo

  3. Buen post, saludos…. cuando tiene previsto el lanzamiento de la v4 de ionic?

  4. Stencil no se va a quedar como un simple compilador de WebComponents. Stencil es la respuesta perfecta para los puristas/minimalistas que no tragamos las limitaciones de un framework. A Stencil le unes un componente Router (que ya lo tiene) y un Context global (lo tiene aunque no documentado) y NO NECESITAS para nada ningún framework.

    • Enrique Oriol Enrique Oriol

      Bueno, todo se verá, pero no deja de ser otro framework (en este caso para crear web components estandar).

      Por tipología, lo veo compitiendo más con Vue y React, que con Angular (en el sentido de que Angular es una plataforma más completa). Sobretodo con Vue, teniendo en cuenta la capacidad de movilización de los creadores de React. El desenlace dependerá de la adopción que consigan por parte de la comunidad y de lo buenos que sean resolviendo bugs (esto es uno de los pocos peros que le he encontrado al equipo de Ionic hasta ahora). De momento pinta interesante 😉

  5. Excelente Enrique como siempre, una pregunta ¿Qué sabes de SSR en ionic? (para mejorar el SEO en PWA)

    • Enrique Oriol Enrique Oriol

      En teoría Ionic 4 lo traerá de serie, pero hay que ver exactamente como piensan hacerlo.
      En todo caso, si lo usas un framework como Angular, Vue, o React, tienes soluciones para hacer SSR, y debería funcionar igual de bien con componentes de Ionic 4.

      • Si vas a usar ionic para webapp no necesitas SSR. Si vas a utilizarlo para web tradicional puedes usar los componentes como Webcomponents.

        Las spa si no son para webapp (mobile) son una chapuza, por mucho que se intente solucionar haciendo ssr.

  6. de cuasualidad no tendras uncurso de ionic 4 o uno con stencil?

  7. Enrique, que te parece la apuesta actual de Ionic por Stenciljs? ¿Puede ser el momento de apostar por ello?

  8. Silver Yacom Silver Yacom

    interesante articulo, no aprendo algo cuando sale otra cosa mejor!! ando aprendiendo , y creo que ionic 4 tiene futuro, pero me gustaría saber si tienes curso o tienes pensando para ionic 4? es muy interesante escribir un código y estar en todas las plataformas… un saludo

    • Enrique Oriol Enrique Oriol

      Actualmente no tengo previsto ningún curso de Ionic 4, me falta tiempo 😉

Deja un comentario