Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Sho Miyamoto
February 14, 2019

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

日経電子版の最近の取り組みをマイクロフロントエンドとPWAに絡めて紹介します。(Developers Summit 2019でお話した内容です)

Sho Miyamoto

February 14, 2019
Tweet

More Decks by Sho Miyamoto

Other Decks in Technology

Transcript

  1. !2 - ໊લ - ٶຊ ক (Sho Miyamoto) - @shqld

    (Twitter, GitHub) - ࢓ࣄ - ೔ຊܦࡁ৽ฉࣾͷ૯߹৬ - r.nikkei.comͷϑϩϯτΤϯυɺ
 όοΫΤϯυɺCDNपΓ - ܦྺ - 2017/9: ֶ෦ଔۀ - 2018/4: ೔ܦ ৽ଔೖࣾ - JavaScriptͱͯ΋޷͖ ͩΕʁ
  2. !4 Server (BFF) Client Node.js (w/ Express) VanillaJS
 (Babel7) Sass

    handlebars
 (& JSX) ిࢠ൛ͷٕज़ελοΫ Script Webpack4 Style Markup SSR CDN Fastly
  3. 12 - શମతʹ͸ - WebDocuments & Content-Centric - MPA -

    ੩త - ϖʔδ୯ҐͰੑ࣭͕େ͖͘ҟͳΔ - τοϓɺهࣄ - ݕࡧɺMyχϡʔε - ΞϓϦέʔγϣϯدΓ - ಈత ೔ܦిࢠ൛ͷίϯςϯπ
  4. !15 - ϖʔδ ≒ αʔϏε - ϦϙδτϦ - σϓϩΠϑϩʔ -

    ٕज़બ୒ - ։ൃऀ - ֤αʔϏεؒ͸ૄ݁߹ - ଞαʔϏεͰඞཁͳ΋ͷ͸APIԽͯ͠CDNܦ༝ͰऔΓʹߦ͘ - αʔϏεؒͰڞ௨͢Δίʔυ - ϓϥΠϕʔτͳnpmύοέʔδʹ - ֤ύοέʔδ͸ͨͩͷػೳ܈ - ࢖͏ଆ͕దٓ औࣺબ୒ ೔ܦిࢠ൛ͷϚΠΫϩઃܭ
  5. !20 - JSͷͭΒ͞ - ʢαʔόʔαΠυʣϛυϧ΢ΣΞ΍ϧʔτ͝ͱͷॲཧɺҾճ ͢σʔλͷܗ - ʢϏϡʔʣίϯϙʔωϯτͷΠϯλʔϑΣʔε - ੩తܕݕ͕ࠪཉ͍͠

    - Flow vs Typescript - Flow͸ܕਪ࿦ڧ͍ - ϓϩδΣΫτͷઃఆ͕ॊೈ͡Όͳ͍ - ϓϩδΣΫτΛ·͍ͨͰܕఆٛΛڞ༗͠ʹ͍͘ - ઴ਐతͳTypeScriptԽ - ·ͣ͸ίʔυͷগͳ͍̍αʔϏε͔Β TypeScriptಋೖ
  6. !21 - TypeScript with Babel - tsc͸͋͘·ͰܕͷνΣοΫ͚ͩ - τϥϯεύΠϧ͸ࠓ·Ͱ௨ΓBabel7Ͱ -

    @babel/preset-typescript - TS͔ΒTSཁૉΛফ͚ͩ͢ - ECMAScriptඪ४͔Β֎Εͳ͍ʢಠ֦ࣗு͸αϙʔτ͞Ε͍ͯ ͳ͍ e.g. Enumʣ - JavaScriptͱͷڞଘ - JS͸BabelΛ௨ͯ͠΋Կ΋ى͖ͳ͍ - ιʔεϚοϓͷੜ੒͚ͩͰܕఆ͕ٛڞ༗Ͱ͖Δ TypeScript with Babel
  7. !24 - ≠ Reactಋೖ - طଘͷςϯϓϨʔτΤϯδϯhandlebars͕ͭΒ͍ - ͋͘·ͰͨͩͷจࣈྻςϯϓϨʔτ - HTML༻͡Όͳ͍

    - ϦϯτͰ͖ͳ͍ - (͜͜ʹ͸ऩ·Γ͖Βͳ͍) - handlebars͔ΒJSX with Reactʹஔ͖׵͑ͨ - ϏϡʔͷϚʔΫΞοϓΛJSXͰॻ͘ - expressͷrenderॲཧͰSSR(react-render-to-string) JSXಋೖ
  8. !25 - Ұ౓Ͱશஔ͖׵͑͸ແཧ - htmlʹԊͬͨύʔε͕Ͱ͖ͳ͍ͷͰػցతͳஔ׵΋ݫ͍͠ - ϑΝΠϧ਺͕ଟ͘ɺґଘؔ܎΋ෳࡶ - ΞμϓλʔΛڬΜͩ -

    JSX͔ΒHBSɺHBS͔ΒJSXΛ૬ޓʹݺ΂ΔΑ͏ʹͨ͠ - https://github.com/shqld/handlebars-jsx-adapter Handlebars -> JSX
  9. !26 - JSX(TSX)ͷྑ͞ - ิ׬ɺϑΥʔϚςΟϯά͕ޮ͘ - ঢ়ଶͷड͚౉͕͠໌֬ - ܕͰറΕΔ -

    ΫϥΠΞϯταΠυͰReactΛ࢖Θͳͯ͘΋े෼Ըܙ͕͋Δ - ͋ΔαʔϏεͰReactΛ࢖͍ͨ͘ͳͬͨΒطଘͷϏϡʔʹΫϥ ΠΞϯτॲཧΛॻ͖଍͚ͩ͢ - lit-htmlͱ͔htm΋΋ͬͱ੒ख़࢝͠ΊͨΒݕ౼͍ͨ͠ ςϯϓϨʔτΤϯδϯͱͯ͠ͷJSX
  10. !29 - E2E͸ӡ༻తʹ΋Ϧιʔεతʹ΋େม - ಛʹΫϩεϒϥ΢βʔ(incl. IE11) - ීஈ࢖͍ͷCircleCIͰ΍Δͱڞ༗ͷΩϡʔΛ٧·Βͤͯ͠·͏ - ͦ͏ͩɺCodeBuildͰ΍Ζ͏ʂ☺

    - CircleCIͰϏϧυɺηΧϯμϦίϯςφʹσϓϩΠ - CodeBuildΛτϦΨʔ͢Δ - CodeBuild্ͰσϓϩΠ͞ΕͨηΧϯμϦͷURLʹରͯ͠E2Eς ετ - ੒ޭͨ͠Βεϫοϓ(Codebuild) E2Eςετ on CodeBuild
  11. !32 - ࠓߋײͷ͋Δ࿩Ͱ͕͢… - PWȀຊப - ৴པ(࣮֬)ੑ - ଎͞ -

    ΞϓϦͱͯ͠ͷັྗ 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/
  12. !36 - Πϝʔδɿίϯςϯπ෦෼ͷશLazyload - ྲྀΕɿ - SWͰφϏήʔγϣϯϦΫΤετΛδϟοΫͯ͠AppShellΛฦ ͢ - AppShellͷεΫϦϓτλάͰwindow.locationΛfetch

    - DOMΛॻ͖׵͑Δ - ग़͠෼͚ - CacheϛεɿAppShellΛฦ͢ - Cacheώοτɿͦͷ··ΩϟογϡΛϨϯμϦϯάͨ͠ํ͕ ଎͍ AppShellͷ࣮૷
  13. !37

  14. !39 - IntersectionObserverͰviewportʹೖͬͨaλάΛ؂ࢹ - ༏ઌ౓ผͷઓུ - ߴ: fetch - ௿:

    ResourceHints௥Ճ (`<link rel=“prefetch” ~`) - requestIdleCallbackͰΫϦςΟΧϧϨϯμϦϯάΛअ ຐ͠ͳ͍
  15. !40 - hrefΛSWʹpostMessageͰ౉ͯ͠ϓϦΩϟογϡ - ϝϦοτ - UIεϨου͸observeͯ͠postMessage͢Δ͚ͩ - ϦΫΤετ͕ൃੜ͠ͳ͍෼ɺෛՙ͕গͳ͍ -

    طଘͷSWͷΩϟογϡઓུΛ׆͔ͤΔ - ҰݩతʹΩϟογϡΛѻ͑Δ - ༏ઌ౓Λؾʹ͠ͳͯ͘ྑ͍ with SW
  16. !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ϒϩοΩϯά
  17. !44 Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ ɾ ɾ ɾ

    ←ͷදࣔʹඞཁͳ࠷௿ݶͷCSSΛ HTMLʹຒΊࠐΉ ←ͷCSS͸ը໘දࣔޙʹಡΈࠐΉ
  18. !46 - ίϯςϯπ΍ձһଐੑʹΑͬͯඞཁͳCSS ͷ͹Β͖͕ͭେ͖͍ - e.g. ࣸਅɺϏσΦɺදɺPaywall - ಈతʹग़͠෼͚ΒΕͳ͍ -

    ʮίϯςϯπʹΑͬͯ͸ݟͨ໨͕େ͖͘ ่Εͯ͠·͏ʯ͸ڐ༰Ͱ͖ͳ͍ - ͍·͸ࣗಈੜ੒Ͱ͸ͳ͘ਓखͰ؅ཧ ೔ܦిࢠ൛ͷCCSSࣄ৘
  19. !47 - HTMLαΠζͷ50%લޙ͕CCSS - ʢαʔϏε͝ͱʹʣશϖʔδʹಉ͡CCSS͕ΠϯϥΠϯͰຒΊ ࠐ·Ε͍ͯΔ - CDNͷసૹྔͷແବ - ΫϥΠΞϯτΩϟογϡͷ༰ྔΛṧഭ

    - ௨৴ͷύϑΥʔϚϯεͷ௿Լ - ΠϯϥΠϯͳͷͰ੾Γ཭ͤͳ͍ - e.g. هࣄϖʔδ - CSS: 544k - CCSS: 489k CCSS͕ॏ͍
  20. !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
  21. !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
  22. !51 - ݱঢ়͸EBͰ৭ʑ΍ͬͯΔ - ੍໿͕ͳ͍ & σόοά͠΍͍͢ - Ϗϧυ͕٧·ͬͯαʔό͕མͪΔՄೳੑ͕͋Δ -

    CCSSͷ࠷దԽ෦෼͸αʔόϨεʹ͍ͨ͠ - ϦΫΤετϋϯυϦϯά: on CDN - Ϗϧυ: Lambda (w/ @serverless/chrome) Future Works
  23. !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
  24. !59 - ֤ϫʔΧʔ͕উखʹଞͷϫʔΧʔͷΩϟογϡΛফͯ͠͠·͏ɺͱ͍͏ έʔε͕͋Δ - ಡΈग़࣌͠ʹଞͷϫʔΧʔͷΩϟογϡ͋ΔͳΒͦΕΛ࢖͍͍ͨ - ํ๏͸̎ͭ - ͦΕͧΕͷΩϟογϡΞΠςϜͷॴ༗ऀ͕୭͔Λ؅ཧ͢Δ

    - ಡΈग़͕͠଎͍ - Ωϟογϡɺύʔδ͕खؒ - GoogleͷWorkboxʹ৐͍ͬͯΔͱ೉͍͠ - ΩϟογϡετϨʔδΛαʔϏε͝ͱʹ੾Γ෼͚Δ - Ωϟογϡɺύʔδָ͕ - ಡΈग़͕͠஗͍ - ࠓ͸ͬͪ͜Ͱ࣮ݧத ϚΠΫϩͳΩϟογϡ؅ཧઓུ
  25. !62 - a.k.a Feature Toggles - ֎෦ͷίϯϑΟά(Key-Value)Λࢀর - ͦͷ஋ʹΑͬͯػೳΛग़͠෼͚Δ -

    SaaS΋͋Δ - http://featureflags.io/ - FirebaseͷRemoteConfigʢωΠςΟϒΞϓϦ޲͚ʣ Feature Flags
  26. - ϚΠΫϩϑϩϯτΤϯυͰϚΠΫϩ։ൃ - TypeScript͸ݞͷྗΛൈ͍ͯऔΓ૊Ή - JSX͸ςϯϓϨʔτΤϯδϯͱͯ͠΋࠷ߴ - E2E͸ผͷCIͰ΍Δͱ͖ͬ͢Γ - AppShell

    & Quicklink ͓͢͢Ί - Edge-side optimizationʹ͸ເ͕͋Δ - ϚΠΫϩαʔϏεϫʔΧʔ҆৺ - Feature FlagsΛ࢖ͬͯμʔΫϩʔϯν !66 ·ͱΊ