Introducción a StencilJS, componentes rehusables

Introducción a StencilJS
En esta Introducción a StencilJS vamos a ver para qué nos puede ayudar este potente compilador.

Cómo ya he dicho, StencilJS es un compilador que genera componentes web y combina los mejores conceptos de los frameworks más populares en una herramienta simple en tiempo de compilación.

Las características más destacadas de StencilJS son las siguientes.

  • DOM virtual.
  • Procesamiento asincrónico (inspirado en React Fiber).
  • Datos reactivos.
  • Typescript.
  • JSX.

StencilJS ha sido creado por el equipo de Ionic Framework para ayudar a construir componentes más rápidos y que sean capaces de funcionar en todos los marcos principales, en la próxima versión de Ionic, Ionic 4, hablaremos mucho de StencilJS, estoy seguro.

Capacidad de generar y reutilizar

La idea de StencilJS es poder crear, publicar con npm o simplemente desarrollar componentes para que puedan ser utilizados en tus aplicaciones de una forma sencilla.

Crea 1 y utilízalo las veces que necesites en cualquier app, Angular o React, aquí puedes ver la guía de integración con estos frameworks y aquí la guía de distribución.

Desarrolla tus apps con StencilJS

Eso no es todo, StencilJS no sólo sirve para generar componentes rehusables, también podemos desarrollar completas apps de forma sencilla (aquí tienes una demo), en este tutorial vamos a ver el proceso de instalación y cómo desarrollar un sencillo componente.

Primera aplicación con StencilJS

Para crear nuestra primera app sólo debemos ejecutar los siguientes comandos.

Eso habrá creado un directorio my-app con todo lo necesario para empezar a trabajar con una estructura similar a la siguiente.

Configuración en StencilJS

Los archivos más importantes de nuestra app son todo lo que está dentro de src, ya que aquí será donde trabajaremos normalmente y el archivo stencil.config.js que contiene lo siguiente.

  • Bundles: La configuración de paquetes es una matriz de objetos que representa cómo se agrupan los componentes en paquetes de carga lenta. Es importante tener en cuenta que cada componente de StencilJS debe incluirse en un paquete para que pueda ser utilizado. Para utilizar cada componente haríamos uso de su nombre en un tag html.
  • Colecciones: La configuración de colecciones especifica bibliotecas de StencilJS de terceros. Como todo en StencilJS es asíncrono y está cargado de forma diferida por defecto, es importante NO tener ninguna declaración de importación que vincule componentes. Cualquier biblioteca listada en la entrada de colecciones de listas será reconocida e incluida en la aplicación por el compilador StencilJS. Por defecto, se incluirá @stencil/router.

Aquí tienes todas las explicaciones sobre la configuración de StencilJS.

Nuestro primer componente con StencilJS

Crear un componente con StencilJS es muy sencillo, añade la siguiente estructura dentro del directorio src/components y será suficiente.

Todo componente está definido al menos por un archivo .tsx, y opcionalmente por un .scss, aunque tenemos más opciones.

Para entender cómo funciona un componente vamos a crear un sencillo ejemplo haciendo uso de algunos datos que paso a explicar.

Una buena mezcla de React y Angular, eso está claro :P, dentro de @stencil/core tenemos todo lo que necesitamos para desarrollar nuestras apps, lo veremos en próximos tutoriales.

El decorador @Component

Este decorador nos ayudará a representar algunas características de nuestro componente, esta es su interfaz.

Aunque en nuestro caso sólo utilizamos tag y styleUrl, tenemos muchas opciones.

  • Tag será la forma en la que utilizaremos nuestro componente en otras zonas de nuestra app.
  • StyleUrl será el archivo scss que utilizaremos para cargar estilos para este componente.

El decorador @State, datos privados

@State nos ofrece la posibilidad de añadir datos privados a un componente, es decir, datos que sólo podrá generar él, podemos ver el caso de todos y todo más arriba, son las propiedades de la clase para que nos entendamos.

El decorador @Prop, datos de entrada

Si quisieramos ofrecer datos de entrada a este componente, deberíamos utilizar @Prop de la siguiente forma.

@Prop hace exactamente lo mismo que el decorador @Input en Angular.

De momento lo vamos a dejar aquí, más adelante profundizaremos más para poder desarrollar cosas más interesantes, espero que te haya parecido interesante esta Introducción a StencilJS.

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Nuevo Curso de Vuejs 2 Avanzado con Vuex y AdonisJs 4Acceder ahora
+ +