Slide 1

Slide 1 text

SSR with Angular2 @Quramy 2016.03.30 #ng-sake

Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

Agenda • Angular 2ͱServer Side Rendering(SSR) • Angular UniversalͰԿ͕ग़དྷΔͷ͔ • Angular Universal͸ͲͷΑ͏ʹಈ͘ͷ͔ • σϞͬΆ͍ͳʹ͔

Slide 4

Slide 4 text

Why SSR? Angular2 Server Rendering Design DocΑΓ

Slide 5

Slide 5 text

Why SSR? • Ϣʔβʔ଴ͪ࣌ؒͷ୹ॖ • Inital ViewΛαʔόͰग़ྗ → αΫαΫಈ͘!(Α͏ʹݟͤΕΔ) • SEO, Preview Link • SSRͳΒ࣮֬ʹΫϩʔϥʔ͕ίϯςϯπΛೝࣝͰ͖Δ • Browser Support • εΫϦʔϯϦʔμ౳ɺΞΫηγϏϦςΟͷରԠ͕͠΍͍͢

Slide 6

Slide 6 text

What’s Goal of SSR? 1. ϓϥοτϑΥʔϜʹґଘͤͣʹಈ࡞͢Δ͜ͱ 2. SSRͷඳը݁ՌͱSPA͕γʔϜϨεʹ౷߹͢Δ͜ͱ • ʮInital Viewͷ௚ޙʹϢʔβΠϕϯτ͕ൃੜͨ͠Βʁʯˠ Preboot 3. ੑೳ໨ඪΛୡ੒Ͱ͖͍ͯΔ͜ͱ • Angular։ൃνʔϜͷ໨ඪ͸ʮ1secͰinital viewͷඳըΛ ׬ྃͰ͖ΔΑ͏͢Δʯͩͱ͔ɻ

Slide 7

Slide 7 text

How to ?

Slide 8

Slide 8 text

Angular Universal • SSRΛ࣮ݱ͢ΔͨΊͷϞδϡʔϧ܈ • https://github.com/angular/universal • npm: angular-universal-preview • express, hapi, grunt, gulp, webpackͱ࿈ܞ • update΋සൟɻงғؾԡ͓͚͑ͯ͹͓k

Slide 9

Slide 9 text

Rendering Architecture of Angular • AngularJS 1.x • jQuery(jqLite)ʹڧ͘ґଘ • DOMΤϯδϯ͕ແ͍ͱUIΛඳըͰ͖ͳ͍ • Angular 2 • UIͷඳըػߏ(Renderer, DOM)ΛAdapter PatternͰந৅Խ • ద੾ͳAdapter͕͋Ε͹ඇϒϥ΢β؀ڥͰ΋UIͷඳը͕Մೳ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Try it!

Slide 12

Slide 12 text

I want to try right now • angular/universal-starter ͕Φεεϝ • Expressͱϒϥ΢βͷ྆ํͰRendering • masterͷλΠϛϯάʹΑͬͯ͸ಈ͔ͳ͍͜ ͱ΋…orz • quramy/universal-starter ʹfork

Slide 13

Slide 13 text

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);

Slide 14

Slide 14 text

Demonstration 1 SSR with Angular Universal

Slide 15

Slide 15 text

Preboot

Slide 16

Slide 16 text

Preboot͸͍͢͝΍ͭ • SSRʙSPAىಈ·Ͱʹൃੜͨ͠eventΛ playbackͯ͘͠ΕΔ

Slide 17

Slide 17 text

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. ΞϓϦىಈલͷΠϕϯτ͕ॲཧ͞ΕΔ

Slide 18

Slide 18 text

Demonstration 2 Capturing Events by preboot

Slide 19

Slide 19 text

Summary • Angular2ʹ͓͚ΔSSRͷ֓ཁ • Demo: • Angular Universal, express-engine • Playback Events with preboot