「フロントエンド領域」を再定義する

Frontend Study #1
訂正: 最後のzennの記事のリンク先は、正しくは https://zenn.dev/mizchi/articles/c638f1b3b0cd239d3eea です

Transcript

1. ʮϑϩϯτΤϯυྖҬʯΛ
   MIZCHI - ஛അޫଠ࿠ / PLAID INC
   FRONTEND STUDY #1
   ࠶ఆٛ͢Δ
   

   View Slide

2. ABOUT
   ▸ @mizchi / ஛അޫଠ࿠
   ▸ Frontend Engineer
   ▸ React / Node / SPA
   ▸ Web ͷ࠷৽ٕज़Ͱ৽͍͠ମݧΛ࣮ূ - ఏڙ͢Δͷ͕޷͖
   

   View Slide

3. ࠓ೔࿩͢಺༰
   ▸ ͜ͷ10೥ͷৼΓฦΓͱ࠷ۙͷτϨϯυ
   ▸ next.js ʹݟΔϕετϓϥΫςΟε
   ▸ ϑϩϯτΤϯυͷྖҬͷมԽ
   ▸ Cloudflare Workers ͕੾Γ։͘৽ྖҬ
   

   View Slide

4. ͸͡Ίʹɿ஫ҙ఺
   ▸ ࣗ෼͸ Frontend ͱ͍͏ΑΓ Node.js Engineer ʹ͍ۙ
   ▸ ࠷ઌ୺ʙۙະདྷͷ࿩Λ͢ΔͷͰɺഽצ͕߹Θͳ͍ਓ͸͍Δ͔΋
   ▸ ຊεϥΠυ͸ Rails ʹ݌՞ΛചΓ·͕͢ɺRails ͕Ռͨͨ͠໾ׂΛ൱ఆ͢Δ
   ΋ͷͰ͸͋Γ·ͤΜ
   

   View Slide

5. ͜͜10 ೥ͷৼΓฦΓͱ
   ࠷ۙͷτϨϯυ
   

   View Slide

6. ͜͜10೥ͷৼΓฦΓ
   ▸ IE First ͷ࣌୅ͷऴΘΓ
   ▸ Frontend ʹ͓͍ͯ Node.js ͕ࢧ഑తͳϙδγϣϯʹ
   ▸ ʮಈ͘ςϯϓϨʔτΤϯδϯʯ͕౰ͨΓલʹ
   

   View Slide

7. IE First ࣌୅ͷऴΘΓ
   WorldWide
   Japan
   

   View Slide

8. IE First ࣌୅ͷऴΘΓ
   ▸ ʮIEͰಈ͔ͳ͍͔Β࢓༷ΛIEʹ߹ΘͤΔʯ
   =>ʮϞμϯϒϥ΢βਫ४Λຬͨ͞ͳ͍IE͸ஈ֊తʹ੾ΓࣺͯΔʯ
   ▸ αϙʔτ͠ͳ͍Θ͚Ͱ͸ͳ͍͕ɺ଍ΛҾͬுΔ৔߹͸੾Δ
   ▸ ຊԻ: IEରԠΛ΍Γ͗͢ΔͱɺϞμϯϒϥ΢βͷܦݧ஋ΛՔ͛ͳ͍…
   

   View Slide

9. Node.jsʹΑΔϑϩϯτΤϯυ
   ▸ Rails Sprockets ͳͲͷݴޠ/ϑϨʔϜϫʔΫ͝ͱͷϓϦϓϩηοα͕ഇΕͨ
   ▸ Node.js ʹΑͬͯ Frontend Toolchain ͕ఏڙ͞ΕΔΑ͏ʹͳͬͨ
   

   View Slide

10. ʮಈ͘ςϯϓϨʔτʯ͕౰ͨΓલʹ
    ▸ Ծ૝DOMٕज़ʹΑΔએݴతUI͕ීٴ
    ▸ ʮςϯϓϨʔτΤϯδϯʯͷ໾ׂ͕ɺੲͳ͕Βͷจࣈྻͷੜ੒Ͱ͸ͳ͘ɺ໦ߏ଄
    ͱͦͷޙͷϩδοΫ΋؅ཧ͢Δ͜ͱʹมԽ
    ▸ ݱঢ়͸JSҎ֎ͷબ୒ࢶ͕ͳ͍
    

    View Slide

