Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS: Começando do Jeito Certo

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.

Acfa202cc869d143b760cff76659cb64?s=128

Joel Jucá

March 12, 2016
Tweet

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!