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

1. 2015.5.18 HTML5j Web Platform 部
Angular2

2. Kenichi Kanai
can_i_do_web

3. Web先端技術味見部
http://bit.ly/1Fq9kDe

4. !
AngularJS Japan User Group
http://bit.ly/1vBMMHl

5. now on sale.

6. Agenda
!
• これからのWebアプリ
• Angular 1.x から変わること
• Angular2 でやりたいこと

7. Concepts
• ( Two-way ) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security

8. これからのWebアプリ

9. Keywords
• ES6
• Components based
• Shadow DOM
• Object.observe ( ES7 )
• Like Virtual DOM

10. http://webcomponents.org/

11. 今までもあった。

12. e.g. CSS - Bootstrap
キツい…

14. Shadow DOM

15. 外部のCSS の影響を受けない！

16. こんな感じで書くと…

17. x-my-button タグ内の Shadow DOM には影響しない

18. Angular 1.x から変わること

19. ※現時点(2015.5.18)でのお話です

20. https://angularjs.org/ https://angular.io/
Website & Logo & Name

21. Task Runner

22. Task Runner
？

23. Task Runner

24. Task Runner

25. Task Runner
https://github.com/broccolijs/broccoli

26. パフォーマンス

27. https://github.com/angular/benchpress

28. Deep Tree Benchmark 2015-02-09

29. Controller

30. Directive Definition Object

31. $scope

32. module

33. jqLite

34. R.I.P

35. Syntax
HTML Attribute -> DOM Property

36. Syntax binding
Angular 1.x
Angular 2
HTMLInputElement.prototype.value

37. Syntax event-binding
Angular 1.x
Angular 2
HTMLButtonElement.prototype.click

38. Syntax JavaScript

39. Syntax JavaScript

40. Routing

41. http://angular-ui.github.io/ui-router/site/#/api/
ui.router

42. New Router
https://angular.github.io/router/

45. New Router - Changed
<ng-viewport>
↓
<ng-outlet>

46. TypeScript

47. AtScript = Superset of TypeScript

48. AtScript = Superset of TypeScript
TypeScript「Annotations 対応するよー」
!
AtScript「まじか…」

49. TypeScript 採用！

50. https://github.com/angular/ts-quickstart

51. Angular2 でやりたいこと

52. Server-side Rendering
• Perceived load time
• Actual load time
• Client side performance
• SEO
• Browser support
• Link preview

53. CLI for NPM
• scaffold
• skeleton files
• set up build
• set up testing environment
• possibly even deployment

54. Shadow DOM

55. etc
• Two-way Data Binding
• Improve i18n
• Improve Animation
• Like Virtual DOM
• Migration

56. End of 2015 at the earliest
- but…

57. Thank you !
can_i_do_web