11. ࠷ۙͷϑϩϯτΤϯυͷྲྀߦ
    ▸ ύϑΥʔϚϯεࢦ޲
    ▸ Opinionated ͳʮઃܭΑΓن໿ʯ
    ▸ Modern JavaScript ≒ TypeScript
    

    View Slide

12. https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/
    > JavaScript͸΢ΣϒͷCO2Ͱ͢ɻࢲͨͪ͸ͦͷ͏ͪͷ
    ͍͔ͭ͘Λඞཁͱ͍ͯ͠·͕͢ɺଟ͗͢Δͱੜଶܥશମ
    ͕ةݥʹ͞Β͞ΕΔ͜ͱʹͳΓ·͢ɻ࠷΋ଟ͘ഉग़ͯ͠
    ͍Δਓ(༁ऀ஫: ։ൃऀ)͸ɺੜଶܥ่͕յ͢Δ·Ͱɺͦ
    ͷ݁Ռʹۤ͠Ή͜ͱ͔Β࠷΋ԕ͍ଘࡏͰ͢ɻJS ͷഉग़
    ྔΛίϯτϩʔϧ͠ͳ͍ݶΓɺ΢Σϒ͸ίϯϐϡʔςΟ
    ϯά͕޲͔͏ࢢ৔΍ϑΥʔϜϑΝΫλʔͰ੒ޭ͢Δ͜ͱ
    ͸ͳ͍Ͱ͠ΐ͏ɻ
    ‘JavaScript is CO2’ by Alex Russell (Google) 2018
    

    View Slide

13. ۙ೥ͷύϑΥʔϚϯεࢦ޲
    ▸ Lighthouse ʹΑΔείΞԽ
    ▸ WebVitals ʹΑΔ SEO ΁ͷӨڹ
    ▸ ϑϩϯτΤϯυٕज़͸ SPA ͷҝͷٕज़Ͱ͸ͳ͘ɺ
    ʮWebͷϕετϓϥΫςΟεΛ࣮ݱ͢Δ΋ͷʯ΁
    

    View Slide

14. Opinionated ͳʮઃܭΑΓن໿ʯ
    ▸ Deno
    ▸ Rome
    ▸ Blitz
    

    View Slide

15. Deno: A secure runtime for JavaScript and TypeScript.
    ▸ Node.js ΦϦδφϧ࡞ऀͷ Ryan Dahl
    ʹΑΔ৽͍͠ Rust + V8 ͷ JS ॲཧܥ
    ▸ npm ΤίγεςϜΛ൱ఆ͠ ESM ͷ
    URL ύε͔Βґଘղܾ
    ▸ ࣮ߦ࣌ʹ໌ࣔతʹݖݶΛ෇༩͢Δαϯ
    υϘοΫεϞσϧ
    ▸ TypeScript First
    https://deno.land/
    

    View Slide

16. Rome: Unifying the frontend development toolchain
    ▸ Babel ΦϦδφϧ࡞ऀ sebmck ʹΑΔ
    Node.js େ౷ҰπʔϧνΣΠϯ
    ▸ Babel, ESlint, Webpack, Prettier, Jest
    Λஔ͖׵͑Δ
    ▸ ֎෦ϥΠϒϥϦඇґଘͰࣗલͷ
    Parser / AST Ͱ౷Ұ
    ▸ TypeScript First https://rome.tools/
    

    View Slide

17. Blitz: The Fullstack React Framework
    ▸ Next.js + Prisma ORM = Fullstack
    ▸ ϕετϓϥΫςΟεͷ٧Ί߹Θͤ + Code Generator
    ▸ react-query / react-final-form / zod / etc…
    ▸ meteor ෩ͷisomorphic ͳϦϞʔτؔ਺ݺͼग़͠(RPCม׵)
    ▸ TypeScript First
    

    View Slide

