🎅🏼 🗾 🤵🏻 ING lança Lion: uma biblioteca de componentes Web produtivos, acessíveis e flexíveis 🖕🏼 👂🏿 🤦🏽

Olá a todos. Antecipando o início do curso "Fullstack JavaScript Developer", preparamos para você uma tradução de material interessante.

TL; DR: o desenvolvimento da Web é difícil, independentemente de você criar seus próprios componentes, usar sistemas de design, implementar suporte para vários navegadores, fornecer acessibilidade ou adicionar dependências de terceiros. A Lion se esforça para facilitar sua vida, assumindo a implementação de componentes completos, acessíveis, produtivos e inespecíficos. Confira o repositório ing-bank / lion .

Alguns de vocês já devem saber que o ING tem um histórico longo e rico de criação de componentes da Web, da biblioteca Polymer ao recente LitElement.

Deseja refrescar sua memória ? Os componentes da Web são um conjunto de padrões do navegador que nos permitem escrever componentes nativos, reutilizáveis, encapsulados e modulares.

Os padrões de componentes da Web finalmente se tornaram mais fortes e hoje existem muitas maneiras de implementar e usar componentes da Web, como: Elementos Angulares , Estêncil , Vue , Svelte e muitos outros. E com o lançamento do Chromium Edge, ficou claro que agora todos os principais navegadores suportam componentes da Web prontos para uso.

Portanto, hoje tenho o prazer de compartilhar com você tudo o que o ING abre para uso gratuito em sua biblioteca de componentes da Web Lion!

Por que leão

Imagine o seguinte cenário fictício:
Leah é desenvolvedora da Betatech, está trabalhando em um novo aplicativo interno para a empresa.

Estrutura agnóstica

Encontrar componentes não é fácil e o resultado pode decepcioná-lo.

Leah encontra o componente perfeito para sua tarefa, mas, infelizmente, ele está escrito em uma estrutura JavaScript específica, para que você não possa obtê-lo e usá-lo.

Além disso, as empresas têm sua própria identidade visual e componentes de reescrita que já estão totalmente estilizados para se ajustarem à identidade da empresa, às vezes pode significar mais trabalho do que modelar do zero.

Lea encontra um componente que oferece toda a funcionalidade necessária, mas não se encaixa na identidade da Betatechs.

Adaptação funcional

Depois de encontrar o componente ideal, em algum momento você poderá descobrir que o componente não carrega nenhuma carga funcional específica necessária.

Lea decide copiar o código do componente encontrado e implementar a função por conta própria e, como resultado, agora você precisa dar suporte ao componente inteiro, o que sobrecarrega o projeto.

Disponibilidade

Seus componentes devem estar acessíveis a qualquer usuário. A acessibilidade não é fácil, mas é necessário, além disso, que os problemas de acessibilidade possam ser difíceis de corrigir em estágios posteriores sem recorrer a alterações críticas, por isso é extremamente importante garantir a acessibilidade desde o início.

Durante a operação, Lea descobre um problema com a disponibilidade de um componente que ela encontrou na Internet. Ela não pode corrigi-lo no código; portanto, pede aos autores do componente que a ajudem. Mas eles respondem que não podem ajudar com nada, porque não querem mudar nada.

Ou,

Leah escreve seu próprio componente, mas os problemas de acessibilidade são difíceis de corrigir devido à maneira como ela originalmente escreveu a estrutura HTML, e a correção acarreta mudanças críticas.

Resumir

Você não acha que a história de Leah é diretamente relevante?
Ele aborda vários problemas comuns no desenvolvimento web moderno:

Encontrar e adicionar dependências não é uma tarefa fácil;
Escolher um componente devido à sua aparência não é uma boa ideia;
Às vezes, é difícil manter ajustes no comportamento ou no estilo;
Se o pacote for popular, isso não significa que ele tenha boa disponibilidade ou desempenho.

O que pode ser feito para resolver esses problemas?

Imagine que você possui componentes cuja principal tarefa é fornecer funcionalidade, e o design fica a seu critério.
Imagine que esses componentes tenham excelente disponibilidade e desempenho.
Imagine que esses componentes são extensíveis e flexíveis.

Agora pare de sonhar e preste atenção ao Lion.

O que é o leão?

Queremos promover a web - um componente de cada vez.
Lion é uma biblioteca de rótulo branco de código aberto que não depende de estruturas e pode se tornar a base do sistema de design da sua empresa. A consistência na aparência e na funcionalidade é uma tarefa difícil e esperamos que, com o Lion, possamos facilitar seu trabalho.

etiqueta branca

Lion é o pacote básico de etiqueta branca dos componentes da web. Isso significa que os componentes têm um estilo mínimo, mas todas as funcionalidades básicas estão presentes. Os produtos com etiqueta em branco geralmente são projetados para fornecer a outros usuários a capacidade de adaptar a identidade visual do componente a si mesmos. Isso é ótimo, porque significa que todos podem usar as funcionalidades básicas de nossos componentes usando seu próprio sistema de marca ou design, porque, surpreendentemente, nem todo mundo gosta da cor laranja.

É isso que estamos fazendo no ING. Nossos próprios componentes da Web estendem os componentes do Lion e aplicam nossa identidade visual do ING, que é uma fina camada sobre o Lion.

Veja a demonstração do Lion. Parece bem rústico, certo? Agora compare com o Lion em conjunto com o ing-web:

Foco primário

O Lion foi desenvolvido com foco no uso e reutilização globais. Como resultado, os seguintes recursos foram adicionados desde o início:

Reutilização - nossos componentes são projetados para serem distribuídos e usados globalmente;
Acessibilidade - nossos componentes são projetados para serem acessíveis a todos;
Produtividade - Nossos componentes devem ser pequenos, produtivos e rápidos.

Todos esses recursos nos permitem expandir globalmente nossos componentes e encontrar entendimento mútuo ao trabalhar neles. Isso garante que todos no ING tenham um conjunto sólido de elementos básicos para criar seu aplicativo e começar rapidamente.

Lições aprendidas

O ING começou a usar componentes da Web muito cedo, e o Lion não é a primeira biblioteca de componentes que criamos. Portanto, você pode se perguntar como esses componentes diferem da geração anterior.

O Lion foi construído desde o início para fornecer acessibilidade e extensibilidade, pois sabíamos que era quase impossível adicionar essas coisas em estágios posteriores de desenvolvimento. Gostaria de destacar algumas lições que aprendemos ao criar o Lion:

Nem tudo deve se tornar um componente da Web; é melhor usar JavaScript comum para adicionar determinadas funcionalidades;
Fique o mais próximo possível dos elementos HTML nativos;
Trabalhe na acessibilidade desde o início;
Nem tudo deve estar na sombra do DOM, isso é especialmente importante para relacionamentos e acessibilidade da ária;
Os componentes da interface do usuário são complicados.

« -, .»
Erik Kroes

Lion!

A Lion pode ajudá-lo a implementar seu sistema de design, fornecendo uma estrutura de etiqueta branca, funcional, acessível e produtiva para sua biblioteca de componentes. Tudo que você precisa é adicionar seu próprio design! Portanto, se sua empresa deseja sistematizar seu sistema de design, o Lion será um ótimo começo!

Além disso, você pode usar o Lion para criar versões de componentes da web dos seus sistemas de design favoritos, como: Bulma , Bootstrap , Material , Bolt , Argônio , Vento de cauda .

Além disso, quanto mais usuários e colaboradores do Lion, mais estável será sua base, o que afetará todos os que usam o Lion.

Contribua para o desenvolvimento do Lion!

No momento da redação, Lion ainda está na versão beta. Gostaríamos muito de receber seus comentários antes de chegarmos à versão estável. Portanto, se você gosta de código aberto e quer ajudar o Lion, pode fazer o seguinte:

Criando e fechando questão;
Trabalhando em um componente completamente novo (comece discutindo a questão);
Melhorando a documentação;
... qualquer contribuição é importante! Correção uniforme de erros de digitação na documentação

