reactbkk / react-in-patterns-th Goto Github PK

เริ่มจอง: 5 June 2018 18:15 ICT

เริ่มจอง: 5 June 2018 18:45 ICT

เริ่มจอง: 5 June 2018 18:40 ICT

เริ่มจอง วันพฤหัสที่ 7 มิถุนายน 2018, 17:00 น.

Tasks

1. เซ็ตอัพ storybook ในโปรเจกต์ reactbkk/3.0.0

2. เอา UI ของหน้า RedeemDialog มาใส่ใน storybook โดยให้สามารถแสดงผล UI ของ state ต่อไปนี้:

   • initial: { status: 'initial' }
   • error: { status: 'error', error: 'Error message' }
   • signingIn: { status: 'signingIn' }
   • checking: { status: 'checking' }
   • checked (not found): { status: 'checked', code: '', admin: false }
   • checked (found): { status: 'checked', code: 'ABCDEF', admin: false }
   • checked (admin): { status: 'checked', code: 'ABCDEF', admin: true }

   เนื่องจากตอนนี้่โค้ดที่เป็นส่วน logic ของหน้า RedeemDialogContent ยังปนอยู่กับโค้ดส่วนที่เป็น UI ให้แยกโค้ดสองส่วนนี้ออกจากกันก่อนครับ :D

เริ่มจอง: 5 June 2018 18:20 ICT

เริ่มจอง: 5 June 2018 18:25 ICT

เริ่มจอง: 5 June 2018 18:50 ICT

เริ่มจอง: 5 June 2018 18:05 ICT

เริ่มจอง: 5 June 2018 18:30 ICT

เริ่มจอง: 5 June 2018 18:10 ICT

เริ่มจอง: 5 June 2018 18:35 ICT

เริ่มจอง: 5 June 2018 18:00 ICT

ที่มาที่ไปของโจทย์นี้

• เราสามารถทำเว็บให้โหลดเร็วขึ้นโดยการใส่ <link rel="prefetch/preload/prerender/preconnect/dns-prefetch"> เพื่อบอกเบราเซอร์ให้เตรียมโหลดไฟล์เผื่อไว้ใช้ในอนาคต อ่านข้อมูลเพิ่มเติมได้ที่เว็บนี้ครับ: https://css-tricks.com/prefetching-preloading-prebrowsing/

• แต่การต้องมานั่งลิสต์พวกไฟล์ต่างๆ ที่ต้องโหลดด้วยมือเป็นงานที่เหนื่อยมาก จึงมักเป็นหน้าที่ของ Framework ที่จะสร้างแท็ก <link> พวกนี้ให้

• ตัวอย่างเช่น เว็บ React Bangkok 3.0.0 มีการใช้ Gatsby v2 ซึ่งสร้าง <link> แท็กพวกนี้ให้โดยอัตโนมัติ:

  <link rel="preload" href="/3.0.0/static/d/path---index-YgMVy2JJS5mcQ1JxiGrypWcq9U.json" as="fetch" crossOrigin="use-credentials"/>
  <link as="script" rel="preload" href="/3.0.0/component---src-pages-index-jsx-f968477afa4e80f9b9ee.js"/>
  <link as="script" rel="preload" href="/3.0.0/0-7f890f8c04b440c6714b.js"/>
  <link as="script" rel="preload" href="/3.0.0/app-62a4f1198438e5cb738b.js"/>
  <link as="script" rel="preload" href="/3.0.0/webpack-runtime-5d74fac95122c14ed750.js"/>

• การทำเว็บให้โหลดเร็ว อีกท่านึงที่ใช้บ่อยคือการทำ Code splitting ด้วย “Dynamic import()” ทำให้ไม่ต้องโหลดโค้ดทั้งหมดทีเดียว โหลดเท่าที่ต้องใช้แสดงหน้าแรกก็พอ อ่านได้ที่ https://reactjs.org/docs/code-splitting.html

• เราใช้เทคนิคนี้ในเว็บ React Bangkok 3.0.0 เมื่อคุณกดปุ่ม “Redeem ticket” ตัวเว็บจะโหลดไฟล์ที่จำเป็นสำหรับหน้า Redeem ticket แล้วค่อยแสดงผล แต่ถ้าหากคุณไม่กดปุ่มนี้เลย ก็ไม่จำเป็นต้องโหลดโค้ดนั้นแต่อย่างใด

• แต่นั่นหมายความว่าเวลาคุณจะ Redeem ticket ก็ต้องรอสองครั้ง ครั้งแรกรอให้หน้าเว็บโหลด ครั้งที่สองคือรอให้โค้ดของหน้า Redeem ticket โหลด คงจะดีถ้าเราสามารถบอกเบราเซอร์ว่า “ถ้าว่างแล้วช่วยโหลดโค้ดของหน้า Redeem ticket เผื่อไว้ด้วย ยูสเซอร์อาจจะมากด” ซึ่งจริงๆ ก็ทำได้โดยการใส่ <link rel="prefetch">

• Gatsby v2 ใช้ webpack 4 ซึ่งเวลาเราทำท่า Dynamic import() เราสามารถบอก webpack ได้ด้วย ว่าเราอยากจะ prefetch โค้ดไว้ล่วงหน้า เช่น

  function redeemTicket () {
    import(/* webpackPrefetch: true */ '../redeem')
      .then(redeemPage => showPage(redeemPage))
  }

  อ่านได้ที่ https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

  โดยคอมเม้นต์​ /* webpackPrefetch: true */ จะเอา URL ของไฟล์ที่แยกออกไป expose ออกมาทาง build stats ซึ่งพวก static site generator สามารถอ่านข้อมูลนี้ เพื่อนำมาสร้าง <link rel="prefetch">

• ปัญหาคือตอนนี้ Gatsby v2 ยังไม่อ่านข้่อมูลนี้ ผมจึงไปเปิด Issue ไว้ที่ Repo ของ Gatsby: gatsbyjs/gatsby#5683

Task

ส่ง Pull request เพื่อแก้ Issue gatsbyjs/gatsby#5683