18. ͳͥࠓ·Ͱ Node ͷ Fullstack Framework ͕ྲྀߦΒͳ͔͔ͬͨʁ
    ▸ Α͍ ORM ͕ͳ͔ͬͨ
    ▸ Node.js ॳظ͸ Monolithic ͳ Rails ΁ͷ൓ಈ͕͋ͬͨ
    ▸ Express ͸খ͍͞ϛυϧ΢ΣΞͷू߹ମ
    ▸ Node.js ͷΤίγεςϜ͕҆ఆͤͣɺऔࣺબ୒Ͱ͖ͳ͔ͬͨ
    

    View Slide

19. prisma2: Modern ORM + Query Builder
    ▸ ʮNode.js ʹྑ͍ORM ͕ͳ͍ʯͱ͍͏ঢ়گΛ෴ͤͦ͏ͳ ORM / Query Builder
    ▸ એݴత Migration: ઐ༻ͷIDLͷมߋ͔ΒࣗಈͰϚΠάϨʔγϣϯΛੜ੒
    ▸ TypeScript Friendly: TSͷॊೈͳදݱྗͰͲΜͳΫΤϦʹ΋ܕ͕෇͘
    ▸ SQL First: ࣗવͳ SQL ͱରԠ͢Δ API
    

    View Slide

20. prisma schema prisma api
    https://www.prisma.io/
    

    View Slide

21. PRISMA2 ͷӨڹ
    ▸ Prisma Λ࢖͏ϑϨʔϜϫʔΫͷ։ൃϥογϡ
    ▸ Blitz.js: Next.js + Prisma2 + Code Generator
    ▸ Redwood.js: React + Redwood Router + Prisma2
    ▸ Frourio: MS੡ TS First ͳ API αʔόʔ
    

    View Slide

22. Modern JavaScript = TypeScript
    ▸ ྑ͍ίʔυ = ܕ͕͋Δίʔυ
    ▸ ྑ͍ઃܭ = ܕ͕෇͘API
    ▸ ྑ͍ϥΠϒϥϦ = ܕఆٛ(.d.ts)͕ఏڙ͞ΕΔϥΠϒϥϦ
    

    View Slide

23. ·ͱΊ
    ▸ Frontend Toolchain ͸ Node.js ʹू໿͞Εͨ
    ▸ Node.jsपล͸ރΕͭͭ͋Δ͕ɺ࣮੷͕͋Δ։ൃऀͷ Opinionated ͳ
    Φʔόʔϗʔϧ΋ಉ࣌ਐߦத
    ▸ ৽نʹ։ൃ͞ΕΔ΋ͷ͸ɺTypeScript First
    

    View Slide

24. Next.js͔ΒֶͿ
    ϕετϓϥΫςΟε
    

    View Slide

25. ▸ socket.io ͷ࡞ऀ Guillermo Rauch ཰͍Δ Vercel ͕։ൃ
    ▸ Vercel: SSG + Serverless ʹ࠷దԽ͞Εͨ PaaS
    ▸ (ݩʑ͸) React ͷ SSR Server + Routing ΛηοτͰఏڙ
    ͢ΔϑϨʔϜϫʔΫ
    ▸ ॳճϨεϙϯε͸ SSR Ͱฦ٫͠ɺҎ߱ͷભҠΛ CSR Ͱ
    Ҿ͖ܧ͙(Α͋͘ΔSPAͷߏ଄)
    Next.js ͱ͸Կ͔
    

    View Slide

26. ▸ ෳ਺ͷ࣮ߦɾग़ྗϞʔυ
    ▸ SSR
    ▸ Server
    ▸ Serverless
    ▸ SSG
    ▸ SSG Export
    ▸ Incremental Static Regeneration
    Next.js: Multi Paradigm Framework
    SSR Server
    webpack
    chunks
    SSG Export
    Server(less) Mode
    SSG Mode
    $ next build
    $ next export
    Next.js
    webpack
    serverless
    function
    SOURCE
    CODE
    server runtime
    browser runtime
    

    View Slide

27. ▸ SSG mode Λಈతʹ࣮ߦ͢Δܗଶ
    ▸ cache Λฦͭͭ͠ɺexpire ͨ͠΋ͷΛཪͰೖ
    Εସ͑Δ
    ▸ Backend ͸ߋ৽ස౓͕௿͍CMS ͳͲΛ૝ఆ
    Next.js: Incremental Static Regeneration
    SSG SERVER
    Edge Cache
    BROWSER
    Generate SSG Asset
    Stale While Revalidate
    CMS
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    BROWSER
    1req/15m
    

    View Slide

