Como é o seu Workflow?

[lagden]

Devido ao grande sucesso da issue #17, onde rolou uma discussão entre bower e npm, tive a curiosidade de saber como vocês trabalham, como é seu workflow?

Compartilhem conosco como vocês gostam de trabalhar, exibam seus workflows!!
Vocês trabalham com yeoman.io, jspm.io, jade, gulp, transpilers, etc...?

[rubenmarcus]

Esse eu quero acompanhar. Eu to atrasado e não uso nada disso.
Brackets e Git / FTP pros sites que faço.
e nas empresas que trabalho basicamente Visual Studio e TFS ou Visual Studio e Git.

Todas essas ferramentas, nunca usei alem de npm para testes e só.

Eu tenho um pensamento que sei que posso estar errado ,mas quando vejo o pessoal instalando bibliotecas por linha de comando, vc instala um monte de coisa que não precisa no projeto que vem com ela..

E eu sei que tem uma porrada de automatizadores e taskrunners...

Eu li uns tutoriais do tipo: use o Yeoman pra iniciar uma instalação do wordpress, mas com cpanel tb é um clique só.

Uma pergunta: Como o pessoal coloca esses repositorios pra baixar, tipo eu invento um script ou codigo e quero baixar direto via linha de comando como fazem?

Vi pessoal postando sobre esse aqui https://chocolatey.org/ Acho ele bem legal.

Bom acompanhando o tópico!!!

Quero sair dessa de CPanel e Wordpress, mas pra mim tb existe a questão: Vou desenvolver um projeto novo, pessoal, tenho um prazo relativamente curto ( 3 meses máximo ) o que faço:

Wordpress no CPanel e modificação de temas ( 60% do que fiz)
Wordpress com temas novos ( 40% do que fiz)
Ghost em Node Js ( Instalei 1 vez só na minha maquina)
Do zero em Node
do zero em Ruby

a ideia é ter versatilidade, controle total, etc etc e aprender tb... e tambem usar esses workflows..

[doug2k1]

O meu muda a cada projeto. Todo dia sai ferramenta nova. O que eu curto mais atualmente é algo como: npm, gulp, webpack, babel (pra es6), linters, minificadores, karma, jasmine (pra testes).

[Cleysonlb]

Atualmente uso muito NPM, gulp, jeet, rupture e stylus

[felipefialho]

Meu dia a dia como desenvolvedor Front-End

De lá pra cá:

• Não estamos mais utilizando o Angular
• Usamos o JIRA como issue tracking
• Para CSS uilizo o combo: Stylus + Rupture + Jeet + PostCSS

(Alias, vale um update nesse artigo, farei amanhã)

O que quero mudar:

• NPM como gereciador de pacotes
• Gulp como task-builder

E minha arquitetura CSS e JavaScript também mudou (meu último post sobre isso foi em 2014, preciso escrever again). Continuo usando uma variação de Atomic CSS, mas bem mais flexível hoje em dia.

[rfviolato]

• NPM tanto os scripts tanto para gerenciar todos os packages (tchau Bower);
• Webpack + ES6 pra bundle dos arquivos;
• Pra transpile do ES6 uso Babel;
• PostCSS;
• Procuro usar grid systems baseados em flexbox, seja o do Angular Material (aqui no trampo) seja Flexboxgrid em projetos pessoais;
• Pra organização de issues usamos o Zube aqui no trampo.

[rickbenetti]

@rubenmarcus deposi que eu conheci o Bedrock, criei minha própria instalação e nunca mais fizemos nada pelo cpanel, inclusive retiramos o cpanel a pouco, tudo é feito pela linha de comando, nos dá maior garantia do que fazemos e segurança pro cliente de que o site não vai ter um zé ruela acessando por FTP pois não existe mais ftp.

Aqui usamos de tudo um pouco, mas basicamente segue:

Task Runners

• Gulp (estou abandonando)
• Grunt (estou abandonando)
• NPM (estou iniciando novos projetos direto no NPM)

Deploy:

• Capsitrano pra deploy

CSS:

• Less, SASS, agora Stylus também estou iniciando novos projetos com Stylus
• Rupture
• Jeet
• Stylus Grid
• Typography
• PostStylus (ainda estou estudando)

JS: ainda manjo lhufas de JS, to estudando matemática, mas meu sócio usa muito JS e usa o que tiver na frente

Projetos

• Gitlab
• Trello

[renanvaz]

Galera, antes de postar o meu workflow, só queria fazer um adendo que acho importante.

Não existe a solução ideal/única/final para desenvolvimento. É algo que está sempre em mutação.

Vale entender tb que o workflow e as ferramentas envolvidas possuem apenas um propósito, que é o de tornar mais fácil e rápido o desenvolvimento. Qualquer ferramenta que não te leve para este caminho, não é o ideal para vc.

É importante ter em mente isso, pois este tópico pode influenciar pessoas a tomarem uma decisão de troca que não seja a ideal para o que ela sabe e faz.

