ไม่ได้ออกงาน Event ซักพักใหญ่แล้วเป็นอย่างไรกันบ้างครับสำหรับเดือนแรกของปี 2023 งานนี้เป็นงานเกี่ยวกับ React โดยเฉพาะซึ่งตรงกับงานที่ใช้พอดีเลยไป update ความรู้กันหน่อยแล้วก็มาเขียนสรุปงานไว้เผื่อว่าใครไม่ได้ไปงานมาลองดูกันว่ามีอะไรที่เป็นกระแสกำลังมากับหัวข้อ React ยังคุ้มค่าไหมในปี 2023 จัดโดย สมาคมโปรแกรมเมอร์ไทย ร่วมกับ AI and Robotics Ventures (ARV) เป็นอย่างไรไปอ่านกันเลย !!
สำหรับคนอยากดูคลิป
How to build Ring fit app with React Native Unity
Senior Full Stack Developer
พชร สุวรรณวนกุล
@ CARIVA
เป็น Tool สำหรับคนที่อยากเขียน React native ต่อกับ unity แบบส่งค่าไปมาระหว่าง unity <=> react native ครับโดย project ที่เขาเอามาโชว์ app nextcercise
concept ของ app คือการที่เราออกกำลังกายโดยตัวแอพจะสามารถตรวจจับว่าเราออกกำลังกายจริงหรือเปล่าโดย motion capture ( ความสามารถ unity ) แล้วเอามาแลกเป็น coin แล้วก็เอา coin ไปซื้อของต่างๆใน app อีกทีใครงงก็คือ
ออกกำลังกาย -> app ตรวจจับว่าทำครบไหม -> รับ coin เป็นรางวัล -> เอา coin ไปซื้อของ
เนื่องจากติดปัญหาทางเทคนิคนิดหน่อยจึงทำให้ section นี้จบค่อนข้างเร็วแต่ concept ก็คือมี tool สำหรับให้ react native ส่งค่าต่อกับ unity ได้สามารถดูได้ที่นี่เลย
https://github.com/azesmway/react-native-unity
Build UI with Joy, not tears
UI Engineer @ MUI
ศิริวัชร์ คุณาพร
เรื่องต่อมาเป็นเกี่ยวกับ UI Framework โดย ปกติคนที่เขียน React มาสักพักก็น่าจะมี UI Library ที่ใช้บ่อยๆถูกต้องไหมครับเช่น Material UI , AntDesign etc. แต่เนื่องจากคุณศิริวัชร์เขาลองมาหมดแล้วไม่ถูกใจเลยเขียนเอง เลยโดยมันชื่อว่า Joy UI
https://mui.com/joy-ui/getting-started/overview/
โดยตัว Joy UI มันจะ support พวกเรื่องที่น่าปวดหัวเล็กๆแต่รำคาญของ frontend ส่วนใหญ่เพราะคนสร้างเขาก็เป็น frontend เหมือนกันเขารู้ว่าอะไรที่เหมาะสมและปัญหาอะไรที่ UI Framework ตัวอื่นๆไม่มี ยกตัวอย่างเช่น
พวก Card component ส่วนใหญ่คนจะเขียนโดยเอา a tag หรือ Link ไปครอบมันถูกต้องไหมครับ ซึ่งเอาจริงมันผิดทั้ง schema และ accessibility เพราะพวก screen render ( โดยปกติคนพิการทางสายตาจะใช้เพื่อฟังว่าจะเข้า link ไหน ) แต่ปัญหาคือถ้าเราเอา a tag ไปครอบทั้ง card ตัว screen reader จะอ่านเยอะมาก แต่พวกเราคนสร้าง UI ก็อยากทำ a tag ไปครอบ h2 ตรง title การ์ดถูกต้องไหมครับ ซึ่งตัว Joy UI จะ support เหตุการณ์แบบนี้ครับ
โดยตัว Joy UI จะใส่ค่า attribute เป็น overlay ก็จะสามารถคลิกที่ Card แล้วไปที่ link ไปเลยโดยเรายังคงเป็น schema เดิมคือ a tag ครอบ ส่วน title อยู่ครับ
ตัวอย่างต่อไปคือพวก ปุ่ม Switch บางครั้งเราไปปรับอยากให้มันไม่กลม อาจจะเป็น สี่เหลี่ยมมนๆ แต่ถ้าเราปรับข้างใน ตัวกรอบข้างนอกก็ไม่เปลี่ยนตาม เราก็ต้องมานั่ง override พวก class มันตามอีกเพื่อให้หน้าตาเป็นไปแนวเดียวกัน โดยตรงจุดนี้ทาง Joy UI เขาทำเป็นตัวแปรหมดเลยจะได้ปรับทีเดียวแล้วเปลี่ยนหมดเลย
เสร็จแล้วเราสามารถเอา code ที่ทำการ generate จากการปรับแต่งของเราไปใช้งานได้เลย ถือว่าสะดวกมากๆ
อีกเรื่องหนึ่งที่น่ารำคาญคือเรื่องสี เวลาเราต้องการให้สีเป็นไปในทางเดียวกันต้องมานั่งขอคู่สีหรือปรึกษากับทาง Designer อีกซึ่งถ้าสมมติจะทำหน้าตารอ ทาง Joy UI เขาก็คิดมาเพื่อให้แล้ว โดยสีจะทำการ override ตัวที่อยู่ข้างในอีกด้วย เช่น สมมติว่า component หนึ่งอยู่ข้างนอกสีฟ้า แต่พอเอาเข้าอยู่ในส่วนของ invortedColors
จากภาพด้านบนจะเห็นว่า component ส่วนอื่นๆเราอาจจะเอามายัดใส่ในตัว component sidebar แต่ต้องมานั่งปรับสีให้เป็นไปตามตัว sidebar อีกแค่คิดก็เหนื่อยแล้ว แต่ผมจะใส่ค่า attribute invertedColors เข้าไปแล้วดูผลลัพธ์นะครับ
เห็นไหมล่ะสวยเลย อยากลองเล่นไปที่นี่เลยครับ https://mui.com/joy-ui/main-features/color-inversion/#usage
Bun, Next, and React Server Component
Platform Engineer
ก้องเกียรติ คุณพาณิชย์โชติ
@ BRIKL
เรื่องต่อมาเป็นเกี่ยวกับอนาคตของ React แล้วก็เป็นหัวข้อหลักด้วยว่าถ้าเรามาเรียนรู้ Frontend เกี่ยวกับมัน ยังคุ้มค่าจะเรียนอยู่ไหมหรือว่าควรจะไปเรียนอะไรดี มาลองอ่านกันครับ
อย่างแรกคือ ปัจจุบันนั้นมี frontend framework เยอะมากๆในตลาดไม่ว่าจะเป็น 3 ตัวหลัก angular, vue, react หรือที่กำลังมาแรงอย่าง solid, svelte แต่ทำไมเรายังต้องเขียน React อยู่ ?
เหตุผลเพราะ การสมัครงานของบริษัทส่วนใหญ่ยังคงเป็น React ครับยังไม่ค่อยมีการเปลี่ยนไปใช้ tool อื่น อาจจะเป็นเพราะตัวมัน เองมี facebook เป็นตัวหลักด้วยทำให้ความน่าเชื่อถือนั้นสูงมากๆอีกด้วยครับ ถึงแม้ว่าตัว svelte จะน่าใช้ยังไงแต่ project ส่วนใหญ่และการหาคนมาทำงานต่อนั้นยังคงเป็นมันนั่นเองครับ
อีกอย่างที่สำคัญคือ พวก tool support อย่างพวก MUI มันเยอะมาก ในขณะที่ตัวใหม่ๆยังไม่มีพวก UI Framework เลยด้วยซ้ำ หรือว่ามีก็ยังไม่ค่อยดีเท่าไร
What’s next ?
คำถามต่อมาคือแล้วเราจะอยู่กับมัน ไปเรื่อยๆเนี้ยคือจะเตรียมตัวอะไรยังไงต่อ แล้วอนาคตมันจะอยู่อีกนานแค่ไหน เรามาดูกันว่าอนาคตอันใกล้ตอนนี้มีอะไรน่าสนใจบ้างนะครับ ต้องบอกก่อนว่าอันนี้เป็นความคิดเห็นส่วนตัวของ speaker นะครับ
- GO/Rust based tooling สองภาษานี้ต่อไปจะเป็นพื้นฐานหลักในอนาคต พวกคำนวนและ complie ต่างๆแล้วส่วนกลับให้พวก frontend
- E2E Type safety เรื่องนี้คือถ้าใครเคยเขียน typescript จะมีความรำคาญอย่างหนึ่งคือการที่เราต้องมากำหนด type return และ type ตอนรับของ client ต่อไปเราจะสามารถแชร์ type ระหว่าง server, client ได้เลยถ้าเราแก้ type ที่ server ตัว code ส่วน client ก็จะร้องเตือนด้วยเหมือนกัน เราจะไม่ได้ต้องมากำหนดสองที่อีกต่อไปครับ
- Bun คือ Node ที่เร็วกว่า 9-10 เท่า แต่ยังไม่แนะนำให้ใช้บน production เพราะยังไม่ stable น่าจะออกภายในปีนี้
- Elysia.js เหมือน Express เร็วกว่า 14 เท่า !!
สรุป
ผมคิดว่าถ้าใครเพิ่งมาเริ่มเขียน frontend ก็เรียน ไว้แหละครับอย่างน้อยก็หางานได้ง่ายแล้วค่อยย้ายไปอันอื่น พอใช้งานพวกเครื่องมือไปเรื่อยๆเราจะเจอกับปัญหาเองแล้วเราจะค้นพบเครื่องมือใหม่ๆเอง เริ่มตอนนี้ยังไม่สายครับ พยายามต่อไป เจอกันที่งานไหนอย่างลืมมาทักทายกันนะครับ สำหรับบทความนี้ ขอบคุณครับ
https://oxygenyoyo.com/event/the-art-of-testing-reactjs-and-the-emerging-reasonreact/
