Marko – ภาษาประกาศเชิงคำสั่งที่ต่อยอดจาก HTML

 (markojs.com)
8 คะแนน โดย GN⁺ 2025-11-10 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็น ภาษาประกาศเชิงคำสั่งที่ขยายไวยากรณ์ HTML เพื่อสร้างเว็บอินเทอร์เฟซแบบไดนามิกและตอบสนองได้ พร้อมมอบสภาพแวดล้อมการพัฒนาที่คุ้นเคยสำหรับผู้ใช้ HTML เดิม
  • รองรับ การเรนเดอร์แบบสตรีมมิง ที่ทำให้เซิร์ฟเวอร์ส่งคอนเทนต์ได้ทันที และแสดงผลหน้าจอได้แม้ก่อนที่ JavaScript bundle ฝั่งไคลเอนต์จะโหลดเสร็จ
  • ใช้ การทำ bundling แบบละเอียด (fine-grained bundling) เพื่อลดการส่งโค้ดที่ไม่จำเป็นให้น้อยที่สุด ช่วยเพิ่มประสิทธิภาพและความเร็วในการโหลด
  • รองรับ การคอมไพล์แบบปรับแต่งตามสภาพแวดล้อม (targeted compilation) เพื่อสร้างผลลัพธ์ที่มีประสิทธิภาพเหมาะกับทั้งเบราว์เซอร์และเซิร์ฟเวอร์
  • มี การรองรับ TypeScript แบบผสานรวม และฟีเจอร์ในเอดิเตอร์ที่ครบถ้วน ช่วยเพิ่มผลิตภาพในการพัฒนาและคุณภาพของโค้ด

ภาพรวมของ Marko

  • Marko คือ ภาษาประกาศเชิงคำสั่งที่ตีความ HTML ขึ้นใหม่ โดยมีเป้าหมายเพื่อสร้างส่วนติดต่อผู้ใช้ที่ไดนามิกและตอบสนองได้
    • HTML ที่ถูกต้องส่วนใหญ่สามารถใช้งานใน Marko ได้ตามเดิม
    • ขยายไวยากรณ์ของ HTML เพื่อให้เขียนแอปพลิเคชันสมัยใหม่แบบประกาศเชิงคำสั่งได้
  • ถูกใช้งานจริงในระบบบริการของ เว็บไซต์ทราฟฟิกขนาดใหญ่ เช่น eBay.com
  • หากรู้จัก HTML, CSS และ JavaScript ก็สามารถเริ่มใช้งานได้ทันทีโดยแทบไม่มีเส้นโค้งการเรียนรู้เพิ่มเติม

คุณสมบัติหลัก

  • มีฟีเจอร์ การเรนเดอร์แบบสตรีมมิง (Streaming) ที่ทำให้เซิร์ฟเวอร์ส่งคอนเทนต์ที่พร้อมแล้วได้ทันที
    • สามารถแสดงผลหน้าจอเริ่มต้นได้แม้ก่อนที่ JavaScript bundle ฝั่งไคลเอนต์จะโหลดเสร็จ
    • HTML, รูปภาพ และแอสเซ็ตต่าง ๆ โหลดแบบอะซิงโครนัส เพื่อให้ได้การเรนเดอร์หน้าจอแรกที่รวดเร็ว
  • ใช้ การทำ bundling แบบละเอียด (Fine-Grained Bundling) เพื่อส่งเฉพาะโค้ดที่จำเป็น
    • ลบโค้ดที่ไม่ได้ใช้งาน และข้าม hydration ที่ไม่จำเป็นในระดับซับเทมเพลต
    • ออกแบบภายใต้แนวคิด “Lean by default, Fast by design”
  • รองรับ การคอมไพล์แบบปรับแต่งตามสภาพแวดล้อม (Targeted Compilation)
    • สร้างผลลัพธ์ที่ปรับแต่งเหมาะสมกับแต่ละสภาพแวดล้อม โดยคำนึงถึงความแตกต่างระหว่างเบราว์เซอร์และเซิร์ฟเวอร์
    • โหลดได้เร็วขึ้น, bundle เล็กลง, และพัฒนาได้ด้วยภาษาเดียวแบบรวมศูนย์

