Videos → ฟีเจอร์ใหม่ใน Material UI v6 ที่ต้องรู้

แนะนำ Material UI เวอร์ชัน 60:00

โอเคครับ ตอนนี้ใกล้เวลาบ่าย 3 ครึ่งแล้วนะครับ ก็เดี๋ยวจะเปิด session ต่อไปเลยครับ ใน session ต่อไปนี้ก็จะเป็นเรื่องเกี่ยวกับ Material UI นะครับ ที่เมื่อ 2-3 สัปดาห์ที่แล้ว ปล่อยเวอร์ชัน major 6 มา หลังจากกี่ปีนะครับ พี่จุ้น 3 ปีนะครับ ก็มีอะไรมาใหม่ใน Material UI นี้ ก็ขอเชิญพี่จุ้น Core Contributor ของ Material UI ครับผม

สวัสดีครับทุกคน ไม่ได้มาพูดนานมาก เพราะว่าติดอยู่กับอีเวอร์ชันนี้แหละ ก็

สวัสดีครับ ผมชื่อจุ้น ตอนนี้ทำงานเป็น software engineer อยู่ที่บริษัทชื่อ MUI นะครับ มีใครไม่เคยใช้บ้างไหมครับ

ไม่มีนะ เป็นคำถาม พอรู้ว่าไม่มีใครยกมือ

Material UI คืออะไร? Stat และเบื้องหลังบริษัท MUI0:57

สำหรับใครที่ไม่รู้ว่ามันคืออะไร เดี๋ยวเกริ่นอีกนิดนึง ตัวนี้ โลโก้นี้นะครับ เป็น open source React component นะครับ ที่เพิ่งครบ 10 ปีไปเมื่อประมาณสัปดาห์ที่แล้วนะครับ ถือว่าเป็น library ที่อยู่มาค่อนข้างนานนะครับ แล้วก็เริ่มจะมีคนไม่ค่อยใช้กันแล้ว ไม่ใช่ อันนี้เป็น stats เล็กๆ น้อยๆ ละกัน ให้ทุกคนเห็นก่อนว่าโปรเจกต์อ่ะ มันเป็นโปรเจกต์ size ที่ค่อนข้างใหญ่นะครับ มีฐานคนใช้งานอยู่ค่อนข้างเยอะ เป็นเรื่องสำคัญมาก ที่ผมเข้ามา ผมก็เริ่มจะเห็นนะว่าโปรเจกต์ size ใหญ่ๆ เนี่ย เวลาที่เราจะตัดสินใจทำอะไรเนี่ย มัน ต้องคิดเยอะมากกว่าเขียนโค้ดนะครับ คือ ณ ปัจจุบันเนี่ย คนใช้งานตัวเว็บไซต์นะ มันจะมี mui.com เนี่ย คือเข้ามา documentation อะไรพวกนี้นะครับ อยู่ที่ประมาณล้านคนนะ ต่อเดือน ก็ถือว่าค่อนข้างเยอะ อันนี้ global นะครับ ทั่วโลก แล้วก็ยอดดาวน์โหลดนะ ปัจจุบันเนี่ย อยู่ที่ประมาณ 4 ล้านครั้ง อันนี้จาก npm

ต่อสัปดาห์ ซึ่งคิดเป็นประมาณ 18% ของตัว React DOM ก็คือ React บนเว็บนะครับ ก็นับว่าค่อนข้างเยอะนะ React บนเว็บ ก็ตอนนี้น่าจะเยอะที่สุด ในตลาดของ framework การทำเว็บใช่มั้ย

ก็คิดว่าไม่น่าจะมีใครที่ไม่ใช้ React เนาะ จะมี Vue อยู่คนนึง แต่ไม่เป็นไร

สำหรับตัวบริษัท บริษัทเราเริ่มมาจาก open source นะครับ แล้วก็ พอมันมีการใช้งาน คนเริ่มเห็น ใช้งานเยอะขึ้นเนี่ย มันก็เริ่มขยายออกมาเป็นทั้ง open source คือบริษัทเรา drive ด้วย open source แล้วก็ เริ่มจะมี paid product นะครับ เพื่อเอามา เรียกว่า หมุน นะครับ หมุนตัวบริษัทได้ ก็ตอนนี้มีประมาณ 38 คนในบริษัท จาก 25 ประเทศ ก็ถือว่าเป็นบริษัทที่แบบ ค่อนข้างจะหลากหลาย culture มากนะครับ อยู่ทั้งฝั่งเอเชีย ยุโรป แล้วก็ฝั่งที่เป็น US นะครับ

ลูกค้าของ MUI และที่มาของรายได้3:10

โอเค อ่ะ ถ้าถามลูกค้าจริงๆ เพราะว่าผมรู้สึกว่า บางคนจะมีความสงสัยนะว่า เฮ้ย เดี๋ยวนะ คือเป็นบริษัท open source เอาเงินมาจากไหนวะ ใช่มั้ย ก็เรามีทั้งพาร์ทที่เป็นขายด้วยนะ ขาย product อะไรอย่างเงี้ย คือสิ่งที่ผมทำอ่ะ มันเป็น open source ทั้งหมดเลย เอ่อ ผม ทีมที่ผมอยู่แล้วกัน open source ทั้งหมด เพราะฉะนั้นก็จะไม่ได้มีเงินเข้ามา เอาง่ายๆ ผมก็คือผลาญเงินบริษัท ทุกวันทุกวันนะครับ แต่มันก็จะมีพาร์ทที่ขาย product ให้กับ บริษัทอื่นๆ ซึ่งลูกค้าหลากหลายนะครับ ก็จะมีทั้งเนี่ย

Fortune 500 ทั้งหลายนะครับ อยู่ในทุกๆ อุตสาหกรรม ก็จะเหมือนกับเข้ามาซื้อ license อะไรต่างๆ อย่างเงี้ยครับ แล้วก็นั่นแหละ เงินพวกนั้นก็คือเอามาจ่าย แบบพนักงานนะครับ อันนี้ให้เห็นคร่าวๆ นะครับ ว่ามันมี บริษัทประมาณนี้ ซึ่งจริงๆ มันมีเยอะมากนะครับ ทุกๆ เดือน CEO เค้าก็จะมา เล่าให้ฟังว่า เฮ้ย เรามีบริษัทอะไรเข้ามาซื้อ product เราบ้าง อันนี้ก็นึกว่าเปิดโลกเหมือนกัน ตอนที่ผมเข้าไปเห็นครั้งแรกก็ เฮ้ย ไอ้พวกนี้มันซื้อด้วยเหรอวะ แบบ ทำไม Microsoft ต้องมาซื้อ อะไรเกี่ยวข้อง กับ Material UI วะ

แค่รู้ว่าเค้ามาซื้อ license นะ แต่ไม่ได้รู้ว่าเค้าเอาไปทำอะไร ต้องบอกอย่างนี้

Material UI v6: เปลี่ยนแปลงเพื่อรองรับ React Server Component4:31

