Hola a todos. En previsión del inicio del curso "Fullstack JavaScript Developer", hemos preparado para usted una traducción de material interesante.
TL; DR: el desarrollo web es difícil independientemente de si crea sus propios componentes, utiliza sistemas de diseño, implementa soporte para varios navegadores, proporciona accesibilidad o agrega dependencias de terceros. Lion se esfuerza por facilitarle la vida asumiendo la implementación de componentes completos, asequibles, productivos y no específicos. Echa un vistazo al repositorio ing-bank / lion .Es posible que algunos de ustedes ya sepan que ING tiene una larga y rica historia de creación de componentes web, desde la biblioteca Polymer hasta el reciente LitElement.¿Quieres refrescar tu memoria ? Los componentes web son un conjunto de estándares de navegador que nos permiten escribir componentes nativos, reutilizables, encapsulados y modulares.Normas de componentes Web finalmente han llegado a ser más fuerte, y hoy en día hay muchas formas de implementar y componentes web de uso, tales como: angular Elementos , de la plantilla , Vue , esbelto y muchos, muchos otros. Y con el lanzamiento de Chromium Edge, quedó claro que ahora todos los principales navegadores admitirán componentes web listos para usar.Por lo tanto, hoy me complace compartir con ustedes todo lo que ING abre para uso gratuito en su biblioteca de componentes web Lion!Porque león
Imagine el siguiente escenario ficticio:Leah es una desarrolladora de Betatech, está trabajando en una nueva aplicación interna para la compañía.Marco agnóstico
Encontrar componentes no es fácil y el resultado puede decepcionarte.Leah encuentra el componente perfecto para su tarea, pero, desafortunadamente, está escrito en un marco de JavaScript específico, por lo que no puede obtenerlo y usarlo.Además, las compañías tienen su propia identidad visual y componentes de reescritura que ya están completamente estilizados para ajustarse a la identidad de su compañía, a veces puede significar más trabajo que diseñar desde cero.Lea encuentra un componente que ofrece toda la funcionalidad necesaria, pero no se ajusta a la identidad de Betatechs.Adaptación funcional
Después de encontrar el componente ideal, en algún momento puede encontrar que el componente no lleva ninguna carga funcional específica que necesite.Lea decide copiar el código del componente encontrado e implementar la función por su cuenta, y como resultado, ahora debe admitir todo el componente, lo que supone una carga adicional para el proyecto.Disponibilidad
Sus componentes deben ser accesibles para cualquier usuario. La accesibilidad no es fácil, pero es necesaria, además, los problemas de accesibilidad pueden ser difíciles de solucionar en etapas posteriores sin recurrir a cambios críticos, por lo que es extremadamente importante garantizar la accesibilidad desde el principio.Durante la operación, Lea descubre un problema con la disponibilidad de un componente que encontró en Internet. Ella no puede arreglarlo en el código, por lo tanto, le pide a los autores del componente que la ayuden. Pero responden que no pueden ayudar con nada, porque no quieren cambiar nada.
O bien,
Leah escribe su propio componente, pero los problemas de accesibilidad son difíciles de solucionar debido a cómo escribió originalmente la estructura HTML, y la corrección conllevará cambios críticos.Resumir
¿No crees que la historia de Leah es directamente relevante?Aborda varios problemas comunes en el desarrollo web moderno:- Encontrar y agregar dependencias no es una tarea fácil;
- Elegir un componente debido a su apariencia no es una buena idea;
- Los ajustes de comportamiento o estilo a veces son difíciles de mantener;
- Si el paquete es popular, esto no significa que tenga buena disponibilidad o rendimiento.
¿Qué se puede hacer para resolver estos problemas?- Imagine que tiene componentes cuya tarea principal es proporcionar funcionalidad, y el diseño es a su discreción.
- Imagine que estos componentes tienen una excelente disponibilidad y rendimiento.
- Imagine que estos componentes son extensibles y flexibles.
Ahora deja de soñar y presta atención a Lion.¿Qué es el león?
Queremos promocionar la web, un componente a la vez.Lion es una biblioteca de etiqueta blanca de código abierto que no depende de los marcos y puede convertirse en la base del sistema de diseño de su empresa. La coherencia en la apariencia y la funcionalidad es una tarea difícil y esperamos que con Lion podamos facilitar su trabajo.etiqueta blanca
Lion es el paquete básico de etiqueta blanca de componentes web. Esto significa que los componentes tienen un estilo minimalista, pero todas las funcionalidades básicas están presentes. Los productos de marca blanca a menudo están diseñados para proporcionar a otros usuarios la capacidad de adaptar la identidad visual del componente a sí mismos. Esto es genial, porque significa que todos pueden usar las funcionalidades básicas de nuestros componentes usando su propio sistema de diseño o marca, porque, sorprendentemente, no a todos les gusta el color naranja.Eso es lo que estamos haciendo en ING. Nuestros propios componentes de ing-web amplían los componentes de Lion y aplican nuestra identidad visual ING, que es una capa delgada sobre Lion.Mira la demo de Lion. Se ve bastante rústico, ¿verdad? Ahora compare con Lion junto con ing-web:
Enfoque primario
Lion fue desarrollado con un enfoque en el uso global y la reutilización. Como resultado de esto, las siguientes características se han agregado desde el principio:- Reutilización: nuestros componentes están diseñados para ser distribuidos y utilizados globalmente;
- Accesibilidad: nuestros componentes están diseñados para que todos puedan acceder a ellos;
- Productividad: nuestros componentes deben ser pequeños, productivos y rápidos.
Todas estas características nos permiten expandir globalmente nuestros componentes y encontrar un entendimiento mutuo cuando trabajamos en ellos. Esto garantiza que todos en ING tengan un conjunto sólido de bloques de construcción para construir su aplicación y comenzar rápidamente.Lecciones aprendidas
ING comenzó a usar componentes web muy temprano, y Lion no es la primera biblioteca de componentes que creamos. Por lo tanto, puede preguntarse cómo estos componentes difieren de la generación anterior.Lion fue construido desde cero para proporcionar accesibilidad y extensibilidad, ya que sabíamos que era casi imposible agregar estas cosas en las etapas posteriores del desarrollo. Me gustaría destacar algunas lecciones que aprendimos al crear Lion:- No todo debería convertirse en un componente web, es mejor usar JavaScript normal para agregar cierta funcionalidad;
- Manténgase lo más cerca posible de los elementos HTML nativos;
- Trabajar en accesibilidad desde el principio;
- No todo debe estar en la sombra DOM, esto es especialmente importante para las relaciones aria y la accesibilidad;
- Los componentes de la interfaz de usuario son complicados.
« -, .»
Erik Kroes
Lion!
Lion puede ayudarlo a implementar su sistema de diseño al proporcionar un marco de etiqueta blanca, funcional, asequible y productivo para su biblioteca de componentes. ¡Todo lo que necesitas es agregar tu propio diseño! Por lo tanto, si su empresa quiere sistematizar su sistema de diseño, ¡Lion será un gran comienzo!Además, puede usar Lion para crear versiones de componentes web de sus sistemas de diseño favoritos, como: Bulma , Bootstrap , Material , Bolt , Argon , Tailwind .Además, cuantos más usuarios y contribuyentes de Lion, más estable será su base, lo que afectará a todos los que usen Lion.¡Contribuye al desarrollo de Lion!
Al momento de escribir, Lion todavía está en beta. Nos encantaría recibir sus comentarios antes de llegar a la versión estable, por lo que si le gusta el código abierto y desea ayudar a Lion, puede hacer esto:- Crear y cerrar un problema;
- Trabajando en un componente completamente nuevo (comience discutiendo el tema);
- Mejora de la documentación;
- ... cualquier contribución es importante! Incluso corrección de errores tipográficos en la documentación
No dude en abrir el problema en github para enviar cualquier comentario o pregunta que pueda tener. También nos puede encontrar en el canal de holgura de polímeros#lion .Puedes unirte al polímero flojo por el enlace .Expansión de componentes
Puede usar Lion como base para implementar su propio sistema de diseño.Veamos cómo sucedió la historia de Lea si eligió a Lion.Para comenzar, instale todo lo que necesita:npm i lit-element @lion/tabs
Cree un componente lea-tabsreutilizando la funcionalidad de Lion. Esto le permitió a Leah obtener toda la carga funcional y accesibilidad que se necesitará para implementar su propio componente de pestaña.import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';
export class LeaTabs extends LionTabs {
static get styles() {
return [
super.styles,
css`
`
];
}
connectedCallback() {
super.connectedCallback();
this._setupFeature();
}
_setupFeature() {
}
}
customElements.define('lea-tabs', LeaTabs);
Lea también quiere poder diseñar la pestaña y el panel de pestañas de acuerdo con la identidad visual de Betatechs. Para hacer esto, crea los componentes lea-tab-panel y lea-tab , que puede diseñar como mejor le parezca y eventualmente colocar el componente lea-tabs dentro . Puedes ver cómo Lea hizo esto en el siguiente ejemplo.import { LitElement, html, css } from 'lit-element';
export class LeaTab extends LitElement {
static get styles() {
return css``;
}
render() {
return html`
<slot></slot>
`;
}
}
customElements.define('lea-tab', LeaTab);
¡Perfectamente! Ahora Lea puede usar el componente de la tabssiguiente manera:<lea-tabs>
<lea-tab slot="tab">Info</lea-tab>
<lea-tab-panel slot="panel">
Info page with lots of information about us.
</lea-tab-panel>
<lea-tab slot="tab">Work</lea-tab>
<lea-tab-panel slot="panel">
Work page that showcases our work.
</lea-tab-panel>
</lea-tabs>
Bueno, ahora que el componente Lea está listo, es hora de escribir documentación. Puede consultar la página en vivo de la documentación de Lea . lea-tabsPuedes ver el código completo en GitHub .PD: Tenga en cuenta que Lea ahora es responsable de actualizar la documentación de lea-tabs, y los cambios en la documentación de Lion se reflejarán automáticamente en la documentación de Lea.¿Por qué código abierto?Las bibliotecas de componentes tienen una gran demanda. Al proporcionar acceso al código fuente de nuestros componentes extensibles, lo ayudamos a hacer lo que necesita, al tiempo que obtiene todos los beneficios de la comunidad de código abierto. Además, cualquier contribución hecha a Lion afecta y beneficia directamente a cada sistema de diseño que lo utiliza (incluyendo ing-web) en una escala global. ¡Esto significa que obtenemos lo mejor de ambos mundos, ayudando a las personas con nuestros componentes y obteniendo valiosos aportes de la comunidad!¡Eche un vistazo a nuestro repositorio ! Y si desea mantenerse actualizado, asegúrese de comenzar a rastrear y / o poner un asterisco; todavía no tenemos Twitter, pero puede suscribirse: hola, soy Thomas Olmer .¡Pero eso no es todo!
Crear aplicaciones es difícil, y a veces necesita un poco más de un componente específico, por ejemplo, cosas como: validación, formularios, superposiciones, localización, etc. ¡Pero no tenga miedo, Lion vendrá al rescate!Puede encontrar información sobre ellos en nuestra documentación , y le informaremos más sobre los sistemas Lion adicionales en las siguientes publicaciones de blog.Expresiones de gratitud
Finalmente, nos gustaría terminar el artículo con gracias:ING, por darnos la oportunidad de trabajar en este proyecto y hacerlo tan genial junto con la comunidad de código abierto.Para todos los que trabajaron en Lion (especialmente el equipo de Lion), incluidos todos los contribuyentes (39, ¡y ese no es el límite!).Y las últimas gracias, pero no menos importantes: Pascal Shilp por convertir mis garabatos en una historia interesante.Te invitamos a unirte a nuestra lección gratuita sobre el tema: “SvelteJs. Inicio rápido " .