Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br

Desenvolvimento de aplicações
web com AngularJS
Organização

Realização

Apoio












JavaScript e AngularJS
Clean Code com TDD e Refactoring
Academia Programador
Academia Java
Academia...
“Transformar equipes de desenvolvimento de software”

http://www.agilecode.com.br
Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
•
•
•
•

Desenvolvendo Software na Gennera
Cria...
Formação Acadêmica

Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
Certificações

SCJA, SCJP, SCJD, SCWCD, ...
•
•
•
•
•
•
•
•
•

Há mais de 5 anos liderando pessoas.
Mais de 2000 horas em sala de aula.
Mais de 100 apresentações em e...
Insatisfação com a falta de
produtividade!
O que leva uma tecnologia
a ser improdutiva?
Build muito lento
Tecnologia muito complexa
Aprendizado muito difícil
Mistura de conceitos

Onde devo programar cada parte da aplicação?
Como surgiu a web?
Tim Berners-Lee
Criador da Web
Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primei...
Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primei...
Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primei...
Em 1990, nos laboratórios do CERN e utilizando
um computador NeXTcube, Berners-Lee construiu
o primeiro servidor, o primei...
Primeiro website da história!
No princípio era tudo estático
Como fazer para torná-la
mais dinâmica?
Vamos gerar o código HTML
no lado servidor
CGI
Common Gateway Interface
Bem vindos a Web 1.0
Geração de conteúdo HTML
no servidor e pouca interação
Como fazer para torná-la
mais interativa?
JavaScript

Entrando na era da alta interatividade
Bem vindos a Web 2.0
Quando pensamos em JavaScript,
qual é a primeira coisa que surge?
O Ministério da Saúde adverte:
O uso excessivo de JavaScript pode
levar o projeto ao caos!
Parece que vai ser necessário
começar a organizar o negócio...
Finalmente, chegamos...
Criado por Misko Havery e
Adams Abrons em 2009
Atualmente, o AngularJS é
mantido pela equipe do Google
Totalmente escrito em JavaScript
Isso quer dizer que toda a aplicação
roda browser do cliente?
Vai funcionar em todos os browsers?
Como fica a performance?
E a segurança do código?
O AngularJS tem como objetivo
estender a linguagem HTML
• Água
• Coca-Cola
• Cerveja
1. <ul>
2.
<li>Água</li>
3.
<li>Coca-Cola</li>
4.
<li>Cerveja</li>
5. </ul>
1. <ul>
2.
<li></li>
3. </ul>
1. <ul>
2.
<li ng-repeat="item in items">
3.
</li>
4. </ul>
1. <ul>
2.
<li ng-repeat="item in items">
3.
{{item.description}}
4.
</li>
5. </ul>
Qual é a vantagem em estender
a linguagem HTML?
Tornar a programação mais declarativa,
escrevendo muito menos código
Arquitetura do framework
O que é arquitetura?

Qual é a diferença entre arquitetura e design?
Surgimento do padrão MVC
Model-View-Controller
Trygve Reenskaug

Criou o padrão em 1978 na Xerox (PARC)
MVC, MVP, MVVM e MVW
Separação de responsabilidades
View

É o que o cliente vê
Controller

Responsável pelo que a View consome
Scope

Faz a mediação entre a View e o Controller
Hello World!
1.
2.
3.
4.
5.
6.
7.
8.

<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.

<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.

<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
<script src='angular.js'></scr...
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 sr...
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 sr...
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>
<scrip...
AngularJS Hands-On

Por dentro das principais características do
framework!
Quais são os concorrentes do
AngularJS?
http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember
Quem está usando AngularJS?
Perguntas?
Treinamento de
Desenvolvimento web com JavaScript e AngularJS
Aprenda a construir aplicações web interativas e fáceis de u...
Treinamento de Clean Code
Desenvolva suas habilidades na arte da programação e aprenda a
construir aplicações de alta qual...
Obrigado!
rodrigo.branas@gmail.com
http://www.agilecode.com.br

www.slideshare.net/rodrigobranas
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio/ASSESC
Próximos SlideShares
Carregando em…5
×

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

10.542 visualizações

Publicada em

Link para o código do hands-on:

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

Publicada em: Tecnologia
3 comentários
42 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
10.542
No SlideShare
0
A partir de incorporações
0
Número de incorporações
97
Ações
Compartilhamentos
0
Downloads
0
Comentários
3
Gostaram
42
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

    ×