ตัวอย่างโค้ดและไวยากรณ์

  • มีไวยากรณ์ที่กระชับซึ่งผสาน HTML และ JavaScript เข้าด้วยกัน 
    <let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>
  • โค้ดเดียวกันสามารถเขียนในรูปแบบที่กระชับกว่าได้เช่นกัน 
    let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times
  • มี ชุดแท็กที่ขยายเพิ่มเติม เช่น <for>, <if>, <await>, <const>, <define>
    • สามารถใช้แท็กมาตรฐานของ HTML ร่วมกับแท็กเฉพาะของ Marko ได้

ประสิทธิภาพและการขยายตัว

  • รองรับ การเรนเดอร์ครั้งแรกที่รวดเร็วขึ้น (Faster First Paint) ช่วยยกระดับประสบการณ์ผู้ใช้
  • ขยายสเกลได้ (Scalable) : สามารถขยายได้อย่างยืดหยุ่นตั้งแต่เทมเพลต HTML แบบง่ายไปจนถึงโครงสร้างคอมโพเนนต์ที่ซับซ้อน
  • ด้วย รันไทม์ขนาดเล็กและคอมไพเลอร์ที่ปรับแต่งมาอย่างดี ทำให้ยังคงรักษาประสิทธิภาพสูงได้ในสภาพเครือข่ายที่หลากหลาย

การผสานรวม TypeScript และเครื่องมือนักพัฒนา

  • มี การรองรับ TypeScript ในตัว พร้อมความสามารถด้านการอนุมานชนิดข้อมูลที่แข็งแกร่ง
    • รักษาความสอดคล้องของชนิดข้อมูลระหว่างเทมเพลตและคอมโพเนนต์
    • รองรับฟีเจอร์ในเอดิเตอร์ เช่น การเติมโค้ดอัตโนมัติ, ไปยังคำจำกัดความ, การไฮไลต์ไวยากรณ์ และการจัดรูปแบบ
  • มอบ สภาพแวดล้อมการพัฒนาที่เสถียร ด้วยการตรวจจับข้อผิดพลาดได้ตั้งแต่เนิ่น ๆ และช่วยยกระดับคุณภาพโค้ด

บทสรุป

  • Marko คือภาษาเว็บสมัยใหม่ที่ผสาน ไวยากรณ์ที่เป็นมิตรกับ HTML, การเรนเดอร์ประสิทธิภาพสูง, การทำ bundling ที่ละเอียด, และ การผสานรวม TypeScript เข้าไว้ด้วยกัน
  • ทำงานได้อย่างมีประสิทธิภาพทั้งบนเซิร์ฟเวอร์และไคลเอนต์ พร้อมมอบ ความสามารถในการขยายระบบและประสิทธิภาพที่เหมาะกับการให้บริการขนาดใหญ่

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
shakespeares 2025-11-10

ตอนนี้ก็คงเป็น Svelte ล่ะมั้ง
 
