攻めつづける FRESH! のWeb ver.新春

Af6c71a5ce07091572fa09c5a4728f85?s=47 sutiwo
February 11, 2018

攻めつづける FRESH! のWeb ver.新春

#insideFE #insideFE_B
15:40〜 のセッションです。

Inside Frontend : https://inside-frontend.com/#seminar-b3

Af6c71a5ce07091572fa09c5a4728f85?s=128

sutiwo

February 11, 2018
Tweet

Transcript

  1. 6.

    1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  2. 7.

    1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  3. 8.
  4. 12.
  5. 13.
  6. 14.
  7. 19.

    Payment Request API Ͱ؆୯ɾߴ଎ͳܾࡁΛ࣮ݱ͢Δ | Web | Google Developers :

    https://developers.google.com/web/updates/2016/07/payment-request?hl=ja
  8. 20.
  9. 21.
  10. 23.

    1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  11. 26.

    v15 -> v16 Ͱ΍ͬͨ͜ͱ 1. Fluxible, ֎෦UIίϯϙʔωϯτΛΞοϓσʔτ 2. <Fragment />

    , return string ͷ࢖༻ 3. SSRͰ renderToStream ॻ͖׵͑
  12. 33.

    Benchmark 0 750 1500 2250 3000 Avg Stdev Max 1.921

    179 491 2.504 465 954 v15.5.4 v16.0 ms
  13. 34.

    renderToString -> renderToNodeStream -SSR ࣌ ReactElement Λॳظͷ HTML ʹඳը͢Δ -Node.js

    ͷ StreamAPI Writable Λ࢖ͬͯඇಉظॲཧ -metaλάͷ࡞੒Ͱ෭࡞༻͕ൃੜ (ޙड़)
  14. 35.

    Request1 -> Request1 ͷ renderToNodeStream -> Request2 -> Request2 ͷ

    renderToNodeStream -> Request2ͷ .on(‘finish’) Metadata Λऔͬͯdispose(ΫϦΞ)͢Δ -> Request1ͷ .on(‘finish’) Metadata ͕ۭʹͳΔ ෭࡞༻ εϨουηʔϑ
  15. 36.

    Request1 -> Request1 ͷ renderToNodeStream -> Request2 -> Request2 ͷ

    renderToNodeStream -> Request2ͷ .on(‘finish’) Metadata ΛऔͬͯΫϦΞ͢Δ -> Request1ͷ .on(‘finish’) Metadata ͕ۭʹͳΔ ෭࡞༻ εϨουηʔϑ metadata Λ contextɺfluxͳͲάϩʔόϧεςʔτ΁
  16. 38.

    1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  17. 49.
  18. 51.
  19. 55.

    - Node.js =< 8 async/await ࢖͑Δ - Transpile ෆཁ -

    ςετ߲໨+αͷػೳ
 (ScreenShot, FMPͷܭଌ)
  20. 57.
  21. 61.

    1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda