Desde el lanzamiento de las primeras versiones de Polymer venimos usando el Polymer CLI para iniciar proyectos de componentes y/o aplicaciones con Web Components y Polymer. Actualmente en LitElement, aunque podemos seguir usando muchas de las herramientas que nos ofrece el Polymer CLI, los generadores de código para el inicio de proyectos están basados en Polymer 2 y Polymer 3.

Personalmente esperaba el lanzamiento de una actualización para Polymer CLI que permitiera construir, sin partir desde cero, proyectos basados en LitElement. Sin embargo quizás comienza a no tener sentido esta actualización debido al surgimiento de la Open-WC, que nos ofrece una suite de herramientas que puede sustituir completamente al Polymer CLI.

Qué es la Open-WC

"open-wc" es un colectivo de desarrolladores entusiastas de Web Components. Es abierto, como su nombre indica, ya que no está vinculado en principio a ninguna librería o framework en particular. Su objetivo es proveer a la comunidad de un set de herramientas que permita usar de manera cómoda y rápida Web Components, aportando además una base sólida para el desarrollo.

Trabajan bajo la filosofía de permanecer lo más cerca posible de los estándares abiertos del navegador, lo que aportará el mayor aprovechamiento del código a largo término. Ofrecen soluciones que explotan al máximo los avances de los navegadores modernos y, de manera opcional, soluciones que permiten también la ejecución de código basado en Web Components para navegadores antiguos y desfasados, como IE11. Ambas conviven en harmonía, de modo que la capa de compatibilidad para navegadores desactualizados no entorpece ni recarga innecesariamente la ejecución o descarga en navegadores modernos.

Podemos encontrar una descripción proyecta de open-wc en https://open-wc.org/

Cómo iniciar un proyecto basado en LitElement

En este artículo explicaremos cómo construir un proyecto para comenzar a desarrollar fácilmente con Litelement.

Para comenzar necesitamos disponer de NodeJS instalado en el sistema. Ten en cuenta que, si instalaste Node hace tiempo quizás necesites actualizarlo, ya que la versión mínima necesaria para funcionar es Node 10 con npm 6 o superior.

Mediante la consola nos dirigimos a la carpeta de nuestros proyectos y lanzamos el comando:

npm init @open-wc

Lanzado el comando nos aparecerá un asistente de consola, que nos solicitará información sobre lo que queremos inicializar.

1. En principio nos pregunta si queremos iniciar un nuevo proyecto o hacer un upgrade de uno existente.
2. Luego nos pregunta qué estamos construyendo. Puede ser: 1) un proyecto de componente web, 2) un proyecto de aplicación sencilla, o 3) un proyecto de aplicación un poco más avanzada.
3. A continuación nos solicita que indiquemos qué cosas queremos que se añadan al proyecto. Por ejemplo, un sistema de linting para mejorar la calidad y estandarización del código, un sistema de testing para componentes y aplicaciones, un demo del componente que se está realizando o un sistema de build, para construir los archivos que se llevarán a producción.
4. También ofrece dos alternativas de sistemas para empaquetar el código para producción. Rollup y Webpack. Recomiendan Rollup por ser más sencillo para configurar y porque es capaz de aprovechar la característica de los ES6 modules, disponibles en todos los navegadores actuales.
5. A continuación solicita que indiquemos qué partes se desea incorporar en el scaffolding, para que nos cree archivos de ejemplo para demo, building, etc.
6. Por último solicita el nombre del componente que se va a desarrollar, o de la aplicación.

Una vez acabado el asistente nos indicará qué estructura de proyecto va a producir. Por ejemplo esta es una estructura de proyecto para un componente, con linting, demo y sistema de build.

Finalmente nos indica qué comandos tenemos que ejecutar para comenzar a servir este proyecto en local.

Como ves en la imagen, tenemos que hacer "cd" para situarnos en la carpeta del proyecto, que tiene el mismo nombre del componente o aplicación y seguidamente lanzar el comando:

npm run start

Herramientas disponibles en proyectos open-wc

Con esto podemos comenzar a desarrollar nuestro proyecto. Aquí ya entran en juego tus conocimientos de LitElement o Web Components en general, que adquieres en el Manual de LitElement de DesarrolloWeb.com o en el Curso de LitElement de EscuelaIT.

Cuando quieras usar las herramientas que open-wc te ofrece tendrás que lanzar nuevos comandos desde la consola.

La manera más cómoda de ver qué comandos se han producido para ti es abrir el archivo package.json y leer en la sección de "scripts". Encontrarás una buena cantidad de ellos, que dependerá de las herramientas que has decidido instalar al iniciar tu proyecto con el asistente.

En esta imagen puedes ver una lista de comandos para un proyecto de componente.

Los más importantes que seguramente necesitarás usar a corto plazo son:

• start (npm run start): para que te abra el servidor de desarrollo con el proyecto en funcionamiento.
• build (npm run build): para que se ejecute el mecanismo de producción de los archivos del proyecto. Creará una carpeta "dist" con los archivos compilados, minimizados, etc. Esa carpeta es la que subiremos para llevar a producción el proyecto.
• start:build (npm run start:build): ejecuta el proyecto, pero el que se tiene en la carpeta de producción. Es muy útil para saber si los archivos que tenemos en la carpeta dist funcionan tal como se esperan.

Personalización adicional

Seguramente llegará el momento en el que quieras personalizar un poco más tu flujo de trabajo, agregando complementos que necesites para un proyecto en concreto. Para estos casos necesitas conocer un poco las herramientas que open-wc usa por debajo, es decir Rollup o Webpack.

Para mayores detalles de personalización te recomendamos seguir las guías publicadas en el propio sitio de open-wc. Sin embargo hay una que es especialmente sencilla e interesante que sí queremos comentar.

Soporte para navegadores antiguos

El sistema de build predeterminado en open-wc no incluye toda la capa de compatibilidad para IE11. Si lo deseamos lo tenemos que activar. Para ello es necesario editar el código de un archivo, cuyo nombre dependerá de si estás usando Webpack o Rollup.

Rollup

Editar el archivo "rollup.config.js". En él encontrarás una línea con un import de una dependencia llamada "modern-config". La tienes que sustituir por "modern-and-legacy-config"

import createDefaultConfig from '@open-wc/building-rollup/modern-and-legacy-config';

Webpack

En Webpack sí que está activada por defecto (al menos por ahora) la configuración para el build compatible con navegadores antiguos (IE11). De todos modos, si lo necesitas cambiar, el archivo que necesitas editar ahora se llama "webpack.config.js". Igual que antes tienes que intercambiar una dependencia, entre "modern-config" y "modern-and-legacy-config".

La línea que necesitas editar es esta:

const createDefaultConfig = require('@open-wc/building-webpack/modern-and-legacy-config');

Conclusión

Esperamos que estas guías te sirvan para que tu entrada en el mundo de los Web Components sea más sencilla, gracias a las recomendaciones y estructuras de proyectos proporcionados por la open-wc.

Recuerda que puedes seguir aprendiendo a sacar partido a Web Components con el Manual de LitElement.