28. ▸ (Next.js ొ৔Ҏલͷ) ඇৗʹෳࡶͳ SSR/CSR ΛӅṭ
    ▸ Node.js ͷϑϩϯτΤϯυπʔϧνΣΠϯͱɺSPA/SSR ͷϕετ
    ϓϥΫςΟεΛɺҰͭͷϑϨʔϜϫʔΫʹ
    ▸ Vue Nuxt, Svelte Sapper(SvelteKit) ͱ͍͏ϑΥϩϫʔ
    Next.js ͕࣮ݱͨ͜͠ͱ
    

    View Slide

29. ٞ࿦: ͦ΋ͦ΋ SSR ͸ඞཁʁ
    ▸ ΄ͱΜͲͷέʔεͰඞཁͳ͍
    ▸ GoogleBot ͷ CSR ίϯςϯπʹର͢ΔΠϯσοΫε͕਺࣌ؒ஗ΕΔ໰୊
    ▸ NodeαʔόʔΛ࣋ͨͳ͍ϝϦοτͱͷτϨʔυΦϑ
    ▸ Next.js ͸ SSR ͠ͳ͍ʹͯ͠΋༗༻
    

    View Slide

30. Next.js ͔ΒֶͿϕετϓϥΫςΟε: ·ͱΊ
    ▸ ෳࡶͳ SPA/SSR ΛӅṭ͠୭Ͱ΋࢖͑ΔΑ͏ʹ
    ▸ Next.js+Vercel ͸ SSG/Serverless ͰϚωʔδϨεͳํ޲ʹਐԽ
    ▸ SSR ͸ଟ͘ͷέʔεͰෆཁ
    

    View Slide

31. ϑϩϯτΤϯυ
    ͷྖҬͷมԽ
    

    View Slide

32. Legacy Monolithic Framework (Rails, Django, etc…)
    CSS
    Markup Engineer
    BROWSER
    SERVER
    JAVASCRIPT
    ORM
    Application Engineer
    HTML(STRING)
    CONTROLLER
    

    View Slide

33. API Server + Single Page Application
    Frontend Engineer
    BROWSER
    SERVER
    CLIENT ROUTER
    ORM
    Application Engineer
    HTML(VDOM TREE)
    API
    CSS
    

    View Slide

34. 2010s Monolithic SPA
    app.js (10MB)
    

    View Slide

35. Modern SPA 2018~
    app.js
    home.js
    edit.js
    about.js
    ▸ entry as router
    ▸ lazy chunks
    ▸ multi thread
    ▸ web worker
    ▸ service worker
    worker.js
    main thread worker thread
    service worker
    sw.js
    router
    ▸ SPA ٕज़͕ɺSPA ͷ΋ͷͱ͍͏ΑΓɺ΢ΣϒͷϕετϓϥΫςΟε΁
    

    View Slide

36. Backend API + SSR : Next.js / Nuxt
    Frontend Engineer
    BROWSER
    SERVER
    Application Engineer
    CSS
    HTML(CSR)
    CONTROLLER
    HTML(SSR)
    BACKEND API
    INFRA AS A CODE
    

    View Slide

37. Blitz Fullstack Style
    Frontend Engineer?
    BROWSER
    SERVER
    CSS
    HTML(CSR)
    CONTROLLER
    HTML(SSR) CONTROLLER’
    ORM
    API
    

    View Slide

38. Blitz Fullstack Style
    ▸ ORM + Next/Nuxt ͸ɺ Monolithic Rails ΁ઌ૆ฦΓ͢Δ
    ▸ ΋͸΍ Frontend Engineer Ͱ͸ͳ͘ɺຊདྷͷ Application Engineer
    ▸ ൣғ͕޿͗͢ΔͷͰɺ͓ͦΒ͘࠶ͼ෼ۀ͕ൃੜͦ͠͏
    ▸ ·ͩྲྀߦͬͯͳ͍ɻ͜Ε͔Β
    

    View Slide

