แชร์เรื่องนี้
โดย Seven Peaks เมื่อ 2 ส.ค. 2022, 11:17:00
สรุปสาระสำคัญจากงาน meetup โดยผู้เชี่ยวชาญด้าน frontend
เมื่อวันที่ 29 มิถุนายน 2565 ที่ผ่านมา Seven Peaks Software ได้จัดงาน online meetup ขึ้นมาที่ออฟฟิศของเรา โดยพูดถึงเรื่องของฟีเจอร์ใหม่ใน React 18 หลังจากที่ React 18 ได้ออกเวอร์ชันใหม่มาเมื่อเดือนมีนาคม 2565 โดยเน้นที่การปรับปรุงด้านประสิทธิภาพและอัปเดต rendering engine ใหม่
ในงานครั้งนี้ เราได้พูดถึงความเปลี่ยนแปลงที่เกิดขึ้นในอัปเดตของ React 18 และอนาคตของการพัฒนาเว็บไซต์และแอปพลิเคชัน อ่านต่อได้ข้างล่างนี้เลย
5 ฟีเจอร์เด่นใน React 18
งานเริ่มด้วยวิทยากรท่านแรก คุณนนท์ พัชรนนท์ วงศ์เมธานุเคราะห์ ที่มาพูดถึงเรื่องความเปลี่ยนแปลงและฟีเจอร์ใหม่ใน React 18
คุณนนท์เป็น frontend web developer ของเรา ซึ่งมาบรรยายเกี่ยวกับอัปเดตใหญ่ของ React ซึ่งเป็น frontend javascript library ที่เป็นที่รู้จักกันดี เขามีประสบการณ์ทำงานกว่า 2 ปีที่ Seven Peaks Software ในด้าน React typescript และ Material UI library
ในงานนี้ เขาได้บรรยายครอบคลุมทั้งเรื่องของ automatic batching, APIs ใหม่อย่าง startTransition การสตรีม server-side rendering พร้อมการรองรับ Suspense, และอัปเดตเกี่ยวกับฟีเจอร์ concurrent
คุณนนท์เริ่มพรีเซนเทชันด้วยการพูดถึงความเปลี่ยนแปลงที่เกิดขึ้นในส่วนของ rendering root แบบที่คุณสามารถเห็นได้จากโค้ดข้างล่างนี้ ซึ่งเปรียบเทียบให้เห็นว่า React 17 กับ 18 แตกต่างกันอย่างไร
จากนั้นเขาจึงพูดถึงเรื่องของการเปลี่ยนแปลงเกี่ยวกับ Typescript
คำแนะนำก็คือ หากโปรเจกต์ของคุณใช้ Typescript คุณก็ต้องอัปเดต dependencies type ให้เป็นเวอร์ชันล่าสุดเสียก่อน ซึ่ง type ใหม่จะมีความปลอดภัยมากกว่าและสามารถตรวจพบปัญหาที่เคยถูกมองข้ามโดย type checker ในเวอร์ชันเก่าได้
ความเปลี่ยนแปลงที่สังเกตได้ชัดเจนที่สุดคือ children props ที่ตอนนี้จำเป็นต้อง list แบบ explicit เมื่อต้อง define props ตามตัวอย่างนี้
มาต่อกันด้วยเรื่อง automatic batching ซึ่ง React 18 ได้ปรับปรุงฟังก์ชัน batching ใหม่ด้วยการใช้ชื่อว่า Automatic Batching
ต่อมาเขาก็พูดถึงความเปลี่ยนแปลงของ strict mode ใน React ซึ่งก่อนหน้านี้ React จะ mount component แล้วจึงสร้าง effect ตามในภาพข้างล่างนี้
จากนั้นก็พูดถึงเรื่อง concurrency ซึ่ง React 18 เองก็ถูกพัฒนาขึ้นด้วยการคำนึงถึง concurrent rendering อยู่แล้ว
ความหมายของ concurrency คือการที่ UI สามารถตอบสนองต่อ user input ได้แม้ว่าพวกเขาจะกำลังทำอย่างอื่นอยู่ก็ตาม ซึ่งการตอบสนองต่อ user input ได้แม้ว่ากำลัง render task ขนาดใหญ่อยู่ทำให้เกิดประสบการณ์ในการใช้งานที่ราบรื่น
นอกจากนี้ยังมีเรื่องของ Hooks API ตัวใหม่ รวมถึง API ใหม่ๆ ใน React 18 เช่น
- startTransition()
- useDeferredValue()
- useId()
- useSyncExternalStore
- useInsertionEffect()
คุณนนท์จบการบรรยายด้วยเรื่องของ Suspense และอัปเดตของ ReactDOMServer ซึ่ง Suspense คือหนึ่งในฟีเจอร์ใหม่ของ React 18 ที่ทำให้ component สามารถ “รอ” อะไรบางอย่างก่อนทำการ render ได้ ในขณะที่ code splitting ก็สามารถทำงานกับ server-side rendering ได้
ทำความรู้จักกับ Vite
วิทยากรท่านที่สอง คุณกรกนก ได้มาพูดถึงเรื่องเครื่องมือยุคใหม่ในการพัฒนาด้าน frontend
เขารู้ดีว่าบางครั้งการใช้ web bundler อาจเป็นเรื่องยุ่งยาก ดังนั้น ในเซสชันนี้ เขาจึงพูดถึงเครื่องมือทางเลือกที่ออกแบบมาเพื่อทำให้กระบวนการพัฒนานั้นมีความเรียบง่ายและรวดเร็วมากขึ้น เป็นการปรับปรุงเวิร์กโฟลว์ให้ดีขึ้น ซึ่งเจ้าเครื่องมือนี้มีชื่อว่า Vite
Vite คือ build tool สำหรับการพัฒนาด้าน frontend โดยฟังก์ชันการใช้งานหลักคือการทำให้การพัฒนารวดเร็วขึ้น
มันช่วยปรับปรุง start time ของ dev server ด้วยการแบ่งโมดูลในแอปพลิเคชันออกเป็นสองประเภท คือ dependencies และซอร์สโค้ด
Vite คือเครื่องมือที่ใช้สิ่งที่เข้ามาปรับปรุงระบบนิเวศของ Javascript เมื่อเร็วๆ นี้เพื่อทำให้การพัฒนามีประสิทธิภาพขึ้นอย่าง ES Modules ในเบราว์เซอร์ และ compile-to-native bundler tool อย่าง esbuild
การมี ES modules ให้ใช้ในเบราว์เซอร์ทำให้คุณสามารถรันแอปพลิเคชัน Javascript บนเบราว์เซอร์ได้โดยไม่ต้อง bundle พวกมันเอาไว้ด้วยกัน
ฟีเจอร์ของ Vite:
- การ import ไฟล์ .ts ได้โดยไม่ต้องติดตั้งอะไรเพิ่มเติม
- Vite จะทำการ transpile บนไฟล์ .ts และจะไม่ตรวจสอบ type เพราะมันจะคิดว่าการตรวจสอบ type นั้นเป็นหน้าที่ของ IDE อยู่แล้ว
- Vite ใช้ esbuild เพื่อ transpile Typescript เป็น Javascript ซึ่งจะเร็วกว่า 20-30 เท่าเมื่อเทียบกับ vanilla tsc และอัปเดตของ HMR จะแสดงผลในเบราว์เซอร์ภายใน 50 มิลลิวินาที
การสร้าง component library
วิทยากรท่านสุดท้ายของเรา คุณ Georgii Shestakov ปิดท้ายงาน meetup ครั้งนี้ด้วยการพูดถึงความสำคัญของการสร้าง component library
ถ้าหากคุณทำงานอยู่ในบริษัทที่มีหลายโปรเจกต์ คุณอาจจะต้องใช้งาน component เดิมซ้ำๆ ก็ได้
ในกรณีนี้ การสร้าง component library อาจจะเป็นการลงทุนที่ดีที่สุดที่คุณสามารถทำได้ และคุณ Georgii developer ผู้มีประสบการณ์สูงของเราจึงมาบอกว่าเทคโนโลยีอะไรที่ควรใช้และจะต้องเจอกับปัญหาอะไรบ้าง
คุณ Georgii มีประสบการณ์ในการพัฒนาซอฟต์แวร์มานานกว่า 15 ปี ทั้งในส่วนของ backend และ frontend สำหรับเว็บแอปพลิเคชัน
โปรเจกต์ของเรามักใช้วิธีการพัฒนาแบบ test-driven และเทคนิค Agile นอกจากนั้น เขายังสนใจในเรื่อง data science และ machine learning อีกด้วย
เขาแนะนำว่าควรใช้เครื่องมืออย่าง Emotion, Typescript, Babel, Rollup.js, และ Storybook เพื่อสร้าง component library ขึ้นมา โดยเขาอธิบายรายละเอียดเครื่องมือแต่ละชิ้นอย่างละเอียด รวมถึงฟีเจอร์และประโยชน์ที่จะได้รับด้วย
จากนั้นก็พูดถึงเหตุผลที่คุณต้องสร้าง ESM ควบคู่กับ CommonJS
หลังจบประเด็นดังกล่าว เขาก็เตือนว่าเราควรระวังให้ดีเมื่อจะเพิ่มอะไรเข้าไปใน dependencies และแนะนำว่าไม่ควรเพิ่มไลบรารีหนักๆ ที่เป็น third party เข้าไปเป็น dependencies ด้วย
จากนั้นก็พูดถึงแนวทางที่ควรปฏิบัติในการนำ component กลับมาใช้ใหม่ ซึ่งเขาแนะนำเกี่ยวกับเรื่องนี้ว่า
- การ expose properties ที่ถูกต้องทำให้ component มีความยืดหยุ่นเมื่อมีคนนำไปใช้งานต่อ
- อย่าใส่ component ที่มีเคสการใช้งานแคบเกินไปลงไปในไลบรารี
- ทำเอกสารแนะนำการใช้งานสำหรับแต่ละ component ที่จะนำกลับมาใช้ใหม่
- เริ่มจาก component ที่เล็กที่สุดก่อน (atoms)
- ใช้ React เวอร์ชันที่มีความต้องการต่ำที่สุด
ในตอนท้าย คุณ Georgii ปิดการบรรยายด้วยการพูดถึงความสำคัญของการประกันคุณภาพให้แต่ละ component ในไลบรารีก่อนที่จะใส่พวกมันเข้าไปในโปรเจกต์ รวมถึงระบบอัตโนมัติและการสร้าง component ด้วย คุณสามารถดูข้อมูลเพิ่มเติมในส่วนนี้ได้จากวิดีโอข้างล่างนี้
ถ้าคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการ deploy แอปพลิเคชันที่พัฒนาบน React สามารถอ่าน บทความนี้ได้