Cómo usar Web Components
HTML-код
- Опубликовано: 29 сен 2020
- En este vídeo hacemos una presentación sobre cómo usar Web Components en proyectos web.
Es el primero de una serie de vídeos donde queremos explicar cómo usar componentes del estándar de Web Components en diversos entornos y tipos de proyectos.
En esta primera presentación mostraremos por qué usar Web Components, Qué son Web Components, etc. Luego veremos cómo usar un componente ofrecido por la comunidad en un proyecto sencillo, en el que implementaremos Snowpack como herramienta frontend para poder integrar los custom elements instalados con npm en el contexto de un protecto web. 
Наука
Realmente bien este tuto, gracias, me sirvió mucho !
Wow, excelente contenido, muchas gracias por compartir.
Excelente como siempre !!!
Genial maestro muchas gracias :)
Me ha encantado. Muchas gracias
Muchas gracias a ti Jesús
@@midesweb muy buen video hermano siga adelante
eres un crack Miguel, saludos desde Bolivia.
Crack Miguel, como siempre
Qué excelente clase magistral! La verdad es que JavaScript se ha hecho muy sofisticado! Impensable hace 20 años!
Cierto, como de la noche al día!!
Súper Miguel sería genial implementaciones en angular 👍🏻
Buena explicación, gracias por aportar a la comunidad una excelente explicación
Excelente charla amigo, en verdad se aprende contigo, saludos.
Gracias! me alegro que te haya gustado! Saludos!
🔝
Genio, gracias, excelente explicacion, detallda super facil de enteder!!!
De nada! me alegro que te haya gustado!
Me encantó este video, vengo de React/Angular y quiero empezar a comercializar desarrollo de componentes para empresas de desarrollo de software, con esto ya tengo el camino prácticamente guiado.
Estupendo! ciertamente, lo suyo es hacer webcomponents para que sean transversales para cualquier stack frontend.
Gracias Miguel, excelente contenido
Gracias Edgar!! a ti por comentar! un abrazo!
Gracias Miguel!!!
Gracias a ti x comentar! buen finde!
Me encantó Miguel! Para mi caso sería muy positivo aprender a integrar esta tecnología con Wordpress, ya que desarrollo muchos themes y si bien he investigado REACT, ANGULAR y VIEW, realmente me parece demasiado para meter dentro de un theme. Muchas gracias!!!!!
Estupendo! nos pondremos manos a la obra!
Amigo, excelente video. para utilizar el web-component en angular es igual o se debe de hacer un paso previo?
Listo. configure en app.module import '@vanillawc/wc-bullet-chain/index.js'; y agregue import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; y me funciono de maravilla.
@@isaacguevara5562 estupendo!! En Angular es bien fácil pero lo veremos en un vídeo, sí
Hola, excelente video, Uso angular y esto es excelente, por que he usado angular material y esta basado en esto, otra cosa que plugin usa en la terminal para que salga coloreado?, y ter recomiendo la extensión para vscode file icon tem, gracias.
Hola, si usas Angular probablemente te interese este vídeo ruclips.net/video/LYJ5afGiLLQ/видео.html sobre Angular Material no está basado específicamente en Web Components, por lo que esos componentes solo los podrías usar en Angular. Pero Google tiene un proyecto de Web Components hechos para material design. Sobre el plugin de terminal uso "oh my zsh".
Por favor, ejemplos de como crear webcomponent con JS funcionales, con todas sus características y potencia. Gracias
Estupendo, lo apuntamos también. Aunque en esta serie de vídeos la idea es aprender a usar Web Components en cualquier ámbito... Pero es una gran propuesta también explicar cómo desarrollarlos. De todos modos, para ir abriendo boca tenemos otros vídeos en el canal que lo explican. Y cómo usar librerías como LitElement para desarrollar Web Components con una experiencia de desarrollo más amistosa.
También se podría levantar con LiveServer en VS Code o como a mi me funcionó sin servidor con file:///D:/Yo/.../index.html
que guay, gracias por comentar. De todos modos, no es muy recomendable file:// porque da problemas con muchas operaciones. Intenta mejor con un servidor web.
Gracias Miguel! Te hago una consulta ¿esto sería compatible para hacer una librería que puedan reutilizar en cualquier browser como un sdk?
No sé exactamente cuál sería el objetivo final, pero los web components justamente te asegura que los componentes van a funcionar en cualquier navegador y junto con cualquier tecnología de frontend que se pueda llegar a implementar en un proyecto.
@@deswebcom excelente. Si, estoy por implementar un sdk, que básicamente consiste en que el usuario importe un script en su html e inmediatamente pueda acceder a un popup (que va a ser un proyecto hecho en webcomponent con un formato de librería) que le ofrezca un landing payment. No sabía si hacerlo puramente con javascript o aprender un poco de webcomponent y utilizar esto. Muchas gracias! :)
@@rubnzone apoyarte en web components y una librería como litelement te ofrecerá mayor facilidad al mantener tu código, y disfrutarás mucho más desarrollando. Pero ten en cuenta que Internet explorer no soporta web components. Existe un polyfill pero la verdad sería mejor no tener que usarlo.
@@deswebcom ahhhh excelente. Lo que estaba pensando igual es usar babel para transpilar todo el código que haga a es5. Muchas gracias!
@@rubnzone Sí, sería un primer paso. pero realmente, si tienes pensado dar soporte a IE casi te recomendaría no usar nada más allá que VanillaJS, porque ni Microsoft le da soporte ya a ese navegador. Quizás usando cualquier librería de terceros dejen de soportar IE en el plazo de unos meses y te quedes con una versión antigua. Quizás me esté pasando de radical, pero prefiero mirar hacia adelante.
Si trabajo con xampp puedo importar paquetes o tengo que instalar node js
Los módulos Javascript los puedes importar siempre que lo necesites, independientemente del servidor. El detalle es que, los modulos (archivos .js) se importan en Javascript por la ruta donde se encuentra el archivo, no por el nombre del paquete. Entonces, siempre que uses la ruta no tendrás problemas. Pero si tienes que importar paquetes por nombre tendrás que contar con alguna herramienta que te haga la traducción del nombre del paquete a la ruta donde está. En este caso tienes que contar con Webpack, Snowpack o similares.
Si creo un componente con Polymer 3, para utilizarlo en un proyecto por ejemplo de React, no hay que hacer build de ningún tipo verdad? se instala el paquete via npm y se utiliza en el proyecto de React
React es el que más problemas da con Web Components. En principio no hay que hacer el build, pero lo más normal es que añadas el webcomponent al bundle de tu aplicación. De todos modos, mira en la doc de react porque igual dan algún detalle más. Tienen una sección dedicada a esto.
Hola Miguel, una duda, si deseo usar la potencia de react (reactividad, gestion de estado global, routing etc) utilizando web components como podría hacerlo?.
El estándar Javascript de momento no tiene nada para crear templates reactivos para el desarrollo declarativo, por lo que necesitas apoyarte en librerías. La más popular es LitElement, que ocupa muy pocas KB. Pero hay varias como Stencil, Atomico y demás. El tema de gestión del estado puedes usar cualquier librería, el mismo Redux por ejemplo, o cualquier otra que uses en React te valdría. Por el tema del routing lo mismo, si lo necesitas lo tienes que incorporar como librería. Una alternativa muy sencilla te la dan los PWA-Helpers, de Google, que incluyen varias herramientas interesantes que se pueden integrar con cualquier proyecto Javascript.
@@deswebcom Gracias. Por lo que entiendo debes ir armando tu "framework" a trozos según tus necesidades, existe alguna solución tipo boilerplate que traiga todo esto pero que explote el potencial de web components?
@@theframeworksupport7393 si, la ofrecen los de OpenWC estuvimos hablando con uno de sus creadores en ruclips.net/video/YvZQYO6av4w/видео.html Tienes unos boilerplate interesantes que te quitan trabajo, aunque no se meten con temas como el routing y gestión de estado. Los PWA-Helpers que recomendé tienen un mixin para LitElement que hace el trabajo de conexión con Redux muy simple. Todas estas cosas por cierto las vimos y las montamos en el curso de EscuelaIT de creación de PWA con LitElement escuela.it/cursos/curso-aplicaciones-progresivas-web-components-litelement
tienes un curso Miguel de esto con vanilla javascript?
Hay un manual en desarrolloweb que explica, pero desarrollar componentes solamente con Vanilla no es lo más práctico... te recomendaría usar Lit, que te ofrece muchas cosas en tan solo 5kb y permite un desarrollo con un estilo igual Vanilla.
Saludos, exelenete aporte, pero me queda duda como puedo crear un componente que extienda de las etiquetas como table
Bueno... generalmente extendemos el HTMLElement y si quieres crear una tabla simplemente la añades a tu template. No hay una necesidad especial de extender un elemento como si no hacer un nuevo elemento HTML que se presente como una tabla, quizás incluso sin usar la etiqueta table, para poder hacerla adaptable a navegadores
No podria desarrollar usando live-server?
(la extension de Visual studio code)
creo que Live-server no hace la parte de convertir los nombres de paquetes a nombres de rutas, que es el estándar de Javascript, por lo que tendrías un poco complicado que funcionase el live reload. Prueba a ver... pero casi siempre es mejor usar una herramienta como snowpack, que has visto lo sencillo que se hace.
@@deswebcom Lo voy a investigar. Muchas gracias por la respuesta.
Y con Astro?
No he usado Astro, la verdad! Lo recomiendas? por qué?