Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 20D : 17H : 56M : 26S

¿Qué son los Web Components?

3/22
Recursos

Aportes 10

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

De hecho, la construcción de un sitio web basado en componentes es algo que se ha venido trabajando últimamente, y es que es increíble, imagina que tú tienes un widget en tu página web. Ese widget puede fácilmente ser un componente, y tú no vas a programar ese widget cada vez que quieras usarlo (y mucho menos copiar y pegar código), tú simplemente vas a encapsularlo como un componente y a usarlo cuando quieras 😄
.
Es una filosofía similar a la Programación Orientada a Objetos, ya que permite la reutilización de código, y sí, con WebComponents tú puedes tener una etiqueta llamada: <mi-super-etiqueta> 😄

⚙️ ¿Qué son los Web Components?

  • Los webs components son como piezas de lego
    • Son partes de código las cuales se pueden reutilizar para obtener un gran resultado
  • Estan creados para ser re utilizables
    • Encapsulando código para poder reutilizar en un proyecto o incluso diferentes proyectos sin necesidad de repetir el código
  • Todos los frameworks dicen tener la filosofía de ser como piezas de lego
    • Los webs components logran cumplir el objetivo completo
      • Por qué se puede implementar web components en cualquier proyecto

Los web Components son primitivos de bajo nivel que te permiten definir tus propios elementos HMTL

  • Te permiten:
    • Generar etiquitas HTML
    • Utilizar Web Standards para construirlos
  • Las Web API’s para utilizar web components son
    • HTML Templates
    • Custom Elements ⇒ Define la etiqueta
    • Shadow DOM ⇒ Encapsula el código
    • ES Modules ⇒ Módulos para importar y exportar código entre archivos JS

RESUMEN: Los web components son fragmentos de código frontend los cuales se pueden usar en cualquier circunstancia sin importar las librerías o frameworks que uses. Para realizar este objetivo están compuestos por una serie de web API’s

esto se pone muy interesante, ya empiezo a sentir el poder!!

MY NOTES WHAT ARE THE WEB COMPONENTS

Los web components están hechos para ser reutilizables, encapsulamos cierto código que podemos reutilizar en diferentes partes de nuestra aplicación o diferentes aplicaciones, sin tener que repetir el código.

El hecho de que son como piezas de lego no es algo tan literal ya que porque no se puede reutilizar los componentes, pero los web components si pueden ser reutilizados son hechos para eso y para no solo reutilizarlo en tu aplicación si no que en otras tecnologías también seria compatible.

Los web components son primitivos de bajo nivel que te permiten definir tus propios elementos HTML

Una vez tienes un componente listo es como si tuvieras una etiqueta de html ya lista para ser usada

Los web components están construidos con web apis

  • HTML Templates : etiquetas
  • Custom Elements: algo que nos ayuda a definir una etiqueta que se convierte en una etiqueta estándar después
  • Shadow DOM: es lo que nos ayuda a encapsular
  • Es Modules: Los módulos que nos ayudan a importar cierto código de js a otro código de js y reutilizar ciertas cosas

“DROPED THE MIC” 🤣

Resumen
Los Web Components son similares a las piezas de Lego ya que el conjunto de todas ellas pueden desarrollar una gran aplicación. En resumen los Web Components son código encapsulado que se puede reutilizar en cualquier parte de tu página.

" Los Web Components son primitivos de bajo nivel que te permiten definir tus propios elementos HTML " - Utilizamos Web Standards para construirlos.

Para todo esto utilizamos Web APIs;

  • HTML Templates.
    • Es una etiqueta.
  • Custom Elements.
    • Esto nos ayuda a definir nuestra etiqueta para que se convierta en un estándar.
  • Shadow DOM.
    • Aquí es donde se produce el encapsulamiento.
  • ES Modules.
    • Aquí es donde utilizamos el importar y exportar código de JavaScript.

Hola:

Una aportación complementaria:
https://www.todojs.com/web-components-pasado-presente-y-futuro/

Saludos 😃

Parece magia 😮 ! jeje

.

<h4>¿Qué son los web components?</h4>

Son como piezas de lego reutilizables para poder armar cosas. Encapsulamos código para utilizarlo
en diferentes partes. Los frameworks y librerías NO son así.

Los Web Components son primitivos de bajo nivel que permiten definir tus propios elementos HTML.

Los Web Components están contruidos con APIs que existen en el navegador (conocidas como Web APIs),
estas son:

  • HTML Templates
  • Custom Elements
  • Shadow DOM (la magia)
  • ES Modules