โอเค ทีนี้เดี๋ยวเรามาเข้าเรื่องกันเลยดีกว่าว่า Material UI เวอร์ชัน 5 นะครับ ก็คือปล่อยประมาณ 3 ปีที่แล้ว ผ่านมาประมาณ 3 ปีเนี่ย ก็คือเราพัฒนาตัวเวอร์ชัน 6

เวอร์ชัน 6 เนี่ยเริ่มพัฒนามาประมาณปีนึง เราก็ใช้เวลาค่อนข้างจะนานพอสมควร เพราะว่า พวกเราน่าจะทราบว่า ไอ้ช่วงปีที่ผ่านมาเนี่ยมันมี React มันมีการเปลี่ยนผ่านที่เป็น ไปทาง server เนี่ยค่อนข้างจะเยอะนะครับ เลยทำให้ เรื่องของการทำเรื่อง stylesheet เรื่อง CSS อะไรพวกเนี้ย เรียกว่ามันเปลี่ยนโมเดลในการเขียนออกไปนะ

CSS in JS และปัญหาในการจัดการ Server-Side5:09

มีใครเคยใช้แบบ CSS in JS ไหม

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

ecosystem ของ JavaScript มันก็จะเริ่มโตขึ้น โตขึ้นใช่ป่ะ เริ่มมี webpack เริ่มมีอะไรพวกนี้ ทำ module optimization อะไรพวกเนี้ย CSS ก็เป็นพาร์ตหนึ่งที่โปรแกรมเมอร์ ฝั่ง JavaScript ก็อยากที่จะ เอาเข้ามาอยู่ในโลกของ JavaScript ด้วย มันก็เลยเกิดเป็น CSS in JS ขึ้นมา ทำให้เราเขียนอยู่ในไฟล์ JavaScript อันเดียว เขียน CSS เขียน HTML อะไรทุกอย่างยำลงไป นะครับ แล้วมันก็ ปัญหาที่ตามมา จริงๆ อย่าเรียกว่าปัญหาเลย เรียกว่า consequence แล้วกัน มันก็จะเป็นเรื่องความยุ่งยากในการ manage ฝั่ง server-side นะครับ อันนี้ก็จะมีความปวดหัวของ open source ทั้งหลายนะครับ

ทีนี้เวอร์ชัน 6 เนี่ย เราก็… ตัวนั้นน่ะ เดี๋ยวจะเป็นสิ่งที่ผมจะอธิบายให้ฟังตอนสุดท้ายว่า เรามีวิธีการแก้ปัญหาตรงนั้นยังไงนะครับ เพราะว่า พาร์ตหลักๆ ที่มัน drive ให้เราออกจาก CSS in JS เนี่ย ก็คือ

ตัว Next.js นะครับ ที่เขาออกตัว React Server Component มาใช่ไหม แล้วทุกอย่างเนี่ย มันก็ควรจะเป็น static อ่ะ คือเขาจะแบบ กูจะ static อย่างเดียว server-side เอ่อ อยู่ข้างบน server ตลอดอะไรเงี้ย เพราะฉะนั้นเนี่ย CSS in JS มันจะไม่ค่อยเวิร์ก เพราะฉะนั้น Material UI component ณ ตอนเนี้ย มันก็เลยเป็น client component กันหมดนะครับ เพราะฉะนั้นเราก็ได้เหมือนกับโดน push มาจากฝั่งผู้ใช้งาน จากฝั่งบริษัท จากลูกค้า ว่าเมื่อไหร่มึงจะทำสักที ให้มัน support ไอ้ React Server Component เราก็เลยต้องพยายามหา solution ต่างๆ เพื่อให้ เพื่อให้เราสามารถจะ migrate โค้ด โดยที่เราไม่ต้องแก้โค้ดเยอะ อันนี้คือ เป็นอีกส่วนหนึ่งนะที่ผมได้เรียนรู้ พอมาทำ open source นะครับ เรื่องของ stability เดี๋ยวผมจะมาพูดตอนสุดท้าย

ฟีเจอร์ใหม่ใน Material UI v6: Dark Mode ที่ดีขึ้น7:26

เรามาเริ่มจากฟีเจอร์แรกกันก่อนว่า

เวอร์ชั่นหกมีอะไรใหม่บ้าง อย่างแรกก็คือ เรื่องของ dark mode ที่เราปรับปรุงให้มันดีขึ้น แล้วก็ง่ายขึ้นนะครับ เดี๋ยวผมจะเปิดโค้ดให้ดู

จริงๆ เปิดไว้แล้ว โอเคครับ อันนี้เป็น… ขอขยายนิดหนึ่ง

อันนี้ก็เป็น Material UI Component นะครับ ที่จริง ๆ อันนี้เป็นเวอร์ชัน 6 แล้ว แต่ว่ายังไม่ได้ ใส่ฟีเจอร์ใหม่เข้าไป อันนี้เป็น blog page ธรรมดา ไม่ใช้ Material UI Component นะ ทีนี้ มีใครในนี้ทำ dark mode ให้กับเว็บไซต์ของตัวเองบ้าง มีใครไหม สมัยนี้ dark mode มันก็น่าจะเป็นพื้นฐาน ทีนี้ใน Material UI เวอร์ชันเก่า จริง ๆ ก็เวอร์ชันปัจจุบัน เวลาที่เราจะทำ dark mode เนี่ย ส่วนใหญ่เราก็จะเก็บ state ไว้ถูกป่ะ มี state อันหนึ่งใช่ป่ะ ที่บอกว่า โอเค ตอนนี้ฉันอยู่ light mode เสร็จแล้ว ถ้า user เขามีการเลือกโหมด dark mode เราก็จะไปเปลี่ยน state ธรรมดา ปึ้ง แบบนี้ใช่ไหม แล้วก็มันจะกลายเป็น

dark mode แบบนี้นะครับ เอาง่ายๆ คือเราเป็นคนจัดการ state ตรงนี้เอง นี่คือ basic แต่ว่าเรื่องของการทำ dark mode จริง ๆ มันมี detail ค่อนข้างเยอะ

รายละเอียด Dark Mode: System Preference, Tab Sync, และ Transition9:03

มันจะมีฟีเจอร์ข้างในของมันอีกค่อนข้างเยอะ อย่างเช่น อันแรกเนี่ย System Preference นะครับ ตัวที่เหมือนเป็นฟีเจอร์ที่ ให้มันดูสิ่งที่ user เขาเลือกไว้ แล้วก็เปลี่ยนโหมดเอง

