ReactBKK 2.0

มีโอกาสได้เข้าร่วมงาน ReactBKK 2.0 จัดที่ปทุมวัน โดยรวมถือว่างานจัดออกมาได้ดี เนื้อหาก็น่าสนใจ ตอนเช้าไปถึงก็เจอพี่ต๊อบอยู่หน้างานเลย เพิ่งเจอกันไปตอนงาน Golang ก็เข้าไปทักทายแล้วก็เข้างานไปกับพี่ต๊อบ รับเสื้อ ไซส์ L หมด เลยได้ XL มาแทน ก็ใส่ได้อยู่

พิธีเปิดงาน ก็มีอาจารย์มาพูดเปิดงาน ประชาสัมพันธ์งานต่างๆของทางคณะ ก็เป็นปกติที่ไม่น่าจะมีใครฟัง เราก็มองหาคนรู้จักไปเรื่อย จนพี่กุ้งที่นัดกันไว้ก็มาถึง จบพิธีเปิดพอดี ก็ตัดสินใจกันว่าจะไปห้อง Intermidiate กัน เดินลงบันได 7 ชั้น แล้วก็ขึ้นอีก 5 ชั้น

Scalable React app architecture โดยคุณ Zack Siri

คนนี้พูดถึงเรื่องที่เค้าทำ SPA (Single page application) แล้วเจอปัญหาอะไรมาบ้าง แล้วแก้ยังไง ก็มาเล่าให้ฟังเป็นแนวทางในการแก้ปัญหากับของเราเอง

การวางโครงสร้างไฟล์เค้าเลือกที่จะวางเป็น App, Lib, Vendor

• App เป็นโค้ดที่เค้าเขียนเองทั้งหมด ซึ่งข้างในก็จะแบ่งย่อยๆเป็น Page กับ Component อีกที
• Lib คือโค้ดที่เค้าเขียนเอง และสามารถใช้ซ้ำในโปรเจคอื่นๆ หรือโค้ดที่เอามาจากของโปรเจคอื่นๆได้ แบบพวก Component พื้นฐาน
• Vendor คือโค้ดที่เค้าไม่ได้เขียนเอง ส่วนนี้จะแตกต่างจาก node_modules แค่ว่ามันไม่มีให้ดาวน์โหลดใน npm หรือต้องการแก้ไขบางอย่างนิดหน่อย

ต่อมาก็เป็นเรื่อง Config เค้าก็โหลด config ตาม environment ที่กำหนดตอนรัน

เรื่อง State mangement เค้าเลือกใช้ MobX และโฆษณาว่าดีกว่า Redux แต่ได้รับความนิยมน้อยกว่า ส่วนตัวเราเองก็ยังไม่เคยใช้ MobX ถ้ามีโอกาสก็น่าจะได้ลองอยู่ มีคนเชียร์ขนาดนี้

เรื่อง Animation เค้าเลือกใช้ package ชื่อ animate อะไรสักอย่าง ดูง่ายมาก เพิ่ม Property ไป 2 ตัวก็ใช้ได้เลย ดูดีมาก

ก็มีหลายๆอย่างที่เค้าเล่ามาน่าจะเอาไปลองใช้กับงานเราได้ ถ้ามีโอกาสก็น่าจะลองดู

BDD in React Native โดยคุณ Tim Plan for fit

เซสชั่นนี้เสียดายมาก ไปเข้าห้องน้ำได้ฟังติ๊ดเดียว หลักๆคุณฮิมจะพูดเรื่อง กระบวนการการทำ QA ว่าใครทำ ทำยังไงดี มีแนะนำหนังสือ สามเล่ม ทฤษฏียันปฏิบัติ จำชื่อไม่ได้แล้ว จากนั้นกลับมาอีกทีก็ไม่ทันแล้ว เค้าโชว์เรื่องการเทส React native ด้วย -package อะไรสักอย่าง- ซึ่งสามารถประกาศเทสเป็นภาษาไทยได้ แล้วยังสามารถ export เป็น static html file ได้อีกด้วย เหมาะกับการ ส่งให้คนทางฝั่งบริหารดูอย่างมาก

