Aplicaciones web con Web Components, Lit Element y Stenciljs

Name: Aplicaciones web con Web Components, Lit Element y Stenciljs
Rating: 4.5 (161 reviews)

Aprende a desarrollar aplicaciones web con Web Components, Lit Element y Stenciljs creando aplicaciones.

Created byRoberto García Recuenco

Last updated 2/2022

Spanish

What you'll learn

Desarrollo de aplicaciones web basadas en el estándar Web Components
Cómo crear web components basados en la composición.
Utilizar LitElement y Stenciljs para producir componentes de forma eficaz.
Desarrollar aplicaciones en base a lo aprendido en el curso.

Course content

5 sections • 37 lectures • 8h 41m total length

Introducción1:11
Introducción al curso de Web Components.
Instalación del entorno5:03
Breve clase sobre qué herramientas vamos a utilizar y como instalarlas en nuestro equipo.
Definición de Web Components3:20
Definimos qué son los Web Components y cuales son sus características principales y cuales son sus recursos del API de Javascript.
Templates8:04
Revisamos las características de la etiqueta template y cómo se utiliza.
Customs Elements11:49
Los customs Elements son una parte fundamental de los web components. En esta clase veremos sus características y cómo utilizarlo.
ShadowDOM14:40
En esta clase descubrimos que es el ShadowDOM y como trabajar con él.
Imports web components18:31
En esta clase se estudia cómo importar los web components en un documento html
Atributos y propiedades11:21
Se ven las diferencias en entre atributos y propiedades así como su uso mediante ejemplos.
Ciclo de vida de los web components19:47
En esta clase aprendemos como interactuar con el ciclo de vida de los web components

Diseñando nuestra aplicación8:52
En esta clase repasamos los conceptos básicos del paradigma de composición de componentes e identificamos los componentes de nuestra aplicación.
Componente Dígito11:57
En esta clase tomamos contacto con nuestro primer componente. Se explica cual es su responsabilidad dentro de la aplicación y resolvemos la parte visual.
Componente Dígito funcionalidad21:37
En esta clase establecemos la funcionalidad del componente utilizando la creación de propiedades y atributos de customs elements. Terminamos la clase realizando una ejecución en el explorador.
Estructuración de nuestro código en Módulos Javascript10:36
Antes de seguir creando nuestros web componentes es necesario que veamos cómo organizar mejor nuestro código. En esta clase vemos cómo trabajar con modularización con javascript y script modulares.
Componente contendor-digitos. Los Slots10:20
Empezamos a definir el componente contenedor-digito y tomamos contacto con el elemento slot. El último elemento del estandar web component que nos faltaba por estudiar.
Componente contendor-digitos. funcionalidad24:03
En esta clase creamos la estructura visual y la funcionalidad del componente contenedor-digitos.
Componente Botón y eventos personalizados.25:13
En esta clase creamos el componente botón y descubrimos como trabajar con los eventos personalizados.
Componente Crono12:21
En esta clase empezamos a desarrollar el componente que contiene y comunica a los demás componentes.
Componente Crono. Funcionalidad y método bind27:31
En esta clase continuamos implementando el componente crono y como utilizar la función bind.

Lit Element. Introducción y estructura de la aplicación.8:20
En esta clase se describe las principales características de LitElement y se explica los archivos básicos de la aplicación que se va a construir.
Lit Element. Componente Botón. Propiedades, estilos y eventos.20:17
En esta clase se crea el primer componente de la aplicación y sobre el se explica como declarar propiedades, establecer estilos y controlar eventos con Lit Element.
Lit Element. Componente Tabla. Establecer parámetros como atributos13:15
En esta clase se ve como pasar propiedades como se definieran como atributos dentro del template.
Lit Element. Componente Regisitro. Actualizar propiedades y actualizar hijos18:17
En esta clase vemos como manejar customs event capturados en el template y como se actualizan los hijos a partir del cambio de las propiedades del padre.
Lit Element. Crear un componente Routing reutilizable. Introducción.11:51
En esta clase se analiza el diseño de la estructura del routing.
Lit-element. Routing Componente Link13:38
En esta clase creamos el componente Link para encapsular la lógica de navegación.
Lit Element. componentes Route y ViewPort19:32
En esta clase se construyen los componentes route y viewport y se ve como modificar el contenido de un web component conectando y desconectando elementos de DOM.
Lit Element. Componente Router. La unión de routing.16:48
Terminamos el routing con el componente Router.