โดยที่เขาไม่ต้องมาเปลี่ยนเองครับ ซึ่งตรงนั้นน่ะ เราสามารถ test ได้จาก Chrome DevTools ด้วยก็ได้ เดี๋ยวพอ enable แล้วจะ test ให้ดูนะ อันนี้คือฟีเจอร์ detail อันแรกนะ ที่ส่วนใหญ่ ที่ทำ dark mode แล้วต้องมาทำอันนี้อีก นะครับ อันที่ 2 ก็คือเรื่องของการ synchronization ระหว่างแท็บ สมมุติเราเปิด มีเว็บเราใช่ป่ะ แล้วลูกค้าเปิดหลายแท็บมากเลย ถ้าเกิดว่าเราไม่ซิงค์แต่ละแท็บ เวลาเขาไปเปลี่ยน dark mode ที่แท็บหนึ่งใช่ป่ะ แท็บอื่นมันก็จะไม่ได้ effect เพราะว่ามันมี state ของแต่ละแท็บแยกกัน นะครับ อันนี้เราก็ต้องมาทำเพิ่มนะครับ อันที่ 3 ก็คือเป็นเรื่องของ detail เล็ก ๆ น้อย ๆ นะครับ เรื่องของ UX ก็จะเป็น transition เวลาที่เราเปลี่ยนโหมด แล้วมันมีการ transition เดี๋ยวผมจะเปิด ตัวอย่างให้ดูนะครับ อันนี้คือตัวอย่างหนึ่งที่ ทำตัว transition เพิ่มแล้วนะ เรียกว่าเป็นการ disable transition สมมุติว่าผมกด dark mode ใช่ป่ะ เราจะเห็นว่าทุกอย่างมันจะเปลี่ยนกับพริบ ทันทีนะครับ แต่ว่า ถ้า

ในเว็บส่วนใหญ่เนี่ย ที่ยังไม่ได้ทำอ่ะ มันจะเป็นประมาณนี้

ลองดูมุมซ้ายนะครับ เวลาที่เราเปลี่ยนโหมดปุ๊บเนี่ย สังเกตว่า เห็นไหม มันจะมี transition บุ๊บๆ อย่างนี้ใช่ไหมครับ ทีนี้ลองจินตนาการว่าเว็บเราเนี่ย มันมี transition พวกนี้อยู่ค่อนข้างเยอะใช่ป่ะ มี background นู่น นี่ นั่น อะไรอย่างเงี้ย ซึ่งแต่ละ transition นี่หมายถึง CSS transition นะ เสร็จแล้วพอเราเปลี่ยนโหมดอะไรพวกเนี้ย บางทีมันจะวื๊บช้า วื๊บเร็ว ไม่เหมือนกันสักที่นึงนะครับ ซึ่งตรงนั้นเป็นเรื่องของ CSS ปกติอยู่แล้วนะ บางทีมันจะดูแล้วมันจะรำคาญตาอะไรอย่างเงี้ย บางคนส่วนใหญ่เขาจะ disable กัน อย่างเช่น สมมุติว่าถ้าเราเข้าไปที่เว็บ อย่าง Tailwind อะไรอย่างเงี้ยครับ มันก็จะ อันนี้ เห็นไหมครับ มันก็จะไม่มี transition อะไรให้มันมากวนตาเท่าไหร่นะครับ อันนี้เป็น detail เล็กๆ น้อยๆ ที่เราต้องทำเองอยู่ ณ ตอนนี้นะครับ

แล้วเรื่องสุดท้ายก็จะเป็น เรื่องการทำ server-side เดี๋ยวผมเปิดตัวอย่างให้ดู

ปัญหาการกระพริบของ Dark Mode ใน Server-Side และวิธีแก้ไขใน v611:47

ตอนนี้อย่างเช่น ปัญหา ยกตัวอย่างเว็บ Material UI เลย มี feature แต่ว่ายังไม่ได้แก้นะครับ ถ้าเราเปลี่ยนเป็น dark mode เนี่ย ส่วนใหญ่คนจะเจอก็คือเวลาเรารีเฟรชหน้าจอใช่ป่ะ มันจะกระพริบ อันนี้เป็นแบบ basic เลย ทุกคนต้องเจอเลย ทำ server-side ต้องเจออันนี้ ซึ่งมันจะจัดการค่อนข้างยากด้วย เพราะว่าหนึ่งคือไอ้ตัวโหมดที่เราเก็บอะไรพวกนี้ พอเราเพิ่มไอ้ feature เมื่อกี้ที่ผมบอกไปแล้ว พวกเรื่องของการเก็บ state sync กับ storage tab synchronization อะไรพวกนี้ คือทุกอย่างมันอยู่ที่ client ใช่ไหม แต่ถ้าเว็บเรารันบนเซิร์ฟเวอร์ คือบน server มันไม่มี โหมดอยู่แล้ว นึกออกป่ะ โหมดมันจะไม่มี undefined แล้วเราจะรู้ได้ยังไงว่าตอนนั้นเขาจะเอา dark mode หรือจะเอา light mode เพื่อที่จะส่งมาให้ client ใช่ไหม เพราะฉะนั้น ทุกอย่างมันต้อง run บน client หมด อันนี้เป็นปัญหา classic เลย ที่ทุกคนน่าจะต้องเจอ

โอเคครับ

การจัดการธีมแบบ Static ใน Material UI v612:44

ก็ทั้งหมดเนี่ยเวอร์ชัน 6 เนี่ย เราพยายามทำให้มันง่ายขึ้นเพื่อมาจัดการ ไอ้เรื่องพวกเนี้ยครับ โดยที่นะครับ เดี๋ยวผมเขียน

โอเค โดยที่เดี๋ยวโค้ดมันจะเปลี่ยนเป็นอย่างนี้ครับ คือตอนนี้เรามี

โค้ดเก่าอยู่ใช่ไหมครับ เอานี้เถิบไปนิดนึงนะ ในเวอร์ชัน 6 เนี่ย เราพยายามจะมองให้ธีมมันเป็น static มากขึ้น คือแบบ ไม่ต้องมี state เข้ามายุ่งเลยนะครับ เราก็จะ move ไอ้ธีมเนี่ยขึ้นไปข้างบนนะครับ ออกไปนอก React component เลย นะครับ แล้วก็เอาธีมนี้ เรียกว่าเป็นการสร้างธีมปกติก่อนนะครับ แล้วเราจะไม่ต้องมาใส่โหมดเข้าไปแล้ว คือถ้าเอา basic สุดๆ เลยเนี่ย ถ้าอยากจะทำ light mode กับ dark mode นะครับ คือเราจะเพิ่ม field ใหม่ขึ้นมาชื่อว่า color scheme นะครับ แล้วก็เราจะบอกว่า โอเค ฉันต้องการ light mode กับ dark mode อย่างนี้นะครับ อันนี้ก็คือมันก็จะไปดึงตัว default token ที่ Material UI เขามีอยู่แล้วมาให้นะ อันนี้ไม่ได้เปลี่ยนอะไร แต่ว่าเราปรับตรงนี้ให้มันง่ายขึ้นนะครับ พอเราได้อันนี้ใช่ไหม เราเอาไปใส่ที่ธีม ทีนี้เราก็จะลบตัว state ที่เรามีออกไป ทีนี้ พอเราทำแบบนี้ปุ๊บนะครับ Material UI เนี่ยก็จะ

สร้าง state ขึ้นมาเอง คือ Material UI จะบริหารจัดการ state เอง นะครับ แล้วพอเราทำตรงนี้เสร็จ เราลองมา debug

