Header Ads Widget

Ticker

6/recent/ticker-posts

Construyendo una PWA con Stencil

 Las PWA o Progressive Web Apps son experiencias web similares a las aplicaciones que presentan muchas ventajas para los usuarios, tales como:

  • Fiabilidad
  • Capacidad de participación
  • Rapidez / rendimiento

Lea más sobre qué hace que una aplicación sea una PWA en el blog de desarrolladores de Google

También puede leer mi artículo sobre PWA en SitePoint

Sin más información sobre los PWA, aprendamos cómo podemos construir un PWA muy rápido usando una nueva herramienta creada por Ionic Team StencilJS

Stencil es un compilador de componentes web que se puede utilizar para crear aplicaciones web frontales modernas y rápidas utilizando componentes web.

¿Es nuevo en este concepto de componentes web? esta es una definición fácil de entender

Los componentes web son un conjunto de API de plataforma web que le permiten crear nuevas etiquetas HTML encapsuladas, reutilizables y personalizadas para usar en páginas web y aplicaciones web. Los componentes y widgets personalizados se basan en los estándares de componentes web, funcionarán en navegadores modernos y se pueden usar con cualquier biblioteca o marco de JavaScript que funcione con HTML. Fuente

Por tanto, los componentes web son un conjunto de navegadores modernos que permiten a los desarrolladores crear sus propias etiquetas HTML (es decir, pueden ampliar el lenguaje HTML), reutilizarlas sin reinventar la rueda cada vez y compartirlas con otros desarrolladores.

Una vez que crea un componente web, puede usarlo, simplemente use cualquier etiqueta HTML estándar. Por ejemplo:

<my-comp></my-comp>

No hace falta decir que puede crear componentes web sin Stencil, entonces, ¿por qué usar Stencil?

Stencil te proporciona

  • una API de TypeScript fácil para crear su componente y luego generar un componente web compatible con el estándar (específicamente un elemento personalizado )
  • un conjunto de API modernas como DOM virtual y JSX
  • 6kb min + tiempo de ejecución gzip, renderizado del lado del servidor
  • Renderizado Async inspirado en React Fiber
  • Enlace de datos reactivo
  • Agnóstico del marco (los componentes web se pueden usar con cualquier marco o sin marco si lo desea)
  • servidor de desarrollo y recarga en vivo como la mayoría de las herramientas modernas
  • y le ayuda a crear fácilmente PWA basados ​​en estándares web y sin un marco

Vea este video de lanzamiento para obtener más información. 

¿Lo que vas a aprender?

En este tutorial comenzaremos a usar Stencil y aprenderemos los primeros conceptos básicos y luego crearemos una PWA del mundo real simple.

Aprenderás

  • cómo instalar Stencil
  • cómo crear su primer componente web con Stencil y TypeScript
  • cómo construir y generar su componente web
  • cómo construir una PWA simple desde cero usando Stencil

Requisitos

Como la mayoría de las herramientas de JavaScript modernas en estos días, necesitará Node.js y NPM instalados.

Si aún no están instalados (¡tal vez haya comprado una computadora nueva!) Simplemente diríjase al sitio web oficial de Node.js y obtenga el instalador para su sistema operativo. El proceso de instalación es generalmente sencillo.

Iniciar un nuevo proyecto de plantilla

Iniciar un proyecto de Stencil implica solo clonar un iniciador de proyecto oficial de GitHub y luego instalar las dependencias

Así que dirígete a tu terminal (o símbolo del sistema) y ejecuta el siguiente comando (necesitas tener Git instalado)

git clone https://github.com/ionic-team/stencil-app-starter my-stencil-pwa

Esto creará la my-stencil-pwacarpeta y clonará los archivos del proyecto de inicio allí.

Deberá navegar dentro de la carpeta raíz de su proyecto e instalar las dependencias:

cd my-stencil-pwa
npm install

A continuación, puede iniciar un servidor local de recarga en vivo ejecutando el script de inicio npm

npm start

Si obtiene un error relacionado con Node.js ENOSPC (Error Not Enough Space) en Linux o Mac pero aún tiene suficiente espacio en su disco, simplemente aumente el número de observadores del sistema ejecutando este comando:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

El servidor local se ejecuta en http: // localhost: 3333 /

Esta es la estructura de directorios del proyecto.

Si su aplicación Stencil comienza con este error: Esta aplicación Stencil está deshabilitada para este navegador. como en la siguiente captura de pantalla

El error se debe a que su navegador (Firefox en mi caso) aún no es compatible con las importaciones de módulos ES

En su lugar, solo necesita ejecutar el siguiente comando

npm run dev --es5

Ahora debería poder ver su aplicación en funcionamiento


Publicar un comentario

0 Comentarios