Marko – डिक्लेरेटिव HTML-आधारित भाषा

• HTML सिंटैक्स का विस्तार करके डायनैमिक और रिएक्टिव वेब इंटरफेस बनाए जा सकने वाली एक डिक्लेरेटिव भाषा, जो मौजूदा HTML उपयोगकर्ताओं को परिचित डेवलपमेंट वातावरण देती है
• Streaming rendering के ज़रिए सर्वर से कंटेंट तुरंत भेजा जा सकता है, और क्लाइंट JavaScript bundle लोड होने से पहले भी स्क्रीन दिखाई जा सकती है
• Fine-grained bundling से अनावश्यक कोड ट्रांसफर को न्यूनतम करके परफ़ॉर्मेंस और लोडिंग स्पीड बेहतर होती है
• Targeted compilation के माध्यम से ब्राउज़र और सर्वर, दोनों के लिए उपयुक्त कुशल आउटपुट बनाया जाता है
• TypeScript इंटीग्रेशन सपोर्ट और समृद्ध editor फीचर्स के साथ डेवलपमेंट प्रोडक्टिविटी और कोड क्वालिटी बेहतर होती है

---

Marko का अवलोकन

• Marko HTML की पुनर्कल्पना की गई एक डिक्लेरेटिव भाषा है, जिसका लक्ष्य डायनैमिक और रिएक्टिव यूज़र इंटरफेस बनाना है
  • अधिकांश वैध HTML, Marko में भी वैसे ही इस्तेमाल किया जा सकता है
  • HTML सिंटैक्स का विस्तार करके आधुनिक एप्लिकेशन को डिक्लेरेटिव तरीके से लिखा जा सकता है
• eBay.com जैसे उच्च ट्रैफ़िक वाले बड़े साइटों में इसका वास्तविक प्रोडक्शन उपयोग हो रहा है
• यदि आप HTML, CSS, JavaScript जानते हैं, तो बिना किसी अलग learning curve के इसे तुरंत इस्तेमाल कर सकते हैं

प्रमुख विशेषताएँ

• Streaming rendering (Streaming) फीचर के ज़रिए सर्वर तैयार कंटेंट को तुरंत भेजता है
  • क्लाइंट-साइड JavaScript bundle लोड होने से पहले भी शुरुआती स्क्रीन दिखाई जा सकती है
  • HTML, image और assets asynchronous तरीके से लोड होते हैं, जिससे तेज़ first render मिलता है
• Fine-Grained Bundling के ज़रिए केवल ज़रूरी कोड ही भेजा जाता है
  • उपयोग न होने वाले कोड को हटाना और sub-template स्तर पर अनावश्यक hydration को छोड़ना संभव है
  • “Lean by default, Fast by design” दर्शन के साथ डिज़ाइन किया गया है
• Targeted Compilation का समर्थन
  • ब्राउज़र और सर्वर के अंतर को ध्यान में रखकर हर वातावरण के लिए optimized आउटपुट तैयार किया जाता है
  • तेज़ लोड, छोटे 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> जैसे विस्तारित tag set उपलब्ध हैं
  • HTML के मूल tags के साथ Marko-विशिष्ट tags को मिलाकर इस्तेमाल किया जा सकता है

परफ़ॉर्मेंस और स्केलेबिलिटी

• तेज़ शुरुआती रेंडरिंग (Faster First Paint) के समर्थन से यूज़र अनुभव बेहतर होता है
• स्केलेबल : साधारण HTML templates से लेकर जटिल component संरचनाओं तक लचीले ढंग से विस्तार संभव
• छोटे runtime और optimized compiler के कारण अलग-अलग नेटवर्क वातावरण में भी उच्च परफ़ॉर्मेंस बनी रहती है

TypeScript और डेवलपमेंट टूल इंटीग्रेशन

• TypeScript के बिल्ट-इन सपोर्ट से मज़बूत type inference मिलता है
  • template और component के बीच type consistency बनी रहती है
  • editor में autocomplete, definition पर जाना, syntax highlighting, formatting जैसी सुविधाएँ मिलती हैं
