El autor del material, cuya traducción publicamos hoy, cree que si va a utilizar componentes web al diseñar las interfaces de sus aplicaciones y está buscando una biblioteca adecuada independiente de los marcos de la interfaz de usuario, debería echar un vistazo a los proyectos que se discutirán aquí.
Información preliminar
Cuando, constantemente escuchando sobre
Stencil ,
Svelte y
Lit HTML , concebí este material y comencé a buscar bibliotecas de componentes web, pensé que sería difícil para mí encontrar algo interesante basado en las capacidades de HTML. Eso fue solo porque todavía no me daba cuenta del potencial total de los componentes web. Era una persona cuyo pensamiento se limita al marco de bibliotecas y marcos. Mi deseo me recordó algo como "encontrar una biblioteca HTML interesante". Pero ahora entiendo que encontrar una buena biblioteca de componentes web no es tan difícil.
Todos los componentes web, gracias a las tecnologías subyacentes en las que están construidos, son bastante populares, por definición, pueden interactuar entre sí y mostrarse bien cuando se usan juntos en el mismo proyecto. Al mismo tiempo, lo que se crea utilizando el estándar de Componentes Web, por ejemplo, ciertos componentes o widgets, funcionará, en primer lugar, en todos los navegadores modernos, y en segundo lugar, será compatible con cualquier biblioteca de JavaScript o cualquier marco de JavaScript, que usan HTML.
1. Biblioteca de componentes web de materiales
Por lo general, si el nombre de la biblioteca de componentes de la interfaz de usuario contiene la palabra "Material", esto lo lleva a los líderes en calificaciones y descargas. La biblioteca de
componentes web de materiales de Google es una versión web de la biblioteca de materiales. Aunque la biblioteca en cuestión aún está en desarrollo, los componentes que están en su composición ya se pueden usar en una gran variedad de proyectos web. El desarrollo de esta biblioteca definitivamente será muy interesante de ver.
2. Conjunto de repositorio de PolymerElements
La biblioteca
Polymer de Google le permite crear componentes web independientes y reutilizables que funcionan según el mismo principio que los elementos HTML estándar. Usar estos componentes web es tan fácil como usar elementos HTML normales. El repositorio
PolymerElements contiene más de 100 componentes web creados por Polymer utilizando repositorios separados. Aquí hay un ejemplo de trabajo con un componente web similar:
<!-- --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- HTML- --> <paper-checkbox>Web Components!</paper-checkbox>
3. Biblioteca de componentes Vaadin
Creo que
Vaadin Components es un proyecto prometedor. Esta biblioteca contiene alrededor de 30 componentes web de código abierto diseñados para desarrollar interfaces móviles y de escritorio diseñadas para navegadores modernos. El estado del repositorio de la biblioteca nos permite decir que el trabajo activo está en curso en él.
4. Biblioteca de elementos cableados
La biblioteca
Wired Elements obtuvo casi 7,000 estrellas en GitHub. Le permite crear elementos que parecen dibujados a mano. Se parecen a los diseños, y cada vez que se muestra la pantalla, los elementos cambian, es decir, incluso la misma página vista en diferentes momentos se verá diferente. No sé si dicha biblioteca es útil para alguien, lo único que es indiscutible es que las páginas diseñadas con este se ven increíbles.
Aquí puedes experimentar con él.
Aquí hay un ejemplo de su uso con React. Y
aquí , con Vue.
5. Biblioteca Elix
Elix es un conjunto de componentes web que cubre las necesidades de los patrones de diseño de interfaz estándar. La alta calidad de estos componentes se logra garantizando su cumplimiento con las recomendaciones establecidas en
este documento. Por ejemplo, de acuerdo con estas recomendaciones, los elementos HTML estándar se consideran de calidad. Cabe señalar que el proyecto Elix apoya una comunidad de personas de ideas afines, y están buscando a quienes puedan unirse a ellos.
6. Biblioteca de elementos de tiempo
La biblioteca de
elementos de tiempo ha existido durante bastante tiempo; es moderadamente popular en GitHub. Se basa en un componente que amplía las capacidades del elemento HTML estándar
<time> . Con esta biblioteca, puede presentar marcas de tiempo como cadenas localizadas o como texto que se actualiza automáticamente en el navegador del usuario. Aquí hay un ejemplo de trabajo con esta biblioteca:
<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
7. Biblioteca de componentes web UI5
La biblioteca de
componentes web UI5 fue desarrollada como parte del proyecto
OpenUI5 por SAP. Es una colección de elementos de interfaz de usuario ligeros e independientes adecuados para su reutilización. Cabe señalar que estos componentes no son un complemento sobre UI5. Son elementos independientes, se pueden utilizar junto con diversos entornos para el desarrollo de interfaces web. El diseño de los componentes cumple con
este manual de SAP.
8. Proyecto de Elementos PatternFly
El proyecto
PatternFly Elements es una colección de aproximadamente 20 componentes web convenientes, así como herramientas para su desarrollo. Estos componentes web son adecuados para su uso en cualquier área de desarrollo web, combinan bien con varias bibliotecas y marcos. Por ejemplo, puede usarlos al desarrollar proyectos web usando React, Vue, Angular o JavaScript regular.
Para experimentar con PatternFly Elements, ejecute la siguiente secuencia de comandos:
git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install # - lerna bootstrap npm run storybook
9. El proyecto webcomponents.org
El proyecto
webcomponents.org es un portal que es un catálogo de componentes web creados con Polymer y proyectos amigables. Es bueno porque con su ayuda puede estar al tanto de los nuevos desarrollos del equipo de Polymer. También aquí puede encontrar materiales interesantes sobre componentes web.
Resumen
En este artículo, analizamos 9 proyectos relacionados con componentes web. Esperamos que pueda visitar los repositorios y sitios relevantes para encontrar lo que está buscando. Si está interesado en el tema de los componentes web,
aquí ,
aquí y
aquí puede encontrar listas de componentes web y materiales adicionales para trabajar con ellos.
Estimados lectores! ¿Qué bibliotecas de componentes web utilizas?