Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 7D : 2H : 10M : 8S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

APIs de Web Components

4/22

mi poder aumenta…!!

En este enlace tienen la definición de las API’s de las que se acaban de hablar:
.
https://developer.mozilla.org/es/docs/Web/Web_Components#conceptos_y_uso
.
Lo que más me llama la atención es el shadow DOM porque se parece mucho a lo que hace Vue (y yo sé que cuando un experto lea esto le va a dar algo). Se parece en el sentido en que hacen lo mismo, es decir, encapsulan todo el código y permiten generar un scope para cada elemento por separado.
.
Sin embargo, el cómo lo hacen es otra cosa aparte, mientras que Vue tiene que usar algunas técnicas para encapsular todo y demás, WebComponents lo hace directamente con tecnologías nativas, es decir, es como crear un sub-dom únicamente para este elemento.
.
Ya había visto el shadow dom antes, la primera vez que lo vi fue como “what is this?” jaja, por cierto, las etiquetas iframe, también tienen un shadow DOM 👀

Aquí esta en enlace a webcomponents
webcomponets.org

🗺️ APIs de Web Components

<h4>Apuntes</h4> <h4>Custom Elements</h4>
  • Es la API que te permite definir la etiqueta usando un web component
  • HTML 5 implico una mejora en semántica
    • Brinda nuevas etiquetas como ser <header> <main> <section <footer> las cuales mejoran temas como ser:
      • Accesibilidad
      • Marcar secciones el código de una mejor forma
      • Mejorar la lectura del código
    • Actualmente se sigue aumentando el standard
      • Eso implica que si generamos etiquetas propias puede haber un conflicto de nombres
  • Para evitar el problema de colisión de nombres se debe nombrar los elementos con dos palabras my-component
    • Debido a que el standard sigue la regla que las nuevas etiquetas que se introducen son con solo una palabra
<h4>Shadow DOM</h4>
  • No es una alternativa al virtual DOM
  • La etiqueta video cuenta con Shadow DOM
    • Esta etiqueta cuenta con cosas programadas como ser
      • Botones de play, pausa y agrandar
      • Barras interactivas como ser el avance del video y el volumen del mismo
      • Estilos propios
    • Los estilos nunca tendrán un conflicto con nuestros estilos debido a que está usando el shadow DOM
  • Es decir que el código vive dentro del shadow DOM y no coexiste con el código de afuera
    • Resolviendo el problema de conflictos con los estilos
<h4>HTML Template</h4>
  • Es una etiqueta de HTML
  • No se puede usar directamente con HTML
    • Se debe usar JS para utilizarla
  • Regresa un document fragment
    • Es un fragmento, parte del document que necesita ser clonado para ser renderizado
  • Utilizar esta etiqueta hace que todo el contenido no se muestre
    • Nos da performance, porque no se renderiza directamente
<h4>ES Modules</h4>
  • Nos permite re utilizar el código de otros archivos
  • HTML Imports
    • Importaba el contenido HTML de otro
    • Pero no fue standard

RESUMEN: Para crear web components se necesitan cuatro tecnologías, Custom Elements para crear etiquetas de HTML, Shadow DOM para no tener conflictos con el código externo y pueda vivir nuestro código en diferentes lugares y finalmente ES Modules para poder reutilizar el código

Una etiqueta de <video> contiene la opcion “controls” que nos agrega de manera predeterninada las opciones de play/pause, mute/unmute, etc. Si queremos un estilo mas cool para los controles del video deberiamos hacerlo con JavaScript y CSS.

Aqui esta la pagina oficial de web components!
https://www.webcomponents.org/

<h4>API de Web Components</h4>

Custom Elements -> Podemos crear nuestra etiqueta HTML y el navegador lo entenderá.

Regla de programadores: No hagas código para ti, haz código para los demás.

Etiquetas HTML5 personalizadas, por ejemplo:

<!--regla, tener un mínimo de 2 palabras separadas por un guión -->
<mi-mapa></mi-mapa>
<reproductor-de-musica></reproductor-de-musica>

Shadow DOM -> No es algo nuevo. La etiqueta video tiene shadow dom. Al abrir esta etiqueta en las DEV Tools veremos una sección que dice “#show-root”.

Página donde podemos ver los componentes hechos por la comunidad

Documentación de Mozilla sobre Web Components

HTML Template -> Es una etiqueta de HTML, pero no la puedes usar en HTML, tienes que hacer un match con JS.

ES Modules -> Es la forma de usar código de JS en otro documento JS.

APIs de Web Components

  • Custom Elements
  • Shadow DOM
  • HTML Template
  • ES Modules

