🎞️ Videos → Building Library Ecosystem in LMWN

แนะนำตัวและหัวข้อ: สร้าง Library Ecosystem ใน LINE MAN Wongnai0:00

FC ครับ

ยังไม่ขึ้นสไลด์ โอเค แป๊บนึงนะครับ โอเคครับ อันนี้เนื้อหาเบาๆ เนาะ เราฟังเรื่องแบบค่อนข้างมีสาระกันมาเยอะละครับ วันนี้เดี๋ยวมาพูดถึง จะเป็นการแชร์ประสบการณ์เนาะ การสร้าง library ecosystem ใน LINE MAN Wongnai ครับ ก็โอเค ก่อนอื่นแนะนำตัวก่อนเนาะ ก็ผมโอ๊ตครับ เป็น Staff Software Engineer ที่ LINE MAN Wongnai ครับ ครับผม ก็โอเควันนี้เราจะมาคุยอะไรกันบ้างเนาะ

Library Ecosystem คืออะไร? ทำไมต้องสร้าง Library?0:40

ก็เรามาคุยเรื่องของอะไรคือ library ecosystem นะ บางคนอาจจะไม่เคยได้ยินมาก่อนนะ จริงๆ ผมก็อาจจะคิดคำนี้ขึ้นมาเองก็ได้ ไม่รู้เหมือนกัน รวมถึง library ecosystem ใน LINE MAN Wongnai เนี่ยมันเป็นยังไงบ้างครับ เราจะเล่าเรื่องราวว่าทำไมมันถึงเกิดขึ้น ทำไมถึงมี แล้วตอนนี้มันมีอะไรบ้าง แล้วก็ถ้าเกิดเราอยากมี library ecosystem เนี่ย เราจะต้องมีการวาง infra อะไรบ้างในการทำมันขึ้นมาครับผม

ปัญหาของ Library ที่ใหญ่เกินไป และทางแก้: แตก Library ออกเป็น Ecosystem1:11

โอเค ก่อนอื่น เรามาเริ่มที่ library กันก่อนนะ จริงๆ ทุกคนในที่นี้น่าจะคุ้นเคยกับคำว่า library อยู่แล้วนะ เพราะทุกวันเนี้ย โค้ดที่เราเขียนอ่ะ มันมีอยู่แค่นิดเดียว ที่เหลือเราลง 𝚗𝚘𝚍𝚎_𝚖𝚘𝚍𝚞𝚕𝚎𝚜 ที่เป็น library กันเต็มไปหมดเลย แต่วันเนี้ยครับ หลักๆ เราจะไม่ได้มาพูดถึงเรื่องของการใช้ library นะ เราจะมาพูดถึงการสร้าง library ขึ้นมาครับ

ถ้าเกิดเราเป็นคนที่สร้าง library อย่างผมอ่ะ สร้าง library ใช้ในองค์กรเนาะ ก็วันแรกๆ ที่สร้างครับ เราก็จะรู้ว่า purpose ของมันอ่ะเล็กนิดเดียว เรากะจะทำแค่ไม่เยอะ แต่พอทำไปเรื่อยๆ อ่ะครับเนาะ แบบมันบวมน้ำขึ้นมา แบบ lib เราเนี่ยทำได้แบบแทบจะทุกอย่างเลยทีเนี้ย มันก็เลยเกิดปัญหาขึ้นมาครับ การที่แบบ library อ่ะ มันทำหน้าที่นึงเยอะเกินไปใช่ป่ะ

มันก่อให้เกิดการซับซ้อนในการที่เราจะต้อง maintenance มันครับ มันก็จะแบบเริ่มแก้ยากขึ้นเรื่อยๆ เออ คนที่กินพิซซ่าอยู่ตรงนั้นน่ะ แก้ยากใช่ป่ะ เค้าร้องไห้ไม่อยากแก้แล้ว แล้วก็อีกอย่างนึงคือ library บางตัวเนี่ย เราสร้างมาใช่ป่ะ ให้ใช้ได้กับทั้งภาษา JavaScript อ่ะ มันทำเป็น server ก็ได้ เป็น node ก็ได้ เป็นทำ mobile app React Native หรือแม้กระทั่งเขียนเว็บอะไรเงี้ย มันทำได้หมดทุกอย่างเลย บางทีเราอ่ะสร้างเหมือน library มาตัวนึงใช่ป่ะ เรากะจะกวาดหมดเลย มันใช้ได้หมดทุก environment เลยทีเนี้ย ฉิบหายครับ เราเริ่มแก้มันยากขึ้นเรื่อยๆ นะ

