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

10,513 views

Published on

Link para o código do hands-on:

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

Published in: Technology
3 Comments
42 Likes
Statistics
Notes
No Downloads
Views
Total views
10,513
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
0
Comments
3
Likes
42
Embeds 0
No embeds

No notes for slide
  • Telégrafo - 1836
  • Telégrafo - 1836
  • 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

    ×