อันนี้ถ้าเกิดว่าใครทำ UI เยอะก็จะรู้นะครับ ว่าใน DevTools เนี่ยมันสามารถที่จะ emulate dark mode ได้ นะครับ โดยที่เราไม่ต้องไปเปลี่ยน system preference ของเครื่องเรา นะครับ เราพิมพ์ dark เนี่ย มันจะมี emulate CSS dark color scheme ใช่ป่ะ อันนี้ไม่ใช่ Material UI นะ ต้องบอกก่อน อันนี้คือ browser มันจะเหมือนกับจำลองให้ว่า เครื่อง user ต้องการ dark mode นะ พอเรากดตรงนี้ อันนี้คือ Material UI มันจะไป watch ตัว

ตัว media prefers color scheme ตรงนั้นให้ เราก็จะเปลี่ยนให้ สังเกตว่า จากโค้ดที่จริงๆ เราต้องเขียน 4 feature เนี่ย น่าจะประมาณสัก 200-300 บรรทัด​อะไรเงี้ยครับ เราเหมือนกับลบตรงนั้นทิ้งไปเลย แล้วก็ให้ Material UI ทำให้นะครับ ซึ่งผมรู้สึกว่าตรงนี้มันเป็นอะไรที่ library มันควรจะทำให้อยู่แล้วนะครับ คือโปรแกรมเมอร์อะ ไม่ควรจะต้องมาโฟกัสกับเรื่องจุกจิกอะไรแบบนี้ ซึ่งผมว่ามันช่วยได้เยอะมากเลย เวลาทำโปรเจคใหม่อะไรอย่างเงี้ย คือ ประกาศธีม Dark mode Light mode แล้วทุกอย่างก็จะทำให้หมดเลย ซึ่งมันเป็นสิ่งที่เว็บไซต์ทุกเว็บมันก็ควรจะมีอยู่แล้วนะครับ อันนี้เป็น feature แรกนะครับ ที่เพิ่มเข้ามา ซึ่ง interface มันจะดูง่ายนะ แต่จริงๆ ข้างหลังมันก็จะมี detail ค่อนข้างเยอะนะครับ ถ้าเกิดว่าเราต้องการ custom สี token อะไรเงี้ย ก็คือทำเหมือนเดิม ก็คือเราสามารถใส่ palette สี ตามที่เราต้องการได้เลย เหมือนเดิม การ custom นะครับ แต่ว่าเราแค่ประกาศ field ใหม่ แล้วเราก็เอา token ที่เราต้องการจะ custom แปะลงไป นะครับ มันก็จะ มี feature พวกนี้ออกมาให้ อันนี้ เป็นอันแรกนะครับ ทีนี้ต่อมา

Custom Style สำหรับ Dark Mode ที่ง่ายขึ้นด้วย theme.applyStyles16:19

ต่อมาจะเป็นเรื่องของการ มันจะสืบเนื่องมาจาก feature แรก พอเรามี Dark mode ใช่ไหม ทีนี้ไอ้การ custom style ของ Dark mode เนี่ยครับ ถ้าเป็นยุค เก่าๆ เอ้ย ถ้าเป็นเวอร์ชันที่แล้วเนี่ย วิธีการ custom มันจะเป็นแบบนี้ครับ ซึ่งผมโคตรไม่ชอบ มันคือการที่เรา… ซูมเข้าไปก่อน

หน้าตามันจะเป็นแบบนี้ ก็คือ

จริงๆ มันก็เหมือน basic React ทั่วไปนะ คือเราจะเอา state มาเช็คใช่ปะ ว่าตอนนั้น user เขาใช้โหมดอะไร แล้วก็แค่สลับค่า อย่างเช่นอย่างเคสนี้คือเราจะเปลี่ยน box shadow ใช่ไหม เราก็เช็คว่าตอนนี้โหมดมันเป็น light ใช่ปะ render box shadow อันนี้ ถ้าเกิดว่าไม่ใช่ก็ render box shadow อีกอันหนึ่ง นี่คือวิธีการใส่สไตล์ สำหรับ light mode กับ dark mode นะครับ ก็เป็น if-else ธรรมดานะ แต่ว่า ตัวเวอร์ชัน 6 เนี่ย พอ เราเพิ่ม Dark mode เข้าไปแล้ว เราก็เพิ่มขึ้นมาอีกฟังก์ชันหนึ่ง ชื่อว่าเป็น theme.applyStyles แล้วก็สิ่งที่เราทำก็คือเราสามารถเลือกได้ว่าเราจะ แอปพลายสไตล์สำหรับโหมดอะไรนะครับ อย่างเช่นพอใส่ dark mode ใช่ไหม แล้วเราก็ เราก็เปลี่ยนตรงนี้ เอาค่า เอาง่ายคือเราพยายามจะลบ

สิ่งที่เป็น javascript ทิ้งแล้วพยายามจะ move ไป CSS เพียวๆ ทั้งหมด ให้มันเป็น static style ทั้งหมด เพื่อสุดท้ายเดี๋ยวเราจะย้ายตรงนี้ ให้มันกลายเป็น Pure CSS ได้

โค้ดมันจะหน้าตาประมาณนี้พอเปลี่ยนแล้วนะครับ อันนี้ก็จะเป็น background image นะครับ แล้วก็ โค้ดมันจะหน้าตาเป็นแบบนี้ก็คือ สไตล์ที่เรา override มันจะอยู่ข้างบนใช่ไหม ก็คือสำหรับ Light mode ก่อน แล้วก็สไตล์อะไรที่เราต้องการจะ override สำหรับ โหมดที่เราเพิ่มเข้ามาก็คืออยู่ข้างล่าง คือ ตรงนี้มันอาจจะดูไม่ได้แตกต่างมาก แต่ว่าพอโค้ดมันค่อนข้างเยอะ 100-200 บรรทัด เราจะเริ่มเห็นแล้วว่ามันอ่านง่ายขึ้น แล้วก็เวลา refactor โค้ด มันก็จะง่ายขึ้นด้วย ซึ่งถามว่า

ผมก็มีโปรเจคที่แบบมีโค้ดแบบเก่าอยู่นะครับ เยอะมาก

Codemod สำหรับการ Migrate โค้ดสไตล์19:02

เรามี codemod ที่จะช่วย migrate ตรงนั้นให้นะครับ เดี๋ยวจะลอง run ให้ดู ตอนนี้จอมันจะดูไม่ค่อยเห็นเท่าไหร่ แต่ว่าเรามี codemod ที่

เราเพิ่มขึ้นมาให้นะครับ ก็ตรงนี้จริงๆ พอ run ปุ๊บอ่ะ มันจะไปไล่ แก้ไฟล์ทุกไฟล์ที่อยู่ในโค้ดเบสเรานะครับ ให้เป็น การเขียนสไตล์ในรูปแบบที่มันแบบใหม่ ก็คือแอปพลายสไตล์ เพราะเรา run codemod ปุ๊บ มันก็จะโหลด codemod ลงมาแป๊บนึงนะ แล้วมันก็จะแก้ไฟล์ให้ สังเกตว่า

จาก box shadow เมื่อกี้ เดี๋ยวผมลอง compare ดู

ตัว codemod ก็จะแก้ให้ ไปนั่งไล่อ่าน แล้ว codemod ที่ผมเขียนมาอันนี้จะค่อนข้าง ฉลาดพอสมควรนะครับ มันจะค่อนข้างรู้ว่าอะไรต้องแก้อะไรไม่ต้องแก้ อันนี้ก็ช่วยลดเวลาได้แบบ เยอะมาก นะครับ

