Perjalanan Figma ke TypeScript

Perjalanan Figma ke TypeScript: Menghapus Bahasa Pemrograman Kustom melalui Kompilasi

• Figma telah menulis bagian inti arsitektur rendering mobile menggunakan bahasa pemrograman kustom bernama Skew
  • Bahasa yang diciptakan untuk mendapatkan tambahan performa di mesin playback
  • Memperkenalkan cara memigrasi Skew ke TypeScript secara otomatis tanpa menghentikan pengembangan selama satu hari pun

Awal dan Keterbatasan Bahasa Skew

• Skew dimulai sebagai proyek sampingan pada awal Figma
  • Saat itu, tim perlu membangun cepat prototype viewer yang didukung di web dan mobile
  • Menjadi bahasa pemrograman berbasis JavaScript yang sepenuhnya dapat dikompilasi untuk memungkinkan optimasi yang lebih canggih dan waktu kompilasi lebih cepat
• Seiring waktu, Seiring akumulasi kode Skew, batasannya semakin terlihat
  • Sulit bagi pengembang baru untuk beradaptasi
  • Tidak mudah diintegrasikan dengan basis kode yang lain
  • Ekosistem pengembang di luar Figma sangat terbatas
  • Kesulitan memperluas akhirnya melebihi keuntungan awalnya

Faktor-faktor yang Memungkinkan Migrasi ke TypeScript

• Peningkatan dukungan WebAssembly di browser mobile
• Penggantian komponen inti mesin Skew dengan komponen yang sesuai dari mesin C++
  • Perpindahan ke TypeScript menimbulkan kerugian performa yang lebih sedikit
• Pertumbuhan tim membuat alokasi sumber daya untuk fokus pada pengalaman pengembang menjadi mungkin

Proses Konversi Codebase

• Tujuan: Mengonversi seluruh kode Skew ke TypeScript
  • Memilih migrasi otomatis daripada menulis ulang secara manual
  • Mencegah penurunan kecepatan pengembangan serta mencegah runtime error dan penurunan performa bagi pengguna
• Proses rollout tiga tahap
  1. Menulis Skew, build Skew
     • Mempertahankan proses build asli, mengembangkan transpiler, dan meng-commit kode TypeScript ke GitHub
  2. Menulis Skew, build TypeScript
     • Memulai rollout trafik produksi langsung dari codebase TypeScript
     • Pengembang tetap menulis Skew, sementara transpiler mengonversi Skew ke TS
  3. Menulis TypeScript, build TypeScript
     • Menjadikan TypeScript sebagai sumber kebenaran untuk pengembangan
     • Memblokir proses pembuatan otomatis dan menghapus kode Skew dari codebase

Catatan tentang Pekerjaan pada Transpiler

• Kompiler terdiri dari frontend dan backend
  • Frontend: mengurai dan memahami kode masukan, melakukan pengecekan tipe, dan pemeriksaan sintaks
  • Mengonversi ke IR (Intermediate Representation) untuk menangkap sepenuhnya semantik dan logika kode masukan
  • Backend: mengonversi IR ke berbagai bahasa
• Transpiler: jenis compiler khusus yang menghasilkan kode yang mudah dibaca manusia

Tantangan yang Dihadapi Selama Migrasi

• Masalah performa array destructuring
  • Menghindari array destructuring JavaScript dapat meningkatkan performa hingga 25%
• Optimasi devirtualization pada Skew
  • Selama rollout, menambah langkah ekstra agar devirtualization tidak merusak perilaku codebase
• Urutan inisialisasi penting di TypeScript
  • Transpiler perlu menghasilkan kode yang menghormati urutan ini

Studi Kasus Pemanfaatan Source Map untuk Pengalaman Pengembang

• Fokus pada kemudahan migrasi dan kelancaran pengalaman debugging untuk produktivitas pengembang
• Menghubungkan kode terkompilasi dengan kode sumber menggunakan sourcemap
  • Browser hanya bisa memahami JavaScript
  • Melalui sourcemap, browser dapat mengetahui pada bundle JavaScript terkompilasi di mana harus berhenti untuk breakpoint pada kode sumber
• Proses pembuatan sourcemap tiga tahap
  1. Menghasilkan sourcemap TypeScript → JavaScript
  2. Menghasilkan sourcemap Skew → TypeScript untuk setiap file sumber Skew
  3. Mengonfigurasi sourcemap agar memetakan Skew ke JavaScript

Kasus Penanganan Kompilasi Kondisional

• Skew mengizinkan kompilasi kondisional via pernyataan if tingkat atas
  • Menentukan kondisi menggunakan konstanta waktu kompilasi
  • Memungkinkan definisi target build berbeda pada codebase yang sama
