Upgrade to Pro — share decks privately, control downloads, hide ads and more …

日経電子版のマイクロフロントエンドと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. ೔ຊܦࡁ৽ฉࣾ ٶຊ ক (@shqld)
    1
    ೔ܦిࢠ൛ͷ
    ϚΠΫϩϑϩϯτΤϯυͱ
    PWA

    View Slide

  2. !2
    - ໊લ
    - ٶຊ ক (Sho Miyamoto)
    - @shqld (Twitter, GitHub)
    - ࢓ࣄ
    - ೔ຊܦࡁ৽ฉࣾͷ૯߹৬
    - r.nikkei.comͷϑϩϯτΤϯυɺ

    όοΫΤϯυɺCDNपΓ
    - ܦྺ
    - 2017/9: ֶ෦ଔۀ
    - 2018/4: ೔ܦ ৽ଔೖࣾ
    - JavaScriptͱͯ΋޷͖
    ͩΕʁ

    View Slide

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

    View Slide

  4. !4
    Server
    (BFF)
    Client
    Node.js (w/ Express)
    VanillaJS

    (Babel7)
    Sass
    handlebars

    (& JSX)
    ిࢠ൛ͷٕज़ελοΫ
    Script
    Webpack4
    Style Markup
    SSR
    CDN
    Fastly

    View Slide

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

    View Slide

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

    View Slide

  7. 7
    ϚΠΫϩϑϩϯτΤϯυͱ͸
    Monolithic
    Frontends
    Organisation

    in Verticals
    https://micro-frontends.org

    View Slide

  8. 8
    - ϚΠΫϩαʔϏε on ϑϩϯτΤϯυ
    - લఏɿʢϞμϯʣ΢ΣϒΞϓϦ
    - Ұͭͷը໘Λෳ਺ͷαʔϏε

    ʢಠཱͨ͠νʔϜʹΑΔػೳͷू߹ମʣʹ෼ׂ
    - SSR࣌ʹ݁߹
    - ٕज़తཁૉ
    - SPA(s)
    - Web Components
    - SSI (ESI)
    ϚΠΫϩϑϩϯτΤϯυͱ͸

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. !14
    - ʮҰͭͷը໘ʯ୯ҐͰ͸ͳ͘

    ʮϖʔδ͝ͱʹʯϚΠΫϩαʔϏεʹ෼ׂ
    - CDN(Fastly)Ͱ֤αʔϏεΛ݁߹
    ೔ܦిࢠ൛ͷϚΠΫϩઃܭ
    https://speakerdeck.com/ryysd/microservices-on-fastly

    View Slide

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

    View Slide

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

    View Slide

  17. ϚΠΫϩϑϩϯτΤϯυ

    ͷԸܙ
    17

    View Slide

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

    View Slide

  19. TypeScriptΛಋೖͨ͠
    !19

    View Slide

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

    View Slide

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

    View Slide

  22. !22
    - `NoImplicitAny` ͸େม
    - ґଘϞδϡʔϧ΍ؔ਺ͷҾ਺

    શͯʹܕΛ͚ͭΔඞཁ͕͋Δ
    - ίʔυͷن໛ʹΑͬͯ͸Ϟνϕʔγϣϯ͕ଓ͔ͳ͍
    - ࠷ॳͷҰา͕Ұ൪େ͖͍นʹͳͬͯ͠·͏
    - ޙ͔ΒͰ΋ྑ͍
    ؤுΓ͗͢ͳ͍ܕ෇͚

    View Slide

  23. JSXΛಋೖͨ͠
    !23

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. E2Eςετ on Codebuild
    !28

    View Slide

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

    View Slide

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

    View Slide

  31. PWA
    31

    View Slide

  32. !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/

    View Slide

  33. Fast & EngagingΛ೦಄ʹ

    ৭ʑ΍ͬͨ
    !33

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. !37

    View Slide

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

    View Slide

  39. !39
    - IntersectionObserverͰviewportʹೖͬͨaλάΛ؂ࢹ
    - ༏ઌ౓ผͷઓུ
    - ߴ: fetch
    - ௿: ResourceHints௥Ճ (`- requestIdleCallbackͰΫϦςΟΧϧϨϯμϦϯάΛअ
    ຐ͠ͳ͍

    View Slide

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

    View Slide

  41. View Slide

  42. Critical CSS
    !42

    View Slide

  43. !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ϒϩοΩϯά

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. Dynamic Critical CSS Optimization
    !48

    View Slide

  49. !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

    View Slide

  50. !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

    View Slide

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

    View Slide

  52. !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

    View Slide

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

    View Slide

  54. ϞϊϦεԽ͢ΔServiceWorker
    !54

    View Slide

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

    View Slide

  56. ϚΠΫϩ ServiceWorkers
    !56

    View Slide

  57. !57
    Server
    (BFF)
    Client
    Service

    Worker
    هࣄ ݕࡧ τοϓ
    ڞ௨ϥΠϒϥϦ
    APIGW

    View Slide

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

    View Slide

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

    View Slide

  60. Feature Flags
    !60

    View Slide

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

    View Slide

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

    View Slide

  63. Feature Flags for SW
    !63

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide