Como criar componentes front end da maneira certa?

[Cleysonlb]

Fala galera, beleza?! Estou precisando criar uns componentes aqui para a aplicação do trampo e queria trocar ideia com vocês sobre isso, como eu poderia criar bons componentes no frontend?! exemplos tipo, Slide, datepicker, modal, range bar, etc...

[fdaciuk]

Fala @Cleysonlb! Eu entendo que, por regra geral, independente da lib / framework que você for usar, é de suma importância você levar em consideração o seguinte:

Separe a parte lógica do componente (se houver) da parte visual

Para saber se o seu componente tem regras lógicas, responda pra você mesmo:
eu consigo colocar a funcionalidade básica desse componente em uma função?

Se a resposta for sim, então faça isso, criando testes unitários para essa parte. A vantagem disso é que você pode reutilizar a parte lógica em qualquer aplicação, independente da tecnologia usada. Depois você só cria o seu componente visual (usando VanillaJS, jQuery, React, Angular, Ember, etc), fazendo uso da função criada anteriormente.

Pra facilitar, vou tentar exemplificar. Pense em um slider. Você consegue colocar a funcionalidade dele em uma função simples, só recebendo dados e retornando dados, sem precisar de estrutura visual?

Sim! Você pode criar uma função - que seria o construtor do slide - que receberia por parâmetro um array de caminhos de imagens. Essa função poderia retornar dois outros métodos: next e prev:

function slide (images) {
  // seu código onde você pode gerar um novo array baseado no array passado. 
  // Esse novo array poderia ser um array de objetos, que recebe 3 parâmetros: 
  // o caminho da imagem, um id (pode ser até o índice), e um valor booleano pra saber
  // se essa imagem é a que será mostrada como "ativa" no slider.

  return {
    next: function () {
       // faz um map pelo novo array criado, muda o valor booleano da próxima imagem para true
       // e todos os outros para false
    },

    prev: function () {
       // faz um map pelo novo array criado, muda o valor booleano da imagem anterior para true
       // e todos os outros para false
    }
  }
}

Nas funções next, você ainda pode verificar se a próxima vai passar da última e mandar o ativo para a primeira. Mesma coisa para o prev, mandando da primeira para a última. A regra é você quem vai decidir.

Crie a parte visual do componente consumindo a regra

Com a regra acima criada, você pode montar seu componente usando qualquer lib, pois o código criado será agnóstico. É só JavaScript, e você pode usar em qualquer lugar.

Sobre estilos do componente

O ideal é que um componente possa ser reutilizado em qualquer projeto, independente da sua interface, então ele não deveria ter estilos. Mas nada impede de você deixar um estilo padrão se o dev quiser reutilizar para facilitar.

Ou ainda deixar opções para que o dev possa adicionar algumas classes no seu componente, passando parâmetros.

---

Acho que seguindo por essa linha, você consegue fazer componentes de verdade: reutilizáveis e independentes da tecnologia específica. =)

[Cleysonlb]

@fdaciuk cara MUITO OBRIGADO! De verdade! Vou seguir essa linha e começar com componentes mais simples aqui no trabalho com o tempo vou evoluindo :)

[fdaciuk]

Se for deixar open source, coloca o link do repo aqui depois xD
Pode ser um projeto interessante pra galera ajudar, já que ele seria reutilizável em qualquer ambiente :)

[Cleysonlb]

Pode deixar 💃

[danilovaz]

Eu achava que fazia componentes. Depois dessa aula do @fdaciuk já abri um card Refactor no meu Trello 😂 muito foda!