Stenciljs, una revolución de los componentes reutilizables

Stencil es una tecnología bastante robusta y escalable que nos permite crear componentes reutilizables para nuestras aplicaciones, sin importar con que framework frontend estemos trabajando.

Podemos crear desde componentes básicos como botones hasta algunos más complejos como calendarios personalizados, inputs increíbles, tablas bastante exigentes en cuanto a UI y funcionalidad y un sin fin de posibilidades.

Sintáxis

La sintaxis de Stencil es bastante parecida a la que usan los componentes de React orientados a clases ya que usan JSX y poseen los mismos hooks como son componentDidMount, componentDidUpdate, entre otros.

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-hello-world',
  shadow: false
})
export class HelloWorld{

@Prop() text: string;

render() {
  return(
     <h1>{this.text}</h1>
  )
}

Un componente básico de Stencil se vería de esa forma, los Props se encargan de recibir información desde el lugar donde se llame el tag, pueden ser todo tipo y pueden tener reglas especiales. Podemos ver también que en la sección del JSX. llamamos ese texto de manera dinámica para que se pueda renderizar lo que sea que le enviemos.

Ahora, veamos el mismo componente con un nivel de complejidad un poco más avanzada.

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-hello-world',
  shadow: false
})
export class HelloWorld{

@Prop() text: string;
@Prop() showSubtitle: boolean;

render() {
  return(
     <div> 
       <h1>{this.text}</h1>
       {
         !!this.showSubtitle &&
         <p>Gracias por confiar en nuestra empresa</p>
       }
     </div>
  )
}

En este ejemplo podemos ver como a través de los Props podemos mostrar u ocultar ciertos elementos del DOM de acuerdo a lo que necesitemos. Todo está en los requerimientos que tengamos, Stencil puede llegar a ser bastante útil.

En otro artículo estaré comentando acerca de su integración con Storybook para que se pueda manejar un proyecto escalable y ordenado a nivel de componentes.