日経電子版のマイクロフロントエンドとPWA / devsum2019

by Sho Miyamoto

Slide 1

Slide 1 text

೔ຊܦࡁ৽ฉࣾ ٶຊ ক (@shqld) 1 ೔ܦిࢠ൛ͷ ϚΠΫϩϑϩϯτΤϯυͱ PWA

Slide 2

Slide 2 text

!2 - ໊લ - ٶຊ ক (Sho Miyamoto) - @shqld (Twitter, GitHub) - ࢓ࣄ - ೔ຊܦࡁ৽ฉࣾͷ૯߹৬ - r.nikkei.comͷϑϩϯτΤϯυɺ  όοΫΤϯυɺCDNपΓ - ܦྺ - 2017/9: ֶ෦ଔۀ - 2018/4: ೔ܦ ৽ଔೖࣾ - JavaScriptͱͯ΋޷͖ ͩΕʁ

Slide 3

Slide 3 text

!3 - 2010೥3݄૑ץ - ຖ೔໿900ຊͷهࣄΛ഑৴ - ݄ؒ3ԯΞΫηεҎ্ - ੈք࠷େͷܦࡁϝσΟΞ - ࠶དྷि͸ʮถேट೴ձஊϥΠϒʯʂ ೔ܦిࢠ൛

Slide 4

Slide 4 text

!4 Server (BFF) Client Node.js (w/ Express) VanillaJS  (Babel7) Sass handlebars  (& JSX) ిࢠ൛ͷٕज़ελοΫ Script Webpack4 Style Markup SSR CDN Fastly

Slide 5

Slide 5 text

ϚΠΫϩϑϩϯτΤϯυઃܭ 5

Slide 6

Slide 6 text

6 ϚΠΫϩϑϩϯτΤϯυͱ͸ https://micro-frontends.org

Slide 7

Slide 7 text

7 ϚΠΫϩϑϩϯτΤϯυͱ͸ Monolithic Frontends Organisation  in Verticals https://micro-frontends.org

Slide 8

Slide 8 text

8 - ϚΠΫϩαʔϏε on ϑϩϯτΤϯυ - લఏɿʢϞμϯʣ΢ΣϒΞϓϦ - Ұͭͷը໘Λෳ਺ͷαʔϏε  ʢಠཱͨ͠νʔϜʹΑΔػೳͷू߹ମʣʹ෼ׂ - SSR࣌ʹ݁߹ - ٕज़తཁૉ - SPA(s) - Web Components - SSI (ESI) ϚΠΫϩϑϩϯτΤϯυͱ͸

Slide 9

Slide 9 text

ిࢠ൛͸ ʢϞμϯʣ΢ΣϒΞϓϦʁ !9

Slide 10

Slide 10 text

!10 https://2018.ar.al/notes/the-documents-to-applications-continuum

Slide 11

Slide 11 text

!11 https://2018.ar.al/notes/the-documents-to-applications-continuum ೔ܦిࢠ൛

Slide 12

Slide 12 text

12 - શମతʹ͸ - WebDocuments & Content-Centric - MPA - ੩త - ϖʔδ୯ҐͰੑ࣭͕େ͖͘ҟͳΔ - τοϓɺهࣄ - ݕࡧɺMyχϡʔε - ΞϓϦέʔγϣϯدΓ - ಈత ೔ܦిࢠ൛ͷίϯςϯπ

Slide 13

Slide 13 text

೔ܦిࢠ൛ͷϚΠΫϩઃܭ !13

Slide 14

Slide 14 text

!14 - ʮҰͭͷը໘ʯ୯ҐͰ͸ͳ͘  ʮϖʔδ͝ͱʹʯϚΠΫϩαʔϏεʹ෼ׂ - CDN(Fastly)Ͱ֤αʔϏεΛ݁߹ ೔ܦిࢠ൛ͷϚΠΫϩઃܭ https://speakerdeck.com/ryysd/microservices-on-fastly

Slide 15

