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

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

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

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

Koutarou Chikuba

November 09, 2020
Tweet

More Decks by Koutarou Chikuba

Other Decks in Technology

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