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

光を超えるためのフロントエンドアーキテクチャ

 光を超えるためのフロントエンドアーキテクチャ

HTML5 Conference 11/25

Koutarou Chikuba

November 25, 2018
Tweet

More Decks by Koutarou Chikuba

Other Decks in Programming

Transcript

  1. CLIENT SERVER DATABASE KVS INDEXED DB LOCAL STORAGE JAVASCRIPT STATE

    EDGE EDGE CACHE EDGE WORKER BROWSER CACHE SERVICE WORKER CACHE 20~30ms 10~100ms ~μs 1~ms 5~ms (query cost) CLIENT - EDGE - SERVER WITH CACHE
  2. CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI invalidate

    deploy ▸ ϦϦʔε͝ͱʹΩϟογϡ ഁغ(೚ҙ) ▸ ߋ৽ܥͰґଘ͢ΔΩϟο γϡΛഁغ ▸ ΫϥΠΞϯτ͸URLΛ Ωʔʹ֤ϨΠϠʔͷΩϟο γϡΛ໰͍߹ΘͤΔ ▸ Ωϟογϡ͕ͳ͚Ε͹ಈ తʹੜ੒ cache set Ωϟογϡઓུ DEVELOPPER push
  3. CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ:

    ॳճ ▸ /items/123 ͕΄͍͠! ▸ αʔόʔͰ /items/123 ͷ HTML Λ render ▸ Edge Cache ʹอଘ ▸ HTML Λ ฦ٫ cache set
  4. CLIENT EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ೋճ໨Ҏ߱

    ▸ /items/123 ͕΄͍͠! ▸ Edge Cache ͔Β HTML Λฦ٫ ▸ (Service Worker ʹ ΩϟογϡΛ͍࣋ͬͯ Ε͹ɺͦΕΛ༏ઌ) 1~ms 20~ms
  5. CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI ▸

    ྫ: Ωϟογϡഁغ ▸ σʔλϕʔε্ͷ Item(id: 123) Λߋ৽ ▸ Edge Cache ͷ / items/123 Λഁغ invalidate updateItem({id: 123, ...})
  6. ઃܭͷצॴ (3) ▸Ωϟογϡ͢Δͷ͸ HTMLҎ֎Ͱ΋͍͍ ▸Flux Store ͷJSON Λ อଘͳͲ ITEM:123

    COMMENT:345 COMMENT:347 USER:7 JSON RECORD:1 HTML Server Client RECORD:2
  7. ઃܭͷצॴ (4) ▸७ਮؔ਺ͱ෭࡞༻ΛؚΉؔ਺ͷ෼཭ = ؔ਺ܕϓϩάϥϛϯάͬΆ͘ߟ͑Δ fetchItem(id: string): Promise<Item> renderHtml(item: Item,

    comments: Comment[]): string fetchComments(itemId: string): Promise<Comment[]> CACHE MANAGER updateItem(item: Item): Promise<void> CASHE isomorphic renderer renderComponent(item: Item, comments: Comment[]): ReactNode
  8. ෳࡶ͞΁޲͚ͯ: ಈతͳ EDGE ▸AWS Lambda@Edge ▸CloudFlare Workers ▸Fastly Cloud Platform

    Edge ͰJS΍WASMͰෳࡶͳܭࢉ͕Ͱ͖Δ = HTML Λ૊ΈཱͯΒΕΔ = SSRʹศར
  9. ྫ: NEXT.JS ʹΑΔ PRELOAD ࠷దԽ ▸Ϗϧυ࣌ʹؔ࿈ΞηοτΛऩूͯ͠ <link rel="preload"...> Λ head

    ʹૠೖ ▸<Link to="..." prefetch> Ͱ࣍ϖʔδΞη οτΛ <link rel="preload" ...> ʹૠೖ
  10. STEP 1 SERVER STEP 2 STEP 3 CONFIRM ok write

    write write CLIENT LOGIC Rollback on Error ָ؍తUI: ྫ: Ϣʔβʔొ࿥
  11. Client STATE STATE' STATE' STATE' Storage background sync SCRIPT VIEW

    API Aggregate Refer ΫϥΠΞϯτϑΝʔετઃܭ ▸ ΫϥΠΞϯτͷεςʔτ͕ओ ▸ αʔόʔεςʔτ͕ैଐ ▸ Sync / API ͕ू໿͢Δࡍʹ σʔλͷ੔߹ੑͷݕূ
  12. OFF THE MAIN THREAD: Կ͕ղܾͰ͖Δ͔ ▸Scripting: UI Thread ͕ബ͘ͳΔͷͰɺ JS

    ͷॳظԽ࣌ؒΛݮΒͤΔ ▸Universal: ࣗવͱViewͱσʔλΛ෼཭ ͢Δ͜ͱʹ