O autor do material, cuja tradução publicamos hoje, acredita que, se você usará componentes da Web ao projetar as interfaces de seus aplicativos e estiver procurando por uma biblioteca adequada, independente das estruturas da interface do usuário, dê uma olhada nos projetos que serão discutidos aqui.
Informações preliminares
Quando eu, ouvindo constantemente sobre
Stencil ,
Svelte e
Lit HTML , concebi esse material e comecei a procurar por bibliotecas de componentes da web, pensei que seria difícil encontrar algo interessante com base nos recursos do HTML. Isso foi apenas porque eu ainda não percebi todo o potencial dos componentes da web. Eu era uma pessoa cujo pensamento é limitado à estrutura de bibliotecas e estruturas. Meu desejo me lembrou algo como "encontrar uma biblioteca HTML interessante". Mas agora entendo que encontrar uma boa biblioteca de componentes da web não é tão difícil.
Todos os componentes da Web, graças às tecnologias subjacentes nas quais são construídos, são bastante populares, eles, por definição, podem interagir entre si e se mostrar bem quando usados juntos no mesmo projeto. Ao mesmo tempo, o que é criado usando o padrão Web Components, por exemplo, certos componentes ou widgets, funcionará em primeiro lugar em todos os navegadores modernos e, em segundo lugar, será compatível com qualquer biblioteca JavaScript ou qualquer estrutura JavaScript, que usam HTML.
1. Biblioteca de Componentes da Web de Materiais
Geralmente, se o nome da biblioteca de componentes da interface do usuário contiver a palavra "Material", isso o levará aos líderes em classificações e downloads. A biblioteca de
materiais da Web dos materiais do Google é uma versão da web da biblioteca de materiais. Embora a biblioteca em questão ainda esteja em desenvolvimento, os componentes que estão em sua composição já podem ser usados em uma enorme variedade de projetos da web. O desenvolvimento desta biblioteca será definitivamente muito interessante de assistir.
2. Conjunto de Repositórios PolymerElements
A biblioteca
Polymer do Google permite criar componentes da Web reutilizáveis e independentes que funcionam com o mesmo princípio que os elementos HTML padrão. Usar esses componentes da Web é tão fácil quanto usar elementos HTML regulares. O repositório
PolymerElements contém mais de 100 componentes da Web criados pelo Polymer usando repositórios separados. Aqui está um exemplo de trabalho com um componente da web semelhante:
<!-- --> <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
Acredito que o
Vaadin Components é um projeto promissor. Esta biblioteca contém cerca de 30 componentes web de código aberto desenvolvidos para desenvolver interfaces móveis e de desktop projetadas para navegadores modernos. O estado do repositório da biblioteca nos permite dizer que o trabalho ativo está em andamento nele.
4. Biblioteca de elementos com fio
A biblioteca
Wired Elements obteve quase 7.000 estrelas no GitHub. Permite criar elementos que parecem desenhados à mão. Eles se parecem com layouts e, cada vez que a tela é exibida, os elementos mudam, ou seja, até a mesma página visualizada em momentos diferentes fica diferente. Não sei se essa biblioteca é útil para alguém, a única coisa indiscutível é que as páginas criadas com o uso são incríveis.
Aqui você pode experimentar.
Aqui está um exemplo de seu uso com o React. E
aqui - com Vue.
5. Biblioteca Elix
Elix é um conjunto de componentes da web que cobre as necessidades de padrões de design de interface padrão. A alta qualidade desses componentes é alcançada, garantindo sua conformidade com as recomendações estabelecidas
neste documento. Por exemplo, de acordo com essas recomendações, os elementos HTML padrão são considerados de qualidade. Deve-se notar que o projeto Elix apoia uma comunidade de pessoas afins, e elas estão procurando por quem possa se juntar a elas.
6. Biblioteca de elementos temporais
A biblioteca de
elementos de tempo existe há algum tempo; é moderadamente popular no GitHub. É baseado em um componente que estende os recursos do elemento HTML padrão
<time> . Usando esta biblioteca, você pode apresentar registros de data e hora como seqüências de caracteres localizadas ou como texto atualizado automaticamente no navegador do usuário. Aqui está um exemplo de trabalho com 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 da Web da UI5
A biblioteca
UI5 Web Components foi desenvolvida como parte do projeto
OpenUI5 pela SAP. É uma coleção de elementos de interface do usuário leves e independentes, adequados para reutilização. Observe que esses componentes não são um complemento sobre a UI5. Eles são elementos independentes, podem ser usados em conjunto com vários ambientes para o desenvolvimento de interfaces da web. O design do componente está em conformidade com
este manual da SAP.
8. Projeto PatternFly Elements
O projeto
PatternFly Elements é uma coleção de cerca de 20 componentes da web convenientes, além de ferramentas para seu desenvolvimento. Esses componentes da web são adequados para uso em qualquer área de desenvolvimento da web, combinam bem com várias bibliotecas e estruturas. Por exemplo, você pode usá-los ao desenvolver projetos da Web usando React, Vue, Angular ou JavaScript comum.
Para experimentar os elementos PatternFly, execute a seguinte sequência de comandos:
git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install # - lerna bootstrap npm run storybook
9. O projeto webcomponents.org
O projeto
webcomponents.org é um portal que é um catálogo de componentes da Web criados usando o Polymer e projetos amigáveis. É bom porque, com sua ajuda, você pode acompanhar os novos desenvolvimentos da equipe Polymer. Também aqui você pode encontrar materiais interessantes sobre componentes da web.
Sumário
Neste artigo, analisamos 9 projetos relacionados a componentes da web. Esperamos que você possa acessar os repositórios e sites relevantes para encontrar o que está procurando. Se você estiver interessado no tópico de componentes da web,
aqui ,
aqui e
aqui, poderá encontrar listas de componentes da web e materiais adicionais para trabalhar com eles.
Caros leitores! Quais bibliotecas de componentes da web você usa?