A evolução do AngularJS

13.365 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

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

×