Slide 15 text

!15 - ϖʔδ ≒ αʔϏε - ϦϙδτϦ - σϓϩΠϑϩʔ - ٕज़બ୒ - ։ൃऀ - ֤αʔϏεؒ͸ૄ݁߹ - ଞαʔϏεͰඞཁͳ΋ͷ͸APIԽͯ͠CDNܦ༝ͰऔΓʹߦ͘ - αʔϏεؒͰڞ௨͢Δίʔυ - ϓϥΠϕʔτͳnpmύοέʔδʹ - ֤ύοέʔδ͸ͨͩͷػೳ܈ - ࢖͏ଆ͕దٓ औࣺબ୒ ೔ܦిࢠ൛ͷϚΠΫϩઃܭ

Slide 16

Slide 16 text

!16 Server (BFF) Client ڞ௨ϥΠϒϥϦ APIGW Fastly هࣄ τοϓ ݕࡧ

Slide 17

Slide 17 text

ϚΠΫϩϑϩϯτΤϯυ  ͷԸܙ 17

Slide 18

Slide 18 text

େ͖ͳมߋΛগͣͭ͠ !18

Slide 19

Slide 19 text

TypeScriptΛಋೖͨ͠ !19

Slide 20

Slide 20 text

!20 - JSͷͭΒ͞ - ʢαʔόʔαΠυʣϛυϧ΢ΣΞ΍ϧʔτ͝ͱͷॲཧɺҾճ ͢σʔλͷܗ - ʢϏϡʔʣίϯϙʔωϯτͷΠϯλʔϑΣʔε - ੩తܕݕ͕ࠪཉ͍͠ - Flow vs Typescript - Flow͸ܕਪ࿦ڧ͍ - ϓϩδΣΫτͷઃఆ͕ॊೈ͡Όͳ͍ - ϓϩδΣΫτΛ·͍ͨͰܕఆٛΛڞ༗͠ʹ͍͘ - ઴ਐతͳTypeScriptԽ - ·ͣ͸ίʔυͷগͳ͍̍αʔϏε͔Β TypeScriptಋೖ

Slide 21

Slide 21 text

!21 - TypeScript with Babel - tsc͸͋͘·ͰܕͷνΣοΫ͚ͩ - τϥϯεύΠϧ͸ࠓ·Ͱ௨ΓBabel7Ͱ - @babel/preset-typescript - TS͔ΒTSཁૉΛফ͚ͩ͢ - ECMAScriptඪ४͔Β֎Εͳ͍ʢಠ֦ࣗு͸αϙʔτ͞Ε͍ͯ ͳ͍ e.g. Enumʣ - JavaScriptͱͷڞଘ - JS͸BabelΛ௨ͯ͠΋Կ΋ى͖ͳ͍ - ιʔεϚοϓͷੜ੒͚ͩͰܕఆ͕ٛڞ༗Ͱ͖Δ TypeScript with Babel

Slide 22

Slide 22 text

!22 - `NoImplicitAny` ͸େม - ґଘϞδϡʔϧ΍ؔ਺ͷҾ਺  શͯʹܕΛ͚ͭΔඞཁ͕͋Δ - ίʔυͷن໛ʹΑͬͯ͸Ϟνϕʔγϣϯ͕ଓ͔ͳ͍ - ࠷ॳͷҰา͕Ұ൪େ͖͍นʹͳͬͯ͠·͏ - ޙ͔ΒͰ΋ྑ͍ ؤுΓ͗͢ͳ͍ܕ෇͚

Slide 23

Slide 23 text

JSXΛಋೖͨ͠ !23

Slide 24

Slide 24 text

!24 - ≠ Reactಋೖ - طଘͷςϯϓϨʔτΤϯδϯhandlebars͕ͭΒ͍ - ͋͘·ͰͨͩͷจࣈྻςϯϓϨʔτ - HTML༻͡Όͳ͍ - ϦϯτͰ͖ͳ͍ - (͜͜ʹ͸ऩ·Γ͖Βͳ͍) - handlebars͔ΒJSX with Reactʹஔ͖׵͑ͨ - ϏϡʔͷϚʔΫΞοϓΛJSXͰॻ͘ - expressͷrenderॲཧͰSSR(react-render-to-string) JSXಋೖ