39. ٞ࿦: ࠓͷ Frontend Engineer ΛͳΜͱݺ΂͹͍͍͔໰୊
    ▸ (New) Application Engineer?: Backend த৺ͷNode.js ΤϯδχΞ
    ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛ؅ཧ
    ▸ Design Engineer?: Markup + JavaScript
    ▸ CDN Edge Engineer?: CDN पลΛ؅ཧ
    

    View Slide

40. ࠓͷ Frontend Engineer ΛͳΜͱݺ΂͹͍͍͔໰୊
    ▸ (New) Application Engineer?: Backend த৺ͷNode.js ΤϯδχΞ
    ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛ؅ཧ
    ▸ Design Engineer?: Markup + JavaScript
    ▸ CDN Edge Engineer?: CDN पลΛ؅ཧ
    WE ARE HIRING!
    WE ARE HIRING!
    

    View Slide

41. ૝ఆ൓࿦: ʮNode.js ΤϯδχΞͷϙδγϣϯτʔΫͰ͸ʁʯ
    ▸ ೝΊΔ͕ɺݱ࣮తʹϑϩϯτΤϯυ͸JSҎ֎ݫ͍͠ঢ়گ
    ▸ ࣗ෼͸JS(ES5) ͕ݏͰ AltJS ϚχΞ͕ͩͬͨɺ ES201x + TypeScript Ͱຬ
    ଍ɻV8 ͸଎౓తʹ΋े෼ɻ
    ▸ WebAssembly ʹظ଴
    ▸ Rust: yew, dodrio, percy
    ▸ C#: Blazor WebAssembly
    

    View Slide

42. C#: Blazor WebAssembly
    
    
    @Title
    @ChildContent
    Yes!
    
    
    @code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public string Title { get; set; }
    private void OnYes()
    {
    Console.WriteLine("Write to the console in C#! 'Yes'
    button selected.");
    }
    }
    

    View Slide

43. Rust: Yew
    

    View Slide

44. ଞͷݴޠͷͨΊͷɺ Node.js Frontend ͷ౗͠ํ
    ▸ એݴతUI+Next.js Λ WebAssembly Ͱ࣮૷͢Δ
    ▸ ݱঢ়͸ Rust + wasm_bindgen ͕ݱ࣮త͕ͩɺRust ͕ΞϓϦέʔγϣϯ૚
    Λॻ͘ͷʹ޲͍ͯΔ͔ͱ͍͏ͱ…
    ▸ GC෇͖ݴޠ͸ɺ WASM GC ͕࢓༷Խ͞ΕΔ·Ͱɺग़ྗαΠζ͕ݫ͍͠
    ▸ ΤίγεςϜ੒ཱʹ͸ɺWasm Binary ͷ ଟݴޠؒ Linker ࢓༷͕ඞཁ͔΋
    

    View Slide

45. ʮଞͷݴޠʹΑΔJSπʔϧͷ࠶࣮૷͸৽͍͠τϨϯυ͔ʁʯ by Dr.Axel
    ▸ esbuild: JS/TS Compiler (Go)
    ▸ swc: JS/TS Compiler (Rust)
    ▸ volta: Rust nvm alternative (Rust)
    ▸ fnm: npm alternative (Rust)
    https://2ality.com/2020/10/js-plus-other-languages.html
    ʮݴޠʹΑͬͯ޲͖ෆ޲͖͸͋ΔͷͰ௕ॴΛ׆༻͢Ε͹͍͍͚Ͳ
    JSͰॻ͘͜ͱͰυοάϑʔσΟϯάʹ΋ͳΔ͠ɺ
    ίϛολʔ΋ूΊ΍͍͢ʯ by Dr.Axel
    

    View Slide

46. ·ͱΊ
    ▸ ϑϩϯτΤϯυͷϕετϓϥΫςΟε͸ Server Application ૚Λ৵৯
    ▸ Node.js ͸ Prisma ORM Ͱ Fullstack Framework (ओʹRails) ʹ࠶௅ઓ
    ▸ ଞͷݴޠ͕௥ै͢Δʹ͸ֻ͕͔࣌ؒΓͦ͏
    ▸ TypeScript + ෦෼తʹ Rust ͕ɺ͠͹Β͘ϕετͳબ୒ࢶ
    

    View Slide

