A evolução do AngularJS

11.509 visualizações

Publicada em

Nesta palestra falamos sobre a introdução ao AngularJS, e a sua evolução até chegar na versão 2.0

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

Nenhuma nota no slide
  • Qual é a sua obra?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Velocidade aumenta conforme os desperdícios vão sendo eliminados
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • react = 404, ember = 485, knockout = 56,
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • A evolução do AngularJS

    1. 1. A evolução do AngularJS Rodrigo Branas
    2. 2. http://www.agilecode.com.br
    3. 3. http://www.youtube.com/rodrigobranas
    4. 4. O Angular é um framework para o desenvolvimento de aplicações web utilizando JavaScript ou Dart
    5. 5. Estrutura a arquitetura da aplicação em camadas bem definidas
    6. 6. Estimula a criação componentes reusáveis e modularizáveis
    7. 7. Fornece a infraestrutura necessária para integrar com o back-end
    8. 8. Facilita muito a automação de testes tanto unitários quanto end-to-end
    9. 9. Criado em 2009 por Miško Hevery e Adams Abrons
    10. 10. Principais commiters do Angular Igor Minar e Miško Hevery
    11. 11. Facilitar a criação de aplicações web
    12. 12. Já pensou quanto código precisamos escrever para criar uma aplicação simples?
    13. 13. 17.000 linhas e 6 meses depois...
    14. 14. Aposto que consigo reescrever o projeto todo em apenas 2 semanas...
    15. 15. Eles conseguiram reescrever tudo em apenas 1.500 linhas, 3 semanas depois
    16. 16. O Google decidiu adotar o projeto...
    17. 17. É como casar com mulher rica, o futuro está garantido!
    18. 18. O interesse pelo framework vem crescendo cada vez mais!
    19. 19. 1.0.0 temporal-domination (2012-06-13)
    20. 20. 1.2.0 timely-delivery (2013-11-08)
    21. 21. 1.3.0 superluminal-nudge (2014-10-13)
    22. 22. 1.4.0-beta.6 cookie-liberation (2015-03-17)
    23. 23. O Angular tem uma comunidade muito forte e atuante
    24. 24. Atualmente, o projeto tem mais de 1.235 contribuidores
    25. 25. Todo mês, várias atualizações são lançadas
    26. 26. 1.4.0-rc.2 rocket-zambonimation (2015-05-12) v1.4.0-rc.1 sartorial-chronography (2015-04-24) v1.4.0-rc.0 smooth-unwinding (2015-04-10) 1.4.0-beta.6 cookie-liberation (2015-03-17) 1.3.15 locality-filtration (2015-03-17) 1.4.0-beta.5 karmic-stabilization (2015-02-24) 1.3.14 instantaneous-browserification (2015-02-24) 1.4.0-beta.4 overlyexplosive-poprocks (2015-02-09) 1.3.13 meticulous-riffleshuffle (2015-02-09) 1.4.0-beta.3 substance-mimicry (2015-02-02) 1.3.12 outlandish-knitting (2015-02-02) 1.4.0-beta.2 holographic-rooster (2015-01-26) 1.3.11 spiffy-manatee (2015-01-26) 1.4.0-beta.1 trepidatious-salamander (2015-01-20) 1.3.10 heliotropic-sundial (2015-01-20) 1.4.0-beta.0 photonic-umbrakinesis (2015-01-13) 1.3.9 multidimensional-awareness (2015-01-13) Oquejáfoilançadoem2015?
    27. 27. Para cada nova versão é dado o nome de um super poder
    28. 28. 0.9.0 dragon-breath (2010-10-20)
    29. 29. 0.9.5 turkey-blast (2010-11-25)
    30. 30. 0.9.6 night-vision (2010-12-06)
    31. 31. http://bit.ly/ng-release-names
    32. 32. Até agora, já foram lançadas 138 releases do framework!
    33. 33. Com tanta atualização, não dá medo de quebrar alguma coisa?
    34. 34. 4.000 testes de unidade executados a cada alteração feita no código...
    35. 35. Você acha que isso é muito?
    36. 36. A cada integração, 50.000 testes são executados em vários ambientes!
    37. 37. Agora sim, isso é muito?!
    38. 38. Atualmente, existem cerca de 2.000 aplicativos no Google utilizando Angular e todos os testes deles também são executados
    39. 39. A performance do framework vem melhorando muito
    40. 40. Na versão 1.4, os números ainda vão aumentar cerca de 30%
    41. 41. Arquitetura do framework
    42. 42. View É o que o cliente vê
    43. 43. Controller Responsável pelo que a View consome
    44. 44. Scope Faz a mediação entre a View e o Controller
    45. 45. AngularJS 1.x Hands-On Por dentro das principais características do framework!
    46. 46. Está chegando o Angular 2.0
    47. 47. Quem são? Como vivem? O que comem? De onde surgiram? Como se reproduzem?
    48. 48. Estava tudo tão bom, por que o Angular está mudando?
    49. 49. O framework está ficando velho...
    50. 50. A versão 1.x iniciou em 2009 e está baseada em muitos conceitos do passado enquanto a nova versão utiliza conceitos do futuro
    51. 51. E o presente?
    52. 52. ECMAScript 6 Utilização de novos recursos
    53. 53. Utilização de WebComponents Possibilidade de criar componentes
    54. 54. Performance ainda melhor A nova versão está ainda mais rápida
    55. 55. Curva de aprendizado é menor Menos conceitos para aprender
    56. 56. Será que o Angular mudou tanto assim, em tão pouco tempo?
    57. 57. A maioria das diretivas morreram
    58. 58. Template no Angular 1.0
    59. 59. Template no Angular 2.0
    60. 60. Como o Angular 1.x faz binding? <element xyz="literal">... <element xyz="expression">... <element xyz="{{interpolate}}">...
    61. 61. E agora, no Angular 2.0? <element xyz="literal">... <element [xyz]="expression">... Com a notação de [], o bind é realizado diretamente na propriedade do elemento
    62. 62. Comparando os dois mundos! 1.x <div ng-bind="exp"></div> 1.x <div ng-hide="exp"></div> 1.x <div ng-class="{done: exp}"></div> 2.0 <div [text]="exp"></div> 2.0 <div [hidden]="exp"></div> 2.0 <div [class.done]="exp"></div>
    63. 63. ng-bind ng-class ng-style ng-disabled ng-show ng-hide ng-src ng-href Quemmorreu?
    64. 64. O que acontece nesse cenário, bind em uma propriedade ou o disparo de um evento? <element xyz="functionName(abc)">...
    65. 65. O que acontece nesse cenário, bind em uma propriedade ou o disparo de um evento? <element xyz="functionName(abc)">... <element ng-bind="functionName(abc)">... <element ng-click="functionName(abc)">...
    66. 66. E agora, como fica no Angular 2.0? <element [text]="functionName(abc)"> Com detecção de mudança, sem efeitos colaterais e supressão de null <element (click)="functionName(abc)"> Disparo baseado em eventos, com efeito colateral e sem supressão de null
    67. 67. ng-blur ng-change ng-checked ng-click ng-dblclick ng-keyup ng-keydown ng-mouseover Quemmorreu?
    68. 68. E o ngModel? Como fica? <input type="text" ng-model="nome" />
    69. 69. E o ngModel? Como fica? <input type="text" ng-model="nome" /> <input type="text" #nome/>
    70. 70. Qual é a diferença? <input type="text" #nome/> <button (click)="nome.focus()"> Temos o elemento completo, podendo acessar suas operações, não apenas o seu valor
    71. 71. ng-model
    72. 72. Template no Angular 2.0
    73. 73. AngularJS 2.0 na prática Vamos analisar o código completo para ver os outros conceitos!
    74. 74. Em que o novo Angular é escrito?
    75. 75. Parece que alguém foi dar uma volta com o pessoal da Microsoft
    76. 76. Uma parte do AngularJS 2.0 é escrita em TypeScript 1.5 e convertido para ES5 para que possa ser interpretado pelos browsers atuais. O código fonte do framework tem ainda muitas partes escritas em AtScript e Dart.
    77. 77. E agora, ainda vale a pena aprender a versão 1.x?
    78. 78. A versão 1.x será abandonada?
    79. 79. Vou começar um projeto, devo utilizar a versão 1.x ou 2.0?
    80. 80. Será possível migrar o projeto para a versão 2.0 do framework?
    81. 81. Que droga, será que eu devo utilizar TypeScript?
    82. 82. Por onde eu posso começar a estudar AngularJS?
    83. 83. http://www.youtube.com/rodrigobranas
    84. 84. http://www.youtube.com/ngconfvideos
    85. 85. Rodrigo Branas Site: http://www.agilecode.com.br E-Mail: rodrigo.branas@gmail.com Twitter: @rodrigobranas SlideShare: http://www.slideshare.com/rodrigobranas YouTube: http://www.youtube.com/rodrigobranas LinkedIn: http://br.linkedin.com/in/rodrigobranas +Plus: https://plus.google.com/+RodrigoBranas GitHub: http://www.github.com/rodrigobranas

    ×