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