Menu

Web Components en Ionic

ionic2news - September 06, 2017 por Nicolas Molina

Vamos a hablar más a detalle sobre stencil y sobre todo en algunos detalles dichos en la conferencia sobre stencil en la Polymer Summit 2017.

Como carlos lo mencionó en el artículo anterior, stencil en el nuevo proyecto creado por el equipo de ionic.

En este artículo quiero resaltar los puntos más importante tocados en la conferencia

Web Components en Ionic

Ionic ha iniciando como SDK para múltiples plataformas orientando en principio a apps que van estar en un tienda de aplicaciones como iTunes o Google Play.

Recordemos que ionic tiene una visión clara sobre la cual construyen el framework.

One code base. Running everywhere.

Ionic es una empresa que le apuesta enteramente a las tecnologías web, es decir no hace parte de los frameworks que tienen una solución cross-platform como react native, nativescript o xamarin que funcionan de forma distinta, ionic usa la tecnología web para cumplir esta misión. Usa todo el poder de la web y lo que esto ha traído en los últimos años como PWA, Services workers, Web Components, Javascript, Html, Css, Web Animations Api etc. Por eso con ionic puedes desarrollar apps para Android, IOS, PWA y hasta apps con Electron.

Ahora si miramos un poco atrás ionic desde el principio tenía el objetivo de crear un SDK amigable para los desarrolladores y de alto rendimiento, por esta razón eligieron a Angular para poder brindar el SDK de ionic, además Angular sigue siendo uno de los frameworks más robustos y completos. Sin embargo estos últimos años también hay otros increíbles frameworks como Vue.js, React, Ember etc.

El equipo de ionic quiere poder llevar su tecnología a muchos más desarrolladores, pero soportar SDK por cada framework es difícil, una solución es poder hacer que los componentes de ionic sean Web Components nativos ya que es el pilar en el cual está basado todos los frameworks actuales. Asi ionic podria estar disponible para cualquier otro framework.

Con Web Components no solo hacen que se puedan usar el SDK de ionic en cualquier otro framework además logran una mejora muy significativa en rendimiento.

Pero al desarrollar Web Components nativos se pierden algunas características que son esenciales al momento de desarrollar.

Y boom! por eso el equipo de ionic anuncia stencil.

Stencil es un compilador que toma archivos TSX ( JSX + TS ) y los convierte en Web components nativos y adicionalmente no importa el framework que utilices Angular, React o VueJs

Un componente en Stencil podria ser así:

import { Component, Prop } from '@stencil/core';
@Component({
  tag: 'my-first-component',
  styleUrl: 'my-first-component.scss'
})
export class MyComponent {
  // Indicate that name should be a public property on the component
  @Prop() name: string;
  render() {
    return (
    <p>
      My name is {this.name}
    </p>
    );
  }
}

Y luego que esté compilado por stencil podría usarse como un simple tag html en cualquier framework, así:

<my-first-component name="nicobytes"></my-first-component>

Además los web components vienen con lazy loading por defecto.

Y ya finalizando nos dicen para quienes está enfocado stencil.

Puedes ver la conferencia completa aqui: https://www.youtube.com/watch?v=UfD-k7aHkQE

¿Ya puedo empezar a utilizarlo?

Si, puedes ingresar a su sitio oficial y seguir los pasos de instalacion aquí.

¿Donde puedo verlo funcionando?

El sitio oficial de stencil esta hecho con esta tecnologia. ademas, deberias de ver los demos y en especial este donde se muestra una solución a un problema que viene a resolver React Fiber pero que ya funciona muy bien con Stencil.

Esta tecnologia es muy prometedora y lo mejor de todo es que la vamos a tener dentro de Ionic. Que piensas? no te olvides de dejar tu opinion.

Conclusiones (desde mi punto de vista.)

  1. Los frameworks actuales soportan la creación de web components, pero en este momento ya se puede hacer de forma nativa y si el peso que trae un framework.

  2. Stencil no es nuevo framework es un compilador que nos arroja vanilla web components que pueden ser usados en cualquier framework.

  3. El las futuras versiones de ionic los componentes de ionic estarán con stencil.

  4. Los Web Components compilados por stencil son más rápidos que cualquier otro framework por el hecho de ser nativos para el navegador.

  5. Yo personalmente trabajo mucho con Angular y no lo cambiare pero esta bueno que con stencil los componentes no solo sean más rápidos, si no que los pueda usar desde otro framework. Es hora de cambiar el centro de atención en la larga e interminable discusión de que framework es mejor que otro, sin duda cada uno tiene sus puntos fuertes y diferentes maneras de hacer las cosas y estamos seguros que en el framework que escogas si te especializas y lo aprendes profesionalmente podrás lograr cosas increíbles, podemos mostrarte asombrosas apps con miles de usuarios en Angular, react y vue. El punto aquí es si elegís cualquiera de ellos no te vas arrepentir siempre y cuando lo aprendas de una forma avanzada.

¡Compártelo!