.

mi poder aumenta…!!

En este enlace tienen la definición de las API’s de las que se acaban de hablar:
.
https://developer.mozilla.org/es/docs/Web/Web_Components#conceptos_y_uso
.
Lo que más me llama la atención es el shadow DOM porque se parece mucho a lo que hace Vue (y yo sé que cuando un experto lea esto le va a dar algo). Se parece en el sentido en que hacen lo mismo, es decir, encapsulan todo el código y permiten generar un scope para cada elemento por separado.
.
Sin embargo, el cómo lo hacen es otra cosa aparte, mientras que Vue tiene que usar algunas técnicas para encapsular todo y demás, WebComponents lo hace directamente con tecnologías nativas, es decir, es como crear un sub-dom únicamente para este elemento.
.
Ya había visto el shadow dom antes, la primera vez que lo vi fue como “what is this?” jaja, por cierto, las etiquetas iframe, también tienen un shadow DOM 👀

Aquí esta en enlace a webcomponents
webcomponets.org

🗺️ APIs de Web Components

<h4>Apuntes</h4> <h4>Custom Elements</h4>
  • Es la API que te permite definir la etiqueta usando un web component
  • HTML 5 implico una mejora en semántica
    • Brinda nuevas etiquetas como ser <header> <main> <section <footer> las cuales mejoran temas como ser:
      • Accesibilidad
      • Marcar secciones el código de una mejor forma
      • Mejorar la lectura del código
    • Actualmente se sigue aumentando el standard
      • Eso implica que si generamos etiquetas propias puede haber un conflicto de nombres
  • Para evitar el problema de colisión de nombres se debe nombrar los elementos con dos palabras my-component
    • Debido a que el standard sigue la regla que las nuevas etiquetas que se introducen son con solo una palabra
<h4>Shadow DOM</h4>
  • No es una alternativa al virtual DOM
  • La etiqueta video cuenta con Shadow DOM
    • Esta etiqueta cuenta con cosas programadas como ser
      • Botones de play, pausa y agrandar
      • Barras interactivas como ser el avance del video y el volumen del mismo
      • Estilos propios
    • Los estilos nunca tendrán un conflicto con nuestros estilos debido a que está usando el shadow DOM
  • Es decir que el código vive dentro del shadow DOM y no coexiste con el código de afuera
    • Resolviendo el problema de conflictos con los estilos
<h4>HTML Template</h4>
  • Es una etiqueta de HTML
  • No se puede usar directamente con HTML
    • Se debe usar JS para utilizarla
  • Regresa un document fragment
    • Es un fragmento, parte del document que necesita ser clonado para ser renderizado
  • Utilizar esta etiqueta hace que todo el contenido no se muestre
    • Nos da performance, porque no se renderiza directamente
<h4>ES Modules</h4>
  • Nos permite re utilizar el código de otros archivos
  • HTML Imports
    • Importaba el contenido HTML de otro
    • Pero no fue standard

RESUMEN: Para crear web components se necesitan cuatro tecnologías, Custom Elements para crear etiquetas de HTML, Shadow DOM para no tener conflictos con el código externo y pueda vivir nuestro código en diferentes lugares y finalmente ES Modules para poder reutilizar el código

Una etiqueta de <video> contiene la opcion “controls” que nos agrega de manera predeterninada las opciones de play/pause, mute/unmute, etc. Si queremos un estilo mas cool para los controles del video deberiamos hacerlo con JavaScript y CSS.

Aqui esta la pagina oficial de web components!
https://www.webcomponents.org/

<h4>API de Web Components</h4>

Custom Elements -> Podemos crear nuestra etiqueta HTML y el navegador lo entenderá.

Regla de programadores: No hagas código para ti, haz código para los demás.

Etiquetas HTML5 personalizadas, por ejemplo:

<!--regla, tener un mínimo de 2 palabras separadas por un guión -->
<mi-mapa></mi-mapa>
<reproductor-de-musica></reproductor-de-musica>

Shadow DOM -> No es algo nuevo. La etiqueta video tiene shadow dom. Al abrir esta etiqueta en las DEV Tools veremos una sección que dice “#show-root”.

Página donde podemos ver los componentes hechos por la comunidad

Documentación de Mozilla sobre Web Components

HTML Template -> Es una etiqueta de HTML, pero no la puedes usar en HTML, tienes que hacer un match con JS.

ES Modules -> Es la forma de usar código de JS en otro documento JS.

APIs de Web Components

  • Custom Elements
  • Shadow DOM
  • HTML Template
  • ES Modules

.