A evolução do AngularJS
74 gostaram15,725 visualizações
O documento descreve a evolução do framework AngularJS, desde sua criação em 2009 até as mudanças trazidas pela versão 2.0. Apresenta os principais recursos de cada versão e explica como alguns conceitos foram modificados ou removidos para aproveitar melhorias na linguagem JavaScript.
![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](https://image.slidesharecdn.com/aevolucaodoangularjs-150517123511-lva1-app6892/85/A-evolucao-do-AngularJS-68-320.jpg)
![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>](https://image.slidesharecdn.com/aevolucaodoangularjs-150517123511-lva1-app6892/85/A-evolucao-do-AngularJS-69-320.jpg)
![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](https://image.slidesharecdn.com/aevolucaodoangularjs-150517123511-lva1-app6892/85/A-evolucao-do-AngularJS-73-320.jpg)
A evolução do AngularJS
- 1. A evolução do AngularJS Rodrigo Branas
- 5. O Angular é um framework para o desenvolvimento de aplicações web utilizando JavaScript ou Dart
- 6. Estrutura a arquitetura da aplicação em camadas bem definidas
- 7. Estimula a criação componentes reusáveis e modularizáveis
- 8. Fornece a infraestrutura necessária para integrar com o back-end
- 9. Facilita muito a automação de testes tanto unitários quanto end-to-end
- 10. Criado em 2009 por Miško Hevery e Adams Abrons
- 11. Principais commiters do Angular Igor Minar e Miško Hevery
- 12. Facilitar a criação de aplicações web
- 13. Já pensou quanto código precisamos escrever para criar uma aplicação simples?
- 15. 17.000 linhas e 6 meses depois...
- 16. Aposto que consigo reescrever o projeto todo em apenas 2 semanas...
- 17. Eles conseguiram reescrever tudo em apenas 1.500 linhas, 3 semanas depois
- 18. O Google decidiu adotar o projeto...
- 19. É como casar com mulher rica, o futuro está garantido!
- 20. O interesse pelo framework vem crescendo cada vez mais!
- 25. O Angular tem uma comunidade muito forte e atuante
- 26. Atualmente, o projeto tem mais de 1.235 contribuidores
- 27. Todo mês, várias atualizações são lançadas
- 28. 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?
- 29. Para cada nova versão é dado o nome de um super poder
- 34. Até agora, já foram lançadas 138 releases do framework!
- 35. Com tanta atualização, não dá medo de quebrar alguma coisa?
- 36. 4.000 testes de unidade executados a cada alteração feita no código...
- 37. Você acha que isso é muito?
- 38. A cada integração, 50.000 testes são executados em vários ambientes!
- 39. Agora sim, isso é muito?!
- 40. Atualmente, existem cerca de 2.000 aplicativos no Google utilizando Angular e todos os testes deles também são executados
- 42. A performance do framework vem melhorando muito
- 44. Na versão 1.4, os números ainda vão aumentar cerca de 30%
- 47. View É o que o cliente vê
- 48. Controller Responsável pelo que a View consome
- 49. Scope Faz a mediação entre a View e o Controller
- 50. AngularJS 1.x Hands-On Por dentro das principais características do framework!
- 51. Está chegando o Angular 2.0
- 53. Quem são? Como vivem? O que comem? De onde surgiram? Como se reproduzem?
- 54. Estava tudo tão bom, por que o Angular está mudando?
- 55. O framework está ficando velho...
- 56. 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
- 57. E o presente?
- 58. ECMAScript 6 Utilização de novos recursos
- 59. Utilização de WebComponents Possibilidade de criar componentes
- 60. Performance ainda melhor A nova versão está ainda mais rápida
- 61. Curva de aprendizado é menor Menos conceitos para aprender
- 62. Será que o Angular mudou tanto assim, em tão pouco tempo?
- 63. A maioria das diretivas morreram
- 65. Template no Angular 1.0
- 66. Template no Angular 2.0
- 67. Como o Angular 1.x faz binding? <element xyz="literal">... <element xyz="expression">... <element xyz="{{interpolate}}">...
- 68. 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
- 69. 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>
- 71. O que acontece nesse cenário, bind em uma propriedade ou o disparo de um evento? <element xyz="functionName(abc)">...
- 72. 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)">...
- 73. 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
- 75. E o ngModel? Como fica? <input type="text" ng-model="nome" />
- 76. E o ngModel? Como fica? <input type="text" ng-model="nome" /> <input type="text" #nome/>
- 77. 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
- 78. ng-model
- 79. Template no Angular 2.0
- 80. AngularJS 2.0 na prática Vamos analisar o código completo para ver os outros conceitos!
- 81. Em que o novo Angular é escrito?
- 82. Parece que alguém foi dar uma volta com o pessoal da Microsoft
- 83. 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.
- 85. E agora, ainda vale a pena aprender a versão 1.x?
- 86. A versão 1.x será abandonada?
- 87. Vou começar um projeto, devo utilizar a versão 1.x ou 2.0?
- 88. Será possível migrar o projeto para a versão 2.0 do framework?
- 89. Que droga, será que eu devo utilizar TypeScript?
- 90. Por onde eu posso começar a estudar AngularJS?
- 94. 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
Notas do Editor
- #3: Qual é a sua obra?
- #6: Desmotivação
- #7: Desmotivação
- #8: Desmotivação
- #9: Desmotivação
- #10: Desmotivação
- #11: Desmotivação
- #12: Desmotivação
- #13: Velocidade aumenta conforme os desperdícios vão sendo eliminados
- #14: Desmotivação
- #15: Desmotivação
- #16: Desmotivação
- #17: Desmotivação
- #18: Desmotivação
- #19: Desmotivação
- #20: Desmotivação
- #21: Vontade de sair da empresa. Lembra do Belchior?
- #22: Desmotivação
- #23: Desmotivação
- #24: Desmotivação
- #25: Desmotivação
- #26: Desmotivação
- #27: react = 404, ember = 485, knockout = 56,
- #28: Vontade de sair da empresa. Lembra do Belchior?
- #29: Vontade de sair da empresa. Lembra do Belchior?
- #30: Vontade de sair da empresa. Lembra do Belchior?
- #31: Vontade de sair da empresa. Lembra do Belchior?
- #32: Vontade de sair da empresa. Lembra do Belchior?
- #33: Vontade de sair da empresa. Lembra do Belchior?
- #34: Vontade de sair da empresa. Lembra do Belchior?
- #35: Vontade de sair da empresa. Lembra do Belchior?
- #37: Vontade de sair da empresa. Lembra do Belchior?
- #38: Vontade de sair da empresa. Lembra do Belchior?
- #39: Vontade de sair da empresa. Lembra do Belchior?
- #40: Vontade de sair da empresa. Lembra do Belchior?
- #41: Vontade de sair da empresa. Lembra do Belchior?
- #42: Vontade de sair da empresa. Lembra do Belchior?
- #43: Desmotivação
- #44: Desmotivação
- #45: Desmotivação
- #46: Desmotivação
- #47: Desmotivação
- #48: Desmotivação
- #49: Desmotivação
- #50: Desmotivação
- #51: Desmotivação
- #52: Desmotivação
- #53: Desmotivação
- #54: Desmotivação
- #55: Desmotivação
- #56: Desmotivação
- #57: Desmotivação
- #58: Vontade de sair da empresa. Lembra do Belchior?
- #59: Desmotivação
- #60: Desmotivação
- #61: Desmotivação
- #65: Vontade de sair da empresa. Lembra do Belchior?
- #68: Desmotivação
- #69: Desmotivação
- #70: Desmotivação
- #71: Desmotivação
- #72: Desmotivação
- #73: Desmotivação
- #74: Desmotivação
- #75: Desmotivação
- #76: Desmotivação
- #77: Desmotivação
- #78: Desmotivação
- #79: Desmotivação
- #81: Desmotivação
- #82: Vontade de sair da empresa. Lembra do Belchior?
- #83: Desmotivação
- #84: Desmotivação
- #85: Desmotivação
- #86: Desmotivação
- #87: Desmotivação
- #88: Desmotivação
- #89: Desmotivação
- #90: Desmotivação
- #91: Desmotivação