HTML5とか勉強会#56

1. Angular 1 & 2
2015.4.28 HTML5とか勉強会

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
!
• AngularJS 1.x
• Angular 2
• vs React

7. AngularJS 1.x

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

9. Syntax - View

10. Syntax - Controller

11. Syntax - Result

12. Difference between others
!
• Fullstack
• HTML enhanced

13. Feature - HTML enhanced
!
Template を *.html ファイルに書ける！

14. // HTML は xxx.html ファイルに。
in Angular

15. よそのフレームワーク
// .js ファイルに書きたくない

16. Feature - HTML enhanced
!
Template を *.html ファイルに書ける！
HTML の構文で Template が書ける！

17. Feature - HTML enhanced

18. Feature - HTML enhanced
!
Template を *.html ファイルに書ける！
HTML の構文で Template が書ける！
Custom Directive ≒ Web Components

19. Feature - HTML enhanced

20. Angular loves Web Standards

21. Custom Element は x-foo
Custom Attribute は data-bar

22. どっちでもOK!

23. v 1.4.0-rc.1
• new Router ( 新機能 )
• i18n ( 改善 )
• $http ( 改善 )
• Forms ( 改善 )
• Cookies ( 改善 )
• Pluralization and Gender ( 改善 / 追加 )

24. Angular2

25. ※現時点(2015.4.28)でのお話です

26. Keywords
• Components based
• ES6
• TypeScript
• Object.observe ( ES7 )
• Shadow DOM
• Virtual DOM

27. 変わること

29. ( Two-way ) Data Binding
双方向データバインディングはしない
(再考中)

30. R.I.P - Controllers, $scope and
angular.module

31. R.I.P - DDO(Directive Definition
Object)

32. お疲れさまでした！

33. Syntax
HTML Attribute -> DOM Property

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

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

36. Syntax JavaScript
<sample-app> Tag

37. https://angularjs.org

38. https://angular.io/

39. vs React

40. JSX キモい

41. File Size 大きい割に…

42. この辺どうしてる？
• ( Two-way ) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security

43. Thank you !
can_i_do_web