Processo de Desenvolvimento FrontEnd - Do caos ao Sublime

O mundo muda constantemente.
Na tecnologia isso é mais evidente, o avanço é exponêncial, e quase não conseguimos acompanhar o que há de mais novo na área em que atuamos.
No desenvolvimento de software, a mudança pode influenciar diretamente no sucesso do mesmo. Novas tecnologias, novas ferramentas, novas linguagens, tudo isso deve ser considerado.
O JavaScript ocupou o lugar de linguagem mais querida e popular no mundo, depois de passar anos sendo incompreendida.
Esta mudança é reflexo do avanço da linguagem, das ferramentas e de todas as tecnologias que a cercam.
O modo de se desenvolver código client-side mudou, e para melhor.
O ambiente de desenvolvimento não é mais o mesmo, hoje temos um arsenal de ferramentas que nos ajudam a criar aplicações robustas, escaláveis e de qualidade.
Praticamente tudo que existe para melhorar o desenvolvimento de software em alguma outra linguagem, também existe para JavaScript.
Testes unitários, testes funcionais, ferramentas de build, validação de sintaxe, validação de convenções, integração contínua, etc.
Todos os itens acima, e muitos outros, são essenciais em qualquer tipo de software, e atualmente temos o poder de tornar nossas aplicações JavaScript muito mais confiáveis do que há alguns anos.
O objetivo da palestra é apresentar as principais ferramentas, tecnologias e técnicas disponíveis para o desenvolvimento de aplicações client-side, além de mostrar na prática, como mudamos completamente o processo de desenvolvimento FrontEnd em um dos maiores portais da América Latina, o Terra.

Transcript

1. Processo de Desenvolvimento FrontEnd... do Caos... ...ao Sublime
2. TerraBrazilJS RSJSFrontInPoa HTML5JavaScript
3. O mundo muda.
4. Evoluímos.
5. Tipos de evolução
6. Biológica/Genética
7. Red-Lipped Batfish
8. Wolffish
9. Long-nosed monkey
10. WTF EVOLUTION! http://wtfevolution.tumblr.com/
11. Cultural
14. http://jaydson.org/cultura-maldita- no-desenvolvimento-de-software/
15. Vira-lata
17. Tecnológica
18. Ferramentas de pedra e metal
19. Eletricidade
20. Web
23. - Mudança - Evolução - Simetria
24. JavaScript Incompreendido
25. JavaScript é a linguagem mais popular no Github
29. * Dev recebia a spec e não tinha um lugar padrão para armazenar os artefatos * Não existia um meio fácil de pesquisa por projetos
30. * Baixa o projeto inteiro via ~SVN~ para a sua máquina * Os testes eram integrados em um único branch compartilhado * Não existia versionamento adequado para feature/bugfix
31. * Ferramentas e serviços associados ao ambiente usavam a base de produção * Ambiente de desenvolvimento não era compatível com produção
32. * Risco de publicar em produção código alheio ainda em fase de testes
33. * O processo de publicação em produção era manual e arriscado (limpar cache, arquivo por arquivo)
34. * Não existia registro histórico relacionado ao projeto (issues/código/docs) * Não existia controle de permissões por projeto
35. * Excesso de retrabalho * !QA
36. ~600MB de arquivos estáticos no projeto Portal ~SVN~ HLG *.wtf
37. ~400MB de arquivos estáticos no projeto Portal ~SVN~ PRD *.js, *.css, (alguns html’s), *.png, *.jpg, *.swf
38. Plataforma de Desenvolvimento FrontEnd
40. * Descentralizado * Branches * Rápido pra caralho
41. Ambiente perfil FrontEnd http://dsv-fe01.tpn.terra.com/
43. ~400MB de arquivos estáticos no projeto Portal ~GIT~ MASTER *.js, *.css, (alguns html’s), *.png, *.jpg, *.swf
44. *
45. *
46. DSV FE * Os testes são integrados em uma única branch compartilhada
47. * Ambiente de desenvolvimento não é compatível com produção DSV FE
48. Ambiente de testes
49. http://dsv-fe01.tpn.terra.com/~jaydson.gomes/
50. Branch-Homologation: http://atm.sprint1.hlg-fe.tpn.terra.com/ [Projeto] [Branch] [Host]
51. Preview: http://preview-fe.tpn.terra.com/
52. Integração CMS: http://[URL]?internaltest=1&environment=hlg&branch=foo [URL] [Ambiente] [Branch]
53. Integração CMS: http://[URL]?internaltest=1&environment=preview [URL] [Ambiente] * Pull-requests integrados
55. Issue Tracker Gestão de Código Integração Repo/Docs/Auth Timeline Pull-requests Search Engine Human Interface
61. Deploy
62. + Bottr Jenkins
63. Faz merge dos pull- requests do dia anterior com a master branch 8:00 > Job Merger 14:00 > Job Merger Disponibiliza o ~produto~ do merge dos pull-requests em preview Job Deployer faz push no frontend-deploy Elenca pull-requests do dia atual
66. Obrigado!