This document discusses Angular 2 and Firebase. It notes that Angular 2 is 5x faster than Angular 1. It explains that Angular 2 was chosen over React because it provides a more complete framework out of the box with routing, controllers and services. The document also discusses Angular tools like the CLI, Universal for server-side rendering, Material and Mobile. It shows how Firebase can be used with Angular for realtime data and provides an example todo app. Finally, it mentions using Firebase and Prerender.io together for SEO.

1. Angular2 & firebase
The next generation web app
Caesar Chi

2. Caesar Chi
戚務漢

4. Angular1.x -> Angular2

5. Angular2 is 5x faster than Angular 1
- Misko

8. Why not React ?

10. Because we are in

11. 技術取捨
● React 是一種類 library 方向
● 完整架構需要搭配 Flux 概念套件
● Store / Component / View 該如何配置問題
● 寫法及配置有許多不同用法
● Best practice ???

12. 技術取捨
● 需要讓團隊容易瞭解的架構
● 需要找到最佳方式解決
● 一個從 view / route / controller (類 MVC 概念）解決方案
● 有一定寫法準則讓團隊習慣

13. 無分優劣，需以團隊本質評估

14. https://angular.io/

15. Web Standards
● Web Components
○ HTML Imports
○ <template>
○ Shadow DOM
● ES6+
○ Imports
○ Classes
○ Observables
○ More
● TypeScript (TS)

16. Angular tool
● Angular CLI
● Angular Universal
● Angular Mobile Tool Kit
● Angular Material 2
● Angular 2 Style Guide

17. Angular Cli

18. Angular CLI
● ng new project
● ng generate
● ng serve
● Test, Lint, Format
https://github.com/angular/angular-cli

19. Angular Mobile
One developer, many platforms
Angular Mobile Tool Kit

20. Angular Material 2
Live demo

21. Angular Universal

22. Angular Universal - rendering flow
Client & Server side render

23. Angular Universal - rendering flow
Client & Server side render

24. ● Controller
● Service
● Route
● Data
● ...
Client rendering
Angular Universal - rendering flow

25. ● Controller
● Service
● Route
● Data
● ...
Server rendering
Angular Universal - rendering flow

26. ● Controller
● Service
● Data
● ...
Server / Client rendering
● Route
DOM / VIEW
Angular Universal - rendering flow

27. Angular Universal
● Performance issue
● Angular.js support backend render
● SEO problem
● Preview issue

28. Angular Universal
● Performance issue
● Angular.js support backend render
● SEO problem
● Preview issue

29. Angular Firebase 2

30. What is Firebase

31. https://www.firebase.com/

33. Firebase
● No backend server
● Auto scale
● PaaS (platform as a service)
● Real time data flow
● JavaScript and Other language support

34. ● Controller
● Service
● Route
● Data
● ...
Client rendering

35. ● Controller
● Service
● Route
● Data
● ...
Client rendering

36. https://angularfire2.com

38. Example
https://github.com/r-park/todo-angular2-firebase
https://ng2-todo-app.firebaseapp.com

39. Firebase + Prerender.io
SEO

41. Firebase + Prerender.io
SEO Solution

42. 結論
● Angular.js2 目前還持續發展中
● Angular.js2 嘗試於解決『全面性問題』
● Universal App 是一個目標，但不會是『唯一解』
● Angular.js2 vs React 這根本無法比較，面向的問題點不同
● Firebase 這類的服務可以幫助開發者降低門檻
● Firebase Data watch 模式對於 http2 會有很大的幫助
● Firebase SEO 問題正在持續嘗試解決中

43. Ref
● https://angular.io/
● https://www.youtube.com/watch?v=0wvZ7gakqV4
● https://universal.angular.io/
● https://github.com/angular/universal-starter
● https://github.com/alexpods/angular2-universal-starter
● https://github.com/AngularClass/angular2-webpack-starter
● https://github.com/ShMcK/ng2Challenges