Slide 25

Slide 25 text

!25 - Ұ౓Ͱશஔ͖׵͑͸ແཧ - htmlʹԊͬͨύʔε͕Ͱ͖ͳ͍ͷͰػցతͳஔ׵΋ݫ͍͠ - ϑΝΠϧ਺͕ଟ͘ɺґଘؔ܎΋ෳࡶ - ΞμϓλʔΛڬΜͩ - JSX͔ΒHBSɺHBS͔ΒJSXΛ૬ޓʹݺ΂ΔΑ͏ʹͨ͠ - https://github.com/shqld/handlebars-jsx-adapter Handlebars -> JSX

Slide 26

Slide 26 text

!26 - JSX(TSX)ͷྑ͞ - ิ׬ɺϑΥʔϚςΟϯά͕ޮ͘ - ঢ়ଶͷड͚౉͕͠໌֬ - ܕͰറΕΔ - ΫϥΠΞϯταΠυͰReactΛ࢖Θͳͯ͘΋े෼Ըܙ͕͋Δ - ͋ΔαʔϏεͰReactΛ࢖͍ͨ͘ͳͬͨΒطଘͷϏϡʔʹΫϥ ΠΞϯτॲཧΛॻ͖଍͚ͩ͢ - lit-htmlͱ͔htm΋΋ͬͱ੒ख़࢝͠ΊͨΒݕ౼͍ͨ͠ ςϯϓϨʔτΤϯδϯͱͯ͠ͷJSX

Slide 27

Slide 27 text

!27 https://medium.com/dev-channel/a-netﬂix-web-performance-case-study-c0bcde26a9d9

Slide 28

Slide 28 text

E2Eςετ on Codebuild !28

Slide 29

Slide 29 text

!29 - E2E͸ӡ༻తʹ΋Ϧιʔεతʹ΋େม - ಛʹΫϩεϒϥ΢βʔ(incl. IE11) - ීஈ࢖͍ͷCircleCIͰ΍Δͱڞ༗ͷΩϡʔΛ٧·Βͤͯ͠·͏ - ͦ͏ͩɺCodeBuildͰ΍Ζ͏ʂ☺ - CircleCIͰϏϧυɺηΧϯμϦίϯςφʹσϓϩΠ - CodeBuildΛτϦΨʔ͢Δ - CodeBuild্ͰσϓϩΠ͞ΕͨηΧϯμϦͷURLʹରͯ͠E2Eς ετ - ੒ޭͨ͠Βεϫοϓ(Codebuild) E2Eςετ on CodeBuild

Slide 30

Slide 30 text

!30 CodeBuild Github CircleCI build push deploy Secondary Primary swap E2E test test

Slide 31

Slide 31 text

PWA 31

Slide 32

Slide 32 text

!32 - ࠓߋײͷ͋Δ࿩Ͱ͕͢… - PWȀຊப - ৴པ(࣮֬)ੑ - ଎͞ - ΞϓϦͱͯ͠ͷັྗ PWA • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. • Engaging - Feel like a natural app on the device, with an immersive user experience. https://developers.google.com/web/progressive-web-apps/

Slide 33

Slide 33 text

Fast & EngagingΛ೦಄ʹ  ৭ʑ΍ͬͨ !33

Slide 34

Slide 34 text

!34 AppShell - https://developers.google.com/web/fundamentals/architecture/app-shell

Slide 35

Slide 35 text

!35 - https://developers.google.com/web/fundamentals/architecture/ app-shell - FirstPaint͕ߴ଎ʹͳΔ - ΦϑϥΠϯ࣌Ͱ΋࠷௿ݶͷΞϓϦײ͕ग़Δ - MPAͰ΋SPAͷΑ͏ͳUX - ͍·೔ܦిࢠ൛Ͱ͸࣮ݧத AppShell

