introduce angular2 & render & firebase flow

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

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

https://angularfire2.com

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