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.

Introduce Angular2 & render & firebase flow

1,147 views

Published on

介紹 Angualr.js 2 以及完整生態系,包含工作模式及 Angular2 如何與 firebase 協作的概念談。

introduce Angular2 and what is concept of Angular2, how it works for Angular Universal. Firebase how to help developer improvement.

Published in: Technology

Introduce Angular2 & render & firebase flow

  1. 1. Angular2 & firebase The next generation web app Caesar Chi
  2. 2. Caesar Chi 戚務漢
  3. 3. Angular1.x -> Angular2
  4. 4. Angular2 is 5x faster than Angular 1 - Misko
  5. 5. Why not React ?
  6. 6. Because we are in
  7. 7. 技術取捨 ● React 是一種類 library 方向 ● 完整架構需要搭配 Flux 概念套件 ● Store / Component / View 該如何配置問題 ● 寫法及配置有許多不同用法 ● Best practice ???
  8. 8. 技術取捨 ● 需要讓團隊容易瞭解的架構 ● 需要找到最佳方式解決 ● 一個從 view / route / controller (類 MVC 概念)解決方案 ● 有一定寫法準則讓團隊習慣
  9. 9. 無分優劣,需以團隊本質評估
  10. 10. https://angular.io/
  11. 11. Web Standards ● Web Components ○ HTML Imports ○ <template> ○ Shadow DOM ● ES6+ ○ Imports ○ Classes ○ Observables ○ More ● TypeScript (TS)
  12. 12. Angular tool ● Angular CLI ● Angular Universal ● Angular Mobile Tool Kit ● Angular Material 2 ● Angular 2 Style Guide
  13. 13. Angular Cli
  14. 14. Angular CLI ● ng new project ● ng generate ● ng serve ● Test, Lint, Format https://github.com/angular/angular-cli
  15. 15. Angular Mobile One developer, many platforms Angular Mobile Tool Kit
  16. 16. Angular Material 2 Live demo
  17. 17. Angular Universal
  18. 18. Angular Universal - rendering flow Client & Server side render
  19. 19. Angular Universal - rendering flow Client & Server side render
  20. 20. ● Controller ● Service ● Route ● Data ● ... Client rendering Angular Universal - rendering flow
  21. 21. ● Controller ● Service ● Route ● Data ● ... Server rendering Angular Universal - rendering flow
  22. 22. ● Controller ● Service ● Data ● ... Server / Client rendering ● Route DOM / VIEW Angular Universal - rendering flow
  23. 23. Angular Universal ● Performance issue ● Angular.js support backend render ● SEO problem ● Preview issue
  24. 24. Angular Universal ● Performance issue ● Angular.js support backend render ● SEO problem ● Preview issue
  25. 25. Angular Firebase 2
  26. 26. What is Firebase
  27. 27. https://www.firebase.com/
  28. 28. Firebase ● No backend server ● Auto scale ● PaaS (platform as a service) ● Real time data flow ● JavaScript and Other language support
  29. 29. ● Controller ● Service ● Route ● Data ● ... Client rendering
  30. 30. ● Controller ● Service ● Route ● Data ● ... Client rendering
  31. 31. https://angularfire2.com
  32. 32. Example https://github.com/r-park/todo-angular2-firebase https://ng2-todo-app.firebaseapp.com
  33. 33. Firebase + Prerender.io SEO
  34. 34. Firebase + Prerender.io SEO Solution
  35. 35. 結論 ● Angular.js2 目前還持續發展中 ● Angular.js2 嘗試於解決『全面性問題』 ● Universal App 是一個目標,但不會是『唯一解』 ● Angular.js2 vs React 這根本無法比較,面向的問題點不同 ● Firebase 這類的服務可以幫助開發者降低門檻 ● Firebase Data watch 模式對於 http2 會有很大的幫助 ● Firebase SEO 問題正在持續嘗試解決中
  36. 36. 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

×