Utilizar Single File Components ou separar em pastas?

#programming #frontend #javascript #webdev

Single File Components é um modelo onde adicionamos a estrutura(html) a lógica(javascript) e o estilo(css) em uma única página.

Exemplo de um Single File Components.

<template>
  <p class="red-bold">{{ msg}}</p>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Single-File Components'
    }
  }
}
</script>
<style>
.red-bold {
  color: red;
  font-weight: bold;
}
</style>

Utilizamos Single File Components ou separamos em pastas?
Nós desenvolvedores devemos sempre prezar pela melhoria do nosso código e da forma como vamos dar a sua devida manutenção. Quando separamos nossa arquitetura front end em pastas ou seja separamos o HTML do CSS e JAVASCRIPT, conforme o tamanho e a complexidade da aplicação a manutenção destes códigos terão um impacto de tempo.

No desenvolvimento de UI moderno, foi afirmado que em vez de dividir a base de código em três camadas enormes que se entrelaçam, faz muito mais sentido dividi-las em componentes. Dentro de um componente, seu modelo, lógica e estilos são inerentemente acoplados, e colocá-los na verdade torna o componente mais coeso e sustentável.

Observe que, mesmo que você não goste da ideia de componentes de arquivo único, você ainda pode aproveitar seus recursos de pré-compilação separando seu JavaScript e CSS em arquivos separados usando Src Imports.

Benefícios em utilizar Single File Components SFC:

Criação de componentes modulares usando a sintaxe familiar de HTML, CSS e JavaScript
Modelos pré-compilados
CSS com escopo de componente
Sintaxe mais otimizada ao trabalhar com a API de composição
Mais otimizações de tempo de compilação por meio de análise cruzada de modelo e script
Suporte IDE com preenchimento automático e verificação de tipo para expressões de modelo
Suporte de substituição de módulo a quente (HMR) pronto para uso
O SFC é um recurso definidor do Vue como uma estrutura e é a abordagem recomendada para usar o Vue nos seguintes cenários:
Aplicativos de página única (SPA)
Geração de Site Estático (SSG)
Experiência de desenvolvimento (DX).

RESUMÃO:

O padrão de desenvolvimento Single File Components trás muitos benefícios para aplicações devido a agilidade na hora da manutenção de suas páginas. Quando separamos em pasta o tempo de manutenção aumenta e acaba não sendo sustentável.

Deixo aqui meu linkedin e github.