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.

Angular2

2,309 views

Published on

2015/5/18 Webプラットフォーム部 - 第6回勉強会 フレームワークの世界まる見え!JS特捜部 ~ React,Angular,WinJSだらけの2時間SP!~

Published in: Technology
  • Be the first to comment

Angular2

  1. 1. 2015.5.18 HTML5j Web Platform 部 Angular2
  2. 2. Kenichi Kanai can_i_do_web
  3. 3. Web先端技術味見部 http://bit.ly/1Fq9kDe
  4. 4. ! AngularJS Japan User Group http://bit.ly/1vBMMHl
  5. 5. now on sale.
  6. 6. Agenda ! • これからのWebアプリ • Angular 1.x から変わること • Angular2 でやりたいこと
  7. 7. Concepts • ( Two-way ) Data Binding • Template Engine • Ajax Support • Routing • Test • Security
  8. 8. これからのWebアプリ
  9. 9. Keywords • ES6 • Components based • Shadow DOM • Object.observe ( ES7 ) • Like Virtual DOM
  10. 10. http://webcomponents.org/
  11. 11. 今までもあった。
  12. 12. e.g. CSS - Bootstrap キツい…
  13. 13. Shadow DOM
  14. 14. 外部のCSS の影響を受けない!
  15. 15. こんな感じで書くと…
  16. 16. x-my-button タグ内の Shadow DOM には影響しない
  17. 17. Angular 1.x から変わること
  18. 18. ※現時点(2015.5.18)でのお話です
  19. 19. https://angularjs.org/ https://angular.io/ Website & Logo & Name
  20. 20. Task Runner
  21. 21. Task Runner ?
  22. 22. Task Runner
  23. 23. Task Runner
  24. 24. Task Runner https://github.com/broccolijs/broccoli
  25. 25. パフォーマンス
  26. 26. https://github.com/angular/benchpress
  27. 27. Deep Tree Benchmark 2015-02-09
  28. 28. Controller
  29. 29. Directive Definition Object
  30. 30. $scope
  31. 31. module
  32. 32. jqLite
  33. 33. R.I.P
  34. 34. Syntax HTML Attribute -> DOM Property
  35. 35. Syntax binding Angular 1.x Angular 2 HTMLInputElement.prototype.value
  36. 36. Syntax event-binding Angular 1.x Angular 2 HTMLButtonElement.prototype.click
  37. 37. Syntax JavaScript
  38. 38. Syntax JavaScript
  39. 39. Routing
  40. 40. http://angular-ui.github.io/ui-router/site/#/api/ ui.router
  41. 41. New Router https://angular.github.io/router/
  42. 42. New Router - Changed <ng-viewport> ↓ <ng-outlet>
  43. 43. TypeScript
  44. 44. AtScript = Superset of TypeScript
  45. 45. AtScript = Superset of TypeScript 
 TypeScript「Annotations 対応するよー」 ! AtScript「まじか…」
  46. 46. TypeScript 採用!
  47. 47. https://github.com/angular/ts-quickstart
  48. 48. Angular2 でやりたいこと
  49. 49. Server-side Rendering • Perceived load time • Actual load time • Client side performance • SEO • Browser support • Link preview
  50. 50. CLI for NPM • scaffold • skeleton files • set up build • set up testing environment • possibly even deployment
  51. 51. Shadow DOM
  52. 52. etc • Two-way Data Binding • Improve i18n • Improve Animation • Like Virtual DOM • Migration
  53. 53. End of 2015 at the earliest - but…
  54. 54. Thank you ! can_i_do_web

×