SSR with Angular2

ng-sake用

Transcript

1. SSR with Angular2 @Quramy 2016.03.30 #ng-sake
2. About me • Yosuke KURAMI (@Quramy) • Frontend Web Developer at WACUL INC. • ೔ʑͷ࢓ࣄ͸AngularJS(1.x)ͰSPA։ൃ • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢ • http://vimawesome.com/plugin/tsuquyomi 

3. Agenda • Angular 2ͱServer Side Rendering(SSR) • Angular UniversalͰԿ͕ग़དྷΔͷ͔ • Angular Universal͸ͲͷΑ͏ʹಈ͘ͷ͔ • σϞͬΆ͍ͳʹ͔
4. Why SSR? Angular2 Server Rendering Design DocΑΓ
5. Why SSR? • Ϣʔβʔ଴ͪ࣌ؒͷ୹ॖ • Inital ViewΛαʔόͰग़ྗ → αΫαΫಈ͘!(Α͏ʹݟͤΕΔ) • SEO, Preview Link • SSRͳΒ࣮֬ʹΫϩʔϥʔ͕ίϯςϯπΛೝࣝͰ͖Δ • Browser Support • εΫϦʔϯϦʔμ౳ɺΞΫηγϏϦςΟͷରԠ͕͠΍͍͢
6. What’s Goal of SSR? 1. ϓϥοτϑΥʔϜʹґଘͤͣʹಈ࡞͢Δ͜ͱ 2. SSRͷඳը݁ՌͱSPA͕γʔϜϨεʹ౷߹͢Δ͜ͱ • ʮInital Viewͷ௚ޙʹϢʔβΠϕϯτ͕ൃੜͨ͠Βʁʯˠ Preboot 3. ੑೳ໨ඪΛୡ੒Ͱ͖͍ͯΔ͜ͱ • Angular։ൃνʔϜͷ໨ඪ͸ʮ1secͰinital viewͷඳըΛ ׬ྃͰ͖ΔΑ͏͢Δʯͩͱ͔ɻ
7. How to ?
8. Angular Universal • SSRΛ࣮ݱ͢ΔͨΊͷϞδϡʔϧ܈ • https://github.com/angular/universal • npm: angular-universal-preview • express, hapi, grunt, gulp, webpackͱ࿈ܞ • update΋සൟɻงғؾԡ͓͚͑ͯ͹͓k
9. Rendering Architecture of Angular • AngularJS 1.x • jQuery(jqLite)ʹڧ͘ґଘ • DOMΤϯδϯ͕ແ͍ͱUIΛඳըͰ͖ͳ͍ • Angular 2 • UIͷඳըػߏ(Renderer, DOM)ΛAdapter PatternͰந৅Խ • ద੾ͳAdapter͕͋Ε͹ඇϒϥ΢β؀ڥͰ΋UIͷඳը͕Մೳ
10. Renderer Stack in Angular2 Application (Components, Directives, etc…) Parse5DomAdapter DomRenderer Renderer (createElement, lisetenEvent, etc…) BrowserDomAdapter document parse5 Web Browser Node.js NodeDomRenderer DomAdapter (abstract DOM API, not managed by DI) extend implement use use implement implement use use Platform Layer Abstract UI Layer Runtime Layer
11. Try it!
12. I want to try right now • angular/universal-starter ͕Φεεϝ • Expressͱϒϥ΢βͷ྆ํͰRendering • masterͷλΠϛϯάʹΑͬͯ͸ಈ͔ͳ͍͜ ͱ΋…orz • quramy/universal-starter ʹfork
13. SSR with Express renderͰBootstrapίʔυΛ౉͚ͩ͢ɻ͔ΜͨΜʂ let app = express(); app.engine('.html', expressEngine).set('views', __dirname).set('view engine', 'html'); function ngApp(req, res) { let baseUrl = '/'; let url = req.originalUrl || '/'; res.render('index', { directives: [ App, HtmlHead, ServerOnlyApp], providers: [ provide(APP_BASE_HREF, {useValue: baseUrl}), provide(REQUEST_URL, {useValue: url}), ROUTER_PROVIDERS, NODE_LOCATION_PROVIDERS, ] }); } app.use('/', ngApp); app.use('/about', ngApp); app.use('/home', ngApp);
14. Demonstration 1 SSR with Angular Universal
15. Preboot
16. Preboot͸͍͢͝΍ͭ • SSRʙSPAىಈ·Ͱʹൃੜͨ͠eventΛ playbackͯ͘͠ΕΔ
17. Seamless State Transfer with Preboot 1. Web Server ʹHTTPΞΫηε 2. Server SideͰॳظϖʔδͷHTMLΛੜ੒ͯ͠ฦ٫ 3. ϒϥ΢βͰॳظϖʔδΛඳը(͜ͷ࣌఺Ͱ͸୞ͷ੩తHTML) 4. νΣοΫϘοΫεૢ࡞౳ͷϢʔβΠϕϯτͷิ଍։࢝(preboot) 5. ClientΞϓϦέʔγϣϯͷىಈ(bootstrap) 6. 4.~5.ͷؒʹัଊͨ͠ϢʔβΠϕϯτΛplayback 7. ΞϓϦىಈલͷΠϕϯτ͕ॲཧ͞ΕΔ
18. Demonstration 2 Capturing Events by preboot
19. Summary • Angular2ʹ͓͚ΔSSRͷ֓ཁ • Demo: • Angular Universal, express-engine • Playback Events with preboot