2

Uma das principais vantagens que eu entendi em usar Vue.js/React é definir um componente e poder reutilizar ele onde for necessário. Levando isso em consideração, tenho uma aplicação web que diversas vezes eu tenho que colocar um html pra fazer um botão na tela. Exemplo:

<button type="button" class="btn btn-primary">Excluir</button>

Como eu repito esse botão diversas vezes, eu pensei em criar um componete, exemplo <btn-excluir></btn-excluir> pra poder reutilizar ele toda vez. Só que eu não enxergo ganho nenhum em componentizar isso, eu posso escrever o html toda vez.

Eu só consigo enxergar algum ganho em componentizar algo, quando esse esse componente tem algum efeito reativo, alguma regra e etc.

Aí eu fiquei com essa dúvida, eu devo componentizar todo html que se repete ou é melhor eu componentizar só html que tem algo mais complexo, como reatividade, algum ajax e etc ?

3
  • 2
    reutilizar também tem um fator de manutenção. Imagine você, se esse botão tiver um ícone e você precisa alterar, se estiver escrito em componente, altera o componente, altera em todos os lugares que esse componente existe, se não for feito componente se tem que alterar em todas as telas. Além da organização eu também acho importante para manutenção.
    – novic
    2/04/2020 às 21:51
  • 1
    Talvez relacionado: pt.stackoverflow.com/questions/120931/… 20/06/2020 às 20:23
  • 1
    Se vc componentizar tudo, como vc vai tratar as excessões? No final das contas vc vai ter tantos componentes quanto código HTML.... ao meu ver componentizar tudo está longe de ser uma boa opção, assim como minificar código HTML tb não é uma boa prática
    – hugocsl
    20/06/2020 às 22:30

2 Respostas 2

2

Essa questão vai muito além da programação.

Quando pensamos em componentização no Front-end, estamos falando de uma boa prática que vai sim te beneficiar de alguma forma, ou seja, o ideal hoje é que uma aplicação escalável, utilize um processo de componentização, tanto em UI quanto em Front-end. Isso irá facilitar muito a longo prazo, tanto em manutenção quanto no engajamento da equipe.

Mas também temos de pensar no nível de componentização que você está falando. Imagine o Back-end, você isola a conexão com o bando de dados para re-utilizar em vários lugares, ou seja, qualquer alteração na classe, irá refletir para todos, mas se em algum lugar alguém não utilizou esse "componente", surgirão efeitos colaterais.

No front acontecerá a mesma coisa, porém a chance de quebrar é muito maior, pois seria muito fácil eu usar um <button> do HTML e não usar um <Button> (componente) que alguém já havia criado.

Então é necessário haver uma conformidade nessa implementação, onde todo o time é alinhado à usar e criar componentes, tudo isso usando uma metodologia de organização (geralmente um design atômico), em alguns casos até centralizando tudo em uma UI Kit. Então tenha em mente que a componentização, quando levada a sério é algo complexo onde todo html que se repete é SIM componentizado.

1

De forma direta Não, você não deve componentizar todo HTML que se repete. A vantagem de usar componentização é separar a aplicação em blocos, esses blocos não são exclusivamente códigos que se repetem, e sim um conjunto de códigos que se repetem.


Um exemplo de uma boa aplicação de um componente:

function MeuComponenteForm(props) {
    return (
        <form id="formQueRepete" action={props.action}>
            <input type="text placeholder={props.placeholder}/>
        </form>
    )
}

Você poderia ter forms em rotas diferentes da sua página, o que mudaria entre eles seria, por exemplo, o action e o placeholder das tags Html, nesse caso você componentizaria o seu form para não repetir, no action e nos placeholders você enviaria através de props, como no código abaixo:

Incluindo o form em outros componentes:

<MeuComponenteForm action="actionEspecífico" placeholder="placeHolderEspecifico"/>

<MeuComponenteForm action="outroAction" placeholder="outroPlaceHolder"/>

<MeuComponenteForm action="aindaOutroAction" placeholder="aindaOutroPlaceHolder"/>

Note que você componentizou um bloco de código (todo o form) e você está controlando seu conteudo através de props.


Um exemplo de uma aplicação ruim de um componente:

function MeuComponente(props){
   return (
      <button>{props.valorBotao}</button>

   )
}

Ao chamar esse componente em outro componente, seria dessa forma:

<MeuComponente valorbotao="CliqueEmMim"/>

Note que não seria uma boa aplicação pois a unica coisa diferente é o texto dentro do botão, não há necessidade de o componentizar pois o texto eu posso escrever em uma unica linha:

<button>Um botão</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .