Flujo de trabajo con Web Components y Polymer 3 con Webpack

• Web Components y Polymer 3
• Webpack
• Flujo de trabajo de Web Components y Polymer 3 con Webpack
• Incorporación de Polymer en proyectos de sitios web tradicionales
• Incorporación Polymer y Web Components en el framework PHP Laravel
• Dividir el código en diversos bundles: Webpack Code Splitting
• Incorporación de Polymer y Web Components en aplicaciones Angular

Nuestro objetivo en este curso es presentar a los desarrolladores un flujo de trabajo con el que puedan aprovechar ya mismo estas tecnologías en cualquier tipo de proyecto. Veremos cómo estas tecnologías te permiten la realización de sitios SPA o WPA de una manera ágil, pero también sobre sitios web tradicionales.

Por tanto, queremos remarcar que, aunque se van a explicar las partes básicas de Web Components y Polymer 3, de modo que el desarrollador sin experiencia pueda comenzar a usar estas tecnologías, no se trata de un curso exhaustivo de Polymer, como otros que ya hemos hecho en EscuelaIT. Nuestro objetivo principal es facilitar la incorporación de Polymer 3 en cualquier tipo de proyecto web.

Para ello es fundamental el uso de Webpack, que es la herramienta más extendida para llevar a producción y facilitar el desarrollo de proyectos frontend. Permite llevar a producción cualquier conjunto de assets, como Javascript, CSS, imágenes, etc. Webpack se usa en la mayoría de frameworks y librerías Javascript, así que podremos usarlo también de paso para beneficiarnos de Web Components y Polymer. Si el estudiante no usa Webpack todavía podrá comprobar que también será sencillo incorporarlo a cualquier tipo de proyecto y de paso mejorar la optimización de todos los elementos que forman parte de la parte frontend.

Cierto es que Webpack se usa más habitualmente para el desarrollo de SPA, pero en el curso te enseñaremos a usarlo en sitios web tradicionales, para que también puedas disponer del poder de Web Components y Polymer en cualquier tipo de sitio, como podría ser uno programado en PHP, Python, ASP.NET, WordPress, Symfony, Laravel, etc.

Antes de explicar mejor el enfoque de este curso debemos detenernos en analizar una vez más los motivos por los que Web Components ha supuesto una revolución fundamental en el desarrollo frontend.

Hoy, los más importantes frameworks y librerías Javascript para el desarrollo de web utilizan la arquitectura de componentes. Esta arquitectura permite crear las funcionalidades necesarias por medio de piezas reutilizables y encapsuladas y además establecer un sistema de colaboración entre componentes, de modo que unos se apoyan en otros para resolver las tareas. Los componentes en general han supuesto para el desarrollo frontend una evolución tan importante como en su día trajo la orientación a objetos en el mundo de la programación.

Sin embargo, cada framework implementa por su cuenta los mecanismos para que los desarrolladores puedan crear dichos componentes. Es decir, usan mucho código Javascript no estándar para conseguir hacer realidad esa deseable arquitectura basada en componentes. Aquí es donde entra Web Components, que no es más que una serie de APIs Javascript estándar que nos sirven para construir elementos personalizados, sin tener que depender de frameworks o librerías de terceros.

Gracias al soporte nativo de los navegadores, los Web Components consiguen tener varias ventajas:

• Liberan al navegador de la ejecución de toneladas de Javascript propietario, con el consiguiente ahorro de transferencia, memoria, batería, tiempo de procesamiento, etc. Gracias a todo ello, supone por supuesto una mejora del rendimiento de las aplicaciones.
• Permite que nuestros componentes respondan a las mismas APIs Javascript que el navegador dispone para el acceso y manipulación del DOM.
• Aumenta la encapsulación de los componentes, de modo que sólo se produce una interacción entre ellos cuando realmente es necesario y nunca accidentalmente, evitando interferencias indeseadas entre los componentes de aplicación.
• Permite que puedas usar Web Components en conjunto con otras librerías y frameworks Javascript, facilitando una total interoperabilidad.

Por su parte, Polymer 3 no es más que una extensión a las posibilidades nativas de Web Components, pensada para aumentar la productividad del desarrollador y ofrecer una mejor experiencia en su trabajo, ya que las tareas repetitivas y aburridas están implementadas por medio de la propia librería. Con Polymer y en unas pocas KB contamos con facilidades como una mayor interoperabilidad entre componentes, mejoras en el uso de propiedades, programación reactiva y enlace de datos (Data binding), trabajo con vistas fáciles de crear y mantener, etc.