Existe um padrão para folder structure front-end? #1749
-
|
Olá novamente pessoal, existe algum padrão/convenção de estrutura de pastas para projetos front-end? Estou perguntando isso por que após visitar alguns repositórios vi divergências. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
|
Fala Matheus blz?
Acho que as 3 podem fazer sentido, dependendo da característica do projeto. Por exemplo, se o projeto não é um single page application, talvez faça sentido você ter um diretório "pages", mas se for um projeto React pode ser que vc não precise, mas precise usar um create-react-app, e então criar um diretório "screems" para sua organização. Se seu projeto não consome um micro serviço, talvez faça sentido você usar uma arquitetura MVC, e por aí vai... Pra mim, isso é um ponto muito positivo do Front-end, desde que o dev saiba que existem essas convenções / scaffolds, e saiba analisar quando é melhor utilizá-las ou não. |
Beta Was this translation helpful? Give feedback.
-
|
Vou fazer um discurso aqui, sem seguir nenhum padrão, tentar enxergar a web raiz, se vc não entender, saiba que nem mesmo eu entendi. E vou misturar alguns assuntos que acho ser relacionado. Tudo começa com um servidor HTTP, não só isso. HTTPS. Publicar um site profissional neste pré-requisito já é complexo o suficiente para terem criados empresas SaaS em volta disso. Você tem 30 arquivos, 2000 arquivos ou 500 milhões de arquivos? Isso influencia toda sua arquitetura, tanto das pastas, quanto do software que estará dentro dos arquivos, quanto do servidor que você irá usar para tornar toda essa obra de arte disponível na internet. Tem que haver uma separação de o que é a estrutura do seu site, e o que são e onde estão armazenados os "assets" do seu site, básico. É como se existisse padrões em todos os levels da aplicação, e todos estes colaboram para um resultado final agradável. Seu front-end servirá para qual propósito? Login? Criação de conteúdo? Consumo de conteúdo? Interações sociais? Email Marketing? É um script que vc irá fazer embed com iframe? O front-end queira ou não, tem integração grande com o backend. Se o backend não responder, o front-end deixa de existir, se a plataforma não ter a API que vc precisa, todo o front-end pode ser invalidado. Então, o padrão de arquitetura adotado no backend, é importante para ajudar a definir o que é o padrão de arquitetura adotado no front-end. Mas também, o front-end pode existir sem precisar de um backend, olha o exemplo das github pages, nextjs, porém depender de um SaaS pode ser entediante as vezes. Na minha visão individual, o melhor padrão de pastas é aquele que vc pode no meio do caminho fazer uma curva de 360 graus no projeto, e isso não atrapalhar o que já tinha publicado, e nem precisar alterar tudo o que já existe para que vc adote uma forma diferente de fazer o projeto funcionar e servir seu propósito. Não existe padrões de pastas e arquivos na Web, porém existem inúmeros design patterns que vc pode adotar para tornar a integração do HTML, CSS e o JavaScript uma combinação com comportamento mais previsível. Quando vc acessa a raiz
Mas como que o padrão de pastas influencia no critical rendering path, e o que isso tem a ver com este tópico? Acontece que quanto mais simples as páginas web são, mais fáceis e sãs ficam os resultados tanto de usar quanto de manter a coisa funcionando ao longo do tempo. E isso tanto é um fato, que é conhecido comum que se vc tiver muito HTML, CSS e JavaScript qualquer computador/navegador terá dificuldade em interpretar tudo isso e exibir o resultado final. O padrão de estrutura tanto das pastas quanto do projeto em si, deve ser em mante-lo o mais simples e direto ao ponto possível. o que é a missão impossível das aplicações enterprise. Não pode deixar que um padrão entre na frente de performance percebida do cliente final, também não pode deixar com que a falta de padrão prejudique a experiencia final por conta de erros inesperados. Também não pode deixar com que essa quantidade toda de ferramentas te impeça de publicar algo que vc queira na internet de forma simples direta, sem ter que pensar em N possibilidades bizarras. Acho que neste tópico, cabe muito bem o Para a arquitetura do software front-end web este site tem um belíssimo resumo https://webcomponents.dev/ em https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component-april2020/ que vc pode gostar de conhecer. Um ótimo padrão também é fazer um projeto front-end que não use apenas 1 framework front-end, como react, ou vue. Tudo bem que há muita gente que obteve muito sucesso usando estes frameworks, mas também há muita gente que usou muito apenas 1 deles e agora está disposto a usar mais frameworks e tirar mais proveito das Web APIs para reutilizar código entre frameworks. É bom precisa escolher a forma que vc quer encarar o projeto levando em consideração as raízes da web. Nem mesmo o index.html é necessário caso vc esteja configurando seu próprio servidor HTTP com por e exemplo apache ou nginx, e domina-los é necessário para tirar o melhor proveito da web. E isso é tão complicado para quem está começando, que criaram-se empresas inteiras em volta de "só bora o seu HTML, CSS e JS ai que o resto a gente resolve" ou "só roda este comando e deixa que já decidimos para você" porém quando vc entra profundamente na web, estes padrões todos são maleáveis, substituíveis. Existem projetos inteiros que dependem apenas do create-react-app, depois de algum tempo nisso percebem que entraram num buraco fundo e difícil de sair, começam a falar de microfrontends etc, etc... Porém, a estrutura de arquivos fica a mercê das ambições do criador, mantenha isso simples o suficiente para conseguir se expressar, e entenda o contexto que o projeto está inserido para escolher como faze-lo. Acima de tudo isso, faça algo que funcione. Nenhum padrão de pastas vai te ajudar "out of the box" a vencer aquele prazo apertado, a não ser sua experiencia em diferentes áreas da web, diferentes frameworks ou aquele cinto de utilidades do batman que vc desenvolveu pensando nos resultados que vc quer alcançar em um projeto ou na vida. Fim. |
Beta Was this translation helpful? Give feedback.
-
|
ótimas respostas acima. um bom artigo também, focado em React mas aprendizados valem pra qualquer front-end: |
Beta Was this translation helpful? Give feedback.
Vou fazer um discurso aqui, sem seguir nenhum padrão, tentar enxergar a web raiz, se vc não entender, saiba que nem mesmo eu entendi. E vou misturar alguns assuntos que acho ser relacionado.
Tudo começa com um servidor HTTP, não só isso. HTTPS. Publicar um site profissional neste pré-requisito já é complexo o suficiente para terem criados empresas SaaS em volta disso.
Você tem 30 arquivos, 2000 arquivos ou 500 milhões de arquivos? Isso influencia toda sua arquitetura, tanto das pastas, quanto do software que estará dentro dos arquivos, quanto do servidor que você irá usar para tornar toda essa obra de arte disponível na internet.
Tem que haver uma separação de o que é a estrutura do seu s…