Marko – Bahasa Deklaratif Berbasis HTML

(markojs.com)

8 poin oleh GN⁺ 2025-11-10 | 2 komentar | Bagikan ke WhatsApp

Bahasa deklaratif yang memperluas sintaks HTML untuk membangun antarmuka web yang dinamis dan reaktif, memberikan lingkungan pengembangan yang familier bagi pengguna HTML yang sudah ada
Melalui streaming rendering, konten dapat dikirim langsung dari server dan tetap bisa ditampilkan bahkan sebelum bundle JavaScript klien dimuat
Dengan fine-grained bundling, pengiriman kode yang tidak perlu diminimalkan sehingga performa dan kecepatan pemuatan meningkat
Melalui targeted compilation, dihasilkan output yang efisien dan dioptimalkan untuk browser dan server masing-masing
Dukungan integrasi TypeScript dan fitur editor yang kaya meningkatkan produktivitas pengembangan dan kualitas kode

Ikhtisar Marko

Marko adalah bahasa deklaratif yang membayangkan ulang HTML, dengan tujuan membangun antarmuka pengguna yang dinamis dan reaktif
- Sebagian besar HTML yang valid dapat digunakan apa adanya di Marko
- Sintaks HTML diperluas agar aplikasi modern dapat ditulis secara deklaratif
Digunakan dalam operasional layanan nyata di situs dengan trafik berskala besar seperti eBay.com
Jika Anda mengenal HTML, CSS, dan JavaScript, Anda dapat langsung menggunakannya tanpa kurva belajar tambahan

Fitur Utama

Fitur Streaming Rendering memungkinkan server mengirim konten yang sudah siap secara langsung
- Tampilan awal dapat muncul bahkan sebelum bundle JavaScript sisi klien dimuat
- HTML, gambar, dan aset dimuat secara asinkron untuk menghadirkan render layar awal yang cepat
Fine-Grained Bundling hanya mengirim kode yang benar-benar diperlukan
- Menghapus kode yang tidak digunakan dan melewati hidrasi yang tidak perlu hingga tingkat subtemplate
- Dirancang dengan filosofi “Lean by default, Fast by design”
Iklan
Mendukung Targeted Compilation
- Menghasilkan output teroptimasi yang sesuai untuk tiap lingkungan dengan mempertimbangkan perbedaan antara browser dan server
- Pemuatan lebih cepat, bundle lebih kecil, diwujudkan dalam satu bahasa terpadu

Contoh Kode dan Sintaks

Menyediakan sintaks ringkas yang menggabungkan HTML dan JavaScript

<let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>

Kode yang sama juga dapat ditulis dengan sintaks yang lebih ringkas

let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times

Menyediakan kumpulan tag yang diperluas seperti <for>, <if>, <await>, <const>, <define>
- Tag bawaan HTML dapat dipakai bersama tag khusus Marko
Iklan

Performa dan Skalabilitas

Mendukung initial render yang lebih cepat (Faster First Paint) untuk meningkatkan pengalaman pengguna
Skalabel: dapat berkembang secara fleksibel mulai dari template HTML sederhana hingga struktur komponen yang kompleks
Dengan runtime yang kecil dan compiler yang dioptimalkan, performa tinggi tetap terjaga di berbagai kondisi jaringan

Integrasi TypeScript dan Alat Pengembangan

Dukungan bawaan TypeScript memberikan inferensi tipe yang kuat
- Menjaga konsistensi tipe antara template dan komponen
- Editor mendukung fitur seperti pelengkapan otomatis, lompat ke definisi, penyorotan sintaks, dan formatting
Menyediakan lingkungan pengembangan yang stabil melalui deteksi kesalahan lebih awal dan peningkatan kualitas kode

Kesimpulan

Marko adalah bahasa pengembangan web modern yang menggabungkan sintaks ramah HTML, rendering berperforma tinggi, bundling yang presisi, dan integrasi TypeScript
Bekerja secara efisien baik di server maupun klien, serta menawarkan skalabilitas dan performa yang cocok untuk operasional layanan berskala besar

2 komentar

shakespeares 2025-11-10

Sejauh ini sepertinya masih Svelte.

GN⁺ 2025-11-10

Komentar Hacker News

Ke depannya, saya berharap HTML itu sendiri mendukung semua HTTP verb tanpa JavaScript (put, delete, dll.), menyediakan kontrol input bawaan seperti dropdown, multiselect, tanggal, dan waktu, serta bisa mengirim form tanpa reload penuh halaman
Saat pertama kali mendengar nama htmx, saya mengira itulah yang akan diberikan, tetapi kenyataannya lebih setara dengan intercooler
Fitur seperti ini memerlukan dukungan luas dari para vendor browser
- Saat ini sedang ada upaya untuk mengintegrasikan sebagian ide htmx langsung ke spesifikasi HTML
  Detail terkait bisa dilihat di proyek Triptych
Dari sudut pandang seseorang yang pernah membuat framework JavaScript sendiri, saya rasa Marko terlalu diremehkan
Optimalisasi saat compile time sangat mengesankan, dan dokumentasi penjelasan fine-grained bundling juga sangat bagus
Dalam praktiknya, Marko juga menunjukkan hasil yang baik pada perbandingan performa papan Kanban
- Tren RSC dan SSR terasa seperti alasan untuk promosi seseorang atau dalih untuk mendirikan perusahaan baru
  React, saat dipasangkan dengan Next.js, telah mengkhianati hakikat platform web, dan sekarang hampir tidak ada alasan lagi untuk memilihnya
  Jauh lebih baik saat React yang di-hydrate secara statis berjalan di atas CDN
- Saya cukup sering memakai SvelteKit untuk proyek baru karena keseimbangannya bagus dalam hal fitur, pengalaman pengembang, dan performa
  Meski begitu, saya jadi merasa perlu juga melihat lebih dekat Marko
  Akan bagus juga jika ada analisis mendalam seperti ini untuk framework desktop seperti Electron
Alasan saya menyukai React sederhana saja: karena itu “sekadar JavaScript”
Saya tidak suka sintaks seperti <let> atau <for>
- Sebenarnya JSX juga bukan JavaScript murni
  Kita hanya sudah terlalu terbiasa dengannya, jadi ini hal yang perlu diingat saat melihat framework baru
- Dulu ada sintaks templating yang bagus, dan sampai sekarang pun masih ada
  Bentuk seperti {% for user in users %} atau {#each users as user} jauh lebih jelas
  JSX juga tidak sempurna — sintaks {users.map(...)} tetap terasa bertele-tele
- Saya pernah memakai Marko dulu; awalnya itu adalah proyek internal eBay lalu sekitar tahun 2015 dialihkan menjadi open source
- Tiap orang berbeda, tetapi ada juga yang memang menyukai sintaks berbasis template seperti ini
  Itulah salah satu alasan Vue dan Svelte populer
  Sebagai catatan, Vue juga bisa ditulis hanya dengan JSX jika diinginkan
- React sudah lama bukan lagi “sekadar JS”
  DSL-nya makin membengkak, dan dengan bertambahnya hook seperti useFormStatus dan useActionState, kompleksitasnya ikut naik
  Sebaliknya, sintaks Marko terasa intuitif; fungsi tampak seperti fungsi, variabel tampak seperti variabel, jadi lebih mudah dipahami
Pendekatan memasukkan JS ke dalam HTML terasa cukup segar
Ryan Carniato pernah terlibat di proyek ini lalu belakangan memimpin SolidJS, jadi saya penasaran kenapa akhirnya ia kembali ke gaya HTML-in-JS
- Ryan sudah mengerjakan Solid bahkan sebelum bergabung dengan eBay/Marko
  Kedua proyek itu berkembang sambil saling berbagi ide, dan sampai sekarang pun masih saling berinteraksi
- Alasan memilih JSX sederhana saja
  Banyak pengembang sudah akrab dengannya, dan dukungan editor serta TypeScript juga sudah matang
- “JS di dalam HTML” terdengar seperti lelucon, seakan kembali ke era Netscape tahun 1995
Setelah lebih dari 20 tahun, rasanya frontend berputar-putar dan akhirnya kembali ke paradigma era JSP
Dulu dianggap kuno dan dijauhi, tetapi pada akhirnya mungkin itulah pendekatan yang benar
- Teknologi memang berputar, tetapi setiap kali biasanya ada sedikit perbaikan
  Ada yang hilang, tetapi kreativitas generasi berikutnya juga melahirkan hal-hal baru
- Saya juga ingat JSF — ia bisa memulihkan state di sisi server, dan memungkinkan pembuatan situs web berbasis form yang kompleks dengan cepat
  Hanya saja, untuk skala besar perlu perhatian khusus
- Saya sulit setuju dengan ungkapan “paradigma yang benar”
  Tergantung situasinya, pendekatan lain bisa jadi lebih cocok
- Menyimpulkan bahwa SPA dipilih semata karena “orang membenci teknologi lama” itu terlalu menyederhanakan
  Saat itu ada kebutuhan akan aplikasi mobile dan arsitektur yang berpusat pada API, dan SPA cocok untuk kebutuhan tersebut
  Sekarang ini bukan berarti kembali ke JSP, melainkan proses mencari titik keseimbangan di antara keduanya
Marko sudah merupakan teknologi yang teruji di eBay
Saya sudah memakainya selama bertahun-tahun dan tidak pernah mengalami masalah
Sebaliknya, Facebook, Instagram, dan Messenger yang berbasis React terus-menerus mengalami bug UI
Jika melihat hasil pada layanan berskala besar yang nyata, stabilitas Marko jadi menonjol
Marko sudah beberapa kali muncul di HN sejak dulu
Ada thread terkait juga pada Januari 2023, Agustus 2017, dan Februari 2015
- Baru sekarang saya tahu ternyata ini proyek yang cukup lama
Sintaksnya tampak jauh lebih baik daripada JSX
Saya terutama suka sintaks ringkas bergaya Pug, jadi saya heran kenapa justru disembunyikan jauh di dalam dokumentasi
Dokumen Concise Syntax
- Saya juga sempat melihat Marko karena sintaks ringkas itu
  Namun saya kurang suka kesalahan highlighting di dokumentasinya maupun cara atributnya dibedakan
  Belakangan ini saya lebih sering memakai Svelte, tetapi saya masih menunggu sintaks yang lebih elegan
- Secara pribadi, ini terasa seperti mengulangi kesalahan YAML
  Sintaks berbasis spasi sebenarnya tidak masalah, tetapi notasi seperti -- dan tingkat kesulitan parsing-nya terasa kurang memuaskan
Tim Marko sampai membuat dan merilis klon Hacker News sendiri untuk memperkenalkan Marko 6
Lihat contoh di GitHub
Mungkin karena ini bahasa yang dibuat untuk demo, jadi agak lucu bahwa teks gradasi seperti “HTML-based” dan “building web apps” justru tidak terlihat