CSS Variables: การ Debug และ Integrate ที่ง่ายขึ้น20:05

เพื่อให้เรา migrate ไปเป็นเวอร์ชันใหม่ได้ ต่อมาพอเรามี

โอเค อันนี้อันที่ 3 ครับ สิ่งที่เราเพิ่มเข้ามาอีกก็คือเรื่องของ CSS variable นะครับ ปัจจุบันเนี่ย คือค่อนข้างจะ standard เลย คือเว็บไหนที่ไม่ทำ CSS variable เนี่ย คือจริงๆ มันก็ไม่ได้ขนาดนั้นหรอก แต่ว่ามันจะช่วย โดยเฉพาะการเอา library มาใช้นะครับ แล้วก็เราสามารถที่จะใช้ CSS variable ไป integrate กับ solution ต่างๆ ได้ อะไรอย่างเงี้ยครับ โดยที่เราไม่ต้องพึ่ง JavaScript เพราะว่า ถ้าเราดูอย่างเคสเมื่อกี้นะครับ เดี๋ยวเราเปิดกลับเข้าไปดูที่ตัวนี้นะ เราลอง debug ดูเนี่ย คือ ทุกอย่างเนี่ย สีเสออะไรพวกเนี้ยครับ มันจะเป็น

มันเหมือนกับเรา hardcode ลงไปถูกป่ะ เนี่ย มันจะเป็น RGB หรือสี hex ตรงๆ ใช่ไหม หนึ่งคือถ้าเป็นโปรแกรมเมอร์เนี่ย เวลาเรา debug เราก็ ค่อนข้างยากละ คือถ้าเราไม่ได้เชี่ยวชาญ Material UI เนี่ย เราจะไม่รู้เลยว่าสีนี้มันมาจากไหนใช่ไหม แล้วก็อย่างที่ 2 คือ สมมุติว่า เราจะเอาอันนี้ไป integrate กับ ที่อื่น สมมุติว่ามี third party มา ต้องการจะมา override สีของแอปเรา เราทำยังไงอะ เราก็ต้องไปแก้ JavaScript ใช่ไหม ทั้งๆ ที่แบบ เอ๊ะ ตรงนี้มันก็เป็น CSS นี่หว่า ทำไมมันถึงทำไม่ได้อะไรอย่างเงี้ยครับ CSS variable เนี่ยมันจะมาช่วย ปิดช่องโหว่ตรงนั้นได้ดีมากนะครับ

ช่วยเรา integrate ได้เยอะเลย ซึ่งวิธีการเพิ่ม CSS variable ลงไปให้กับ ตัวแอป Material UI เนี่ยก็ง่ายนิดเดียว ก็คือการใส่ CSS variable แล้วก็ใส่เป็น true เข้าไปนะครับ พอเรา save ปุ๊บเนี่ยแล้วเราลอง debug ดูใหม่นะครับ เราจะเห็นว่า ทุกอย่างเนี่ย โทเคนทุกอย่างที่อยู่ในธีมเนี่ย

มันจะถูกเปลี่ยนเป็น CSS variable นะครับ แล้วก็ component เราเนี่ยจะเริ่ม เริ่มใช้งาน CSS variable เลย ข้อดีของอันนี้คือ อย่างที่บอกเมื่อกี้ สมมุติเรามี third party ใช่ไหม ที่เราต้องไปทำแอปครอบอีกแอปเนี่ยอีกทีนึง อะไรอย่างเงี้ย เราไม่สามารถ—

ถ้าเราจะ override คือเราต้อง override CSS แบบใช้ pseudo class อะไรพวกนี้ใช่ป่ะ ซึ่งมันก็จะค่อนข้างเยอะ แต่ว่าถ้าเราสามารถที่จะเขียนแค่ CSS file แล้วก็เหมือนกับเขียนแค่โทเคนที่จะ override สี มันจะง่ายขึ้น ยกตัวอย่างเช่น ผมบอกว่า เราก็อปสีนี้มาก่อนเนาะ

ผมอยาก override ตัว สี primary ของทั้งแอปเลยนะครับ วิธีทำก็คือผมก็จะไป

ยกตัวอย่างเช่น อย่างเคสนี้ เอาเคสนี้แล้วกัน เดี๋ยวนะ เอาตรงนี้ เอา section นี้ก็ได้ เพราะว่า CSS variables เนี่ย เราสามารถที่จะประกาศ ไปครอบแต่ละ section ได้ด้วยนะครับ ผมบอกว่าทั้ง section นี้เลย ผมขอเปลี่ยนอีสีเนี่ยเป็นสีแดง เห็นไหมว่ามันก็ทำได้เลยโดยที่

ไม่ได้มีความ complex ในเรื่องของ JavaScript เลย แบบ CSS ล้วนๆ ได้หมดนะครับ อันนี้ถือว่าผมรู้สึกว่าเป็น improvement ที่ดีมากๆ นะครับ แล้วหนึ่งในหน้าที่ของผมก็คือ ผมจะ พยายามเอา JavaScript ออกไปให้ได้มากที่สุดนะครับ แล้วก็พยายามจะใช้ CSS ที่มัน มีอะไรใหม่ๆ มาให้เยอะขึ้นนะครับ นี่คือ CSS variables ครับ ต่อไป

Container Query: Utility ใหม่ใน Material UI v623:37

ต่อไปเป็นเรื่อง Container Query มีใครใช้ไหม Container Query ใครเคยได้ยินบ้าง

มี 2 คน โอเค Container Query เนี่ย จริงๆ ตอนที่ผมได้ยินครั้งแรก ผมก็รู้สึก เออ มันดีแหละ มันน่าจะใช้ได้นะ แต่ว่า ณ ตอนนั้นน่ะ คือมันยังไม่ค่อย เขาเรียกว่าเหมือนกับ browser support มันยังไม่ค่อยดีแล้วกันนะ แล้วก็ในมุมของผมที่ทำ open source อะไรพวกเนี้ย คือผมจะเอามาใช้ก็ต่อเมื่อ browser support มันพร้อมให้กับ developer เขาใช้งานนะครับ แต่ว่า ณ ปัจจุบัน เดี๋ยวเราเปิดให้ดูนะ ตัว Container Query เนี่ย อุ้ย content อ๋อ นี่มัน Style Query นะครับ ไม่เอา content นี่ query ธรรมดา

ณ ปัจจุบันเนี่ย คือ 93% คือถ้ามัน 93% เนี่ย อันเนี้ยคือใช้ production ได้แล้ว ใช้งานได้เลยนะ production IE ช่างแม่งแล้วกันเนาะ เอ่อ ช่างมันนะครับ แล้วก็ อันนี้อาจจะ ใครที่ต้อง support iOS 15.8 อะไรอย่างนี้อาจจะต้องรอก่อน แต่ว่าโดยส่วนใหญ่แล้วอ่ะ ไม่ค่อยมีเท่าไหร่ละ คือถ้ามัน 93% เนี่ย จริงผมรู้สึกว่ามัน production ready แล้ว คือใช้ได้เลย ใช้ไปเหอะนะครับ เราก็ควรจะใช้ด้วยนะ มัน solve ปัญหาได้ค่อนข้างเยอะ เดี๋ยวเราลองเข้าไปดู