• TypeScript tidak memiliki fitur kompilasi kondisional
  • Dipindahkan ke tahap bundling
  • Menggunakan fitur defines dan dead code elimination dari esbuild
  • Menimbulkan efek samping berupa sedikit kenaikan ukuran bundle

Pengembangan Prototipe di Era TypeScript

• Dengan memigrasikan kode Skew ke TypeScript, Figma memodernisasi codebase inti
  • Membuka jalan integrasi yang jauh lebih mudah dengan kode internal maupun eksternal
  • Membuat pengembang dapat bekerja lebih efisien
• Dulu TypeScript belum cocok, tetapi sekarang jelas menjadi pilihan yang tepat
• Figma sedang menjalankan pekerjaan lanjutan agar dapat memetik semua manfaat perpindahan ke TypeScript
  • Integrasi dengan sisa codebase
  • Pengelolaan paket yang jauh lebih mudah
  • Langsung memakai fitur-fitur baru dari ekosistem TypeScript

Opini GN⁺

• Figma melakukan transisi dari bahasa pemrograman kustom Skew ke TypeScript secara sangat sistematis dan bertahap. Menarik bahwa mereka melakukannya dengan migrasi otomatis tanpa menghentikan aktivitas pengembangan sekalipun untuk satu hari. Menurut saya ini contoh yang baik dalam menyelesaikan utang teknis saat perusahaan membesar dan menyesuaikan diri terhadap perubahan ekosistem.

• Dalam perpindahan dari bahasa kustom yang berfokus pada performa ke bahasa umum, peran perubahan lingkungan teknologi seperti kemunculan WebAssembly sangat besar. Ini menunjukkan bahwa saat memilih teknologi, penting mempertimbangkan bukan hanya kebutuhan saat ini, tetapi juga kecepatan dan arah perkembangan teknologinya.

• Pendekatan pada pengalaman pengembang melalui sourcemap, penanganan kompilasi kondisional, dan detail praktis lain yang sangat aplikatif ini memang sangat bermanfaat. Proses migrasi yang menjaga kompatibilitas dengan legacy sambil bergerak bertahap sangat mengesankan.

• Untuk pekerjaan skala besar seperti ini, pengembang pasti butuh alat konversi kode otomatis. Sepertinya kunci utamanya adalah pengembangan transpiler berbasis compiler Skew. Ini terlihat seperti pekerjaan yang menuntut keahlian kuat dalam teori compiler dan implementasi internal.

• Migrasi bahasa pemrograman berdampak lebih dari sekadar konversi kode. Dapat membawa perubahan positif ke budaya dan ekosistem pengembangan secara menyeluruh. Diperlukan pendekatan yang hati-hati, tetapi bila organisasi memiliki kapasitas, ini layak untuk dicoba.

[GN⁺]

Komentar Hacker News

• Menurut Andrew Chan, seorang kontributor proyek, Figma sudah memakai TypeScript di area lain selama hampir 10 tahun, dan pada sebagian besar periode itu TypeScript lebih dominan daripada Skew. Skew digunakan pada beberapa area produk, seperti mesin mobile, prototyping player, dan fitur mirroring.
• Menariknya, Figma punya bahasa khusus untuk JS, dan fakta bahwa itu lebih cepat dibandingkan TS tadi semakin mengejutkan. Lalu akhirnya bermigrasi ke TS yang lebih lambat.
• Menurut Evan Wallace (mantan CTO Figma), Skew lebih cepat 1,5–2 kali daripada TypeScript berkat optimasi yang lebih baik yang dimungkinkan oleh sistem tipe yang lebih ketat.
• Menarik bahwa saat destructuring array, JavaScript membuat iterator yang mengulangi isi array alih-alih langsung mengindeks array. Penasaran kenapa JavaScript tidak mengindeks array secara langsung.
• Sepertinya Skew hanya punya callback. Disebutkan juga adanya async/await dan sistem tipe yang lebih fleksibel.
• Figma menulis DSL TypeScript custom + compiler untuk menangani isu keamanan seperti otorisasi.
• Setiap perusahaan besar punya toolkit internal, bahasa, dan Kubernetes sendiri, tapi tidak membagikannya. Sayang jika Skew open source, mungkin bisa menjadi TypeScript yang lebih baik.
• Penasaran apa motivasi Figma memakai WebAssembly.
• Pelajaran yang bisa dipetik: jangan bikin bahasa custom.
• Menarik melihat argumen orang-orang yang anti-TypeScript. TypeScript hampir tidak memiliki downside dan meningkatkan hampir setiap baris kode. Mereka tampak takut belajar hal baru, enggan menghabiskan waktu, atau salah paham mengenai manfaatnya. Jika menyetujui penentang TypeScript, perlu dipikirkan lebih dalam soal alasannya. Jika tidak, risikonya akan besar.