AngularJS: Começando do Jeito Certo

Um conjunto de recomendações para quem está iniciando com AngularJS e/ou desenvolvimento de Web Apps/SPAs, baseadas em boas práticas da comunidade, acertos e erros do autor, e lições aprendidas enquanto trabalhando com AngularJS.

A set of recommendations for those starting w/ AngularJS and/or development of Web Apps/SPAs, based on community best practices, author's trials and errors, and lessons learned while working w/ AngularJS.

Transcript

1. Começando do Jeito Certo
2. Joel Wallis Jucá Cearense, 27, Webdev /joelwallis1 $ whoami
3. componentes angular • Modules ◦ Controllers ◦ Directives ◦ Providers (services, factories, constants, etc.) ◦ Filters, etc.
4. quando usar angular?
5. • TLDR: para Web apps! quando usar angular?
6. • TLDR: para Web apps! • Ao lidar com dados + contextos (usuário autenticado, cotação de moedas, previsão do tempo, etc.). quando usar angular?
7. • TLDR: para Web apps! • Ao lidar com dados + contextos (usuário autenticado, cotação de moedas, previsão do tempo, etc.). • Quando você não precisa/depende de SEO. quando usar angular?
8. • TLDR: para Web apps! • Ao lidar com dados + contextos (usuário autenticado, cotação de moedas, previsão do tempo, etc.). • Quando você não precisa/depende de SEO. • Ex.: agenda de contatos, cliente de e-mail, app financeira, etc. quando usar angular?
9. versionamento (git)
10. • Um repositório Git dedicado ao projeto Angular versionamento (git)
11. • Um repositório Git dedicado ao projeto Angular ▪ Incentiva o desacoplamento adequado (o maior/melhor benefício dos frameworks SPAs!) versionamento (git)
12. • Um repositório Git dedicado ao projeto Angular ▪ Incentiva o desacoplamento adequado (o maior/melhor benefício dos frameworks SPAs!) ▪ Documentação específica pro projeto versionamento (git)
13. • Um repositório Git dedicado ao projeto Angular ▪ Incentiva o desacoplamento adequado (o maior/melhor benefício dos frameworks SPAs!) ▪ Documentação específica pro projeto ▪ Testes e todo o resto adequadamente separados versionamento (git)
14. • Um repositório Git dedicado ao projeto Angular ▪ Incentiva o desacoplamento adequado (o maior/melhor benefício dos frameworks SPAs!) ▪ Documentação específica pro projeto ▪ Testes e todo o resto adequadamente separados ▪ Processo de deploy separado, e simplificado versionamento (git)
15. documentação
16. • Documentar é caro; não documentar é ainda mais! documentação
17. • Documentar é caro; não documentar é ainda mais! • Use e abuse do readme.md! documentação
18. documentação • Documentar é caro; não documentar é ainda mais! • Use e abuse do readme.md! • Use JSDoc para coisas não tão óbvias
19. documentação: readme.md
20. • Descrição do projeto, cliente e seus objetivos documentação: readme.md
21. • Descrição do projeto, cliente e seus objetivos • Mapa de navegação documentação: readme.md
22. • Descrição do projeto, cliente e seus objetivos • Mapa de navegação • Instruções de uso e contribuição documentação: readme.md
23. • Descrição do projeto, cliente e seus objetivos • Mapa de navegação • Instruções de uso e contribuição ▪ Como preparar o ambiente ▪ Como instalar ▪ Como fazer builds ▪ Como rodar ▪ Como testar documentação: readme.md
24. documentação: jsdoc
25. • Desenvolvedores devem saber ler código documentação: jsdoc
26. • Desenvolvedores devem saber ler código • Pequenas descrições não tomam tempo e ajudam um bocado! documentação: jsdoc
27. • Desenvolvedores devem saber ler código • Pequenas descrições não tomam tempo e ajudam um bocado! ▪ /** * A high-level interface for user-related * operations against our HTTP API. */ angular.module('mymodule').service('User', User); documentação: jsdoc
28. • Desenvolvedores devem saber ler código • Pequenas descrições não tomam tempo e ajudam um bocado! ▪ /** * A high-level interface for user-related * operations against our HTTP API. */ angular.module('mymodule').service('User', User); • Links para documentação, bons artigos, exemplos, etc. documentação: jsdoc
29. código-fonte
30. • Separe o código-fonte do build código-fonte
31. • Separe o código-fonte do build ▪ Use compiladores/transpiladores código-fonte
32. • Separe o código-fonte do build ▪ Use compiladores/transpiladores ▪ Use linters, preprocessadores, etc. código-fonte
33. • Separe o código-fonte do build ▪ Use compiladores/transpiladores ▪ Use linters, preprocessadores, etc. ▪ Use aquilo que te tornar mais produtivo! código-fonte
34. • Separe o código-fonte do build ▪ Use compiladores/transpiladores ▪ Use linters, preprocessadores, etc. ▪ Use aquilo que te tornar mais produtivo! • Automatize tarefas com Grunt/gulp/Shell/whatever código-fonte
35. código-fonte • Separe o código-fonte do build ▪ Use compiladores/transpiladores ▪ Use linters, preprocessadores, etc. ▪ Use aquilo que te tornar mais produtivo! • Automatize tarefas com Grunt/gulp/Shell/whatever • Adote um Style Guide (Eu uso o do John Papa)
36. workflow
37. • Aprendam task runners! (Grunt, gulp, etc.) workflow
38. • Aprendam task runners! (Grunt, gulp, etc.) • Aprendam task runners!!!11 workflow
39. • Aprendam task runners! (Grunt, gulp, etc.) • Aprendam task runners!!!11 • Shell vs Grunt vs gulp vs [PUT YOUR TASK RUNNER HERE] workflow
40. • Aprendam task runners! (Grunt, gulp, etc.) • Aprendam task runners!!!11 • Shell vs Grunt vs gulp vs [PUT YOUR TASK RUNNER HERE] ▪ ¬¬ workflow
41. • Aprendam task runners! (Grunt, gulp, etc.) • Aprendam task runners!!!11 • Shell vs Grunt vs gulp vs [PUT YOUR TASK RUNNER HERE] ▪ ¬¬ ▪ ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ workflow
42. • Aprendam task runners! (Grunt, gulp, etc.) • Aprendam task runners!!!11 • Shell vs Grunt vs gulp vs [PUT YOUR TASK RUNNER HERE] ▪ ¬¬ ▪ ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ • Use e abuse dos scripts npm! workflow
43. workflow: scripts npm
44. • no seu package.json: { (configs do projeto, etc...) } workflow: scripts npm
45. • no seu package.json: { (configs do projeto, etc...) "scripts": { "start": "node dev-server.js", "build": "gulp build", "watch": "gulp watch" } workflow: scripts npm
46. • No seu terminal: ◦ $ npm start (Inicia o servidor de desenvolvimento) workflow: scripts npm
47. • No seu terminal: ◦ $ npm start (Inicia o servidor de desenvolvimento) ◦ $ npm run build (Faz o build do projeto) workflow: scripts npm
48. • No seu terminal: ◦ $ npm start (Inicia o servidor de desenvolvimento) ◦ $ npm run build (Faz o build do projeto) ◦ $ npm run your-custom-command-here workflow: scripts npm
49. • No seu terminal: ◦ $ npm start (Inicia o servidor de desenvolvimento) ◦ $ npm run build (Faz o build do projeto) ◦ $ npm run your-custom-command-here ◦ E por aí vai... workflow: scripts npm
50. • { (configs do projeto, etc...) "scripts": { "start": "node dev-server.js", "build": "gulp build", "watch": "gulp watch" } workflow: scripts npm
51. • { (configs do projeto, etc...) "scripts": { "start": "node dev-server.js", "build": "gulp build", "watch": "gulp watch", "build:html": "gulp build:html", "build:css": "gulp build:css", "build:js": "gulp build:js" } workflow: scripts npm
52. • { (configs do projeto, etc...) "scripts": { "start": "node dev-server.js", "build": "gulp build", "watch": "gulp watch", "build:html": "gulp build:html", "build:css": "gulp build:css", "build:js": "gulp build:js", "watch:*": "gulp watch:*" <=== Repita as variações de build aqui } workflow: scripts npm
53. questions? don’t be shy :)
54. Feedback? Discussions? /joelwallis1 thank you!