ก็เข้าไปนะ command K แล้วก็ search container query อันนี้เป็น feature ใหม่นะครับ ก็จะมี new ตรงนี้ จริงๆ มันไม่ได้มีอะไรมากแหละ มันแค่ เป็น utility นะครับ ใน Material UI ให้เราเขียนง่ายขึ้น คือเราไม่ต้องมาประกาศเองแล้วกัน ซึ่ง syntax มันก็จะก๊อบๆ Tailwind มา นะครับ เราสามารถเขียนประมาณนี้ได้ อย่างเช่นเราต้องการจะใส่ padding ใช่ป่ะ แล้วก็ เหมือน padding container query แบบ ที่ 40em ให้มีขนาด 4 อะไรเงี้ย คือถ้าเราแปลงเป็น tailwind มันก็จะคล้ายๆ อะไรประมาณนี้นะครับ โอเค อันนี้คืออีกตัวนึง อันนี้ไปลองดูเองได้ ผมว่าไม่ได้ซับซ้อนอะไรมากนะครับ เป็นแค่ utility ให้เราเขียน container query ได้ง่ายขึ้น ไม่ต้องเขียนสด

การปรับปรุงอื่นๆ: Performance, Template, Grid, และ Package Size25:56

ต่อมาก็จะเป็นเรื่อง โอเค อันนั้นคือ feature ทั้งหมด ที่เพิ่มเข้าไปนะครับ ทีนี้เรามาดูฝั่งที่เป็น improvement บ้าง ว่ามันมีอะไร improve บ้าง อันนี้คือ optimize runtime performance นะ คือ Material UI เวอร์ชั่น 6 จะเร็วขึ้นประมาณ 20-30% ก็คือด้วยเพื่อนผมคนนี้นั่นเองนะครับ เขาชื่อ Romain เป็นคนที่ เรียกว่าช่ำชองการ improve performance มากเลย ผมแนะนำให้เข้าไปดู profile เขานะครับ เพราะว่าไอ้โพสต์ที่เขาเขียนเนี่ย แม้แต่

แม้แต่คนที่เขียน tailwind ยังต้องเข้ามาอ่านนะครับ Optimize JavaScript for fun and profit ดีมากเลยนะครับ คือแบบ detail ดีมาก แล้วก็ประยุกต์ใช้กับโปรเจกต์ได้ทุกโปรเจกต์ อันนี้แนะนำเลย ต้องเข้าไปอ่านนะครับ

อันนี้เป็น improvement อันนึงนะ ก็จะเห็นว่าอันนี้เป็น issue ที่ เป็น PR ที่ปิดไปแล้วสำหรับการ improve performance นะครับ ส่วนใหญ่มันจะเกี่ยวข้องกับพวก internal runtime ต่างๆ ที่เรามีการเขียนไว้นั่นแหละนะครับ ซึ่ง ถ้าเกิดใครสนใจ ลองเข้าไปดู PR พวกนี้ได้ คือข้อดีคือเราไม่เคยคิดเลยนะ ฟังก์ชันที่เราเขียนทั้งหลาย มันจะมีผลทำให้มันช้าลง นึกออกไหม สมมุติว่าเวลาทุกคนเขียนแอปอ่ะ ไม่แคร์หรอกใช่ไหม เราเขียน callback เราเขียน ฟังก์ชัน พวกแบบ arrow function เขียนอะไรพวกเนี้ย เราประกาศตัวแปร ใส่ๆ แม่งเข้าไป แต่ว่าสุดท้ายแล้ว พอวันนึงที่แอปแม่งช้า เราจะ ไม่รู้ว่าทำไมมันถึงช้า เราก็จะไม่เคยคิดด้วยว่าฟังก์ชันพวกเนี้ยแหละ เป็นตัวปัญหาที่ทำให้มันช้า อะไรเงี้ยครับ นะครับ เพราะฉะนั้นควรจะเข้าไปอ่านเลย เป็นอีก next level นะครับ ของ developer

Template ใหม่ๆ ที่ใช้งานได้ทันที27:48

โอเค แล้วก็สิ่งอีกอันนึงที่เรา improve ไปก็คือ เราปรับปรุง template ใหม่นะครับ

เดี๋ยวเราเปิดให้ดู

อ้าว ลิงก์หาย โอเค ไม่เป็นไร ลิงก์หาย เพราะฉะนั้นเดี๋ยวเราเข้าไปดูที่

ที่ template ตรงๆ โอเคครับ อันนี้เป็น template ที่ designer ที่เราอยู่ในบริษัท เขาทำขึ้นมานะครับ ก็เดี๋ยวลองไปดูอีกอันก็ได้ อันนี้เป็น template ที่แบบ copy ไปใช้งานได้เลยนะ หรือว่าจะเปิดผ่าน code sandbox ก็ได้ เปิดปุ๊บ เราก็จะได้ template นี้มาใช้เลย ซึ่งพวกนี้ฟรีหมดนะครับ ก็ลองไปเล่นดูกันได้ นานจัง

ไม่เป็นไรนะครับ เดี๋ยวลองไปเล่นดูก็คือ เปิดผ่าน code sandbox แล้วจะเห็นเลย มันก็จะ responsive ด้วยนะครับ แบบพอเปิดเข้าไปปุ๊บก็ลองแก้ๆ ตามที่เราต้องการได้นะครับ ก็คือทุก template เนี่ย แก้ใหม่หมดเลยนะครับ ทำให้มันสวยขึ้นนะครับ ก็พวกเนี้ยเราจะ theme มาให้แล้วนะครับ ก็มีหลากหลายเลย มี dashboard marketing มีทั้งเพจ checkout ที่เราสามารถ copy ไปใช้ได้เลยนะครับ

แล้วก็ไปใส่ logic ของเราตามที่เราต้องการได้ เนี่ยมี sign in แบบใครอยากทำ sign in page แบบง่ายๆ ก็คือ copy ไปใช้เลยก็ได้นะ ผมก็ทำบ่อย นะครับ ปึ๊บ แปะ อันนี้พอดีจอผมมันใหญ่ มันก็เลยซูมไปนิดนึง

อันนี้คือ improvement อีกอันนึงก็คือเรื่อง template ช่วยได้เยอะมาก

Grid System ที่ใช้ Gap แทน Margin29:32