47. Cloudflare Workers ͕
    ੾Γ։͘৽ྖҬ
    

    View Slide

48. Cloudflare Workers
    ▸ CDN Edge Ͱಈ͘(!!!) Node.js
    ▸ ݁Ռ੔߹ͷ Workers KVɺڧ੔߹ͷ Durable Objects
    ▸ CDN Edge ʹΑΔߴ͍Ԡ౴ੑͱɺ 1 req ͋ͨΓ CPU Time 50ms,
    Memory 128MB ͱ͍͏ڧ੍͍໿
    

    View Slide

49. CDN Edge Computing
    SERVER
    Application Engineer
    BROWSER
    EDGE WORKER
    (NODE.JS)
    SERVER
    CDN
    EDGE CACHE
    New!!!
    

    View Slide

50. ଞͷ CDN Edge Worker ࣮૷
    ▸ AWS Lambda@Edge: Lambda ͷ Edge ൛
    ▸ Fastly Compute@Edge: WebAssembly Λ Edge ʹσϓϩΠ
    ▸ Akamai: Edge Workers
    

    View Slide

51. Cloudflare Workers ͕ଞࣾαʔϏεΑΓ༏ΕͯΔ఺
    ▸ ׬੒౓ͷߴ͍CLIπʔϧ(wrangler)
    ▸ ߴ଎σϓϩΠ
    ▸ ߴ͍ύϑΥʔϚϯε / Ԡ౴ੑ
    ▸ Edge ಛੑʹ߹Θͤͨ Cache API
    

    View Slide

52. https://blog.cloudflare.com/serverless-performance-comparison-workers-lambda/
    Lambda@Edge ͱͷൺֱ
    

    View Slide

53. ͳͥ Cloudflare Workers ͕ Node.js ͳͷ͔
    ▸ ίϯςφͰ͸ͳ͘ V8 Isolates (ϓϩηε) Λ CDN Edge ্ͰฒྻԽ
    ▸ ϦΫΤετ͝ͱʹϓϩηεׂ౰
    ▸ ࠷దԽʹ͸ WebAssembly Λ࢖͏
    https://developers.cloudflare.com/workers/learning/how-workers-works
    

    View Slide

54. CDN Edge Workers ͰԿ͕Ͱ͖Δ͔ʁ
    ▸ ࣗ༝౓ͷߴ͍Ωϟογϡίϯτϩʔϧ
    ▸ ʮࠓͱಉ͡Node.jsΞϓϦ͕ಈ͘ʯΘ͚Ͱ͸ͳ͍
    ▸ CPU੍໿Λຬͨ͢ΞʔΩςΫνϟΛ࠶ߟ͢Δඞཁ
    ▸ ੍ݶΛຬͨͨ͢Ίʹ WebAssembly ͕ΑΓඞཁͱ͞Εͦ͏
    

    View Slide

55. ʮϑϩϯτΤϯυྖҬΛ࠶ఆٛ͢Δʯ
    ·ͱΊ
    

    View Slide

56. কདྷͷల๬
    ▸ TypeScript + Next.js(Nuxt.js)+Rust ͕WebͷϕετϓϥΫςΟεʹͳΔ
    ▸ ͓ͦΒ͘ 2020೥୅͸ Fullstack Node.js or Jamstack+CMS ͕ ʮελʔτ
    ΞοϓքͷJavaʯͰ͋Δ Rails Λஔ͖׵͑ΔͩΖ͏
    ▸ CDN Edge Worker ׆༻Ͱʮ੩తαΠτʯ͕ಈ͖ग़͢
    ▸ WebAssembly ͸·ͩ·ͩރΕͯͳ͍
    

    View Slide

57. ݱঢ়ͷ՝୊
    ▸ ֶशࢿྉͷෆ଍
    ▸ ಈ͖͕଎͍ք۾ͷͨΊɺࢿྉʹ·ͱ·Δ͕࣌ؒͳ͍
    ▸ Node.js քʹ͓͚ΔʮRails Guideʯ͕ͳ͍
    ▸
    

    View Slide

58. ͓ΘΓ
    https://zenn.dev/articles/c638f1b3b0cd239d3eea
    ౤͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ
    ຊൃදͷࢀߟจݙ+ςΩετ൛
    

    View Slide