Lightning talk

หลังจากที่เค้าเลี้ยงข้าวกลางวันแล้ว ก็จะมีคนมาพูดถึงของที่น่าสนใจให้ฟัง

• Jitta มาเล่าให้ฟังว่าเค้าใช้ Node มาตั้งแต่ 0.4 (2012) ผ่านมาเยอะ เจ็บมาเยอะ ก็ค่อยๆปรับเปลี่ยนมาเรื่อย ตั้งแต่ ember bootstrap พอมาใช้ React ก็ใส่ลูกเล่นได้มากขึ้น ตัวเว็บมีความสามารถมากขึ้น
• Expo เป็นตัวช่วยให้รัน Native บนเครื่องจริงได้สะดวกขึ้น สั่งรันแล้วเราจะได้ QR Code มา สแกนปุป รันในเครื่องจริงได้เลย แล้วก็มีหน้าจอมือถือให้ดูบนคอมอีกด้วย ทำงานเป็น Hot reload ได้เลย
• Web component เป็นมาตราฐานที่ให้เอา component ใช้ข้ามเว็บได้ เรียกผ่าน api ของ เบราเซอร์ ได้ยินมานานแล้วเพิ่งรู้ว่ามันคืออย่างนี้นี่เอง React เองก็สามารถสร้าง Web component ได้ หรือจะอิมพอทมาใช้ก้ได้เช่นกัน
• GraphQL อันนี้เคยลองใช้มาบ้างแล้ว เลยไม่ได้ตั้งใจฟังเท่าไหร่ ตัวอย่างบนสไลด์ดูไม่รู้เรื่อง มองไม่เห็น
• Apollo client เป็น GraphQL client เค้าโฆษณาว่าดี ใช้ง่าย มีฟีเจอร์เด่นๆเลยก็คือ Redux integrated, caching, batch request กับอะไรอีกอันสองอัน จำไม่ได้แล้ว

Styled Components: Change your CSS styling mindset โดยคุณ Yanin Tuamsuk

เป็นหัวข้อที่น่าสนใจพอสมควรเลย คนฟังล้นห้อง ได้หนังข้างหลัง มองสไลด์ไม่ชัด บวกกับการทำเราใช้ className มาตลอด(ออกแบบเองไม่เป็น) เลยไม่เข้าใจเท่าไหร่ 555 เค้าพูดถึง การทำ Styled Component 2.0 ในท่าต่างๆ

• การใช้ Template literal ของ es ประกาศ style ได้อย่างสร้างสรรค์
• การใช้ inline if-else ใน style
• การใช้งานร่วมกับ css classname หรือ sass
• การแก้ไขปัญหาเรื่อง generated-style เช่น component วิ่งตาม เมาส์
• การรียูสสไตล์

สรุปแล้วที่ Jitta เปลี่ยนมาใช้ตัวนี้ ทำให้ขนาดสไตล์ของเค้ารัดกุมขึ้น จากแต่ก่อนเอาของ bootstrap มา overwrite บางส่วน ทำให้มีโค้ดเหลือที่ไม่ได้ใช้อยู่ประมาณ 50%

ความเจ๋งของเซสชั่นนี้คือ เค้าใช้ styled component ทำสไลด์เลย ตามไปดูได้ที่นี่

Testable React: Patterns and comparison โดยคุณ Chakrit Likitkhajorn

เซสชั่นี้จะพูดถึงเรื่องการเทสบน React ที่ Taskworld ทำกัน เค้าจะแบ่งการเทสเป็น 3 แบบ

