Organização e estruturação Javascript

[guilhermethales]

Boa noite galera!

Trabalho como estagiário Front-end em uma agencia onde fazemos sites e landing pages. Atualmente estamos utilizando HTML(utilizamos nunjucks como template engine),SASS, Javascript/ jQuery e Gulp como a automatizador de tarefas.

Temos apenas um arquivo JS onde fazemos todas as interações e tudo que seja necessário javascript, mas a cada site/lp está ficando cada vez mais difícil manter do jeito que está. Está ficando muito desorganizado, são muitas interações a serem feitas, e está virando uma bola de neve.

Gostaria de saber como vocês lidam com isso em sites(várias páginas) e landing pages pequenas, se fazem vários arquivos e utilizam ES6 modules, se fazem desta maneira mesmo(tudo em 1 arquivo) ou outra forma melhor para organização do código. Já estudei sobre OOP em javascript também, porém não sei se costuma-se utilizar em sites onde o foco maior do javascript será para interações como por exemplo abrir modal, fechar, etc.

Muito obrigado!!

[didiraja]

O que a landing de vcs tem? Lá na agência, fiz milhões de landings e nunca precisei de nada muito robusto além dum task-runner. SASS ajuda mas em landing geralmente não é necessário por acumular nem 500 linhas de CSS.

Será que não estão usando canhão pra matar mosquito?

[guilhermethales]

É que temos sites com muitas páginas por exemplo, há páginas com comportamentos diferentes, etc. Falo mais em questão do javascript mesmo. Queria saber como vocês costumam organizá-lo, se fazem tudo em um arquivo apenas também. Se usam algum padrão, modularização ou algo do tipo. Entendeu?

[doug2k1]

O cenário ideal talvez seria modularizar e usar um module bundler como Webpack pra juntar tudo. Mas talvez seja uma mudança radical pra fazer de cara.

O que a gente fazia em projetos anteriores que usavam Gulp era fazer uma separação básica em vendors (jQuery, plugins de terceiros, etc), código próprio que pode ser reusado em várias páginas (e até em outros projetos) e códigos específicos, depois usando o Gulp mesmo pra minificar.

Pra não ficar jogando coisa no escopo global a gente criava um namespace da aplicação e fazia tudo dentro dele, tipo:

var MyApp = MyApp || {};
MyApp.doSomething = function () { ... }

[doug2k1]

Complementando, o padrão módulo (module pattern) pode ajudar:

http://desenvolvimentoparaweb.com/javascript/javascript-module-pattern-padrao-modulo/

[felipefialho]

Acredito que uma boa alternativa é modularizar seu código usando o Webpack, mesmo para projetos pequenos funciona muito bem.

Fiz isso no Piano Keyboard e no 1500 Translator, pode da ruma conferida no código se quiser.

Tudo fica muito mais organizado e fácil de fazer testes (caso tenha) e dar manutenção futura.

[klarkc]

Olha IMHO ainda é muito cedo para usar ES6 modules de forma nativa, embora o suporte já esteja bem difundido as tecnologias ao redor ainda estão muito cruas. Dito isso recomendo usar essa nova spec com um bundler como Webpack, Browserify, POI, Rollup em conjunto com uma ferramenta de tooling para ajudar com os scripts (Gulp, NPM Scripts).

Nem sempre vc tem equipe e know-how suficiente para criar todo esse ferramental do zero, se for esse o caso, recomendo ficar com templates e ferramentas direcionadas às libs que vocês usam (os cli's da vida) ou algo como o http://yeoman.io/ que tem vários templates para diversos tipos de frameworks / libs.

[guilhermethales]

Valeu pelas dicas galera!

[skyzito]

Concordo com a dica do @lfeh

Aproveitando o assunto , estou a algum tempo utlizando o webpack e até o momento nos projetos que usei não precisei mais de Gulp/Grunt , consigo fazer tudo com o webpack mesmo.

Algum caso específico no qual vocês não conseguiram fazer com o webpack e tiveram que recorrer ao grunt/gulp ?

[klarkc]

@skyzito sim, InCuca/vue-loopback é um case, poderíamos ter usado webpack, mas preferimos usar o gulp para abraçar a parte do servidor, que também precisava ser compilado para Node e precisava de automação em várias pequenas rotinas.

[mahenrique94]

Eu particularmente divido e separo tudo o máximo que der, para cada necessidade tenho um JS, por exemplo:

services.js
http.js
mask.js
helpers.js
functions.js
pattern.js

Isso tratando-se de um projeto crud, ou seja, sem frameworks.

Se quiser dê uma olhada nessa lib JS: https://github.com/mahenrique94/jlib