ยากขึ้นแบบ โอ้ เราทำไงมัน ทำไงกับมันดีนะ

อันนี้คือ library เราครับ ถ้าเกิดเราทำไปนานๆ ใช่ป่ะ เราก็จะรู้ว่า บึ้ม มันทิ้งดีกว่า เราแตก library ครับ ให้แต่ละตัวเนี่ยมันมีหน้าที่ของมันเอง แล้วโอเค แล้วเราค่อยเอามาใช้ เอาแต่ละอันอ่ะมาใช้ร่วมกัน กลายเป็น ecosystem ครับ

ตัวอย่าง Library Ecosystem ที่คุ้นเคย: React, TanStack, Material UI3:05

ซึ่งอันเนี้ยแหละคือ library ecosystem การที่เรามี library หลายๆ ตัวอ่ะ เราเอามันมาทำงานร่วมกัน ครับผม โอเค จริงๆ library ecosystem ไม่ได้เป็นเรื่องใหม่อะไรเลย จริงๆ ทุกวันเนี้ยมันอยู่รอบตัวเรา ในตลาดอ่ะครับ มี library ecosystem ที่แบบเราคุ้นเคยกันอยู่มากมาย ไม่ว่าจะเป็นในกลุ่มของ React เนาะ เรามี React ที่ทำหน้าที่ในการ render view ขึ้นมา

ซึ่งแล้วเราก็มี React DOM ในการทำหน้าที่ แบบแสดงผล view ออกมาเป็น string หรือออกมาเป็น DOM ขึ้นมาจริงๆ หรือ React Native ที่เป็น mobile ครับผม แล้วก็ทุกวันเนี้ย จริงๆ อันนี้ช่วงนี้ก็มาแรงมาก TanStack เนาะ ก็ TanStack เนี่ยก็ ecosystem เค้าแบบโครตโหดเลย มีตั้งแต่ starter, router, query อย่าง query ผมก็ใช้อยู่ก็โอเคนะ ครับผม

แล้วก็อีกตัวนึงก็คือ Material UI ครับ Material UI เนี่ยก็ ecosystem เค้าก็มี library ที่หลายๆ ตัวเลยที่สามารถทำงานแยกกันได้ด้วย เดี๋ยวจะเอามาใช้ร่วมกันมันก็โอเคเลยครับผม

LINE MAN Wongnai มีอะไรบ้าง? ทำไมต้องมี Library Ecosystem?4:08

ทีเนี้ยมาพูดถึง LINE MAN Wongnai กันบ้างครับ ก็โอเค LINE MAN Wongnai ภาพจำของทุกคนเนาะ อาจจะคิดว่า LINE MAN Wongnai อ่ะ มันมีแค่ LINE MAN มีแค่วงในใช่ป่ะ แต่ว่าตอนเนี้ย เรามี LINE Play ด้วย ครับ อันนี้อยากให้ทุกคนจำ 3 domain นี้ไว้นะ เดี๋ยวเราจะมาเล่าเรื่องกันว่ามันเกิดอะไรขึ้น ก่อนอื่นเดี๋ยวผมขอเจาะไปที่ LINE MAN ก่อน LINE MAN ภาพจำทุกคนอ่ะ

ใครๆ ก็รู้ว่า LINE MAN เป็นแอป food delivery นะ ทีเนี้ย หลายคนอาจจะสงสัยว่า เอ้า มันเป็นแอปแล้วมันมีเว็บตรงไหนอ่ะ มีใครเคยรู้ป่ะ เรามีเว็บตรงไหน ข้างหลังโดนสปอยอ่ะ ไม่เอา โอเค จริงๆ อ่ะ LINE MAN อ่ะมี web view หลายตัวเลยครับ อยู่เบื้องหลังใน application ซึ่งจริงๆ อ่ะ บางหน้าที่เราใช้อยู่อ่ะ มันค่อนข้างเนียนที่จะเป็นแบบ มันเป็นเว็บก็จริงอ่ะ แต่มันเนียนเป็นแอปมากเลย เพราะการทำเอา web view มาใช้ในการทำ application อ่ะ ต้อง มันมีข้อดีคือมันสามารถ release ได้ไว แล้วก็ไม่ต้องรอรอบ app version ที่แบบรอ App Store, Play Store review ครับผม นอกจากเนี้ย เรายังมี lib อีกด้วย LINE MAN บน lib ไม่แน่ใจมีใครเคยใช้หรือเปล่า เออ เฮ้ย สุดยอด