โอเค อันนี้เป็น detail เล็กๆ น้อยๆ แต่ว่า grid ที่เราปรับปรุงก็คือ แต่ก่อน grid ที่เราใช้มันจะใช้ margin ในการทำ spacing นะครับ ซึ่ง ต้องเข้าใจว่าแต่ก่อนมันก็ยังไม่มี gap ให้ใช้เยอะขนาดนั้นใช่ไหม browser support ก็ยังไม่เยอะนะครับ แต่ว่าปัจจุบันเนี่ย browser support ในส่วนที่เป็น flexbox gap เนี่ย มันครอบคลุมเยอะมากแล้วนะครับ เพราะฉะนั้นเราก็เลย มีการปรับปรุงตัว grid ให้มันกลายเป็น gap เพราะฉะนั้นมันจะ custom ง่ายขึ้น คือแต่ก่อนถ้าเราเป็น grid เวอร์ชั่นเก่าเนี่ย เวลาที่เราจะใส่ margin อะไรให้กับตัว children นะครับ มันจะใส่ไม่ได้ มันไม่ใช่ใส่ไม่ได้ แต่ว่าเราต้องเพิ่มไอ้ตัว CSS ไอ้ specificity ให้มันเยอะขึ้นนะครับ แต่ว่าปัจจุบันเนี่ยก็คือเราจะใช้ tailwind เนี่ยง่ายละนะครับ โอเค แล้วก็ improvement อันต่อมาครับ ใกล้จะจบแล้ว

Bundle Size ที่เล็กลง30:29

ก็คือตัว bundle size ที่ ไม่ใช่ bundle size เรียกว่าเป็น package size นะครับ ที่เวลาเรา install package เนี่ย อันนั้นน่ะคือ size ที่มันลดลงนะครับ ลดลงประมาณ 25% นะครับ ก็สาเหตุที่มันลดลงก็เป็นเพราะว่าเรา เราอัพเวอร์ชั่นของไอ้ตัว browser list นะครับ ก็ให้มัน support แบบ node ไอ้ node แล้วก็ browser เวอร์ชั่นใหม่ๆ ละ เพราะฉะนั้นเนี่ยมันจะไม่มีการ compile CommonJS แบบเวอร์ชั่นเก่าๆ โค้ดมันก็จะเลยสั้นลง ลดลงนะครับ

โอเค

Pigment CSS: เปลี่ยนจาก CSS-in-JS เป็น Plain CSS31:06

แล้วก็อันสุดท้ายนะครับ อันนี้เรียกว่า highlight เลย แต่ว่ายังเป็นแบบ experimental อยู่ก็คือ อย่างที่ผมเล่าไปตอนแรกว่า Material UI เนี่ย ตอนนี้มันใช้ emotion เป็น CSS-in-JS library อันนึงนะครับ ที่ใช้ JavaScript เขียน CSS แล้วมันก็จะมีการเอา CSS ไปแปะใช่มั้ย ปัญหาอย่างที่บอกเลยก็คือ มันจะเป็นเรื่อง server-side rendering ไม่ใช่สิ ปัญหาคือไอ้ตัว React Server Components อะไรพวกนี้ครับ ที่เหมือนมันจะไม่ค่อยได้ไปต่อเท่าไหร่ กับ React 19 นะครับ ที่เพิ่งออกมา ยังไม่ออก ยังไม่ออก ใกล้จะออกแล้ว เพราะฉะนั้นเราก็เลยต้องหา solution อื่นนะครับ มันก็เลยมาจบที่โอเค ถ้างั้นเราต้องทำ library อันนึง เพื่อที่จะ

ไปเอา stylesheet ต่างๆ ที่เขียนใน JavaScript มาแปลงให้เป็น CSS ให้หมด คอนเซ็ปต์มีแค่นั้นเลยนะ แต่ว่าข้างหลังแม่งโคตรซับซ้อนเลย เดี๋ยวผมจะเดโมให้ดูเลย เพราะจริงๆ เคยเล่าไป เมื่อ talk ที่ผ่านมาสักพักแล้วว่า ลองไปตามดูก็ได้นะครับ ว่าที่มาที่ไปมันเป็นยังไง อะไรอย่างเงี้ยครับ สุดท้ายก็คือ ตอนนั้นมันยังเป็นชื่อไม่ official ตอนนี้คือ library มันจะชื่อว่า Pigment CSS นะครับ เดี๋ยวผมจะเปิด ตัว repo ให้ดู เป็น open source เหมือนกัน Pigment CSS นี่เป็น GitHub นะครับ ฝากกดไลก์ กดแชร์ กดดาวให้ด้วยนะ ตัวนี้ Pigment CSS

มีบล็อกให้อ่านด้วย เดี๋ยวก็ฝากลองไปดูได้

Demo Pigment CSS กับ Next.js project32:51

เดี๋ยวผมจะเดโมให้ดูว่ามันต่างจากเดิมยังไงนะครับ เรามาที่ อันนี้เป็น repo ที่ผมเตรียมไว้

ใช่ repo นี้ป่าววะ ใช่สิ ไม่ใช่ นี่มัน Material UI repo นี้ ซูมเข้ามาก่อนนะ เดี๋ยวผมจะขอเช็คอันนี้ก่อน อันนี้เป็น Next.js project ธรรมดาเลย ที่เพิ่งเริ่ม เพิ่งแบบ from scratch ครับ ตอนนี้ config ของ Next ก็คือเป็น default เลย เป็น object ธรรมดานะครับ ทีนี้เดี๋ยวเราจะลอง run dev yarn dev อย่างนี้นะครับ แล้วเราไปที่ localhost ตรงนี้ไม่มีอะไร เราจะไปที่ route /sign-in นะ อันนี้คือเป็น Material UI component เวอร์ชัน 6 เหมือนกัน แต่ว่า เป็น default นะ ผมยังไม่ได้ทำอะไรกับมัน ก็คือยังไม่ได้เอา Pigment เนี่ยมาใช้ครับ เดี๋ยวเราลองไปดูโค้ดเร็วๆ ว่าหน้าตาเป็นยังไง

โอเคครับ อันนี้ในแอป /sign-in นะครับ ใน Next.js มันก็จะ route หน้าตาเป็นเหมือนโฟลเดอร์ แล้วเข้าไปดูที่เพจนะครับ โอเค นี่ export default มาจาก component นี้นะ ซึ่ง component ตอนนี้ ก็เป็น Material UI component เวลาเราเขียนแอปธรรมดา ก็เรียก component มา แล้วก็

เนี่ย return พวก มี theme ครอบใช่มั้ย แล้วก็มี component ต่างๆ มี text typography มี form control อะไรอย่างเงี้ครับ ก็เป็น basic เลย เหมือนเวลาเราเขียนแอปปกติครับ สิ่งที่เราได้มาก็คือ เราจะได้อันนี้มา ลอง debug ให้ดู เดี๋ยวผมขยายก่อนนะ จะได้ไม่ต้องสลับจอไปสลับจอมา

ลอง debug ก่อนนะครับ ณ ตอนนี้ เราจะเห็นว่าอันนี้คือ class ใช่มั้ย ที่ตัว emotion มัน generate ขึ้นมานะครับ จาก stylesheet ที่ Material UI เขียนไว้ครับ เราจะเห็นว่ามันจะเป็น hash class แบบนี้นะครับ ซึ่งไอ้พวกนี้ ณ ตอนนี้ มันยังทำเป็น React Server Component ไม่ได้ มันยังไม่ support ก็ต้องเป็น client component ทั้งหมด ซึ่งนั่นก็คือเป็นข้อจำกัด ณ ตอนนี้ แต่ว่า เราเขียน Pigment CSS ขึ้นมาเพื่อให้มันไป