Sinta-se à vontade para abrir um problema no github para enviar qualquer comentário ou dúvida que possa ter. Você também pode encontrar-nos no canal de folga do polímero#lion .

Você pode juntar o polímero frouxo pelo link .

Expansão de componentes

Você pode usar o Lion como base para implementar seu próprio sistema de design.

Vamos ver como a história de Lea aconteceu se ela escolheu Lion.

Para começar, instale tudo o que você precisa:

npm i lit-element @lion/tabs

Crie um componente lea-tabsreutilizando a funcionalidade Lion. Isso permitiu a Leah obter toda a carga funcional e acessibilidade necessária para implementar seu próprio componente de guia.

import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';

export class LeaTabs extends LionTabs {
  static get styles() {
    return [
      super.styles,
      css`
        /* my stylings */
      `
    ];
  }

  connectedCallback() {
    super.connectedCallback();
    this._setupFeature();
  }

  _setupFeature() {
    // being awesome
  }
}

customElements.define('lea-tabs', LeaTabs);

Lea também quer ser capaz de estilizar a guia e o painel de guias de acordo com a identidade visual da Betatechs. Para fazer isso, ela cria a lea-guia do painel e por tabulação lea componentes , que ela pode estilo como ela vê o ajuste e, eventualmente, colocar as LEA-guias dentro do componente . Você pode ver como Lea fez isso no exemplo abaixo.

import { LitElement, html, css } from 'lit-element';

export class LeaTab extends LitElement {
  static get styles() {
    return css`/* my stylings */`;
  }

  render() {
    return html`
      <!-- dom as needed -->
      <slot></slot>
    `;
  }
}

customElements.define('lea-tab', LeaTab);

Perfeitamente! Agora Lea pode usar o componente da tabsseguinte maneira:

<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>

Bem, agora o componente Lea está pronto, é hora de escrever alguma documentação. Você pode ver a página ao vivo da documentação do Lea . lea-tabsVocê pode ver o código completo no GitHub .

PS: Observe que Lea agora é responsável por atualizar a documentação das abas de leap e as alterações na documentação do Lion serão refletidas automaticamente na documentação de Lea.

Por que código aberto?

Bibliotecas de componentes estão em alta demanda. Ao fornecer acesso ao código fonte de nossos componentes extensíveis, ajudamos você a fazer o que você precisa, enquanto obtém todos os benefícios da comunidade de código aberto. Além disso, qualquer contribuição feita à Lion afeta e beneficia diretamente cada sistema de design que a utiliza (incluindo a ing-web) em uma escala global. Isso significa que obtemos o melhor dos dois mundos, ajudando as pessoas com nossos componentes e obtendo informações valiosas da comunidade!

Dê uma olhada no nosso repositório ! E se você quiser se manter atualizado, comece a rastrear e / ou coloque um asterisco - ainda não temos twitter, mas, no entanto, você pode se inscrever para mim: Olá, sou Thomas Olmer .

Mas isso não é tudo!

A criação de aplicativos é difícil e, às vezes, você precisa de um pouco mais de um componente específico, por exemplo, coisas como: validação, formulários, sobreposições, localização etc. Mas não tenha medo, o Lion virá em socorro!

Você pode encontrar informações sobre eles em nossa documentação e falaremos mais sobre sistemas Lion adicionais nas seguintes postagens do blog.

Agradecimentos

Por fim, gostaríamos de terminar o artigo com agradecimentos:
ING, por nos dar a oportunidade de trabalhar neste projeto e torná-lo tão legal junto com a comunidade de código aberto.

Para todos que trabalharam no Lion (especialmente a equipe do Lion), incluindo todos os colaboradores (39, e esse não é o limite!).

E o último agradecimento, mas não menos importante: Pascal Shilp por transformar meus rabiscos em uma história interessante.

Convidamos você a participar de nossa lição gratuita sobre o tema: “SvelteJs. Início rápido " .

ING lança Lion: uma biblioteca de componentes Web produtivos, acessíveis e flexíveis