เออ เดี๋ยวเอาโค้ดส่วนลด LINE MAN ไป 100 นึงเลย เดี๋ยวผมให้ ครับผม โอเค

ทั้งหมดเนี้ย เราก็จะเห็นว่าแบบเนี่ย มันมี web application กระจายอยู่เต็มไปหมดเลยนะ ทั้ง web view หลายตัว มีทั้ง lib อะไรอย่างงี้

ปัญหาโค้ดซ้ำซ้อนใน Web Application และทางแก้: สร้าง Library5:44

ผลปรากฏก็คือ พอเรามี web application กระจายอยู่หลายที่ สิ่งที่ตามมาก็คือ เราอ่ะมีโค้ดที่ค่อนข้างคล้ายกันอ่ะครับ อยู่เต็มไปหมดเลย แล้วก็อย่างที่ผมเล่าให้ฟังนะว่า เราอ่ะมี 3 domain ในเครือบริษัทใช่ป่ะ

ไอ้เหตุการณ์แบบเนี้ยเกิดขึ้นทั้งวงใน ทั้ง LINE Play เรามี web application แบบเต็มมาก เยอะสุดๆ เลยอ่ะ มันก็มีโค้ดคล้ายๆ กันเนาะ เพราะว่าโค้ด frontend อ่ะ ถ้าไม่นับเรื่อง domain อ่ะ มันก็จะมีโค้ด setup โค้ดอะไรต่างๆ หลายส่วนเลยที่มันคล้ายๆ กันในนั้นหมดครับ โอเค โค้ดอะไรที่คล้ายกันบ้าง component UI นะ เพราะว่า web application ออกมาใน domain เดียวกัน หลายๆ ตัว ก็ต้องมี design system เดียวกัน เราต้องทำ UI หน้าตาเหมือนๆ กันอยู่เต็มไปหมดเลย แล้วก็สิ่งถัดมาก็คือเรื่องของ repeat logic นะ

กับตัว feature บางอย่างที่แบบมันอาจทำงานอยู่บน

feature มันอาจจะอยู่บน LINE อยู่บน WebView อะไรอย่างเงี้ย อาจจะมีฟีเจอร์ซ้ำกันบางอย่างก็ซ้ำกันไปซ้ำกันมาครับ

เรื่องปัญหาซ้ำๆ กันเนี่ย เราก็จะแก้ไขปัญหามันด้วยการสร้าง library ขึ้นมาใช่ไหม แต่การสร้าง library ตัวนึงครับ

kleros: Library สำหรับสร้าง Library7:00

มันตอนที่ set up มันขึ้นมา จริงๆ ไม่ใช่แค่ library project ทุกอย่าง set up ขึ้นมาใครก็ไม่อยาก set นะ มันเป็นเรื่องปวดหัว เราต้อง set ทั้งเรื่องของ code formatting ครับ set environment นะ อันนี้ run บน Node ได้ run บน mobile run บน browser อะไรอย่างงี้

browser รุ่นไหน WebView รุ่นไหน รวมถึง output ท้าย เพราะสมัยนี้ก็มี ESM มี CJS มี UMD type มันเยอะไปหมดเลย

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

สร้าง Web App ง่ายๆ ด้วย Waraji katsu7:42

เขาเอาความซับซ้อนยัดลงกล่องครับ สร้างเป็น library ชื่อว่า kleros ที่เป็นเหมือนตัวที่มาช่วย set up library ทุกตัวในบริษัทครับ หลังจากนี้ library ทุกตัวในบริษัท มันก็เลยใช้ kleros เนี่ยแหละ set ขึ้นมา ทำให้จากเรื่องยากๆ อะ มันก็เขียนโค้ดแค่ 3 บรรทัดเราได้ library ขึ้นมาละ

