Flujo de trabajo con Web Components y Polymer 3 con Webpack

FrontEnd

Curso de Web Components y Polymer 3, enfocado a la creación del flujo de trabajo con Webpack.

Intermedio Medio (de 8 a 20 horas) Precio en promoción 75€ 49€

En este curso vamos a ofrecer todo el conocimiento necesario para aprovechar la mayor revolución del desarrollo frontend de los últimos años: Web Components. Para ello, nos apoyaremos en la librería Polymer 3, que ofrece diversas mejoras con respecto a sus predecesores y gracias a las cuales hoy es posible aplicar las prácticas más comunes y avanzadas en el desarrollo del lado del cliente.

En el curso de Web Components y Polymer 3 explicaremos además cómo configurar nuestros entornos de trabajo, para poder beneficiarse de estas tecnologías en cualquier tipo de proyecto. Para facilitar nuestra labor y obtener un flujo de trabajo optimizado y amistoso para el desarrollador, nos apoyaremos en Webpack, una herramienta que sirve para empaquetar código Javascript, pero que en la práctica podemos usar para trabajar con CSS, preprocesadores, automatizar tareas y un largo etc.

Por qué Web Components

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.

Objetivos del curso de Web Components y Polymer 3 con Webpack

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.

Los estudiantes a los que va dirigido este curso son:

   - Aquellos que desean beneficiarse de la corriente de los Web Components y Polymer para el desarrollo de cualquier tipo de proyecto

   - Profesionales que conocen Polymer 1 y/o Polymer 2 de antemano, que desean actualizarse a Polymer 3 y de paso conocer nuevas maneras de usarlo, que agregan valor y amplían su abanico de posibilidades de la librería. (A pesar de este punto, aclaramos que no es requisito conocer Polymer en sus anteriores versiones para el acceso a este curso).

   - Desarrolladores de otros frameworks y librerías como Angular, que deseen también incorporar Web Components estándar en sus proyectos.

   - Desarrolladores que pretendan sustituir a librerías antiguas como jQuery y así beneficiarse de las ventajas de Web Components y el catálogo de componentes existentes en la actualidad.

Índice de contenidos del curso

Clase 1: Presentación de Web Components y Polymer 3

Clase 2: Iniciación rápida a Webpack

Clase 3: Flujo de trabajo de Web Components y Polymer 3 con Webpack

Clase 4: Incorporación de Polymer en proyectos de sitios web tradicionales

Clase 5: Incorporación de componentes Polymer en frameworks

Requisitos para el acceso al curso

Los desarrolladores necesitarán un conocimiento medio sobre las tecnologías estándar Javascript: HTML + CSS + Javascript.

No es requisito conocer frameworks basados en vistas, Polymer en versiones anteriores o el empaquetador Webpack. No obstante, sí es un conocimiento que, de tenerlo en mayor o menor medida, facilitará la curva de aprendizaje y el aprovechamiento de los conocimientos adquiridos en el curso.

CONTENIDO

Este curso no empezó todavía
A medida que se impartan las clases irán apareciendo en este espacio

CONTENIDO

Este curso no empezó todavía
A medida que se impartan las clases irán apareciendo en este espacio