Valdi – framework UI đa nền tảng mang lại hiệu năng native

(github.com/Snapchat)

9 điểm bởi GN⁺ 2025-11-09 | 2 bình luận | Chia sẻ qua WhatsApp

Valdi do Snap tạo ra là một framework UI đa nền tảng mang lại hiệu năng native trên iOS, Android và macOS, biên dịch trực tiếp UI viết bằng TypeScript khai báo thành các native view của từng nền tảng
Hoạt động không cần WebView hay JavaScript bridge, đồng thời duy trì hiệu năng cao nhờ tái sử dụng view tự động, bộ máy layout tối ưu hóa và render dựa trên viewport
Tăng tốc độ phát triển với hot reload tức thì, debug bằng VSCode, hỗ trợ cú pháp TSX, đồng thời hỗ trợ linh hoạt tích hợp với ứng dụng native hiện có
Cung cấp cấu trúc tích hợp native sâu với binding an toàn kiểu giữa TypeScript và mã native, hỗ trợ protobuf và liên kết với C++·Swift·Kotlin
Là công nghệ đã được kiểm chứng trong ứng dụng production của Snap suốt 8 năm, đồng thời là nền tảng phát triển UI có khả năng mở rộng bao gồm các tính năng nâng cao như animation quy mô lớn, gesture và xử lý đa luồng

Tổng quan về Valdi

Valdi là framework UI đa nền tảng mà Snap đã sử dụng trong ứng dụng production suốt 8 năm
- Khi viết UI bằng TypeScript khai báo, nó sẽ được biên dịch trực tiếp thành native view trên iOS, Android và macOS
- Mang lại hiệu năng native không cần WebView hay JavaScript bridge
Hiện đang ở giai đoạn beta, và dự kiến sẽ chuyển sang bản chính thức sau khi hoàn tất việc ổn định công cụ và tài liệu trong môi trường mã nguồn mở

Tính năng chính và ví dụ

Ví dụ component cơ bản cho thấy cách xây dựng UI đơn giản trong lớp HelloWorld bằng và
Sử dụng cấu trúc component khai báo dựa trên TypeScript và có thể chạy cùng một mã trên mọi nền tảng
Cung cấp tài liệu phát triển như tài liệu chính thức, hướng dẫn cài đặt, API reference và Codelab

Tối ưu hiệu năng

Để đảm bảo hiệu năng native, framework áp dụng cấu trúc như sau
- Tái sử dụng view tự động: hệ thống view pooling toàn cục tái sử dụng view giữa các màn hình, giảm thiểu độ trễ inflate
- Render component độc lập: chỉ cập nhật từng component riêng lẻ mà không ảnh hưởng đến quá trình render của component cha
- Bộ máy layout dựa trên C++: hoạt động với overhead tối thiểu trên main thread
- Render nhận biết viewport: chỉ inflate các view đang hiển thị trên màn hình để cải thiện hiệu năng cuộn vô hạn
Có cung cấp tài liệu liên quan là Performance Optimization Guide

Trải nghiệm lập trình viên

Tính năng hot reload phản ánh thay đổi mã ngay lập tức
Hỗ trợ debug trong VSCode: có thể đặt breakpoint, kiểm tra biến, profiling hiệu năng và chụp heap dump
Mang đến môi trường phát triển quen thuộc với cú pháp TSX và tính an toàn kiểu

Cấu trúc tích hợp linh hoạt

Có thể nhúng Valdi vào ứng dụng native hiện có (Embed Valdi in native)
Có thể sử dụng native view bên trong Valdi (Embed native in Valdi)
Thông qua module Polyglot, có thể liên kết an toàn kiểu với mã C++, Swift, Kotlin và Objective-C
Với kiến trúc full-stack, có thể triển khai đầy đủ chức năng bằng cách tận dụng background worker thread

Tích hợp native

Tự động sinh mã để chuyển đổi interface TypeScript thành các binding Kotlin, Objective-C và Swift
Thông qua module Polyglot, có thể truy cập trực tiếp API nền tảng và thư viện native của bên thứ ba
Giao tiếp hai chiều giúp trao đổi an toàn các cấu trúc dữ liệu phức tạp và callback
Hỗ trợ protobuf cho phép tuần tự hóa dữ liệu hiệu quả

Độ ổn định và tính năng đã được kiểm chứng

Là công nghệ cốt lõi vận hành các tính năng production chủ chốt của Snap
Hỗ trợ animation nâng cao, render thời gian thực và hệ thống gesture phức tạp
Bao gồm nhiều tính năng như layout Flexbox, worker đa luồng, native animation, nhận diện gesture nâng cao, framework kiểm thử tích hợp sẵn và build tích hợp Bazel

Hỗ trợ và giấy phép

Cung cấp hỗ trợ thông qua cộng đồng Discord
Được phát hành theo giấy phép MIT, cho phép tự do sử dụng và đóng góp

2 bình luận

GN⁺ 2025-11-09

Ý kiến trên Hacker News

Công ty chúng tôi đang dùng React Native, và thật sự rất mong chấm dứt cảnh khác biệt giữa App Store và ngôn ngữ theo từng nền tảng
Năm sau có lẽ sẽ cân nhắc chuyển hẳn sang nền web, còn app di động thì chỉ bọc bằng WebView, và chỉ xử lý các tính năng như thông báo, GPS, HealthKit bằng mã native
Dạo này nhờ AI mà tôi lại thấy có khi làm UI riêng cho từng nền tảng còn tốt hơn
- Tôi cũng đã làm vậy và không hối hận. Đây là kiểu “ứng dụng WebView” mọi người vẫn hay nói tới, nhưng vẫn có thể mang lại trải nghiệm khá tốt trên từng nền tảng
  Mấu chốt là đừng làm component UI quá khác lạ, chỉ cần tinh chỉnh nhẹ vài phần như style của nút hay back stack theo từng nền tảng
  Ngoài ra tôi còn thêm khả năng offline bằng Service Worker, và chạy công cụ chẩn đoán mạng khi khởi động app để có thể nhanh chóng xác định vấn đề
  Tuy vậy app của tôi là dành cho B2B nên mới có thể tổ chức như thế
- Nhưng nếu cuối cùng vẫn phải bọc WebView trong một container native, thì đến lúc đó coi như đã bước chân vào địa ngục ký mã iOS rồi
  Tôi luôn nghĩ web vốn là con đường để né App Store và ký mã
  Phần lớn tính năng đều có thể làm bằng web, còn HealthKit thì chỉ cần xử lý bằng một app đồng hành riêng
  Dùng ngân sách marketing để quảng bá mã QR hay liên kết có khi còn hiệu quả hơn nhiều so với cạnh tranh trong App Store
- Cứ khoảng 10 năm tôi lại thử cách này một lần. Ban đầu thì mê tốc độ phát triển nhanh, nhưng sau đó cuối cùng vẫn phải trả giá ở chỗ tích hợp tính năng OS mới hay hỗ trợ gesture
  Đặc biệt trên iOS, đến khoảnh khắc không vuốt “quay lại” được là biết ngay đó là WebView
- AI sẽ không làm Apple đổi guideline
  Tôi viết UI nghiệp vụ một lần rồi dùng LLM để chuyển đổi qua lại giữa React Native và React
  Nhưng Apple vẫn giữ quy định 4.2 về chức năng tối thiểu, tức là “từ chối những app chỉ đơn giản là gói lại website”
- Việc viết các ứng dụng phức tạp, dài hạn ba lần cho từng nền tảng gần như là ác mộng
  Phải đồng bộ tính năng và kiểm thử trên cả ba nền tảng, mà lập trình viên cũng phải thành thạo nhiều stack khác nhau
  Phần lớn người dùng hầu như không cảm nhận được khác biệt giữa một WebView được làm tốt và app native, trong khi cái giá phải trả thì quá lớn
Về mặt ý tưởng, Valdi trông khá giống React Native
Giờ đã có tới ba framework đa nền tảng dựa trên React là React Native, Lynx.js(ByteDance/TikTok), Valdi
Cạnh tranh thì tốt, nhưng tôi vẫn nghi ngờ liệu nó có thể nhanh chóng tạo ra một hệ sinh thái lớn như RN hay không
Năm nay RN đã có rất nhiều tiến bộ như cải thiện engine Hermes, trình tạo native binding, animation đa luồng, hỗ trợ Tailwind
Lynx.js có thể còn thuận lợi hơn ở điểm muốn hỗ trợ cả các framework ngoài React
- Tìm hiểu thêm một chút thì thấy Valdi hỗ trợ đầy đủ debugging trên VSCode
  Radon IDE của RN thì mất phí, còn Valdi là mã nguồn mở
  Việc Valdi dùng Hermes engine của RN cũng khá thú vị
  Đọc tài liệu liên quan xong lại thấy tò mò về cách họ triển khai AOT/JIT