ถัดมาก็ด้วยความที่ project เราเยอะมาก เยอะจริงๆ เราต้องขึ้น project ขึ้น web app บ่อยครับ การขึ้น web app ก็เป็น pain อย่างนึงนะ เราต้องขึ้น web app ที่เป็น client-side rendering แล้วมัน render บนไหนได้บ้าง เป็น LINE หรือเป็นอะไรใช่ไหม เราก็คงจะไม่อยากสร้าง web app แบบขึ้นเองใหม่

อย่างนี้ก็เป็น Vite config นะ เมื่อก่อนเป็น Webpack ก็จะทรมานลากไส้เลยครับ เราก็เลยสร้าง library ขึ้นมาที่จะช่วยในเรื่องนี้ เราเปรียบเสมือนการทำ web app มันคือการทำอาหารจานนึง ในเคสนี้คือการทำข้าวหน้าหมูทอดWaraji katsu

Waraji katsu: เปรียบเสมือนการทำอาหารจานนึง8:45

ที่เราจะปรุงแต่งมันด้วย library มากมาย

ที่เป็น library ในเรื่องของการ set up build time library ที่ช่วยในการ set up เรื่อง runtime hook error รวมถึง library ที่ช่วยในการทำตัว formatting นะ linting ต่างๆ แล้วก็เขียน test ใครๆ ก็อาจจะหยีกับการเขียน test นะ แต่ว่าเราทำให้การเขียน test มันง่ายมาก ง่ายนิดเดียวครับผม รวมถึงที่เนี่ยเราไม่ใช้ 𝚌𝚛𝚎𝚊𝚝𝚎-𝚟𝚒𝚝𝚎-𝚊𝚙𝚙 หรอก เราไม่ทำกันแบบนั้น เรามี 𝚌𝚛𝚎𝚊𝚝𝚎-𝚠𝚘𝚛𝚊𝚌𝚑𝚊𝚔-𝚌𝚕𝚊𝚜𝚜𝚒𝚌 ที่ตึ้งเดียวได้ project สวยๆ ออกมาเลยครับผม

Design System UI: LINE MAN UI, LINE Pay UI, วงใน UI และ Core UI9:23

ด้วยทั้งหมดเนี่ยเราก็สร้าง web application นะ แต่ว่าปัญหาที่เราพูดข้างต้นนะ ตัว repeat UI มันก็ยังเกิดขึ้นอยู่ เต็มไปหมดเลยใน web application ของเรา เราเลยต้องทำ library ที่มาทำ design system ของ UI ในแต่ละ domain นะ ก็จะมี LINE MAN UI LINE Pay UI แล้วก็วงใน UI แต่การทำ library design system อะ ก็จะมีเรื่องคล้ายๆ กันเต็มไปหมดเลยครับ เราก็เลยจำเป็นที่จะต้องทำ library ขึ้นมาอีกตัวนึง ที่มาจัดการเรื่องที่คล้ายๆ กันเนี่ย ก็จะเป็น Core UI ที่มี utility สำหรับการทำ UI ที่แบบไม่ specific กับ domain ถ้าให้นึกภาพมันอาจจะเป็นพวกแบบ Base Material UI หรือว่า Bootstrap อะไรอย่างเงี้ยเมื่อก่อนครับผม

Repeat Feature/Logic: SDKs, Utils, และ Hooks10:09

เราพูดถึงตัว repeat feature นะ repeat logic เต็มไปหมดเลย เราก็เอาพวก feature พวกนั้นมายัดลงใน LINE MAN SDK

วงใน SDK เป็น library ที่เราขึ้นมาอีก แล้วเราก็ทำตัวในส่วนของ utils library ในบริษัท

แล้วก็มีในส่วนของตัว hooks นะ เพราะที่เนี่ยจะเขียน React กันเป็นหลักเลย ก็จะมีตัว hooks ในการมาจัดการพวกนี้ นอกจากนี้ทุกอย่างที่เราพูดมาครับ เราจับมันมารวมกัน มัน reuse กันได้หมดเลย กลายเป็น ecosystem ตัวนึงที่แบบค่อนข้างสมบูรณ์เลย LINE MAN UI จะใช้ตัว utils ก็ได้ Core UI ใช้ utils ได้อะไรพวกนี้ครับผม