GN⁺ 2025-11-10
ความคิดเห็นบน Hacker News

  • อยากให้ HTML เองรองรับ HTTP verb ทุกแบบได้ โดยไม่ต้องใช้ JavaScript ในอนาคต เช่น put, delete และมี input control อย่าง dropdown, multi-select, วันที่, เวลา ให้มาเป็นพื้นฐาน รวมถึงส่งฟอร์มได้โดยไม่ต้อง reload ทั้งหน้า
    ตอนที่ได้ยินชื่อ htmx ครั้งแรกก็หวังว่าจะเป็นแบบนั้น แต่ของจริงกลับอยู่แค่ระดับ intercooler
    ฟีเจอร์พวกนี้ต้องอาศัยการรองรับอย่างกว้างขวางจาก browser vendors

    • ตอนนี้กำลังมีงานที่พยายามผสานบางไอเดียของ htmx เข้าไปใน HTML spec โดยตรง
      ดูรายละเอียดได้ใน โปรเจกต์ Triptych

  • ในฐานะคนที่เคยทำ JavaScript framework เอง มองว่า Marko ถูกประเมินค่าต่ำเกินไป
    การ optimize ตอน compile time น่าประทับใจมาก และเอกสาร คำอธิบายเรื่อง fine-grained bundling ก็ยอดเยี่ยม
    ใน การเปรียบเทียบประสิทธิภาพ Kanban board ก็ทำผลงานได้ดีจริง

    • กระแส RSC กับ SSR ดูเหมือนเป็น ข้ออ้างเพื่อเลื่อนตำแหน่ง หรือไม่ก็หาเหตุไปตั้งบริษัทใหม่
      React พอจับคู่กับ Next.js แล้วก็ทรยศต่อแก่นของแพลตฟอร์ม และตอนนี้แทบไม่มีเหตุผลให้เลือกใช้อีกต่อไป
      สมัยที่ React แบบ static hydration รันอยู่บน CDN ยังดีกว่ามาก
    • มักใช้ SvelteKit กับโปรเจกต์ใหม่ ๆ เพราะสมดุลระหว่างฟีเจอร์, developer experience และประสิทธิภาพดี
      ถึงอย่างนั้นก็เริ่มคิดว่าควรลองดู Marko ด้วย
      อยากให้มี การวิเคราะห์เชิงลึก แบบนี้กับฝั่ง desktop framework อย่าง Electron บ้าง

  • เหตุผลที่ชอบ React ก็เพราะมันเป็นแค่ “JavaScript ล้วน ๆ”
    ไม่ชอบไวยากรณ์แบบ <let> หรือ <for>

    • ที่จริง JSX ก็ไม่ใช่ JavaScript ล้วนเหมือนกัน
      แค่คุ้นจนลืมไป เวลาเจอ framework ใหม่ควรจำจุดนี้ไว้
    • เมื่อก่อนก็มีไวยากรณ์ template ที่ดี และตอนนี้ก็ยังมี
      รูปแบบอย่าง {% for user in users %} หรือ {#each users as user} ชัดเจนกว่ามาก
      JSX เองก็ไม่ได้สมบูรณ์แบบ — ไวยากรณ์ {users.map(...)} ก็ยังเยิ่นเย้ออยู่ดี
    • เคยใช้ Marko มาก่อน มันเริ่มจาก โปรเจกต์ภายในของ eBay แล้วค่อยเปลี่ยนมาเป็นโอเพนซอร์สราวปี 2015
    • แล้วแต่คน แต่ก็มีคนจำนวนไม่น้อยที่ชอบไวยากรณ์แบบ template ลักษณะนี้
      นี่ก็เป็นเหตุผลที่ Vue กับ Svelte ได้รับความนิยม
      อนึ่ง Vue ก็เขียนด้วย JSX ล้วน ๆ ได้ถ้าต้องการ
    • React ไม่ได้เป็น “แค่ JS” มานานแล้ว
      DSL มันพองตัวขึ้นเรื่อย ๆ และยิ่งซับซ้อนขึ้นจาก hook อย่าง useFormStatus หรือ useActionState
      ในทางกลับกัน ไวยากรณ์ของ Marko ดูตรงไปตรงมา ฟังก์ชันก็ดูเป็นฟังก์ชัน ตัวแปรก็ดูเป็นตัวแปร จึงเข้าใจง่ายกว่า

  • แนวทางเอา JS ไปใส่ใน HTML ดูสดใหม่ดี
    Ryan Carniato เคยมีส่วนกับโปรเจกต์นี้ ก่อนจะไปนำ SolidJS ต่อ เลยสงสัยว่าทำไมถึงย้อนกลับไปใช้สไตล์ HTML-in-JS อีก

    • Ryan ทำ Solid อยู่ก่อนเข้าร่วม eBay/Marko เสียอีก
      ทั้งสองโปรเจกต์พัฒนาต่อกันด้วยการแลกเปลี่ยนไอเดีย และทุกวันนี้ก็ยังมีปฏิสัมพันธ์กันอยู่
    • เหตุผลที่เลือก JSX ก็ง่ายมาก
      นักพัฒนาจำนวนมากคุ้นเคยกับมัน และฝั่ง editor กับ TypeScript support ก็พร้อมอยู่แล้ว
    • พอได้ยินคำว่า “JS inside HTML” ก็ฟังดูเหมือนมุกประมาณว่าย้อนกลับไปยุค Netscape ปี 1995

  • วงการฟรอนต์เอนด์วนไปวนมามากว่า 20 ปี จนเหมือนกลับไปสู่ paradigm ยุค JSP อีกครั้ง
    ตอนนั้นคนเมินเพราะมองว่าเชย แต่สุดท้ายดูเหมือนมันจะถูกทาง

    • เทคโนโลยีเป็นวัฏจักร แต่ทุกครั้งก็มักมีการปรับปรุงเล็ก ๆ น้อย ๆ
      บางอย่างหายไป แต่ความคิดสร้างสรรค์ของคนรุ่นถัดไปก็ทำให้เกิดสิ่งใหม่
    • ยังจำ JSF ได้ — มันกู้สถานะกลับมาจากฝั่งเซิร์ฟเวอร์ได้ และช่วยให้สร้างเว็บแบบฟอร์มซับซ้อนได้เร็ว
      เพียงแต่ต้องระวังเรื่องการขยายระบบในระดับใหญ่
    • รู้สึกเห็นด้วยยากกับคำว่า “paradigm ที่ถูกต้อง”
      เพราะบางสถานการณ์ แนวทางอื่นอาจเหมาะกว่า
    • การสรุปว่าเหตุผลที่เลือก SPA เป็นเพราะ “ไม่ชอบเทคโนโลยีเก่า” นั้นง่ายเกินไป
      ตอนนั้นความต้องการคือ mobile app และสถาปัตยกรรมแบบ API-centric ซึ่ง SPA ตอบโจทย์นั้น
      ทุกวันนี้มันไม่ใช่การกลับไปหา JSP แต่เป็นกระบวนการหาจุดสมดุล ระหว่างสองฝั่ง

  • Marko เป็นเทคโนโลยีที่ ผ่านการพิสูจน์ใน eBay แล้ว
    ใช้มาหลายปีโดยไม่เคยเจอปัญหาเลย
    ในทางกลับกัน Facebook, Instagram และ Messenger ที่สร้างบน React กลับมีบั๊กฝั่ง UI ไม่ขาดสาย
    ถ้าดูผลในบริการขนาดใหญ่จริง ๆ จะเห็นว่า Marko โดดเด่นเรื่องความเสถียร

  • Marko เคยขึ้น HN มาหลายรอบแล้ว
    มีเธรดที่เกี่ยวข้องใน มกราคม 2023, สิงหาคม 2017, และ กุมภาพันธ์ 2015

    • เพิ่งรู้เหมือนกันว่าเป็นโปรเจกต์ที่เก่าพอสมควร

  • ดูเหมือนเป็นไวยากรณ์ที่พัฒนาขึ้นจาก JSX มากพอสมควร
    โดยเฉพาะ ไวยากรณ์แบบย่อสไตล์ Pug ที่ชอบมาก แต่ก็สงสัยว่าทำไมถึงเอาไปซ่อนไว้ลึกในเอกสาร
    เอกสาร Concise Syntax

    • ฉันก็เคยไปดู Marko เพราะไวยากรณ์แบบย่อนั่นเหมือนกัน
      แต่ไม่ชอบ ข้อผิดพลาดของ syntax highlighting กับวิธีแยกแอตทริบิวต์ในเอกสาร
      ช่วงหลังใช้ Svelte เป็นหลัก แต่ก็ยังรอไวยากรณ์ที่สง่างามกว่านี้อยู่
    • ส่วนตัวรู้สึกเหมือนกำลังทำพลาดซ้ำแบบ YAML
      ไวยากรณ์ที่อิงช่องว่างนั้นไม่เลว แต่รูปแบบอย่าง -- และความยากในการ parse น่าเสียดาย

  • ทีม Marko ทำ Hacker News clone ออกมาเผยแพร่เองเพื่อแนะนำ Marko 6
    ดูตัวอย่างบน GitHub

  • คงเพราะเป็นภาษาที่ทำขึ้นเพื่อเดโม เลยตลกดีที่ข้อความไล่สีอย่าง “HTML-based” กับ “building web apps” กลับมองไม่เห็น