Stencil. Introducción a Stencil6:54
Clase introductoria a los conceptos de Stencil
Stencil. Instalación y primeros componentes12:00
En esta clase vemos cómo instalar Stencil y como crear los componentes con sentencias en consola.
Stencil. Propiedades y atributos con Stencil22:32
En esta clase se explica con ejemplos como declarar propiedades y atributos con stencil
Stencil. Propiedades II. State, listen y el Virtual DOM14:43
En esta clase vamos a aprender que son los decoradores State y Listen y lo más importante, en qué consiste el virtual DOM
Stencil. Ciclo de Vida16:58
En esta clase aprenderemos con un ejemplo cual es el ciclo de vida de stencil y sus hooks
Stencil. Eventos18:33
En esta clase vemos mediante otro ejemplo como trabajar con eventos
Componente Host y Decorador Element7:14
En esta clase terminamos de aprender a utilizar Stencijs viendo el componente Host y el decorador Element.

Web Components en una aplicación React18:32
En esta clase vemos como crear un web component dentro de una aplicación de React y utilizando Lit-Element.
Web Components como módulo en una aplicación React9:56
En esta clase vemos como utilizar un web component que se ha importado como un módulo.
Web Component como envoltura de componentes React9:14
En esta clase vemos como se puede crear un Web Component que envuelve el renderizado de componentes de React. De esta forma podemos aprovecharnos del estándar y de la optimización de React.
Angular con Web Components16:45
En esta clase se aprende cómo utilizar los Web Components en una aplicación Angular.

Requirements

Tener conocimientos básicos de javascript, CSS y HTML

Description

Curso dedicado a enseñar cómo crear aplicaciones web bajo el estándar de los web components y los principales frameworks como LitElements y Stenciljs.

El curso está distribuido en tres secciones. En la primera se trata el estándar de javascript, templates y customs elements. En el segundo bloque se pone en práctica lo aprendido más el uso de slots. En el tercer bloque se aprende el manejo de los principales frameworks actuales para trabajar con web components de forma rápida y efectiva.

Este curso está dirigido a las personas que tiene un cierto conocimiento de desarrollo web que quieran o necesiten aprender mediante la práctica a utilizar la tecnología web components para el desarrollo de aplicaciones web.

A pesar que el curso parte de la premisa de que el alumno tiene conocimientos previos de html, javascript y css, el curso desarrolla más aquellas partes que pueden ser difíciles de entender para una persona menos experimentada por lo que aquellos desarrolladores Juniors o que estén en fase de estudio podrán seguir este curso sin problemas. Para aquellos que tengan conocimientos avanzados podrán tomar este curso para adquirir los conocimientos necesarios sobre los web components rapidamente para ponerlos en practiva en un periodo corto de tiempo.

Who this course is for:

Desarrolladores que quieran aprender a utilizar el estándar Web Components
Desarrolladores que necesiten aprender a utilizar LitElement en el desarrollo de aplicaciones.

Aplicaciones web con Web Components, Lit Element y Stenciljs

What you'll learn

Explore related topics

Course content

Introducción9 lectures • 1hr 34min

Desarrollo de la aplicación9 lectures • 2hr 33min

Lit Element como Biblioteca para el desarrollo con Web Components8 lectures • 2hr 2min

Stencil7 lectures • 1hr 39min

Utilizar Web Components con React y Angular4 lectures • 54min

Requirements

Description

Who this course is for: