Web Components y LitElement - Curso clase 1
HTML-код
- Опубликовано: 16 апр 2019
- Primera clase del curso de Web Components con LitElement. En esta clase veremos qué es Web Components, qué es LitElement. Cómo construir componentes con LitElement, cómo usar los componentes en cualquier tipo de proyecto y cómo instalar componentes de terceros para beneficiarnos de todo el catálogo de componentes creados por la comunidad.
En los primeros 20 minutos de clase repasaremos conceptos teóricos sobre la tecnología y el estándar Javascript de Web Components y la mayor parte de la clase la emplearemos en crear diversos componentes que nos sirvan para ilustrar temas más básicos de LitElement, como son las propiedades, la declaración de manejadores de eventos, el uso de componentes y la composición de unos componentes en base a otros y mucho más. 
Наука
Al comprar el curso es acceso de por vida? Estuve buscando en otras plataformas y nada más no hay muchos, ustedes tienen oro puro! 🤩
Hola Adolfo!
Es como dices, al comprar el curso lo tendrás de por vida.
Párese que esto podría funcionar con el patrón MVVM que se usa en WPF, el template sería la vista el LitElement sería la vistaModelo y el modelo pues esta fácil, entiendo que los que no vengan de OOP o todavía no sean arqutectos desconozcan lo que estoy diciendo pero esto de los web components es un avance exponencial para JS y HTML creo que con esto ya no está muy lejos de lenguajes como java y conserva sus mejores características
Gracias por tu comentario! me alegro que te haya gustado el avance de los web components. Nosotros llevamos años divulgando y apoyando el uso, así que mensajes como el tuyo nos encantan!!
Hola, estoy siguiendo tu curso y es super interesante.
Estoy tratando de importar LitElement en un proyecto que usa PHP.
Pero al realizar la referencia del hola-mundo.js me da el siguiente error: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
¿Tienes alguna solución?
Gracias!
Tendría que ver tu código, pero seguro que es una cosa simple.
Me gusta mucho LitElement pero no veo una amplia comunidad, parece que google no le da mucha importancia, teniendo en cuenta esto, sera recomendable usarlo en producción ?
Por supuesto que se pueden usar en producción. Nosotros lo estamos usando en varios proyectos y es excelente, tanto la experiencia de desarrollo como su versatilidad y adaptabilidad, rendimiento, etc.
Ya luego lo de si google le está dando o no la suficiente importancia es algo bastante subjetivo. Nosotros pensamos que sí, dado que muchos proyectos de primera línea de Google usan Polymer como RUclips sin ir más lejos. Además, todas las novedades más importantes que se incorporan en los navegadores están siendo usadas antes que nadie por LitElement, como los Constructable Stylesheets de los que pocas personas conocen y que aportan muchas ventajas. En Fin, que Chrome tiene en LitElement la primera de las librerías en adoptar las mejoras que se van proponiendo. Creo que es más la comunidad frontend la que tiene que darle la oportunidad y salir de su zona de confort para unirse a la onda de los Web Components.
holaa. Haran un video de lit? la libreria que salio hace poco que usa litElement y lit-html? Seria chereve que lo hicieran con Material Design de google y explicaran la ventaja de usar lit contra otras librerias o frameworks. O un curso pago en la pagina, tambiens seria interesante
Prácticamente no ha cambiado, así que lo que aprendes aquí lo puedes aplicar todo perfectamente. De todos modos, claro que vamos a hacer esos vídeos y cursos!
Hola, estoy comenzando con LitElement, tengo una duda: Se puede incorporar un widget dentro de un componente LitElement?, es decir; quiero incorporar un jqxGrid dentro de un componente de LitElement, se puede hacer eso y como seria la incorporacion?
Hola! claro que puedes, al final es todo Javascript, así que puedes incorporar cualquier código de Javascript que tengas por ahí. No obstante, lo más importante en LitElement y Web Components en general es que tienes un renderizado en el shadow DOM en vez del DOM común del documento. Esto quiere decir que, si tu widget se dedica a manipular el DOM directamente, puede que tenga problemas si insertas tal cual el componente en un template. La solución puede ser diversa, pero generalmente pasa por usar el Light DOM del componente, en lugar del shadow DOM. Esto es algo que lo tenemos cubierto en el curso de LitElement de EscuelaIT escuela.it/cursos/curso-web-components-litelement pero también puedes buscar alguna referencia en Google por "render light dom".
Puedes hacer una SPA con LitElement ? Con Rutas, y no le afecta al SEO ?
Si claro, puedes hacer una SPA con Web Components y por lo tanto con LitElement. Las SPA siempre les afecta el SEO. Si te ineresa el SEO no es tan adecuada una SPA y te interesa más un sitio común o un sitio generado con un framework static site generator, en los que puedes usar LitElement también. Pero si quieres una SPA con Server Side Rendering tienes esto developers.google.com/web/tools/puppeteer/articles/ssr y sé que en la nueva versión de Lit-element y Lit-html han hecho ligeros cambios para que se pueda facilitar hacer soluciones con server side rendering www.polymer-project.org/blog/2020-09-22-lit-element-and-lit-html-next-preview
Can you please tell me how to use the decorator syntax, the property property in conjunction with the redax?
I want use @property({type: Array}) stages instead of
static get properties() {
return {
stages: {type: Array}
}
but this property defined in _stateChanged(state) {
this. = state.reducer.stages
}
so it posible?
I am not using typescript decorators right now. So, i cant answer you at this moment
Hagan un video de integracion en la nube con dell boomi porfa
Gracias por tu sugerencia. De momento no tenemos pensado abordar este tema, la verdad. Si por un casual se pone a tiro con algún ponente, encantados hacemos el vídeo.
¿El curso tiene continuidad o es solo este vídeo?
El curso completo lo tienes en EscuelaIT: escuela.it/cursos/curso-web-components-litelement
puedo usar litelement sin hacer un build, es decir, usarlo a partir de un cdn? como vue por ejemplo.
En principio podrías, para componentes sencillos. En el momento que tengas una biblioteca de componentes sería mejor hacer tu build. Mira a ver si esta solución te vale. stackoverflow.com/questions/68614776/using-lit-with-javascript-and-no-build-tools
Espero que me digas qué te parece!
Hola Miguel, se que no nos conocemos ni nada parecido pero quería venir a pedir ayuda de tu parte con algo que quizás suene a demasiado. En estos momentos me encuentro estudiando la universidad y quisiera poder mejorar mis habilidades con nuevas tecnologías y sobre todo con una tan interesante y útil como lo es litelement. He visto en varias vacantes, sobre todo relacionadas con bancos que es un requisito y me gustaría conocer la tecnología y dominarla a un muy buen nivel antes de siquiera salir de la universidad para estar preparado para cualquier oportunidad que se me presente, ya sea que esté relacionada con esta tecnología directamente o que simplemente pueda proponerle en futuros empleos. El punto que quiero tocar y la ayuda que te pido es si de casualidad podría obtener un descuento en los dos cursos que vi en EscuelaIT ya que realmente me interesaron, pero creeme que siendo estudiante no tengo mucho dinero y el hecho de que el precio esté en euros del curso no me ayuda mucho, no pido un descuento muy grande ni nada, realmente lo que tu consideres adecuado me sería de mucha ayuda y yo vería como pago el resto. Espero que no sea mucha molestia lo que estoy pidiendo y cualquier cosa si no me puedes apoyar creeme que lo entenderé.
Te agradezco que hayas leído este mensaje y espero que EscuelaIT siga entregando un buen trabajo como hasta ahora.
Gracias por tu mensaje! con gusto te podemos ayudar. Efectivamente WebComponents y LitElement se usa en varios bancos importantes. Ponte si quieres en contacto conmigo en miguel@escuela.it
@@deswebcom Muchas gracias, ya te he enviado un mensaje a tu correo. Agradezco tu rapida respuesta.
Hola,
Necesitaria enviar un json al web components pero no tengo muy claro como usarlo/ leerlo desde js.
He usado la siguiente sintaxi en HTML
Desconozco si se puede usar asi o si es la mejor manera para hacerlo.
Desde el JS estoy usando JSON.parse y me da error, entiendo porque ya es un JSON.
Necesito desde JS recorrer este json y luego poder hacer cosas.
Muchas gracias.
Hola! no se suele usar mucho eso de cargar un json desde el HTML. Se puede perfectamente, alguna vez lo he hecho, pero solamente en algún caso muy especial porque era necesario hacerlo así.
En todo caso, no tienes que parsear el json, siempre que tengas declarada la propiedad como type object o type array como en tu caso parece que deberías.
El problema aquí es que tienes el json mal formado. Así sería correcto:
Tampoco solemos poner las propiedades de los componentes con la primera letra en mayúscula.
Hola, tengo un problema al ejecutar el servidor, me marca not found, alguna sugerencia?
Pues no sé con la info que has indicado es difícil saber qué pueda pasar.
el componeny my-counter (padre) se comunica con el componente feedback-element (hijo) mediante una extracción por el shadow dom del elemento y la ejecución de su método open(). Es decir,, tenemos una comunicación padre a hijo, pero ¿Cómo hago para ejecutar una función hijo a padre? Ejemplo, en React el padre, le pasaría a su hijo por atributo una función (propia del padre) que el hijo podría ejecutar cuando quiera
Podrías pasarle una función como valor de un atributo de tipo object, pero eso es una mala práctica. Generalmente lo que se hace es escalar un evento personalizado, que el padre estará escuchando. En el momento que se detecta ese evento, el padre ejecuta la función que sea necesaria con los datos que el componente hijo haya incluido en el objeto evento.
@@deswebcom si investigando llegue a la solución que comentas con los eventos. No es lo más lindo pero al menos me permitió hacerlo. Muchas gracias :)
No compartes la diapositiva?
Los tienes en la página del curso, esta primera clase tiene el acceso gratis en escuela.it/cursos/curso-web-components-litelement/clase/primeros-pasos-con-web-components-y-litelement
Me borro mi carpeta src cuando isntale webpack :(
extraño, no? supongo que usas Git y lo tendrías respaldado.
de nada sirve que este google por detras si ya vimos que muchos de sus proyectos mueren y son olvidados :v
Web Components no es un proyecto de Google. Es un estándar abierto, que nunca va a desaparecer. Igual que tampoco va a desaparecer HTML5 o Javascript.
El peso de LitElement es ridículo. Un icono de tu web puede representar tanto peso como esta microlibrería, así que no veo tan problemático. Incluso, el caso que muera LitElement o se actualice, tu dependencia es mínima, porque estás principalmente encima de un estándar. Pero de todos modos, no va a ocurrir. No te preocupes por eso, pues además LitElement es software libre también.
La única alternativa que podríamos discutir frente a LitElement sería usar Web Components con únicamente VanillaJS. Eso eliminaría completamente tus dependencias, si es que te preocupa tanto. Pero por 6.5 KB de peso y todo lo que te ofrece, creemos firmemente que merece mucho la pena usar LitElement.