อีกสิ่งนึงที่เรามักจะเกิดขึ้นในการทำ software development คือเรากะพริบตาไม่กี่ที library ข้างนอกที่เราใช้ครับ เราใช้ library ข้างในบริษัทอย่างเดียวอะ มันไม่ได้หรอก

มันต้องใช้ library ข้างนอกมาช่วย ในการทำเรื่องที่มันเคยมีคนทำอยู่แล้ว ให้ทำได้อย่างง่ายดายครับ

ปัญหา Library ภายนอก และทางแก้: Library Wrapper11:11

แต่ว่าเรากะพริบตาแป๊บเดียว เอ้า ไม่กี่ปีมัน breaking change ละ สักพักนึง เอ้า มัน deprecated ว่ะ อะไรอย่างเงี้ย หรือสักพักนึง เอ้า maintainer หายทำไงดีอะครับ

นั่นแหละ สิ่งที่เราต้องทำในเคสเหล่านี้ ก็คือการที่เราต้องเปลี่ยน library นะ ซึ่งอย่างที่บอกเรามี web application เยอะสุดๆ เลย เปลี่ยน library ครั้งนี้ต้องไล่ไปหลายโปรเจคมาก แล้วมันค่อนข้างเหนื่อยมาก เพราะมันก็ต้องมี migrate breaking change ของแต่ละโปรเจคเยอะมาก เราก็เลยทำสิ่งที่เรียกว่า library wrapper ครับ ในเคสนี้เราจะยกตัวอย่างของ wrapper library ตัวนึงในบริษัทนะ ก็คือในส่วนของการทำ analytics นะครับ ก็ให้เปรียบเหมือนการทำ analytics

การที่เราแบบ perform analytics ตรงไปที่ analytics แต่ละเจ้าอะ เหมือนผักสดครับ วันนึงเรากินผักสดแล้วมันก็หอม มันไม่อร่อย วันนึง product อาจจะบอกว่าไม่อยากกินผักนี้ อยากจะเปลี่ยนไปกินผักอื่น เราต้องแก้โค้ดทั้งโปรเจคเลยรึเปล่า ที่นี่เราไม่ทำแบบนั้นครับ เราหาแป้ง burrito มาห่อ analytics เป็นหลีบอีกตัวนึง มา wrap ผักสดนี้ แล้วเค้าก็แค่เลือกเปลี่ยนผักข้างในอะ แล้ว dev ก็ไม่ต้องแก้โค้ดอะไรเยอะ แก้แค่ wrapper ข้างใน แล้วโค้ดที่มัน perform อะ มันก็ perform ไปได้ปกติเลยครับผม

Library Ecosystem ใน LINE MAN Wongnai ที่สมบูรณ์12:33

แล้วทั้งหมดนี้มันก็เอามาใช้ใน ecosystem ของเราได้อีกทีนึงเหมือนกัน แล้วก็ซึ่งอย่างที่บอกนะ เราใช้ตอนนี้ เรามี ecosystem ที่ค่อนข้างสมบูรณ์มาก เรามี clear roadmap ในการสร้าง library ทั้งหมดออกมา แล้วก็เราก็มีตัวของ Wallaby Cluster ในการสร้าง web application ออกมา ซึ่งทั้งหมดทั้งมวลนี้ก็มาใช้ร่วมกัน กลายเป็น library ecosystem ใน LINE MAN Wongnai ครับ ก็เหมือนคำกล่าวของซีซาร์ครับ

Library อยู่รวมกันเราแข็งแกร่ง13:00

แต่ไม่ใช่ซีซาร์นี้ เป็นซีซาร์นี้ครับ Library อยู่รวมกันเราแข็งแกร่งครับ

ต่อให้มีคนมาขอให้เราขึ้นเว็บอีกกี่เว็บใช่ไหม เฮ้ย เราไม่กลัวละ ขึ้นอีกกี่เว็บทั้งวันก็ทำได้ครับ