Slide 36

Slide 36 text

!36 - Πϝʔδɿίϯςϯπ෦෼ͷશLazyload - ྲྀΕɿ - SWͰφϏήʔγϣϯϦΫΤετΛδϟοΫͯ͠AppShellΛฦ ͢ - AppShellͷεΫϦϓτλάͰwindow.locationΛfetch - DOMΛॻ͖׵͑Δ - ग़͠෼͚ - CacheϛεɿAppShellΛฦ͢ - Cacheώοτɿͦͷ··ΩϟογϡΛϨϯμϦϯάͨ͠ํ͕ ଎͍ AppShellͷ࣮૷

Slide 37

Slide 37 text

!37

Slide 38

Slide 38 text

!38 - GoogleChromeLabs/quicklink - ը໘಺ʹೖͬͨaλάཁૉΛࣗಈͰϓϦ Ωϟογϡͯ͘͠ΕΔ͓खܰϥΠϒϥϦ - ॎʹΞΠςϜΛฒ΂ΔΑ͏ͳίϯςϯπʹ ͸޲͍͍ͯΔ

Slide 39

Slide 39 text

!39 - IntersectionObserverͰviewportʹೖͬͨaλάΛ؂ࢹ - ༏ઌ౓ผͷઓུ - ߴ: fetch - ௿: ResourceHints௥Ճ (`

Slide 40

Slide 40 text

!40 - hrefΛSWʹpostMessageͰ౉ͯ͠ϓϦΩϟογϡ - ϝϦοτ - UIεϨου͸observeͯ͠postMessage͢Δ͚ͩ - ϦΫΤετ͕ൃੜ͠ͳ͍෼ɺෛՙ͕গͳ͍ - طଘͷSWͷΩϟογϡઓུΛ׆͔ͤΔ - ҰݩతʹΩϟογϡΛѻ͑Δ - ༏ઌ౓Λؾʹ͠ͳͯ͘ྑ͍ with SW

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Critical CSS !42

Slide 43

Slide 43 text

!43 Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS Continue Building DOM Render Page GET html Response Response Response GET css GET js CSSϒϩοΩϯά JSϒϩοΩϯά

Slide 44

Slide 44 text

!44 Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ ɾ ɾ ɾ ←ͷදࣔʹඞཁͳ࠷௿ݶͷCSSΛ HTMLʹຒΊࠐΉ ←ͷCSS͸ը໘දࣔޙʹಡΈࠐΉ

Slide 45

Slide 45 text

!45 Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ • CSSऔಘʹඞཁͳϦΫΤετ਺ΛݮΒͤΔ • CSSOMߏஙɾϨΠΞ΢τͷ࣌ؒΛ࡟ݮͰ͖Δ

Slide 46

Slide 46 text

!46 - ίϯςϯπ΍ձһଐੑʹΑͬͯඞཁͳCSS ͷ͹Β͖͕ͭେ͖͍ - e.g. ࣸਅɺϏσΦɺදɺPaywall - ಈతʹग़͠෼͚ΒΕͳ͍ - ʮίϯςϯπʹΑͬͯ͸ݟͨ໨͕େ͖͘ ่Εͯ͠·͏ʯ͸ڐ༰Ͱ͖ͳ͍ - ͍·͸ࣗಈੜ੒Ͱ͸ͳ͘ਓखͰ؅ཧ ೔ܦిࢠ൛ͷCCSSࣄ৘

Slide 47

Slide 47 text

!47 - HTMLαΠζͷ50%લޙ͕CCSS - ʢαʔϏε͝ͱʹʣશϖʔδʹಉ͡CCSS͕ΠϯϥΠϯͰຒΊ ࠐ·Ε͍ͯΔ - CDNͷసૹྔͷແବ - ΫϥΠΞϯτΩϟογϡͷ༰ྔΛṧഭ - ௨৴ͷύϑΥʔϚϯεͷ௿Լ - ΠϯϥΠϯͳͷͰ੾Γ཭ͤͳ͍ - e.g. هࣄϖʔδ - CSS: 544k - CCSS: 489k CCSS͕ॏ͍

Slide 48

Slide 48 text

Dynamic Critical CSS Optimization !48

Slide 49

Slide 49 text

!49 - ֤ϖʔδ͝ͱʹ࠷దͳCCSSΛಈతʹϏϧυ͢Δ - ΦϦδϯ͔Β഑৴͢ΔHTMLʹ͸CCSSΛؚΊͳ͍ - ίϯςϯπ΁ͷϦΫΤετ͕͋Δ౓ʹɺVarnishͷESIΛ༻͍ͯ Vary͝ͱͷίϯςϯπʹ࠷దԽ͞ΕͨCSSΛੜ੒͠ɺS3ʹΞο ϓϩʔυ - ࠷దCCSSϏϧυ͕ऴΘͬͨΒΩϟογϡΛύʔδ - Edge-side Includes CCSS - ESIͰσϑΥϧτ(or ࠷దԽࡁ)CCSSͷಡΈࠐΈ - htmlͱ݁߹ - e.g. هࣄϖʔδ - CCSS: 489k - Optimized critical: 69k Dynamic Critical CSS Optimization

Slide 50

Slide 50 text

!50 CSS Default CCSS / Dynamic CCSS HTML  w/ ESI tag CSS Complete HTML /article/123 Edge-side Includes Critical CSS (Origin Server) (CSS Server) build ESI request Fetch  contents Fetch  CCSS Purge cache

Slide 51

Slide 51 text

!51 - ݱঢ়͸EBͰ৭ʑ΍ͬͯΔ - ੍໿͕ͳ͍ & σόοά͠΍͍͢ - Ϗϧυ͕٧·ͬͯαʔό͕མͪΔՄೳੑ͕͋Δ - CCSSͷ࠷దԽ෦෼͸αʔόϨεʹ͍ͨ͠ - ϦΫΤετϋϯυϦϯά: on CDN - Ϗϧυ: Lambda (w/ @serverless/chrome) Future Works

Slide 52

Slide 52 text

!52 CSS Default CCSS / Dynamic CCSS HTML  w/ ESI tag Complete HTML /article/123 Serverless (Origin Server) Fetch  contents Fetch CCSS  as ESI request Purge Trigger build

Slide 53

Slide 53 text

ϚΠΫϩϑϩϯτΤϯυͱ PWA !53

Slide 54

Slide 54 text

ϞϊϦεԽ͢ΔServiceWorker !54

Slide 55

Slide 55 text

- ServiceWorker͸ϞϊϦεʹͳΓ͕ͪ - ϚΠΫϩϑϩϯτΤϯυͳ؀ڥͳΒSW΋ϚΠΫϩαʔϏε ୯ҐͰ͋ͬͯ΄͍͠ - جຊతʹ͸มߋ͕શମʹ೾ٴͯ͠͠·͏ͷͰɺ༧ظͤ͵ෆ۩ ߹͕ͰΔՄೳੑ - είʔϓͰӨڹൣғΛݶఆͰ͖Δͷ͸҆৺ !55 ͏Θͬ…ࢲͷSWɺϞϊϦγοΫ͗͢…?

Slide 56

Slide 56 text

ϚΠΫϩ ServiceWorkers !56

Slide 57

Slide 57 text

!57 Server (BFF) Client Service  Worker هࣄ ݕࡧ τοϓ ڞ௨ϥΠϒϥϦ APIGW

Slide 58

Slide 58 text

!58 - είʔϓ͕۠੾ΒΕ͍ͯΔͷͰɺͦͷαʔϏεͷ͜ͱ͚ͩΛߟ ͑Ε͹Α͍ͷͰ͔ͳΓ҆৺ɺσϓϩΠ΋ָ - ؆୯ - ֤ϚΠΫϩαʔϏεͷαʔόͰείʔϓΛݶఆͯ͠഑৴ - ϨεϙϯεϔομͰ`Service-Worker-Allowed`Λࢦఆ͢Ε͹ είʔϓͷύε੍ݶΛճආͰ͖Δ - ΫϥΠΞϯτଆͰݶఆ͞ΕͨείʔϓʹSWΛΠϯετʔϧ ϚΠΫϩαʔϏεϫʔΧʔ

Slide 59

Slide 59 text

!59 - ֤ϫʔΧʔ͕উखʹଞͷϫʔΧʔͷΩϟογϡΛফͯ͠͠·͏ɺͱ͍͏ έʔε͕͋Δ - ಡΈग़࣌͠ʹଞͷϫʔΧʔͷΩϟογϡ͋ΔͳΒͦΕΛ࢖͍͍ͨ - ํ๏͸̎ͭ - ͦΕͧΕͷΩϟογϡΞΠςϜͷॴ༗ऀ͕୭͔Λ؅ཧ͢Δ - ಡΈग़͕͠଎͍ - Ωϟογϡɺύʔδ͕खؒ - GoogleͷWorkboxʹ৐͍ͬͯΔͱ೉͍͠ - ΩϟογϡετϨʔδΛαʔϏε͝ͱʹ੾Γ෼͚Δ - Ωϟογϡɺύʔδָ͕ - ಡΈग़͕͠஗͍ - ࠓ͸ͬͪ͜Ͱ࣮ݧத ϚΠΫϩͳΩϟογϡ؅ཧઓུ

Slide 60

Slide 60 text

Feature Flags !60

Slide 61

Slide 61 text

!61 https://martinfowler.com/articles/feature-toggles.html

Slide 62

Slide 62 text

!62 - a.k.a Feature Toggles - ֎෦ͷίϯϑΟά(Key-Value)Λࢀর - ͦͷ஋ʹΑͬͯػೳΛग़͠෼͚Δ - SaaS΋͋Δ - http://featureﬂags.io/ - FirebaseͷRemoteConﬁgʢωΠςΟϒΞϓϦ޲͚ʣ Feature Flags

Slide 63

Slide 63 text

Feature Flags for SW !63

Slide 64

Slide 64 text

!64 - ϚΠΫϩαʔϏε(SW)Խʹ - ϑϥάͰΑΓҰݩతʹػೳ։ൃ/௥ՃΛ؅ཧ͍ͨ͠ - SWͷڍಈΛ֎͔Β੍ޚͰ͖ͳ͍ͷ͸ා͍ - PWA։ൃͰ΋μʔΫϩʔϯνΛ͍ͨ͠ Feature Flags for SW

Slide 65

Slide 65 text

!65 - ServiceWorkerͷregisterPathʹϑϥά৘ใΛ৐ͤΔ - ϑϥά͕มΘΕ͹SW͕ߋ৽͞ΕΔ - φϏήʔγϣϯϦΫΤετ͕SWͰδϟοΫ͞Ε͍ͯΔͱ͖͸ ཁ஫ҙ - ిࢠ൛Ͱ͸NR͸جຊతʹશͯ `no-cache` Feature Flags for SW

Slide 66

Slide 66 text

- ϚΠΫϩϑϩϯτΤϯυͰϚΠΫϩ։ൃ - TypeScript͸ݞͷྗΛൈ͍ͯऔΓ૊Ή - JSX͸ςϯϓϨʔτΤϯδϯͱͯ͠΋࠷ߴ - E2E͸ผͷCIͰ΍Δͱ͖ͬ͢Γ - AppShell & Quicklink ͓͢͢Ί - Edge-side optimizationʹ͸ເ͕͋Δ - ϚΠΫϩαʔϏεϫʔΧʔ҆৺ - Feature FlagsΛ࢖ͬͯμʔΫϩʔϯν !66 ·ͱΊ

Slide 67

Slide 67 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ !67