Một trình đóng gói JavaScript được phát triển theo dòng ý thức (Zig Native typescript Transpiler & Compiler)
(github.com/ohah)Trong thời đại AI, nên học như thế nào?
Tôi không nắm được rõ cần loại chuyên môn nào, và năng lực nào là có giá trị nhất ở thời điểm hiện tại.
Có lẽ cả các công ty tuyển dụng lập trình viên lẫn chính các lập trình viên cũng không có tiêu chí rõ ràng như nhau.
Dù sao thì tôi vẫn nghĩ rằng nếu cứ đứng yên thì chắc chắn sẽ thiệt.
Trước hết, với suy nghĩ cứ thử làm ra cái gì đó đã,
ban đầu tôi bắt đầu bằng việc đơn giản là làm một Chrome Remote DevTools để học tập.
Trong lúc làm, tôi lại nghĩ thử hỗ trợ cả React Native bằng remote debugger xem sao.
-> Không hiểu Metro nên quá rối.
-> Thử clone Metro để vừa làm vừa học.
-> Liệu có thể tạo ra một bundler tốt hơn Metro cho React Native không?
-> Mò mẫm đủ thứ với Rolldown, swc, bun để cố làm ra một bundler tốt hơn Metro bundler.
Trong số đó thì bun và Rolldown có vẻ có tiềm năng, nhưng tôi cảm thấy có giới hạn khi phải tùy biến phần lõi quá nhiều hoặc tách fork.
Mặt khác, cũng không có web bundler nào tương thích hoàn toàn với Metro bundler: cú pháp JavaScript mà flow và engine Hermes cho phép, rồi cả thứ tự gọi hàm quan trọng theo cách khác với web thông thường, v.v.
À... đằng nào cũng là học, vậy thì cứ tự làm luôn cả bundler để thay thế Metro của React Native đi.
Những điều tôi nhận ra khi làm bundler:
Thế thì cứ hỗ trợ cả web luôn không phải được à?
Thêm cả ES5 mà Rolldown đã bỏ
Vì phải chạy RN nên hỗ trợ luôn parser của Flow
Hỗ trợ cả wasm
Tốc độ cũng thử vượt bun và rolldown
Tự thêm cả HMR
Thử làm tree-shaking mạnh tay hơn nữa
Minify cũng cố vượt các bundler khác
Tôi phát triển nó với suy nghĩ rằng ít nhất trong benchmark phải thắng các bundler hiện có ở mọi tính năng mà tôi biết đến.
Tất nhiên tôi cũng nghĩ rằng ở nhiều chỗ mình vẫn đang thua.
So với các bundler khác thì về độ ổn định, tính năng, cộng đồng hệ sinh thái được hỗ trợ, hay như tree-shaking và minify đã nói ở trên, có module thì tốt hơn nhưng có module lại kém hơn; đúng như dự đoán, vẫn còn rất nhiều phần chưa hoàn thiện.
Tuy vậy, qua một mức độ kiểm thử chạy thực tế thì cũng có những phần vượt trội, và dù vẫn còn rất nhiều việc phải làm (SSL, MCP, CLI, ổn định hóa, tài liệu API, v.v.), nhưng mục tiêu ban đầu là build và chạy ứng dụng React Native thì tôi đã xác nhận hoạt động bình thường trên 3 ứng dụng thương mại qua release build, development build và development server, nên tôi nghĩ giờ công khai ra rồi tiếp tục phát triển cũng không muộn, vì thế mới viết bài này.
Dù vậy, phần phát triển và tính năng bundling (zntc cũng được build và phát hành bằng chính zntc) đã vận hành khá ổn,
các tính năng thiết yếu như decorator, hay các tính năng gần như thiết yếu trong React Native như worklet, typescript, flow... trên các thư viện tôi đã thử nghiệm đều chạy tốt không vấn đề gì,
ngoài ra còn cung cấp plugin cho vite và rspack, có cả môi trường phát triển giống vite, rspack (RN, Web), có tài liệu, có React HMR, hỗ trợ module federation, v.v.
Nên tôi nghĩ ít nhất nó cũng đã có được những chức năng cơ bản của một bundler và transpiler, vì vậy tôi muốn công khai để nhận phản hồi và tiếp tục phát triển.
Số dòng code tự tay viết là 0, tất cả đều được phát triển qua những cuộc tranh luận căng thẳng với AI.
Có lẽ tôi đã hành AI nhiều hơn bất kỳ lần phát triển sản phẩm nào trước đây.
Ban đầu tôi chỉ dùng Claude, sau này có dùng thêm Codex.
Thời gian phát triển riêng bundler là khoảng 3 tháng (khoảng 3000 PR), nếu tính cả dòng ý thức đã nói ở trên thì vào khoảng 6 tháng làm ngày làm đêm không nghỉ.
Tôi làm liên tục cả ngày thường lẫn ngày nghỉ, và vì một kiểu mặc cảm, ý thức so sánh không cần thiết với các bundler khác,
nên tôi cũng viết cực nhiều test case, đến mức có thể gọi là quá đà, để vượt qua đủ loại kiểm thử như test262 100% mà vẫn tiếp tục phát triển.
Rất mong nhận được nhiều phản hồi (__)
5 bình luận
Ngoài ra, cũng có Re.Pack sử dụng RSPack hoặc WebPack như một lựa chọn thay thế cho Metro.
Tôi viết hơi lan man nên đã bỏ sót mất.
Đúng như bạn nói, tôi cũng đã tham khảo Re.pack khá nhiều.
Theo tôi biết thì cả Re.pack lẫn Rspack đều dựa trên swc nên không hỗ trợ flow ở mức native,
và trong trường hợp của Re.pack, từ phiên bản 5 thì nền tảng cơ sở là Rspack, nên tương tự, Re.pack cũng dùng swc+babel, vì vậy tôi hiểu rằng các plugin phổ biến như flow, reanimated và nativewind (
zntcdự kiến sẽ hỗ trợ) vẫn đang được transpile bằng Babel.Cá nhân tôi muốn thoát khỏi Babel, nên với
zntctôi đã làm nó thành một tùy chọn được hỗ trợ sẵn theo mặc định.zntccũng hỗ trợ tính tương thích với Babel, nhưng tôi muốn giảm phụ thuộc vào Babel xuống gần như bằng 0 nếu có thể.Đó đều là những đoạn mã rất ổn định và đã được kiểm chứng, nhưng do giới hạn của JavaScript nên về tốc độ thì luôn là điểm nghẽn.
Thực ra trong quá trình phát triển, tôi liên tục so sánh benchmark với các bundler khác, và đúng như những gì có thể cảm nhận trực tiếp, so với các bundler khác thì về tính năng, độ ổn định và khả năng mở rộng vẫn còn kém hơn, nên tôi định sẽ tiếp tục cải thiện phần này.
Tuy vậy, vì khả năng tương thích parser của các thư viện React Native chủ chốt đã được tích hợp sẵn từ đầu, nên tôi cho rằng ở những đoạn nghẽn cấu trúc vốn buộc phải phát sinh trong Re.pack thì bên này đang có ưu thế hơn!
Đây hẳn sẽ là một dự án không dễ, chúc bạn nhiều động lực.
Cảm ơn bạn!!
Ừm... test262 100% à... chỉ nhìn huy hiệu nên tôi còn tưởng là đẳng cấp V8 cơ haha