การเรื่องราวของ library ก็จบประมาณนี้ แต่ว่า session นี้ยังไม่จบเพราะเรามี end credit

สร้าง Library Ecosystem ของตัวเองต้องมีอะไรบ้าง?13:27

ก็คือถ้าเกิดคุณอยากมี library ecosystem ไปใช้เป็นของตัวเองนะ เราจะต้องมีอะไรบ้าง คุณต้องมี repository platform ใช่ไหม ถ้าเกิดเป็นใครแบบอยาก open source ก็ใช้ npm public ก็ได้ หรือ private เค้าก็มีนะ แต่ที่นี่เราจะใช้เป็น Sonatype Nexus repository เองครับ

Monorepo: ทางเลือกสำหรับการจัดการ Library หลายๆ ตัว13:51

ถ้า library ทำ library เดียวอะไรใช้ repository เดียวใช่ไหม แต่พอมันเยอะๆ แล้วมันต้องแก้บ่อยๆ รวมกันใช่ไหม เราอาจจะมาใช้เป็น monorepo ก็ได้ ก็จะช่วย solve ปัญหานี้ครับ ใช้ nx หรือ Turborepo ก็ได้ set ไม่ยากครับ ถ้าเกิดไม่เคยมีใครรู้จักตัว monorepo มาก่อน ก็เรามีบล็อกครับ ที่สรร technical specialist ฝั่ง engineer สุเทพของเรา เคยเขียนบล็อกเอาไว้ใน live.lineman.com ครับ

ก็ไปลองดูกันได้ครับ แค่ 3 นาทีคุณก็มี monorepo ของตัวเองได้แล้ว ไปกด git clone ก็ได้นะ ได้เลยทันทีครับ

Package Versioning: Semantic Release และ Changesets14:26

แล้วก็สุดท้ายนี้ก็คือการทำ library นะก็จะมีเรื่องของ package versioning ครับ ก็เราต้อง tag version นะ อย่าง tool ที่เราแนะนำก็จะมี semantic release ที่ช่วยในการ tag version สำหรับอันนี้จะเหมาะกับตัว repository ธรรมดามากกว่า

จะไม่เหมาะกับ monorepo เท่าไหร่ ถ้า monorepo จะแนะนำ changesets ใช้แล้วโคตรดีครับผม อันนี้ก็จะช่วย สิ่งที่มันดีกว่า versioning อื่นๆ คือมันทำ conventional changelog เราแค่ commit git อะ มัน gen changelog ออกมา gen ตัว version ออกมาตาม git ของเราที่ commit เลยครับ สุดท้ายนี้ก็จบ session เพียงเท่านี้ครับ ก็ถ้าเกิดทุกคนในเองก็มีได้นะ

library ecosystem ของตัวเองอะครับผม ง่ายๆ ครับ ก็ขอบคุณครับ

Q&A: การ Test Library, การตั้งชื่อ Library, Waraji Katsu จะ Open Source ไหม?15:13

ก็ใครมีคำถามอะไรก็สามารถถามได้เลยครับ

ก็จบไปแล้วนะครับ สำหรับ session ของพี่โอ๊ตนะครับผม กับตัว internal library นะครับใน LINE MAN Wongnai ครับผม ต่อไปนะครับก็ตามเคยครับ เข้าสู่ session Q&A ครับ มีใครมีคำถามมั้ยครับ อาจจะเป็นคำถามเรื่อง engineering practice อาจจะเป็นคำถามกับใช้ lib อะไรบ้าง ใน LINE MAN Wongnai ได้ครับ อย่าลืมนะครับว่าเรามีแจก license JetBrains นะครับ แล้วก็เราแจก 2 ครั้ง 2 ใบนะครับ เพราะว่ารอบที่แล้วเค้าพบมารอบนี้ด้วยนะครับผม

มีมั้ยครับ โอเคครับ

ใครอยากถามว่า วิธีการ test lib ที่สร้างขึ้นมา

เราจะมั่นใจได้ยังไงว่า lib ที่เราทำ

ไม่ไประเบิดโค้ดที่ import lib อันไปอ่ะครับ โอเคครับ ในส่วนของการ ensure ว่า lib ของเราทำงานได้ถูกต้องนะ เรามี unit testing ครับ ในตัวของทุกฟังก์ชันที่อยู่ใน library

