Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC

11,747 views

Published on

Link para o código do hands-on:

http://www.agilecode.com.br/angularjs/minicurso_rodrigobranas.zip

Published in: Technology

Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Desenvolvimento de aplicações web com AngularJS
  2. 2. Organização Realização Apoio
  3. 3.            JavaScript e AngularJS Clean Code com TDD e Refactoring Academia Programador Academia Java Academia WEB Academia Enterprise Academia Arquiteto Linux Asterisk OpenSIPS Oficiais Furukawa www.voffice.com.br treinamento@voffice.com.br
  4. 4. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  5. 5. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • • • • Desenvolvendo Software na Gennera Criando treinamentos na Agile Code Escrevendo na Java Magazine e PacktPub Palestrando sobre desenvolvimento de software em eventos, universidades e empresas
  6. 6. Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV Certificações SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.
  7. 7. • • • • • • • • • Há mais de 5 anos liderando pessoas. Mais de 2000 horas em sala de aula. Mais de 100 apresentações em eventos. 6 artigos escritos para revistas. 1 livro. Mais de 500 profissionais treinados. Criação de 22 palestras. Criação de 10 treinamentos. Criação de mais de 3.000 slides.
  8. 8. Insatisfação com a falta de produtividade!
  9. 9. O que leva uma tecnologia a ser improdutiva?
  10. 10. Build muito lento
  11. 11. Tecnologia muito complexa
  12. 12. Aprendizado muito difícil
  13. 13. Mistura de conceitos Onde devo programar cada parte da aplicação?
  14. 14. Como surgiu a web?
  15. 15. Tim Berners-Lee Criador da Web
  16. 16. Em 1990, nos laboratórios do CERN e utilizando um computador NeXTcube, Berners-Lee construiu o primeiro servidor, o primeiro navegador e as primeiras páginas que descreviam seu próprio projeto, chamado WorldWideWeb. (CERN)
  17. 17. Em 1990, nos laboratórios do CERN e utilizando um computador NeXTcube, Berners-Lee construiu o primeiro servidor, o primeiro navegador e as primeiras páginas que descreviam seu próprio projeto, chamado WorldWideWeb. (CERN)
  18. 18. Em 1990, nos laboratórios do CERN e utilizando um computador NeXTcube, Berners-Lee construiu o primeiro servidor, o primeiro navegador e as primeiras páginas que descreviam seu próprio projeto, chamado WorldWideWeb. (CERN)
  19. 19. Em 1990, nos laboratórios do CERN e utilizando um computador NeXTcube, Berners-Lee construiu o primeiro servidor, o primeiro navegador e as primeiras páginas que descreviam seu próprio projeto, chamado WorldWideWeb. (CERN)
  20. 20. Primeiro website da história!
  21. 21. No princípio era tudo estático
  22. 22. Como fazer para torná-la mais dinâmica?
  23. 23. Vamos gerar o código HTML no lado servidor
  24. 24. CGI Common Gateway Interface
  25. 25. Bem vindos a Web 1.0
  26. 26. Geração de conteúdo HTML no servidor e pouca interação
  27. 27. Como fazer para torná-la mais interativa?
  28. 28. JavaScript Entrando na era da alta interatividade
  29. 29. Bem vindos a Web 2.0
  30. 30. Quando pensamos em JavaScript, qual é a primeira coisa que surge?
  31. 31. O Ministério da Saúde adverte: O uso excessivo de JavaScript pode levar o projeto ao caos!
  32. 32. Parece que vai ser necessário começar a organizar o negócio...
  33. 33. Finalmente, chegamos...
  34. 34. Criado por Misko Havery e Adams Abrons em 2009
  35. 35. Atualmente, o AngularJS é mantido pela equipe do Google
  36. 36. Totalmente escrito em JavaScript
  37. 37. Isso quer dizer que toda a aplicação roda browser do cliente?
  38. 38. Vai funcionar em todos os browsers?
  39. 39. Como fica a performance?
  40. 40. E a segurança do código?
  41. 41. O AngularJS tem como objetivo estender a linguagem HTML
  42. 42. • Água • Coca-Cola • Cerveja
  43. 43. 1. <ul> 2. <li>Água</li> 3. <li>Coca-Cola</li> 4. <li>Cerveja</li> 5. </ul>
  44. 44. 1. <ul> 2. <li></li> 3. </ul>
  45. 45. 1. <ul> 2. <li ng-repeat="item in items"> 3. </li> 4. </ul>
  46. 46. 1. <ul> 2. <li ng-repeat="item in items"> 3. {{item.description}} 4. </li> 5. </ul>
  47. 47. Qual é a vantagem em estender a linguagem HTML?
  48. 48. Tornar a programação mais declarativa, escrevendo muito menos código
  49. 49. Arquitetura do framework
  50. 50. O que é arquitetura? Qual é a diferença entre arquitetura e design?
  51. 51. Surgimento do padrão MVC Model-View-Controller
  52. 52. Trygve Reenskaug Criou o padrão em 1978 na Xerox (PARC)
  53. 53. MVC, MVP, MVVM e MVW
  54. 54. Separação de responsabilidades
  55. 55. View É o que o cliente vê
  56. 56. Controller Responsável pelo que a View consome
  57. 57. Scope Faz a mediação entre a View e o Controller
  58. 58. Hello World!
  59. 59. 1. 2. 3. 4. 5. 6. 7. 8. <!doctype html> <html> <head> <title>Hello World</title> </head> <body> </body> </html>
  60. 60. 1. 2. 3. 4. 5. 6. 7. 8. <!doctype html> <html ng-app> <head> <title>Hello World</title> </head> <body> </body> </html>
  61. 61. 1. 2. 3. 4. 5. 6. 7. 8. 9. <!doctype html> <html ng-app> <head> <title>Hello World</title> <script src='angular.js'></script> </head> <body> </body> </html>
  62. 62. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. <!doctype html> <html ng-app> <head> <title>Hello World</title> <script src='angular.js'></script> <script> function HelloWorldCtrl($scope) { $scope.message = 'Hello World!'; } </script> </head> <body> </body> </html>
  63. 63. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. <!doctype html> <html ng-app> <head> <title>Hello World</title> <script src='angular.js'></script> <script> function HelloWorldCtrl($scope) { $scope.message = 'Hello World!'; } </script> </head> <body ng-controller="HelloWorldCtrl"> </body> </html>
  64. 64. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. <!doctype html> <html ng-app> <head> <title>Hello World</title> <script src='angular.js'></script> <script> function HelloWorldCtrl($scope) { $scope.message = 'Hello World!'; } </script> </head> <body ng-controller="HelloWorldCtrl"> {{message}} </body> </html>
  65. 65. AngularJS Hands-On Por dentro das principais características do framework!
  66. 66. Quais são os concorrentes do AngularJS?
  67. 67. http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember
  68. 68. Quem está usando AngularJS?
  69. 69. Perguntas?
  70. 70. Treinamento de Desenvolvimento web com JavaScript e AngularJS Aprenda a construir aplicações web interativas e fáceis de utilizar, com uma arquitetura modular, robusta e flexível e uma produtividade que vai superar as suas expectativas! treinamento@voffice.com.br Turmas 08/03 (sábados) em Indaial 24/03 (seg. e qua.) em Florianópolis 05/04 (sábados) em Florianópolis 15/04 (ter. e qui.) em Florianópolis Vagas Encerradas Vagas Encerradas Inscrições Abertas Inscrições Abertas
  71. 71. Treinamento de Clean Code Desenvolva suas habilidades na arte da programação e aprenda a construir aplicações de alta qualidade por meio de Técnicas de Refactoring, Orientação a Objetos, Test-Driven Development e Automação do Ambiente de Desenvolvimento! treinamento@voffice.com.br Turmas 16/04 (seg. e qua.) em Florianópolis Inscrições Abertas
  72. 72. Obrigado! rodrigo.branas@gmail.com http://www.agilecode.com.br www.slideshare.net/rodrigobranas

×