• Dumb Component (รับ prop แล้ว render ไม่ทำอย่างอื่น) พวกนี้เค้าเลือกที่จะใช้ Storybook ในการเทสสิ่งที่เป็น visualize คือตั้งค่า prop ใน combination ต่างๆ แล้ว Story book จะเรนเดอร์ให้ดู เราก็ต้องตรวจเองด้วยสายตา
• Component ที่มี logic แต่ต้องไม่ใช่ business rule เช่น เอาเมาส์ชี้ตรงนี้แล้วต้องไฮไลท์ (ในความเข้าใจของผมก็คือ component ที่มี หลายๆ component ข้างใน interact กับ user) พวกนี้เค้าเทสด้วย Enzyme
• Business rule เทสแยกออกไปเป็นเทส js ธรรมดา อาจจะใช้ท่า Inject เข้าไปใน component ก็ได้ เวลาที่ business เปลี่ยน จะได้แก้เทสแค่เคสเดียว ไม่ได้พ่วงกันหมด เทสของ component นั้นก็สามารถ mock rule เอาได้

ที่ Taskworld ไม่ชอบ Selenium test จะใช้เทสแค่พวกที่สำคัญมากๆเท่านั้น เช่น ล็อคอิน จ่ายเงิน เนื่องจากมันช้าเสียเวลา และยังไว้ใจไม่ได้อีกด้วย รันบางทีก็ผ่าน บางทีก็ไม่ผ่าน เค้าเองก็ค่อยๆทำเทสเพิ่มเรื่อยๆ ตอนนี้ Coverage 60% แล้ว

Lessons Learned from using Next.js in Production โดยคุณ PanJ TakeMeTour

ในเซสชั่นนี้ เค้าเล่าให้ฟังว่าทำยังไงให้หนเาแรกใชเงานได้เร็วที่สุด ก็ใช้วิธีดังนี้

• ทำ SSR(Server side rendering) เพื่อให้เกิดการ render ก่อนที่จะโหลด js เสร็จ คือ render หลังจากโหลด css เสร็จ
• แนบสไตล์ที่จะใช้ในหน้านั้นไปกับไฟล์ html เลย เพื่อที่จะให้ render ก่อนที่จะโหลด css เสร็จ คือ โหลด html ไฟล์เดียว ก็จะ render ได้เลย
• แบ่งไฟล์ js เป็น chunk ที่เค้าใช้คือ หน้าละ chunk เพื่อให้โหลดเสร็จเร็วขึ้น เมื่อ chunk ของหน้านั้นโหลดเสร็จก็จะสามารถ interact ได้ทันที
• แยกเว็บเป็นสองส่วน static กับ dynamic ส่วนที่เป็น static ให้ใช้ NextJS จัดการ แล้วมี router ข้างในเชคปลายทางว่าไปที่ไหน ซึ่งส่วนที่เป็น static เค้าก็ใช้ caching จัดการ ตั้งอายุไว้ 1 ชั่วโมง แล้วก็เอาตัว router กับ cache ไปวางไว้ทั่วๆ ตามฐานผู้ใช้งาน ผลลัพท์ออกมา 1 page load โดยรวมดูเร็วกว่า github เสียอีก สุดยอดมาก

สาเหตุที่ต้องทำให้หน้าแรกใช้งานได้เร็วที่สุดก็คือ ผู้ใช้ 50% จะปิดเว็บทิ้งถ้าหากโหลดไม่เสร็จภายใน 3 วินาที ส่วนสไลด์อยู่ที่นี่

Fire side chat

• type vs non-type ถ้าใหญ่ก็ควรต้อง type เพราะมันจะลดการผิดพลาดได้มากกว่า non-type
• definition of done คือคนในทีมต้องตกลงกันเอง ประเด็นคือหัวหน้ากับคนทำต้องเข้าใจตรงกันว่า เสร็จ คืออะไร

หลังจากนั้นก็กลับบ้านแล้ว เพราะมีนัดไปงาน ComDE ที่จุฬา เลยกลับออกมาก่อน งานนี้ได้รู้จักคนเพิ่มอีกสองคน กับรุ่นพี่รุ่นน้องในภาคที่ไม่ได้เจอกันนานแล้ว พอเขียนเรื่องเริ่มยาวก็ชักอยากได้กล้องละ ไม่มีรูปแทรกระว่างย่อหน้าเลย