แล้วก็มี integration test ครับ แล้วก็ในส่วนของตัวปลายทางโปรเจคครับ QA ของเรา provide พวก automate testing E2E ครับ เราใช้ Playwright ในการ test ครับ ก็แบบว่าตอนนี้เรามีการ ensure ตั้งแต่ library ตัวโปรเจคเอง จริงๆ ในตัวโปรเจคเองตอนที่เอา library ไปใช้ ก็มีในส่วนของ integration test เหมือนกันครับ มันก็จะ ensure ได้ว่า lib เราเอาไปลงที่ไหน แล้วมันก็จะไม่แตกครับ ครับผม หมายความว่าเราทำ integration test ในตัว lib

แล้วก็เช็กว่าเวลาเรา lib เนี่ยไป import เราทำได้เลยถูกไหม ใช่ครับ โอเคครับ แล้ว test ใน lib แล้วก็ test โปรเจคปลายทางด้วยครับ โอเค ขอบคุณสำหรับคำถามนะครับ

มีคำถามอีกไหมครับ เรายังเหลือ JetBrains อีก 1 ใบนะครับผม

มีไหมครับ พอดีพี่คนเมื่อกี้เขามี JetBrains อยู่แล้ว ถ้าผมเอาไปแจกอีกมันจะเป็น 2 ปี มีใครมีคำถามอีกไหมครับ

บังเอิญหรือเปล่านะครับ เดี๋ยวๆ เชิญทีละท่านนะครับ

Q&A: เมื่อไหร่ควรสร้าง Library เพิ่ม? การ Maintain Library ของคนที่ออกไปแล้ว?17:39

ครับ มีวิธีการตั้งชื่อ lib ยังไงบ้างครับ โอเคครับ ก็วิธีการชื่อ lib ของที่นี่ จริงๆ เคยมีคนกล่าวไว้ครับ เป็น SDE ตัวท็อปของบริษัทเรานะ พี่มนัสวิน เขาเคยกล่าวไว้ว่าถ้าเราตั้งชื่อ lib ที่มัน specify เกินไป เราจะขยาย scope ของ lib ไม่ได้ครับ แล้วมันก็จะเป็นการ fix ตายตัวเกินไปว่า lib นั้นมันจะต้องทำหน้านั้นไปตลอดกาล แล้วบริษัทเราทำงานเกี่ยวกับอาหารครับ เราเลยเอาชื่ออาหารมาตั้งเป็นชื่อ lib ครับ

เดี๋ยวอีกคำถามนึงนะครับ

มีโอกาสที่ Waraji Katsu จะ release เป็น public ให้คนภายนอกใช้ไหมครับ จริงๆ plan การ release Waraji Katsu เป็น public ถูกคิดเอาไว้ตั้งแต่ตอนเริ่มสร้าง library แล้วครับ จริงๆ ในตัว library มันมีการแบ่งส่วนของ ส่วนที่เป็น internal logic กับส่วนที่เป็น logic ที่ public ได้ครับ เพียงแต่ตอนนี้เราอยากจะมั่นใจก่อนว่า ไอ้ที่เราทำมาเนี่ย ดีจริงหรือเปล่าครับ แต่ว่าวันนึงที่มันเรารู้สึกว่ามันค่อนข้าง stable แล้ว เรา wrap ทุกอย่างสมบูรณ์แล้ว เราจะ release มันออกมาเป็น open source project ครับ public logic แน่นอนครับ โอเคครับผม

มีคำถามอีกไหมครับผม มีใครอยากถาม ครับผม

เราจะรู้ได้ไงครับว่าเราควรเขียน lib เพิ่ม หรือว่าไม่ควรเขียน lib เพิ่ม แล้วก็เราจะ maintain ยังไงดี

สมมุติว่าเราต้องมาแก้ lib ของคนที่ไม่ได้อยู่แล้วครับ

