Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A evolução do AngularJS

14,884 views

Published on

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

Published in: Technology
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Altissimo padrao e didatica de ponta
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Salve Rodrigo, grato pela contribuição a comunidade, estou aprendendo mas em breve pretendo retribuir
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Parabéns Rodrigo Branas pelo excelente material
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Prezado Rodrigo teria como você disponibilizar estes slides para download?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×