- Hyperclay hỗ trợ tạo web app theo cách toàn bộ UI, logic và dữ liệu được tích hợp vào một tệp HTML duy nhất
- Có thể chỉnh sửa tức thì và chia sẻ theo thời gian thực ngay trên chính tệp đó, đồng thời tự kiểm soát giao diện, hành vi và cả cách chỉnh sửa của ứng dụng
- Cung cấp cấu trúc chạy ngay và lưu ngay mà không cần quy trình build/deploy riêng, cơ sở dữ liệu hay backend phức tạp
- Chỉ với một tệp HTML, có thể chạy app ở bất kỳ đâu như trình duyệt, máy chủ, ngoại tuyến, và mọi thay đổi đều được quản lý phiên bản cũng như khôi phục
- Được thiết kế để giảm độ phức tạp của phát triển web hiện đại và giúp bất kỳ ai cũng có thể dễ dàng tạo các ứng dụng tương tác sống động theo thời gian thực
Giới thiệu: Hyperclay, web app sống động tạo từ một tệp HTML duy nhất
- Hyperclay mang lại trải nghiệm để lập trình viên tạo web app như đang nặn nên một sản phẩm bằng một tệp HTML có thể di động, không cần quản lý hạ tầng phức tạp
- Nó hướng tới cấu trúc hoàn chỉnh chỉ với một tệp, loại bỏ những thứ vốn được xem là bắt buộc trong phát triển web truyền thống như tệp cấu hình, build, framework, pipeline triển khai
Khái niệm cốt lõi và ưu điểm
- Ứng dụng được cấu thành từ một tệp HTML duy nhất
- Có thể chỉnh sửa trực tiếp chính tệp đó theo thời gian thực thông qua UI trực quan, và nội dung chỉnh sửa sẽ được lưu vĩnh viễn thành trạng thái của ứng dụng
- UI, logic và dữ liệu đều được chứa động trong cùng một tệp
- Người dùng có thể chỉnh sửa app ngay lập tức như một tài liệu, rồi chia sẻ/tải xuống thay đổi ngay để dùng ngoại tuyến
- Tương tự cách ví von là "Google Docs for interactive code", việc chia sẻ, chỉnh sửa và kiểm soát quyền sở hữu đều rất linh hoạt
Tóm tắt tính năng chính
- Thao tác trực tiếp: Có thể chỉnh sửa ngay khi app đang chạy. Thay đổi được phản ánh tức thì mà không cần biên dịch hay tải lại
- What you see is what you build: Chỉnh UI hoặc sửa trực tiếp mã nguồn là app thay đổi ngay, không có lớp trung gian
- Tính di động thực sự: Có thể xuất app thành tệp HTML để chạy giống hệt ở bất kỳ đâu (máy chủ hoặc ngoại tuyến). Mỗi lần lưu đều được áp dụng quản lý phiên bản để có thể khôi phục
- Tất cả những điều này được thực hiện không cần công nghệ đặc biệt nào, chỉ với đúng một tệp HTML chuẩn
Cấu trúc kỹ thuật
- Hyperclay gồm máy chủ NodeJS và thư viện JS phía client
- Khi trang HTML tự sửa DOM của nó, phần
document.body.outerHTML đã thay đổi sẽ được gửi lên máy chủ, và chính tệp HTML đó sẽ được cập nhật
- Các thay đổi trong app như thuộc tính checked của checkbox được lưu vĩnh viễn vào mã HTML, nhờ đó có thể tái hiện cùng trạng thái ở lần truy cập sau
- Hỗ trợ quản lý phiên bản và quản lý quyền đọc/ghi
Ví dụ thực tế
- Có thể viết và lưu mọi loại app như blog có thể chỉnh sửa trực tiếp, checklist chấm công... chỉ trong một tệp HTML
- Ghi trạng thái của app trực tiếp vào tài liệu bằng thuộc tính
contenteditable hoặc dạng <input type="checkbox" persist>
Bối cảnh và vấn đề đặt ra
- Trong quá trình tạo hàng chục website mỗi năm, đã xuất hiện nhu cầu rằng việc code web app giá như tự nhiên như viết lách
- Website tĩnh truyền thống có thay đổi mang tính tạm thời (hành vi người dùng không được lưu)
- Để triển khai tính bền vững dữ liệu trên web, thường phải làm quá nhiều việc như xây cơ sở dữ liệu, API, template, hệ thống tài khoản...
- Điều đó kém hiệu quả với các nhu cầu muốn tạo nhanh, sửa theo thời gian thực và chia sẻ ngay như prototype, công cụ đơn giản, nhật ký phát triển cá nhân hay blog
Cách Hyperclay giải quyết
- UI, trạng thái và hành vi được tích hợp trong một tệp HTML
- Có thể mở ra dễ dàng và sửa ngay như mở một ứng dụng desktop, rồi phản ánh kết quả trực tiếp lên mạng
- Đưa ra khái niệm đối tượng số bền vững (shared, cloneable, persistent)
- Có thể áp dụng cho nhiều công cụ như website builder, công cụ tài liệu/sơ đồ/thuyết trình, dashboard, blog, tạo khảo sát/quiz, trực quan hóa dữ liệu...
Tóm tắt toàn bộ khái niệm
- Phần lớn web app vốn đã sử dụng HTML
- Nếu lược bỏ các bước trung gian, tệp HTML có thể đóng vai trò toàn bộ database/API/UI, giúp stack được đơn giản hóa chỉ còn vài dòng
- Lập trình viên có thể giảm độ phức tạp và tạo ra ứng dụng dễ dùng, dễ bảo trì chỉ với lượng mã tối thiểu
Ví dụ sử dụng Hyperclay
- Dù là blog, checklist hay bất kỳ app nào, đều có thể được viết/phát hành/chia sẻ/chỉnh sửa chỉ bằng một tệp HTML duy nhất
- Có thể dùng ngay ở dạng
<div contenteditable>내 블로그!</div>, và dùng <input type="checkbox" persist> để ghi vĩnh viễn từng trạng thái vào tài liệu
Kết luận
- Hyperclay đưa ra một cách làm mới để bất kỳ ai cũng có thể tạo web app tương tác nhẹ, linh hoạt và có tính di động cao, đồng thời chia sẻ/lưu/khôi phục theo thời gian thực mà không vướng sự phiền toái của phát triển web truyền thống
- Đây là nền tảng web app thế hệ mới mà không chỉ lập trình viên hay designer, mà bất kỳ ai cũng có thể dễ dàng sử dụng
Chưa có bình luận nào.