Marko – Ngôn ngữ khai báo dựa trên HTML

 (markojs.com)
8 điểm bởi GN⁺ 2025-11-10 | 2 bình luận | Chia sẻ qua WhatsApp
  • Là một ngôn ngữ khai báo mở rộng cú pháp HTML để xây dựng giao diện web động và phản ứng, mang lại môi trường phát triển quen thuộc cho người đã dùng HTML
  • Thông qua streaming rendering, có thể truyền nội dung ngay từ máy chủ và hiển thị màn hình trước cả khi bundle JavaScript phía client được tải xong
  • Với fine-grained bundling, giảm thiểu việc truyền mã không cần thiết để cải thiện hiệu năng và tốc độ tải
  • Thông qua targeted compilation, tạo đầu ra hiệu quả được tối ưu riêng cho trình duyệt và máy chủ
  • Tích hợp hỗ trợ TypeScript cùng các tính năng editor phong phú giúp nâng cao năng suất phát triển và chất lượng mã

Tổng quan về Marko

  • Marko là một ngôn ngữ khai báo tái định nghĩa HTML, hướng tới việc xây dựng giao diện người dùng động và phản ứng
    • Hầu hết HTML hợp lệ đều có thể dùng nguyên vẹn trong Marko
    • Mở rộng cú pháp HTML để có thể viết ứng dụng hiện đại theo cách khai báo
  • Đang được sử dụng để vận hành dịch vụ thực tế trên các website có lưu lượng lớn như eBay.com
  • Nếu đã biết HTML, CSS và JavaScript, bạn có thể sử dụng ngay mà gần như không có đường cong học tập bổ sung

Tính năng chính

  • Cung cấp streaming rendering để máy chủ gửi ngay nội dung đã sẵn sàng
    • Có thể hiển thị màn hình ban đầu ngay cả trước khi bundle JavaScript phía client được tải
    • HTML, hình ảnh và tài nguyên được tải bất đồng bộ, mang lại tốc độ render màn hình đầu tiên nhanh hơn
  • Chỉ gửi phần mã cần thiết nhờ Fine-Grained Bundling
    • Loại bỏ mã không được sử dụng và bỏ qua hydration không cần thiết ở cấp sub-template
    • Được thiết kế theo triết lý “Lean by default, Fast by design”
  • Hỗ trợ Targeted Compilation
    • Xem xét khác biệt giữa trình duyệt và máy chủ để tạo đầu ra được tối ưu cho từng môi trường
    • Tải nhanh hơn, bundle nhỏ hơn, được triển khai bằng một ngôn ngữ hợp nhất

Ví dụ mã và cú pháp

  • Cung cấp cú pháp gọn gàng kết hợp HTML và JavaScript 
    <let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>
  • Cùng đoạn mã đó cũng có thể được viết bằng cú pháp ngắn gọn hơn 
    let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times
  • Cung cấp bộ thẻ mở rộng như <for>, <if>, <await>, <const>, <define>
    • Có thể dùng kết hợp các thẻ chuẩn của HTML với các thẻ chuyên dụng của Marko

Hiệu năng và khả năng mở rộng

  • Cải thiện trải nghiệm người dùng nhờ hỗ trợ Faster First Paint
  • Khả năng mở rộng (Scalable): có thể mở rộng linh hoạt từ template HTML đơn giản đến cấu trúc component phức tạp
  • Duy trì hiệu năng cao trong nhiều điều kiện mạng khác nhau nhờ runtime nhỏ và compiler được tối ưu

Tích hợp TypeScript và công cụ phát triển

  • Hỗ trợ TypeScript tích hợp sẵn mang lại khả năng suy luận kiểu mạnh mẽ
    • Duy trì tính nhất quán về kiểu giữa template và component
    • Hỗ trợ các tính năng như tự động hoàn thành, chuyển đến định nghĩa, tô sáng cú pháp, định dạng trong editor
  • Cung cấp môi trường phát triển ổn định nhờ phát hiện lỗi sớm và nâng cao chất lượng mã

