This document provides an overview of Angular 2.0 including motivations for its development, key features and performance improvements. Some of the main points covered include: - Angular 2.0 is being built for future browsers and aims to be 5-10x faster than Angular 1.x through optimizations like unidirectional data flow. - It focuses on improved productivity with simpler concepts and syntax using TypeScript. - It supports new standards like ECMAScript 6 and is cross-platform for web, mobile and native apps. - Preparing for Angular 2.0 involves learning TypeScript and tools like Visual Studio Code. - Components are a fundamental building block with directives, templates and data

1. Bibby Chung

2. Me
• Study4Love 2013/2015 Speaker
• twMVC Cofounder & Speaker
• Techdays Taiwan 2014 MVP Geek Speaker
• Mobile & Devices Developer
• Microsoft MVP (since 2009)

3. Agenda
• Motivation
• Preparation For Angular 2.0
• Component
• Getting Started
• Resources

4. Angular 2.0
AngularJS 1.X is built for current browsers while AngularJS 2.0 is being
built for the browsers of the future.
-- Igor Minar

5. Motivation
• Performance
• Productivity
• Standards
• Cross Platform

6. Performance
https://instapage.com/blog/google-accelerated-mobile-pages

7. Performance
https://instapage.com/blog/google-accelerated-mobile-pages

8. Performance

9. Performance
• Angular 2 in alpha was already 5x faster than Angular 1.
• Angular 2 in beta claims to be anywhere from 5-10 times faster.

10. Performance
Online Tests
http://rafaelaudy.github.io/angular-1-and-2-state/

11. Performance

12. Performance
• Server Side
• SEO
• Plugin
Server
Client

13. Performance
• Server Side
• SEO
• Plugin

14. Performance
• Server Side
• SEO
• Plugin

15. Performance
• Angular 1.x
• Compile -> Render -> Compile -> Render
• Angular 2.0
• Compile -> Render -> Render -> Render
• Precompile -> Render -> Render -> Render

16. Performance
• Angular 1.x
• Compile -> Render -> Compile -> Render
• Angular 2.0
• Compile -> Render -> Render -> Render
• Precompile -> Render -> Render -> Render

17. Performance
• Unidirectional Flow
• Immutable Object
• Object.Observe()

18. Performance
• Unidirectional Flow
• Immutable Object
• Object.Observe()

19. Performance
• Unidirectional Flow
• Immutable Object
• Object.Observe()
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

20. Performance
• View Caching
• Memory Efficient

21. Productivity

22. Productivity - Concepts
Angular 1.x has many concepts. Concepts have a learning curve

23. Productivity - Concepts
Make your intention clear using natural, easy-to-write syntax. Reduce complexity for your team: new,
structure-rich templates are readable and easy to understand at a glance.

24. Productivity - Overview

25. Productivity - Syntax

26. Productivity - Syntax

27. Standards
• ECMAScript 6 / ECMAScript 7
• Module
• Class
• Arrow Function
• Decorator
• HTML 5
• Web Component
• Shadow DOM
• Template

28. Cross Platform
• Web
• Browser (LEGACY BROWSER SUPPORT In addition to fully supporting latest
versions of Chrome, Edge, Firefox, IE, and Safari, Angular 2 is also tested for
older browsers including IE9+ and Android 4.1+.)
• Devices
• Hybrid (Ionic)
• Native (NativeScript)​​​​

29. Are you interested in
angular 2.0 ?

30. When is the first final release
of angular 2.0

31. Preparation For Angular 2.0

32. Preparation For Angular 2.0 - TypeScript
TypeScript
=
Types + Javascript

33. Preparation For Angular 2.0 - TypeScript
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

34. Preparation For Angular 2.0 - TypeScript
• Better overall code readability in large codebases
• Ease of refactoring
• Use new ESMAScript 6/7 features in old browsers.
• IntelliSense auto suggest in code editors
• Compile TypeScript to JavaScripts (show errors)

35. Preparation For Angular 2.0 - TypeScript
• Better overall code readability in large codebases
• Ease of refactoring
• Use new ESMAScript 6/7 features in old browsers.
• IntelliSense auto suggest in code editors
• Compile TypeScript to JavaScripts (show errors)

36. Preparation For Angular 2.0 - TypeScript
• Better overall code readability in large codebases
• Ease of refactoring
• Use new ESMAScript 6/7 features in old browsers.
• IntelliSense auto suggest in code editors
• Compile TypeScript to JavaScripts (show errors)

37. Preparation For Angular 2.0 - TypeScript
• Better overall code readability in large codebases
• Ease of refactoring
• Use new ESMAScript 6/7 features in old browsers.
• IntelliSense auto suggest in code editors
• Compile TypeScript to JavaScripts (show errors)

38. Preparation For Angular 2.0 - TypeScript
• Better overall code readability in large codebases
• Ease of refactoring
• Use new ESMAScript 6/7 features in old browsers.
• IntelliSense auto suggest in code editors
• Compile TypeScript to JavaScripts (show errors)

39. Preparation For Angular 2.0 - TypeScript
Hello, Bibby

40. Preparation For Angular 2.0 - TypeScript
Class

41. Preparation For Angular 2.0 - TypeScript
Interface

42. Preparation For Angular 2.0 - TypeScript
Module

43. Preparation For Angular 2.0 - Tools
• Adobe Brackets
• GitHub Atom
• Sublime Text
• JetBrains Editors
Visual Studio Code

44. How to install and use those?
• TypeScript
http://www.typescriptlang.org
• Visual Studio Code
https://code.visualstudio.com

45. Is it ready for your
coding environment?

46. Component
Component Directive View (Template)

47. Component - Directive
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

48. Component - View
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

49. Component - View
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

50. Component
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

51. Component
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

52. Component
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

53. Component
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

54. Component
http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

55. Component
http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2
• Component Definition
• Inputs / Outputs
• Lifecycle Hooks
• Data Flow

56. Let’s start...

57. Getting Started
Demo - Hello World

58. Getting Started
Demo - Component with Service

59. Getting Started
Demo - Directive

60. Resources
• References
• https://angular.io/
• https://angular.io/docs/ts/latest/guide/cheatsheet.html
• https://angular.io/docs/ts/latest/api/
• Videos
• https://goo.gl/5s2zkF

61. Contact Me
• http://fb.me/bibbynet (Facebook)
• https://tw.linkedin.com/in/bibbychung (Linkedin)
• http://bibby.be (Blog)
• https://github.com/BibbyChung (GitHub)

62. Workshop
Example - Hello World

63. Workshop
Example - TodoList