Trước đây ở Snap tôi từng cùng debug phiên bản đầu của dự án này (Screenshop!)
Simon là một kỹ sư xuất sắc, và tôi thật sự rất vui khi thấy dự án này được công khai
Xin chúc mừng đội ngũ Snap
- Tôi khá bất ngờ khi một ứng dụng tương đối đơn giản như Snap lại đầu tư vào framework UI đa nền tảng
  Vì đây là loại app mà tích hợp native như camera, AR, thông báo hay phát hiện chụp màn hình đều rất quan trọng, nên càng thấy ngạc nhiên hơn
- Khi đó nó cũng đã là một dự án rất tuyệt, và tôi nhớ mục tiêu khi ấy là mã nguồn mở hóa
  Thật vui khi điều đó giờ đã thành hiện thực
- Tôi cũng từng làm việc với Simon và thử port sang web nhưng thất bại
  Anh ấy thực sự rất thông minh, và xin chúc mừng cả đội
- Nếu là bây giờ thì tôi tò mò không biết liệu có dùng framework này cho dự án thực tế hay không
- Cái tên “Composer” làm tôi nhớ lại
Một framework UI do Snapchat tạo ra mà lại dùng cộng đồng Discord thì cá nhân tôi hoàn toàn không thấy hấp dẫn
- Dạo này nhiều dự án đang chuyển cộng đồng sang Discord
  Nó không hoàn hảo, nhưng cũng có thể xem như tự loại mình khỏi xu hướng tương lai nếu không đi theo
- Tôi cũng dùng Discord thường xuyên, nhưng vẫn thấy nó bất tiện khi làm cộng đồng phục vụ công việc
Trong tài liệu có câu “nếu phơi bày các đối tượng C++, Objective-C, Kotlin sang TypeScript thì là Native Reference, còn chiều ngược lại là JS Value Reference”
Việc không hề nhắc đến Swift hay SwiftUI khiến tôi hơi lo ngại
Nói thật là tôi khó tin tưởng một framework do Snap làm ra
Vì trước đây chất lượng ứng dụng Android của họ quá tệ
- Tôi từng bị sốc khi biết ngày xưa nó không chụp ảnh thật, mà là chụp màn hình của camera view
Valdi được giới thiệu là “framework UI cho phép viết một lần bằng TypeScript rồi chạy với hiệu năng native trên iOS, Android, macOS”
Họ nhấn mạnh rằng không có webview hay JS bridge
- Họ đùa kiểu “chúng tôi có cả hai. Country and western!”
Tôi nghĩ cứ viết UI hai lần bằng ngôn ngữ native của từng nền tảng, rồi chia sẻ logic chung bằng FFI kiểu C là được
Có gì mà khó chứ?
- Chúng tôi cũng đang đi theo hướng đó. Hiện tại chỉ hỗ trợ iOS, nhưng sau khi có phản hồi người dùng sẽ mở rộng sang Android
  Phần lớn đội ngũ là người dùng Android, nhưng khách hàng lại chủ yếu dùng iOS nên chúng tôi ưu tiên như vậy
  Tôi cũng từng làm app RN, nhưng vẫn đang chờ một giải pháp đa nền tảng thật sự như phép màu
- Tôi cũng đồng ý. Cốt lõi là thiết kế kiến trúc để tách business logic khỏi UI
  Khi đó web, mobile, desktop, CLI và các giao diện khác chỉ còn là những lớp mỏng gọi xuống phần lõi
  Dù khó có UX hoàn toàn nhất quán, nhưng về lâu dài có thể giảm phụ thuộc vào framework bên thứ ba
Nếu tò mò về cách quản lý state của Valdi, thì nó dùng nguyên phong cách class component của React
Xem ví dụ trong tài liệu chính thức thì cấu trúc là kế thừa StatefulComponent rồi triển khai onCreate, onDestroy, onRender
- Tôi cũng nhớ React class component
  Cách làm bây giờ với hàng chục useFunction vừa dễ lỗi vừa phức tạp
Đáng tiếc là không hỗ trợ Linux, Windows, hay target HTML

clastneo 2025-11-10

Trong RN, phần lớn logic nghiệp vụ của ứng dụng có thể chạy đủ nhanh chỉ bằng JS.
Nhưng khi hoàn thiện sản phẩm thì vấn đề là "thường có nhiều trường hợp hành vi khác nhau theo từng nền tảng", nên mọi thứ trở nên khó đến mức gần như không tìm ra lời giải.