• शुरुआती चरण में त्रुटि पहचान और बेहतर कोड क्वालिटी के माध्यम से स्थिर डेवलपमेंट वातावरण मिलता है

निष्कर्ष

• Marko HTML-फ्रेंडली सिंटैक्स, उच्च-परफ़ॉर्मेंस रेंडरिंग, सटीक bundling, और TypeScript इंटीग्रेशन को जोड़ने वाली आधुनिक वेब डेवलपमेंट भाषा है
• यह सर्वर और क्लाइंट दोनों पर कुशलता से काम करती है, और बड़े पैमाने की सेवाओं के लिए उपयुक्त स्केलेबिलिटी और परफ़ॉर्मेंस प्रदान करती है

[shakespeares]

अभी तक तो Svelte ही लगता है

[GN⁺]

Hacker News राय

• आगे चलकर HTML खुद JavaScript के बिना भी सभी HTTP verb (put, delete आदि) को सपोर्ट करे, dropdown·multiselect·date·time जैसे input control डिफ़ॉल्ट रूप से दे, और पूरे page reload के बिना form submit हो सके — ऐसी उम्मीद है
  जब पहली बार htmx का नाम सुना था तो यही उम्मीद की थी, लेकिन असल में वह intercooler के स्तर का निकला
  ऐसी सुविधाओं के लिए browser vendors का व्यापक support चाहिए

  • htmx के कुछ ideas को सीधे HTML spec में integrate करने पर काम चल रहा है
    इससे जुड़ी जानकारी Triptych project में देखी जा सकती है

• JavaScript framework खुद बनाकर देखने के अनुभव से लगता है कि Marko को कम आंका गया है
  इसकी compile-time optimization बहुत प्रभावशाली है, और fine-grained bundling explanation दस्तावेज़ भी शानदार है
  वास्तव में Kanban board performance comparison में भी इसने अच्छे नतीजे दिखाए

  • RSC और SSR का चलन किसी की promotion justification या नई कंपनी शुरू करने के बहाने जैसा लगा
    React ने Next.js के साथ जुड़कर platform की मूल प्रकृति से धोखा किया, और अब उसे चुनने की वजह लगभग नहीं बची
    वह दौर कहीं बेहतर था जब statically hydrated React CDN पर चलता था
  • नए projects में मैं अक्सर SvelteKit इस्तेमाल करता हूँ, क्योंकि features·developer experience·performance का संतुलन अच्छा है
    फिर भी अब Marko को भी देखना चाहिए, ऐसा लगता है
    Electron जैसे desktop frameworks पर भी ऐसा गहरा analysis मिले तो अच्छा होगा