Kết luận

  • Marko là một ngôn ngữ phát triển web hiện đại kết hợp cú pháp thân thiện với HTML, rendering hiệu năng cao, bundling tinh vi và tích hợp TypeScript
  • Hoạt động hiệu quả trên cả máy chủ lẫn client, đồng thời mang lại khả năng mở rộng và hiệu năng phù hợp cho vận hành dịch vụ quy mô lớn

Bài viết liên quan

2 bình luận

 
shakespeares 2025-11-10

Chắc vẫn là Svelte thôi nhỉ
 
GN⁺ 2025-11-10
Ý kiến trên Hacker News

  • Mong rằng về sau ngay trong HTML cũng có thể hỗ trợ mọi HTTP verb mà không cần JavaScript như put, delete, có sẵn các control nhập liệu như dropdown, multi-select, ngày, giờ, và có thể submit form mà không phải reload toàn bộ trang
    Lúc mới nghe tên htmx tôi đã kỳ vọng như vậy, nhưng thực tế thì nó chỉ ở mức intercooler
    Những tính năng này cần sự hỗ trợ rộng rãi từ các nhà cung cấp trình duyệt

    • Hiện đang có nỗ lực tích hợp trực tiếp một phần ý tưởng của htmx vào đặc tả HTML
      Có thể xem thêm tại dự án Triptych

  • Với tư cách là người từng tự làm framework JavaScript, tôi nghĩ Marko đang bị đánh giá thấp
    Các tối ưu ở thời điểm biên dịch rất ấn tượng, và tài liệu giải thích về fine-grained bundling cũng rất hay
    Trên thực tế, nó cũng cho kết quả tốt trong so sánh hiệu năng bảng Kanban

    • Trào lưu RSC và SSR có cảm giác giống như lý do để ai đó được thăng chức hoặc cái cớ để lập công ty mới
      React khi gắn với Next.js đã phản bội bản chất của nền tảng, và giờ gần như không còn nhiều lý do để chọn nó
      Thời React được hydrate tĩnh chạy trên CDN còn tốt hơn nhiều
    • Tôi thường dùng SvelteKit cho dự án mới vì nó cân bằng tốt giữa tính năng, trải nghiệm phát triển và hiệu năng
      Dù vậy, tôi cũng thấy nên xem thử Marko
      Sẽ rất hay nếu phía framework desktop như Electron cũng có những phân tích sâu kiểu này

  • Lý do tôi thích React là vì nó đơn giản là “chỉ là JavaScript”
    Tôi không thích kiểu cú pháp như <let> hay <for>

    • Thực ra JSX cũng không phải JavaScript thuần túy
      Chỉ là ta đã quá quen với nó, nên khi nhìn framework mới thì cần nhớ điều đó
    • Trước đây đã có những cú pháp template tốt và bây giờ vẫn có
      Các dạng như {% for user in users %} hay {#each users as user} rõ ràng hơn nhiều
      JSX cũng không hoàn hảo — cú pháp {users.map(...)} vẫn còn dài dòng
    • Tôi từng dùng Marko trước đây; ban đầu nó là dự án nội bộ của eBay, rồi khoảng năm 2015 mới chuyển sang mã nguồn mở
    • Tùy mỗi người, nhưng cũng có những người thích kiểu cú pháp dựa trên template như thế này
      Đó cũng là lý do Vue hay Svelte được ưa chuộng
      Nhân tiện, Vue nếu muốn thì cũng có thể viết hoàn toàn bằng JSX
    • React từ lâu đã không còn là “chỉ là JS” nữa
      DSL ngày càng phình to, và càng nhiều hook như useFormStatus hay useActionState khiến nó phức tạp hơn
      Trong khi đó cú pháp của Marko trực quan hơn, hàm trông như hàm, biến trông như biến nên dễ hiểu hơn

  • Cách đưa JS vào trong HTML khá mới mẻ
    Ryan Carniato từng tham gia dự án này rồi sau đó dẫn dắt SolidJS, nên tôi tò mò tại sao lại quay về kiểu HTML-in-JS một lần nữa

    • Ryan đã làm Solid từ trước khi tham gia eBay/Marko
      Hai dự án phát triển bằng cách chia sẻ ý tưởng với nhau, và đến giờ vẫn còn giao lưu
    • Lý do chọn JSX rất đơn giản
      Nhiều lập trình viên đã quen với nó, và editor cùng hỗ trợ TypeScript cũng đã rất tốt
    • “JS bên trong HTML” nghe như một câu đùa kiểu quay về thời Netscape năm 1995

  • Có cảm giác frontend sau hơn 20 năm vòng đi vòng lại rồi cuối cùng lại quay về mô hình thời JSP
    Hồi đó người ta chê nó “quê mùa”, nhưng rốt cuộc có lẽ nó mới là hướng đúng

    • Công nghệ mang tính chu kỳ, nhưng mỗi vòng đều có những cải tiến nhỏ
      Có thứ biến mất, nhưng sự sáng tạo của thế hệ tiếp theo lại tạo ra điều mới
    • Tôi còn nhớ cả JSF — nó có thể khôi phục trạng thái ở phía server và giúp làm nhanh các website phức tạp nhiều form
      Chỉ là khi mở rộng quy mô lớn thì cần cẩn thận
    • Tôi khó đồng ý với cụm “mô hình đúng đắn”
      Tùy hoàn cảnh mà cách tiếp cận khác có thể phù hợp hơn
    • Quy việc chọn SPA thành “vì ghét công nghệ cũ” là quá đơn giản
      Thời đó cần app di động và kiến trúc xoay quanh API, còn SPA thì đáp ứng được nhu cầu đó
      Bây giờ không phải là quay về JSP mà là đang tìm điểm cân bằng giữa hai phía

  • Marko đã là công nghệ được kiểm chứng tại eBay
    Tôi dùng nó nhiều năm mà chưa từng gặp vấn đề
    Trong khi đó Facebook, Instagram và Messenger dựa trên React thì lỗi UI xảy ra liên tục
    Nhìn vào kết quả trên các dịch vụ quy mô lớn thực tế, độ ổn định của Marko nổi bật hơn

  • Marko đã xuất hiện trên HN nhiều lần từ trước
    Cũng đã có các thread liên quan vào tháng 1/2023, tháng 8/2017, và tháng 2/2015

    • Giờ tôi mới biết đây là một dự án khá lâu đời

  • Trông như một cú pháp được cải tiến rất nhiều so với JSX
    Tôi đặc biệt thích cú pháp ngắn gọn kiểu Pug, nên khá thắc mắc vì sao nó lại bị giấu sâu trong tài liệu
    Tài liệu Concise Syntax

    • Tôi cũng từng tìm hiểu Marko vì cú pháp ngắn gọn đó
      Nhưng tôi không thích lỗi highlighting trong tài liệu hay cách phân tách thuộc tính của nó
      Gần đây tôi chủ yếu dùng Svelte, nhưng vẫn đang chờ một cú pháp thanh lịch hơn
    • Cá nhân tôi thấy như đang lặp lại sai lầm của YAML
      Cú pháp dựa trên khoảng trắng thì ổn, nhưng kiểu ký hiệu như -- hay độ khó khi parse vẫn khá đáng tiếc

  • Để giới thiệu Marko 6, đội ngũ Marko đã tự làm và công bố một bản clone Hacker News
    Xem ví dụ trên GitHub

  • Chắc vì là ngôn ngữ làm ra để demo, nên việc không nhìn thấy gradient text ở các chỗ như “HTML-based” hay “building web apps” cũng hơi buồn cười