Eu estou acostumado a trabalhar em grupo e com pessoas de variados níveis técnicos. Isso me ajudou a ver na prática muita coisa que eu achava que era legal (pra mim e de acordo com o meu conhecimento), mas que para o grupo não era tão interessante assim.

Bom, depois podemos comentar mais sobre isso.

Para frontend hj eu trabalho com 2 conjuntos de ferramentas que escolhemos aqui para buildar os projetos.
Um para desenvolvimento de sites voltado para publicidade e animações e outro para aplicações web.

O que muda neles é a forma em que o site se organiza em volta do JavaScript.
Não vou citar nada em questão de código como plugins frontend utilizados aqui.

Projetos

• Gitlab
• Trello

Package manager

• NPM (Não costumo gerenciar pacotes frontend por ele)

Taskrunner

• Gulp

HTML

• Nunjucks
• HTMLmin

Imagens

• Imagemin
  • PNGquant

CSS

• Less
• StyleLint
• PostCSS
  • Rucksack
  • Autoprefixer
  • CSS nano

JavaScript

• JSLint
• Concat
• Uglify

Na versão de webapp entra

JavaScript

• Webpack
• Babel

[kazzkiq]

Alguem aí já usou o Rollup? To vendo muito gringo falando sobre ele nos últimos dias.

[vitorbritto]

Atualizado: https://github.com/vitorbritto/workflow-guide

[felipefialho]

Exato @renanvaz, é bom você tocar nesse ponto.

Realmente o Workflow é algo totalmente pessoal (ou da equipe) e apesar de ser muito interessante conhecer workflows de outras pessoas para melhorar o seu proprio, em nenhum momento deve altera-lo sem saber o que está fazendo.

Até porque é algo que muda constantemente, posso escrever um artigo hoje dando cada detalhe do meu workflow e arquitetura CSS e com certeza já vai estar bem alterado daqui 1 ano.

[mikejavier]

Muito bom saber o workflow de outras pessoas.

• Task Runners
  • Grunt
• CSS
  • SASS + JEET + mixins pessoais ou POSTCSS(precss, autoprefixer, etc) + LOST
• Package manager
  • Bower (querendo migrar)
  • NPM

[lagden]

Ainda não apareceu ninguém que utiliza o Polymer! Achei que ia aparecer alguém com esse tipo de workflow.

Achei esse repositório: https://github.com/vaadin/expense-manager-demo
Vale a pena dar uma olhada! é tudo feito com Polymer (web components)

[felipefialho]

@lagden Já usou em projetos reais?

Sendo sincero, tenho um pé atrás quanto ao Polymer!

[mikejavier]

@lagden também não senti a necessidade em utilizar em algum projeto real. E para ser sincero estou na espera e acompanhando o crescimento/amadurecimento do uso de web components pela comunidade para ver se realmente fica viável começar a utilizar em projetos futuros.

[lagden]

@lfeh e @mikejavier

Ainda não usei, mas agora que saiu a versão de produção e o workflow do Polymer melhorou bastante acho que vale a pena começar os labs.

Vejo que pessoal aqui também não usa o Meteor (esse eu uso), para montar SPA é totalmente excelente! O código é simples e fácil, você pode utilizar o Reat, Angular, Mithril, etc...

Atualmente eles estão migrando tudo para npm, pois os pacotes ficam no Atmosphere...

Anyway, acho que o Polymer merece nossa atenção!!

[felipefialho]

O Metor é interessante mesmo. Fizemos alguns testes por aqui, mas não era o que estavamos buscando. Achamos melhor criar tudo do 0 em Node.JS :)

[rubenmarcus]

@vitorbritto o wakatime tem pra brackets tb..

https://github.com/wakatime/brackets-wakatime

[ghost]

Alguém já usou o broccoli?

Sobre o bower, eu uso o gulp (através do main-bower-files) para compilar o arquivo principal de cada pacote instalado (definido pelo bower.json dos pacotes). E então ele gera o vendor.min com tudo compilado.

Se alguém se interessar e tiver alguma sugestão, segue a task para os arquivos .js:

gulp.task('bower-js', function() {
  return gulp.src(bowerFiles())
    .pipe($.filter('*.js', { restore: true }))
    .pipe($.concat('vendor.js'))
    .pipe($.rename({ suffix: '.min' }))
    .pipe($.uglify())
    .pipe(gulp.dest(dest + 'scripts'))
    .pipe($.notify({ message: 'bower-js task complete' }));
});

[lucasbento]

@lfeh uma pergunta: o que motivou você e/ou sua equipe à largarem o Angular?

Pergunto pois estou fazendo um projeto com ele e pretendo iniciar outro com React + Redux e já que terá mobile penso em utilizar React Native.

[felipefialho]

Mano, sinceramente, acho que não chegamos a trabalhar direito com Angular.

Na minha opinião funciona muito bem com single pages e web apps (e é para isso que ele serve). Mas acho pesado e ruim para dar manutenção em projetos grandes. Tem o problema com SEO também e precisa de algumas configurações para funcionar bem.

Sei lá, não nos adaptamos.

Começamos a usar uma aplicação que construímos usando Node e MongoDB e acho que foi a melhor coisas que fizemos.