• React पसंद करने की वजह बस इतनी है कि वह “सिर्फ JavaScript” है
  <let> या <for> जैसी syntax देखना पसंद नहीं

  • JSX भी वास्तव में शुद्ध JavaScript नहीं है
    बस हम इतने अभ्यस्त हो चुके हैं कि नया framework देखते समय यह बात भूल जाते हैं
  • पहले भी अच्छी template syntax थीं और आज भी हैं
    {% for user in users %} या {#each users as user} जैसे रूप कहीं अधिक स्पष्ट लगते हैं
    JSX भी परफ़ेक्ट नहीं है — {users.map(...)} syntax अब भी काफ़ी verbose है
  • मैंने पहले Marko इस्तेमाल किया था; यह मूल रूप से eBay का internal project था और लगभग 2015 में open source बना
  • हर किसी की पसंद अलग होती है, लेकिन कुछ लोगों को ऐसी template-based syntax सचमुच पसंद आती है
    Vue और Svelte के लोकप्रिय होने की एक वजह यह भी है
    वैसे, Vue को चाहें तो सिर्फ JSX में भी लिखा जा सकता है
  • React बहुत पहले से “just JS” नहीं रहा
    इसका DSL लगातार फैलता गया है, और useFormStatus या useActionState जैसे hooks बढ़ने से यह और जटिल हो गया है
    इसके उलट Marko की syntax सहज है; function, function जैसा और variable, variable जैसा दिखता है, इसलिए समझना आसान है

• HTML के अंदर JS डालने का तरीका काफ़ी ताज़ा लगता है
  Ryan Carniato इस project से जुड़े थे और बाद में SolidJS का नेतृत्व करने लगे; इसलिए जिज्ञासा है कि वे फिर से HTML-in-JS शैली पर क्यों लौटे

  • Ryan, eBay/Marko से जुड़ने से पहले ही Solid पर काम कर रहे थे
    दोनों projects ने एक-दूसरे के ideas साझा करते हुए प्रगति की, और आज भी आपसी संवाद जारी है
  • JSX चुनने की वजह सादगी थी
    बहुत से developers पहले से उससे परिचित हैं, और editor व TypeScript support भी पहले से अच्छा है
  • “JS inside HTML” सुनकर ऐसा मज़ाक लगता है जैसे 1995 के Netscape दौर में वापस आ गए हों

• 20 साल से ज़्यादा समय में frontend घूम-फिरकर आखिर JSP युग के paradigm तक लौट आया है, ऐसा महसूस होता है
  तब उसे ‘देहाती’ कहकर नज़रअंदाज़ किया गया था, लेकिन लगता है कि अंत में वही सही था

  • तकनीक चक्रों में चलती है, लेकिन हर बार उसमें हल्के-फुल्के सुधार जुड़े होते हैं
    कुछ चीज़ें गायब हो जाती हैं, पर अगली पीढ़ी की रचनात्मकता कुछ नया बना देती है
  • JSF भी याद है — उसमें server side पर state restore की जा सकती थी, और complex form-based websites जल्दी बनाई जा सकती थीं
    हालाँकि बड़े पैमाने पर scale करते समय सावधानी चाहिए थी
  • “सही paradigm” वाली बात से सहमत होना मुश्किल है
    परिस्थिति के हिसाब से अलग approach ज़्यादा उपयुक्त हो सकती है
  • SPA चुने जाने की वजह को सिर्फ “पुरानी तकनीक पसंद नहीं थी” कह देना बहुत सरलीकरण है
    उस समय mobile apps और API-centric architecture की ज़रूरत थी, और SPA उन ज़रूरतों के अनुरूप था
    अभी जो हो रहा है वह JSP की वापसी नहीं, बल्कि दोनों पक्षों के बीच संतुलन खोजने की प्रक्रिया है

• Marko पहले से ही eBay में साबित हो चुकी तकनीक है
  इसे कई सालों से इस्तेमाल किया है, लेकिन कभी कोई समस्या नहीं आई
  दूसरी ओर React-आधारित Facebook, Instagram, Messenger में UI bugs लगातार दिखाई देते हैं
  बड़े scale की वास्तविक services के नतीजे देखें तो Marko की स्थिरता अलग से नज़र आती है

• Marko पहले भी कई बार HN पर आ चुका है
  जनवरी 2023, अगस्त 2017, फ़रवरी 2015 में भी इससे जुड़े threads थे

  • अब जाकर पता चला कि यह काफ़ी पुराना project है

• यह JSX की तुलना में काफ़ी बेहतर syntax लगती है
  खासकर Pug style की concise syntax पसंद आई, लेकिन यह समझ नहीं आया कि उसे docs के अंदर इतना छिपाकर क्यों रखा गया है
  Concise Syntax दस्तावेज़

  • मैंने भी उस concise syntax की वजह से Marko को देखा था
    लेकिन docs की highlighting errors और attributes को अलग करने का तरीका पसंद नहीं आया
    इन दिनों ज़्यादातर Svelte इस्तेमाल करता हूँ, लेकिन अब भी किसी और elegant syntax का इंतज़ार है
  • निजी तौर पर यह YAML की गलतियों को दोहराने जैसा लगता है
    whitespace-based syntax ठीक है, लेकिन -- जैसी notation और parsing की मुश्किलें थोड़ी निराश करती हैं

• Marko टीम ने Marko 6 को पेश करने के लिए खुद एक Hacker News clone बनाकर जारी किया
  GitHub example देखें

• शायद demo के लिए बनाई गई भाषा होने की वजह से, “HTML-based”, “building web apps” जैसे gradient text दिखते ही नहीं — यह थोड़ा मज़ेदार है