หลังจากอ่านบทความเรื่อง The evolution of Figma’s mobile engine: Compiling away our custom programming language
เล่าถึงการเปลี่ยนแปลง code ของระบบ mobile engine ของ Figma ด้วยภาษา Skew
ทำหน้าที่ compile code ให้ทำงานได้ทั้ง web และ mobile
มาดูเหตุผล แนวคิดและแนวทางในการย้ายมายังภาษา TypeScript
ว่ามีอะไรที่น่าสนใจบ้าง
ในช่วงแรก ๆ ของการพัฒนาระบบด้วยภาษา Skew ที่พัฒนาขึ้นมาใช้เอง
ยังคงใช้งานดี ระบบทำงานได้ดี
เมื่อระบบใหญ่ขึ้น ทีมใหญ่ขึ้น ปัญหาก็เริ่มตามมา
ซึ่งเคยลองเปลี่ยนมาใช้งานภาษา TypeScript แล้วแต่ performance ไม่ดีเท่ากับของเดิมจึงล้มเลิกไป
แต่เมื่อเวลาผ่านไป technology ดีขึ้น เช่น WebAssembly ที่ทำงานบน web browser ได้
ทำให้ย้าย code ที่เป็นภาษา C+ มาทำงานได้เลย
โดยที่ performance ไม่ได้ลดลง
จึงทำให้มาสนใจอีกครั้ง
รวมทั้งมีปัญหาต่าง ๆ ตามมาเช่น
- การทำงานร่วมกับ library หรือเครื่องมือต่าง ๆ ยาก เพราะว่าใช้ภาษาที่สร้างใช้กันเอง
- เสียเวลาในการ training พนักงานใหม่ ๆ ที่เข้ามาเยอะมาก
ดังนั้นจึงมาใช้งาน TypeScript อีกครั้ง
ซึ่งมีข้อดี เช่น
- เขียน code ร่วมกัน หรือ ทำงานร่วมกันทั้งภายในและภายนอกได้ง่ายขึ้น เป็น static type รวมทั้ง package management ต่าง ๆ ครบ
- มี community ที่แข็งแรงและใหญ่ ทำให้มีเครื่องมือช่วยเหลือเยอะ ทั้ง linter, bundler และ static type analysis เป็นต้น
- มีความสามารถสมัยใหม่ ๆ เช่น async-await และเรื่องของ type system ที่มีความยืดหยุ่น
- ง่ายต่อการ tranining พนักงานใหม่ ๆ ขยายทีมได้ง่าย รวมทั้งการทำงานร่วมกันระหว่างทีม
มาดูขั้นตอนการย้าย code มาเป็น TypeScript
ขั้นตอนที่ 1 ทำการสร้าง transpiler เอง เพื่อแปลง code จาก Skew ไปยัง TypeScript
จากนั้นทำการ push ไปยัง GitHub เพื่อทำให้นักพัฒนาเห็นว่า code ของ TypeScript เป็นอย่างไร
ทำการ build code ด้วย esbuild
ส่วนผู้ใช้งานยังคงใช้งานจาก JavaScript ที่แปลงมาจาก Skew เหมือนเดิม
โดยนักพัฒนายังเขียน code ด้วย Skew
แสดงดังรูป
ขั้นตอนที่ 2 ทำการ build JavaScript จากนั้นก็ทำการ deploy
หลังจากที่ได้ code TypeScript มาก็ทำการ build
ทำการ run unit test ให้ผ่าน
จากนั้นก็ทำการ deploy ให้ผู้ใช้งานใช้ จะค่อย ๆ ทำไป
โดยนักพัฒนายังเขียน code ด้วย Skew
แสดงดังรูป
ขั้นตอนที่ 3 มาเขียน code ด้วย TypeScript
โดยจะตัดการ generate code แบบอัตโนมัติทิ้งไป
รวมทั้งผู้ใช้งานก็มาใช้งาน code จาก TypeScript ทั้งหมด
แสดงดังรูป
เป็นแนวคิดและแนวทางที่น่าสนใจมาก ๆ
ในบทความยังอธิบายเรื่องของการแปลง code ด้วย
ลองอ่านเพิ่มเติมกันดูครับ