- Hyperclay mendukung pembuatan webapp dengan pendekatan di mana seluruh UI, logika, dan data terintegrasi ke dalam satu file HTML
- Perubahan dapat dilakukan langsung pada file itu sendiri dengan pengeditan instan dan berbagi secara real-time, serta pengguna bisa mengendalikan sendiri tampilan, perilaku, hingga cara pengeditan aplikasinya
- Menyediakan struktur jalankan dan simpan seketika tanpa proses build/deploy terpisah, database, atau backend yang rumit
- Hanya dengan satu file HTML, aplikasi dapat dijalankan di mana saja seperti browser, server, maupun offline, dan semua perubahan dikelola dengan versioning serta pemulihan
- Dirancang untuk mengurangi kompleksitas pengembangan web modern dan memudahkan siapa pun membuat aplikasi interaktif yang hidup secara real-time
Pengenalan: Hyperclay, webapp hidup yang dibuat hanya dengan satu file HTML
- Hyperclay menghadirkan pengalaman bagi programmer untuk membentuk webapp layaknya memahat produk dengan satu file HTML portabel, tanpa pengelolaan infrastruktur yang rumit
- Menargetkan struktur yang sepenuhnya tuntas hanya dengan satu file, dengan menghilangkan elemen yang sebelumnya dianggap wajib dalam pengembangan web seperti file konfigurasi, build, framework, dan pipeline deployment
Konsep inti dan keunggulan
- Aplikasi tersusun dari satu file HTML
- Melalui UI visual, file itu sendiri bisa diedit secara real-time, dan hasil edit tersebut langsung disimpan permanen sebagai state aplikasi
- UI, logika, dan data semuanya termuat secara dinamis dalam satu file
- Pengguna dapat langsung mengubah aplikasi seperti dokumen, lalu segera membagikan atau mengunduh perubahan untuk dipakai secara offline
- Seperti analogi "Google Docs for interactive code", proses berbagi, mengedit, dan mengatur kepemilikan bersifat fleksibel
Ringkasan fitur utama
- Manipulasi langsung: Bisa diedit langsung saat aplikasi sedang berjalan. Perubahan diterapkan seketika tanpa kompilasi atau refresh
- What you see is what you build: Saat UI diubah atau source code diedit langsung, aplikasi segera berubah tanpa lapisan perantara
- Portabilitas sejati: Aplikasi dapat diekspor sebagai file HTML dan dijalankan sama persis di mana saja (server maupun offline). Setiap penyimpanan disertai versioning sehingga bisa dipulihkan
- Semua ini hadir tanpa teknologi khusus, hanya dengan satu file HTML standar
Struktur teknis
- Hyperclay terdiri dari server NodeJS dan library JS sisi klien
- Saat halaman HTML memodifikasi DOM-nya sendiri,
document.body.outerHTML yang telah berubah dikirim ke server, lalu file HTML itu sendiri diperbarui
- Perubahan dalam aplikasi seperti atribut checked pada checkbox disimpan permanen ke dalam kode HTML, sehingga state yang sama bisa direproduksi saat dibuka kembali
- Mendukung versioning serta pengelolaan izin baca/tulis
Contoh nyata
- Blog yang dapat diedit langsung, checklist jam kerja, dan berbagai aplikasi lain dapat ditulis serta disimpan dalam satu file HTML
- Menggunakan atribut
contenteditable atau bentuk seperti <input type="checkbox" persist> untuk langsung mencatat state aplikasi ke dalam dokumen
Latar belakang dan kesadaran masalah
- Setelah membuat puluhan situs web setiap tahun, muncul kebutuhan agar coding webapp terasa sealami menulis
- Situs web statis tradisional memiliki perubahan yang bersifat sementara (aksi pengguna tidak disimpan)
- Untuk menghadirkan persistensi data di web, biasanya dibutuhkan pekerjaan berlebihan seperti membangun database, API, template, dan sistem akun
- Ini tidak efisien untuk kebutuhan seperti prototipe, alat sederhana, log pengembangan pribadi, atau blogging yang ingin dibuat cepat lalu diedit dan dibagikan secara real-time
Cara Hyperclay menyelesaikannya
- UI, state, dan perilaku digabungkan dalam satu file HTML
- Seperti membuka aplikasi desktop, pengguna bisa membukanya dengan mudah lalu langsung mengeditnya, dan hasilnya bisa langsung diterapkan secara online
- Mengusulkan konsep objek digital yang persisten (shared, cloneable, persistent)
- Dapat diterapkan pada berbagai alat seperti website builder, alat dokumen/diagram/presentasi, dashboard, blog, pembuatan survei/kuis, dan visualisasi data
Ringkasan konsep keseluruhan
- Sebagian besar webapp pada dasarnya sudah menggunakan HTML
- Dengan menghilangkan tahapan perantara, file HTML dapat berfungsi sebagai seluruh database/API/UI, sehingga stack menjadi sangat sederhana hanya dalam beberapa baris
- Developer dapat mengurangi kompleksitas dan membuat aplikasi yang unggul dalam usability serta maintenance bahkan dengan kode minimal
Contoh penggunaan Hyperclay
- Blog, checklist, atau aplikasi apa pun dapat ditulis, didistribusikan, dibagikan, dan diedit hanya dengan satu file HTML
- Bisa langsung digunakan dalam bentuk seperti
<div contenteditable>My blog!</div>, dan <input type="checkbox" persist> akan mencatat tiap state secara permanen ke dalam dokumen
Kesimpulan
- Hyperclay menawarkan cara baru untuk membuat webapp interaktif yang ringan dan sangat portabel, sehingga siapa pun dapat membuat, membagikan, menyimpan, dan memulihkannya secara real-time tanpa kerepotan pengembangan web
- Ini adalah platform webapp generasi berikutnya yang mudah digunakan bukan hanya oleh developer dan desainer, tetapi oleh siapa pun
Belum ada komentar.