โอเค เดี๋ยวแบ่งประเด็นก่อนเนาะ เรื่องของการรู้ได้ยังไงว่าเราจะต้องเขียนตัว library เพิ่มใช่ป่ะครับ ส่วนมากมันอย่างกรณีของผม ผมมองว่า logic ที่มันค่อนข้าง common น่ะครับ common script อันนี้เราเอาไปทำเป็น library เลย รวมถึง logic ที่เราเห็นว่ามันมีการเริ่ม repeat repeat ไม่เยอะอาจจะไม่เป็นไร แต่พอเริ่ม repeat เยอะละ อันนี้ดูเป็น practice หรือดูเป็น repeat feature เยอะๆ อันนี้เราจะเอาไปไว้ใน library เหมือนกันครับ แล้วก็ในส่วนของเรื่องการ maintain เนาะ

สมมุติถ้าคนที่ออกไปแล้วจะ maintain ยังไง จริงๆ ในแต่ละ library เราครับ

เราพยายาม set code convention ให้มันมีความใกล้เคียงกัน จริงๆ ที่นี่ก็จะมีตัว project convention ที่ apply ใช้กับทุก frontend team อ่ะครับ ถ้า base เดียวกันเราก็จะแปลว่า เราสามารถ transfer คนไปทำแต่ละ project ได้ โดยที่ไม่ต้องกลัวของมันมี breaking change เยอะอ่ะครับ เพราะเราก็จะเข้าใจอยู่ละ รวมถึงเรามี automate testing ในการป้องกันปัญหาพวกนี้ด้วย แล้วก็ unit test ครับ

มีใครมีคำถามอีกมั้ยครับผม

Q&A: Monorepo ใน LINE MAN Wongnai และ Pain Point20:37

อยากทราบว่าที่ LINE MAN Wongnai มี plan จะใช้ monorepo มั้ยครับ หรือถ้าเคยใช้แล้วรู้สึกมี pain point อะไรมั้ย กับ scale บริษัทใหญ่ขนาดนี้ จริงๆ เรามีการ apply monorepo กับในส่วนของตัว

internal project ที่เป็น web แล้วก็ในส่วนของ library ครับ แต่ว่ายังอยู่ในขั้นของการทดลองแล้วกัน

ในส่วนของ project ที่เป็น web เนาะ

เราพบว่ามันจะมีสิ่งที่มันจะยากขึ้นน่ะครับ คือการ set up pipeline ในการ deploy ใน repository มันจะมีความ complex มากกว่าเรา set repository เดียว แต่ข้อดีของมันก็คือสมมุติถ้า project เหล่านั้น มันมี dependency อะไรต่อกันเยอะอ่ะครับ เราทำทีเดียวอ่ะมันก็ไปหมดเลย

อย่างในเคสของเรานะ ในสำหรับ project เราเอามาทำกับ micro frontend ครับ มันก็เลยค่อนข้างตอบโจทย์ในส่วนนี้ แต่ในส่วนของ project ที่มันแยกกัน ก็ยังคิดว่าเป็น repository ธรรมดาก็อาจจะยังตอบโจทย์กว่าครับ ในส่วนของที่เป็น library ก็อันนี้เราลองกับตัว Waraji Katsu ตัวแรกเลย ก็อันนี้ค่อนข้างดีครับ เพราะ Waraji Katsu เป็น library ที่มีการ depend กันค่อนข้างเยอะ ตอน release ครับมันจะ release ง่ายมาก พอมันเป็นแบบมาอยู่ใน repository เดียวครับ ก็จะมีการใช้ตัว monorepo ที่ลอง set up กันขึ้นมาครับผม

แจก License JetBrains22:16

งั้นเดี๋ยวถึงเวลาแจก JetBrains นะครับ

ต้องถามว่าอยากแจกกี่ใบดีครับผม

เลือก 2 คน เอ่อ เลือกได้ครับ

ใครอยากได้ JetBrains บ้าง มีใครจากคนที่ถามคำถามเมื่อกี้มีใครอยากได้ JetBrains บ้างครับผม

เดี๋ยวผมจะสุ่มเลขขึ้นมาตัวนึงนะ แล้วเราก็นับวนไป

ผมเอาเลข 11 แล้วกัน ยินดีด้วยครับผม

คุณอาจจะไม่ได้ทำอะไรเลยแต่ได้ตั๋ว JetBrains ไปใช้ฟรี 1 ปีครับผม

ขอให้สนุกกับ session ถัดไปครับ ขอบคุณครับ