ให้มันเข้าไปอยู่ใน เขาเรียกว่าเป็น bundler process นะครับ เวลาที่เรา spin ในตัว Next.js ขึ้นมา Next.js มันก็จะมี engine ของมันใช่ป่ะ ที่มันไปดึงโค้ดที่เราเขียนน่ะ เข้ามาแล้วก็เอามา ทำนู่นนี่นั่นทุกอย่างให้เรานะครับ Pigment น่ะ Pigment CSS มันจะเข้าไปอยู่ในนั้น เข้าไปอยู่ใน process ตรงนั้น แล้วก็เหมือนกับไป intercept พอมันไปเจอไฟล์ Material UI ปุ๊บ มันจะอ่านไฟล์ แล้วก็จะหาว่ามี CSS ตรงไหนบ้าง แล้วก็จะไป

พ่นออกไปเป็นไฟล์ CSS ตรงๆ นี่คือ concept แบบ broad concept

โอเค เดี๋ยวเรามาดูผลลัพธ์กัน โอเค ผลลัพธ์ก็คือ เดี๋ยวเราจะ เราจะไม่ใช้ next config ธรรมดา เราจะไป wrap ด้วย นี่ ก็จะมี plugin เพิ่มขึ้นมานะครับ คือเราต้อง install library ก่อน ครับ install library เพิ่มขึ้นมาก็คือตัวนี้ครับ ตัว plugin ของ Pigment CSS นะครับ แล้วเสร็จแล้ว เราก็แค่ import มาแหละ import ตัว plugin มาใช่ป่ะ แล้วก็เอาไป ครอบตัว next config แล้วก็จะใส่ theme เข้าไป อะไรอย่างเงี้ยครับ ตามที่เราสร้าง theme แล้วก็ มี config เล็กๆ น้อยๆ เอางี้ครับ concept คือเราต้องใส่ config ให้มัน ครับ ไปครอบตัว next config ครับ

การใช้งาน Pigment CSS ใน Next.js config36:56

แล้วทีนี้พอเราเซฟปุ๊บ ผมสร้างอีก route นึงขึ้นมาชื่อ sign-in 2

ตัว sign-in 2 เนี่ย ตรงนี้ เรียกว่าเกือบจะ copy ตัว sign-in มาทั้งดุ้นเลย อาจจะมีแก้โค้ดบางบรรทัดนิดหน่อยนะครับ มันจะมีบาง component ที่ ต้องเปลี่ยนไปใช้ของ Pigment อะไรพวกนี้ครับ นิดนิดหน่อยหน่อย ประมาณซัก 95% ไม่ได้เปลี่ยนเลย เสร็จแล้วเดี๋ยวเราลองรันตรงนี้ใหม่

แล้วทีนี้เราลองเข้าไปดูที่ sign-in 2 นะครับ อันนี้คือพอเรา enable Pigment แค่นั้น แค่ประมาณนั้นเลยนะครับ ตอนนี้ pigment มันจะเริ่มไป intercept ไฟล์ที่ Next.js ส่งมาให้ คือ Next.js มันต้องไป process ไฟล์ต่างๆ ในโฟลเดอร์เราใช่ไหม รวมทั้ง node_modules อะไรพวกนี้ด้วย ตัว pigment ก็จะไป intercept แล้วดูว่า ถ้าอันนี้เป็น Material UI จะไปหา CSS แล้วก็พ่นออกมาเป็นไฟล์ CSS นะครับ สังเกตว่าผลลัพธ์จะคล้ายเดิม แทบจะเป็นเหมือนเดิมเลย แต่สิ่งที่ต่างก็คือ เราจะสังเกตว่า CSS ทุกอย่างที่มันเกิดขึ้น มันจะไปอยู่ในไฟล์ของ Next.js แล้ว ถ้าเกิดว่าใครไม่ชิน Next.js มันจะมี layout ใช่ไหมกับ page

อันนี้เป็น app router นะครับ เนี่ย CSS ทั้งหมดเนี่ย จากที่มันอยู่ใน emotion ครับ มันย้ายมาอยู่ในไฟล์ CSS เพียวๆ เพราะฉะนั้นเราสามารถที่จะเขียน ตัว component บางอย่างเนี่ย มันจะกลายเป็น server component ไปเลย สังเกตว่าเราแทบจะไม่ได้เขียนโค้ดอะไรใหม่เลย ซึ่งผมคิดว่าอันนี้ก็จะเป็น เป็น innovation อีกอันนึงนะครับ ในอนาคตอันใกล้ คือตอนนี้มันยังมี bug อยู่ แต่ก็เป็นพื้นฐานของ library ใหม่ๆ ที่มันเกิดขึ้นนะครับ คือเราเจอ use case หลากหลาย ต้องเข้าใจว่า pigment เนี่ย มันจะต้อง support Next.js support Rust support Vite อะไรพวกนี้ เพราะว่ามันเป็นส่วนหนึ่งของ bundler ต่างๆ ที่จะ process ไฟล์นู่นนี่นั่น เพราะฉะนั้นนะ use case มันหลากหลายมาก ตอนนี้ปวดหัวมากครับ คือผมไม่ได้เขียน React แล้ว ผมไปเป็นเหมือน ไปนั่ง debug Next.js กับ Vite ทั้งวันเลยครับ

ปัญหา Performance ของ Pigment CSS และอนาคตของ Library39:25

ตอนนี้ยังมีปัญหาเรื่องของ performance นิดนึง มันยังช้าอยู่ สังเกตว่าเมื่อกี๊ แค่หน้า sign in ธรรมดาใช่ไหม กว่ามันจะโหลดก็ใช้เวลาสัก 30 วินาที มันจะค่อนข้างช้า ตอนนี้ก็จะเป็น improvement ที่ต้องค่อยๆ ทำไป แต่ว่าอย่างน้อยเราเห็นหนทางแล้ว ที่ทำยังไงให้ คนที่ใช้ emotion สามารถ migrate มาเป็น plain CSS ได้ นี่เป็น step แรก ซึ่งตอนนี้ก็ยังอยู่ในช่วงทดลอง ก็เริ่มมีคนเอาไปทดลองใช้ ก็เจอปัญหาต่างๆ ก็ค่อยๆ แก้กันไป อันนี้ก็คือสุดท้ายแล้ว เป็นเรื่องสุดท้าย ก็คือตัว pigment CSS ครับ มีอีกไหมเอ่ย

สรุปและ Q&A40:10

หมดแล้วครับ นี่คือ update ที่อยากมาเล่าให้ฟังนะ สำหรับ Material UI version 6 ครับ ถ้ายังไงก็ฝากไปลองใช้งานนะครับ แล้วก็อ่าน doc ดูได้ ถ้าเกิดใครมีอะไรอยากจะคุยเพิ่มเติม อยากถามอะไรยังไง ก็เดี๋ยวหลัง หลัง World เค้าพูด เกี่ยวกับ Vue ป่ะ? ไม่? เดี๋ยวหลัง World เค้า มาแชร์ ก็เข้ามาคุยได้นะครับ มาคุยได้ ถามได้ทุกเรื่องเลย โอเคครับ ขอบคุณมากครับ