Type-safe HTML templating in Zig

A developer with decades of web experience, from PHP 3.0 through Python, Perl, and Django templates, recently returned to web development using Zig. Building backends with zio and Dusty convinced them that arena allocators and Zig's comptime make web work practical, and htmx or Datastar allow SPAs without touching JavaScript or TypeScript.

What was missing was a templating system meeting four requirements: compile-time type safety, speed with no allocations and direct writes to std.Io.Writer, escaping of all inputs by default to prevent XSS, and syntax that still feels like writing HTML. No existing option satisfied all of them. Ziex, with its JSX-inspired approach, offered useful ideas, but it targets WASM, which did not suit the author's needs. Go's Templ then provided the clearest model.

The result is zt, a Zig adaptation of Templ. Templates are parsed and transpiled to Zig during zig build, so they can import app code and app code can import them. Parameters are fully typed, and rendering errors surface at compile time. The generated code simply writes to a std.Io.Writer, whether that is a socket or a buffer.

Usage is straightforward. Templates are declared with a templ keyword, can nest components through @children, and accept typed parameters such as optional user records. Rendering can be called directly or through Dusty's render helper for HTML responses.

طوّر مطور لديه عقود من الخبرة في تطوير الويب، بدءًا من PHP 3.0 مرورًا بـ Python وPerl وقوالب Django، عودته مؤخرًا إلى تطوير الويب باستخدام Zig. وقد أقنعه بناء الخوادم الخلفية باستخدام zio وDusty بأن مخصصات الساحات وComptime في Zig تجعل العمل على الويب عمليًا، وأن htmx أو Datastar تتيح تطبيقات الصفحة الواحدة دون لمس JavaScript أو TypeScript.

ما كان ينقص هو نظام قوالب يستوفي أربعة متطلبات: أمان الأنواع وقت الترجمة، والسرعة دون تخصيصات مع الكتابة المباشرة إلى std.Io.Writer، وهروب جميع المدخلات افتراضيًا لمنع XSS، وصياغة لا تزال تبدو كتابة HTML. لم يستوفِ أي خيار موجود كل هذه الشروط. قدّم Ziex، بنهجه المستوحى من JSX، أفكارًا مفيدة، لكنه يستهدف WASM، وهو ما لم يناسب احتياجات المؤلف. ثم قدّم Templ من Go النموذج الأوضح.

النتيجة هي zt، وهو تكييف لـ Templ بلغة Zig. تُحلَّل القوالب وتُترجم إلى Zig أثناء zig build، لذا يمكنها استيراد كود التطبيق ويمكن لكود التطبيق استيرادها. المعاملات مكتوبة بالكامل، وتظهر أخطاء العرض في وقت الترجمة. يكتب الكود المولّد ببساطة إلى std.Io.Writer، سواء كان مقبسًا أو مخزنًا مؤقتًا.

الاستخدام مباشر. تُعلن القوالب بالكلمة المفتاحية templ، ويمكنها تداخل المكونات عبر @children، وتقبل معاملات مكتوبة مثل سجلات المستخدم الاختيارية. يمكن استدعاء العرض مباشرة أو عبر دالة render في Dusty لاستجابات HTML.

PHP 3.0 থেকে Python, Perl ও Django টেমপ্লেট পর্যন্ত কয়েক দশকের ওয়েব অভিজ্ঞতা থাকা একজন ডেভেলপার সম্প্রতি Zig ব্যবহার করে ওয়েব ডেভেলপমেন্টে ফিরে এসেছেন। zio ও Dusty দিয়ে ব্যাকএন্ড তৈরি করে তাঁর বিশ্বাস জন্মেছে যে arena allocator ও Zig-এর comptime ওয়েব কাজকে বাস্তবসম্মত করে তোলে, এবং htmx বা Datastar JavaScript বা TypeScript ছোঁয়া ছাড়াই SPA তৈরির সুযোগ দেয়।

যা অনুপস্থিত ছিল তা হলো চারটি প্রয়োজন পূরণকারী একটি টেমপ্লেটিং সিস্টেম: কম্পাইল-টাইম টাইপ নিরাপত্তা, বরাদ্দ ছাড়া দ্রুত গতি এবং std.Io.Writer-এ সরাসরি লেখা, XSS ঠেকাতে ডিফল্টভাবে সব ইনপুটের এস্কেপিং, এবং এমন সিনট্যাক্স যা এখনও HTML লেখার মতো মনে হয়। কোনো বিদ্যমান বিকল্পই সবগুলো পূরণ করেনি। Ziex, তার JSX-অনুপ্রাণিত পদ্ধতি নিয়ে, কার্যকর ধারণা দিয়েছিল, কিন্তু সেটি WASM-কে লক্ষ্য করে, যা লেখকের প্রয়োজনের সাথে মেলেনি। Go-এর Templ সবচেয়ে স্পষ্ট মডেল দিয়েছিল।

ফলাফল হলো zt, Templ-এর একটি Zig রূপান্তর। টেমপ্লেট zig build-এর সময় পার্স হয়ে Zig-এ ট্রান্সপাইল হয়, তাই এগুলো অ্যাপ কোড ইমপোর্ট করতে পারে এবং অ্যাপ কোড এগুলো ইমপোর্ট করতে পারে। প্যারামিটার সম্পূর্ণ টাইপযুক্ত, এবং রেন্ডারিং ত্রুটি কম্পাইল-টাইমে ধরা পড়ে। তৈরি কোড কেবল একটি std.Io.Writer-এ লেখে, তা সকেট হোক বা বাফার।

ব্যবহার সহজ। টেমপ্লেট templ কীওয়ার্ড দিয়ে ঘোষণা করা হয়, @children-এর মাধ্যমে কম্পোনেন্ট নেস্ট করা যায়, এবং ঐচ্ছিক ব্যবহারকারী রেকর্ডের মতো টাইপযুক্ত প্যারামিটার গ্রহণ করে। HTML রেসপন্সের জন্য রেন্ডারিং সরাসরি বা Dusty-এর render হেল্পারের মাধ্যমে কল করা যায়।

Ein Entwickler mit jahrzehntelanger Web-Erfahrung, von PHP 3.0 über Python, Perl und Django-Templates, ist kürzlich mit Zig zur Webentwicklung zurückgekehrt. Der Aufbau von Backends mit zio und Dusty hat ihn davon überzeugt, dass Arena-Allokatoren und Zigs comptime Webarbeit praktikabel machen und dass htmx oder Datastar SPAs ohne JavaScript oder TypeScript ermöglichen.

Es fehlte ein Template-System, das vier Anforderungen erfüllt: Typsicherheit zur Compilezeit, hohe Geschwindigkeit ohne Allokationen und mit direktem Schreiben in std.Io.Writer, Escaping aller Eingaben standardmäßig zur Verhinderung von XSS sowie eine Syntax, die sich immer noch wie das Schreiben von HTML anfühlt. Keine bestehende Option erfüllte alle. Ziex bot mit seinem JSX-inspirierten Ansatz nützliche Ideen, zielt aber auf WASM ab, was nicht zu den Bedürfnissen des Autors passte. Go's Templ lieferte dann das klarste Modell.

Das Ergebnis ist zt, eine Zig-Adaption von Templ. Templates werden während zig build geparst und nach Zig transpiliert, sodass sie Anwendungscode importieren können und Anwendungscode sie importieren kann. Parameter sind vollständig typisiert, und Renderfehler treten bereits zur Compilezeit auf. Der generierte Code schreibt einfach in einen std.Io.Writer, egal ob es sich um einen Socket oder einen Puffer handelt.

Die Verwendung ist unkompliziert. Templates werden mit dem Schlüsselwort templ deklariert, können Komponenten über @children verschachteln und typisierte Parameter wie optionale Benutzerdatensätze annehmen. Das Rendern kann direkt oder über den render-Helfer von Dusty für HTML-Antworten aufgerufen werden.

Un desarrollador con décadas de experiencia en desarrollo web, desde PHP 3.0 hasta Python, Perl y las plantillas de Django, volvió recientemente al desarrollo web usando Zig. Crear backends con zio y Dusty lo convenció de que los asignadores de arena y el comptime de Zig hacen práctico el trabajo web, y que htmx o Datastar permiten crear SPA sin tocar JavaScript ni TypeScript.

Lo que faltaba era un sistema de plantillas que cumpliera cuatro requisitos: seguridad de tipos en tiempo de compilación, velocidad sin asignaciones y escritura directa en std.Io.Writer, escape de todas las entradas por defecto para evitar XSS, y una sintaxis que aún se sintiera como escribir HTML. Ninguna opción existente cumplía todos. Ziex, con su enfoque inspirado en JSX, ofrecía ideas útiles, pero apuntaba a WASM, lo que no se ajustaba a las necesidades del autor. Templ, de Go, proporcionó el modelo más claro.

El resultado es zt, una adaptación de Templ para Zig. Las plantillas se analizan y transpilan a Zig durante zig build, por lo que pueden importar código de la aplicación y el código de la aplicación puede importarlas. Los parámetros están completamente tipados y los errores de renderizado aparecen en tiempo de compilación. El código generado simplemente escribe en un std.Io.Writer, ya sea un socket o un búfer.

El uso es sencillo. Las plantillas se declaran con la palabra clave templ, pueden anidar componentes mediante @children y aceptan parámetros tipados, como registros de usuario opcionales. El renderizado puede invocarse directamente o a través de la función render de Dusty para respuestas HTML.

Un développeur fort de plusieurs décennies d'expérience web, de PHP 3.0 à Python, Perl et aux templates Django, est récemment revenu au développement web avec Zig. La création de backends avec zio et Dusty l'a convaincu que les allocateurs d'arène et le comptime de Zig rendent le travail web pratique, et que htmx ou Datastar permettent de créer des SPA sans toucher à JavaScript ni TypeScript.

Il manquait un système de templates répondant à quatre exigences : la sûreté de type à la compilation, la rapidité sans allocation avec écriture directe dans std.Io.Writer, l'échappement de toutes les entrées par défaut pour prévenir les XSS, et une syntaxe qui ressemble encore à de l'écriture HTML. Aucune option existante ne satisfaisait toutes ces exigences. Ziex, avec son approche inspirée de JSX, offrait des idées utiles, mais il cible WASM, ce qui ne convenait pas aux besoins de l'auteur. Templ, de Go, fournissait le modèle le plus clair.

Le résultat est zt, une adaptation de Templ en Zig. Les templates sont analysés et transpilés en Zig lors de zig build, ils peuvent donc importer le code de l'application et le code de l'application peut les importer. Les paramètres sont entièrement typés et les erreurs de rendu apparaissent à la compilation. Le code généré écrit simplement dans un std.Io.Writer, qu'il s'agisse d'un socket ou d'un tampon.

L'utilisation est directe. Les templates se déclarent avec le mot-clé templ, peuvent imbriquer des composants via @children et acceptent des paramètres typés, comme des enregistrements utilisateur optionnels. Le rendu peut être appelé directement ou via la fonction render de Dusty pour les réponses HTML.

PHP 3.0 से लेकर Python, Perl और Django टेम्पलेट्स तक दशकों का वेब अनुभव रखने वाले एक डेवलपर ने हाल ही में Zig का उपयोग करके वेब डेवलपमेंट में वापसी की है। zio और Dusty के साथ बैकएंड बनाने से उन्हें यकीन हुआ कि arena allocators और Zig का comptime वेब कार्य को व्यावहारिक बनाते हैं, और htmx या Datastar JavaScript या TypeScript छुए बिना SPA बनाने देते हैं।

जिसकी कमी थी वह एक ऐसा टेम्पलेटिंग सिस्टम था जो चार आवश्यकताएँ पूरी करे: कंपाइल-टाइम टाइप सेफ़्टी, बिना आवंटन और सीधे std.Io.Writer में लिखने वाली गति, XSS रोकने के लिए डिफ़ॉल्ट रूप से सभी इनपुट का एस्केपिंग, और ऐसा सिंटैक्स जो अब भी HTML लिखने जैसा लगे। कोई मौजूदा विकल्प इन सभी को पूरा नहीं करता था। Ziex, अपने JSX-प्रेरित दृष्टिकोण के साथ, उपयोगी विचार देता था, लेकिन वह WASM को लक्ष्य करता है, जो लेखक की ज़रूरतों के अनुकूल नहीं था। Go का Templ सबसे स्पष्ट मॉडल प्रदान करता था।

परिणाम zt है, जो Templ का Zig रूपांतरण है। टेम्पलेट्स zig build के दौरान पार्स और Zig में ट्रांसपाइल होते हैं, इसलिए वे ऐप कोड को इंपोर्ट कर सकते हैं और ऐप कोड उन्हें इंपोर्ट कर सकता है। पैरामीटर पूरी तरह टाइप्ड हैं, और रेंडरिंग त्रुटियाँ कंपाइल समय पर सामने आती हैं। जनरेट किया गया कोड केवल std.Io.Writer में लिखता है, चाहे वह सॉकेट हो या बफ़र।

उपयोग सीधा है। टेम्पलेट्स templ कीवर्ड से घोषित होते हैं, @children के माध्यम से कॉम्पोनेंट्स को नेस्ट कर सकते हैं, और वैकल्पिक उपयोगकर्ता रिकॉर्ड जैसे टाइप्ड पैरामीटर स्वीकार करते हैं। रेंडरिंग सीधे या Dusty के render हेल्पर के माध्यम से HTML रिस्पॉन्स के लिए की जा सकती है।

Seorang pengembang dengan puluhan tahun pengalaman web, mulai dari PHP 3.0 hingga Python, Perl, dan template Django, baru-baru ini kembali ke pengembangan web menggunakan Zig. Membangun backend dengan zio dan Dusty meyakinkannya bahwa arena allocator dan comptime Zig membuat pekerjaan web menjadi praktis, dan bahwa htmx atau Datastar memungkinkan SPA tanpa menyentuh JavaScript atau TypeScript.

Yang belum ada adalah sistem templating yang memenuhi empat kebutuhan: keamanan tipe saat kompilasi, kecepatan tanpa alokasi dan penulisan langsung ke std.Io.Writer, escaping semua input secara default untuk mencegah XSS, serta sintaks yang tetap terasa seperti menulis HTML. Tidak ada opsi yang ada memenuhi semuanya. Ziex, dengan pendekatan terinspirasi JSX, menawarkan ide yang berguna, tetapi menargetkan WASM, yang tidak sesuai dengan kebutuhan penulis. Templ dari Go kemudian memberikan model yang paling jelas.

Hasilnya adalah zt, adaptasi Templ ke Zig. Template di-parse dan ditranspilasi ke Zig selama zig build, sehingga dapat mengimpor kode aplikasi dan kode aplikasi dapat mengimpornya. Parameter sepenuhnya bertipe, dan kesalahan rendering muncul saat kompilasi. Kode yang dihasilkan hanya menulis ke std.Io.Writer, baik itu socket maupun buffer.

Penggunaannya sederhana. Template dideklarasikan dengan kata kunci templ, dapat menyarangkan komponen melalui @children, dan menerima parameter bertipe seperti rekaman pengguna opsional. Rendering dapat dipanggil langsung atau melalui helper render dari Dusty untuk respons HTML.

PHP 3.0 から Python、Perl、Django テンプレートまで、数十年の Web 開発経験を持つ開発者が、最近 Zig を使って Web 開発に戻ってきました。zio と Dusty でバックエンドを構築した経験から、アリーアロケータと Zig の comptime によって Web 開発が実用的になり、htmx や Datastar により JavaScript や TypeScript に触れることなく SPA を作れると確信したのです。

欠けていたのは、四つの要件を満たすテンプレートシステムでした。すなわち、コンパイル時の型安全性、アロケーションなしで std.Io.Writer へ直接書き込む高速性、XSS を防ぐためにすべての入力をデフォルトでエスケープすること、そして HTML を書いているように感じられる構文です。既存のどの選択肢もすべてを満たしませんでした。JSX に着想を得た Ziex は有益なアイデアを提供しましたが、対象は WASM であり、作者の必要に合いませんでした。Go の Templ が最も明快なモデルを示しました。

その結果が zt です。これは Templ を Zig に移植したものです。テンプレートは zig build の過程で解析され Zig にトランスパイルされるため、アプリのコードをインポートでき、アプリのコードからもテンプレートをインポートできます。パラメータは完全に型付けされ、レンダリングのエラーはコンパイル時に検出されます。生成されたコードは、ソケットであれバッファであれ、単に std.Io.Writer に書き込みます。

使い方は簡単です。テンプレートは templ キーワードで宣言され、@children を通じてコンポーネントをネストでき、任意のユーザーレコードのような型付きパラメータを受け取ります。レンダリングは直接呼び出すこともでき、HTML レスポンス用には Dusty の render ヘルパーを通して呼び出すこともできます。

Um desenvolvedor com décadas de experiência em desenvolvimento web, do PHP 3.0 ao Python, Perl e templates Django, voltou recentemente ao desenvolvimento web usando Zig. Construir backends com zio e Dusty o convenceu de que os alocadores de arena e o comptime do Zig tornam o trabalho web prático, e que htmx ou Datastar permitem SPAs sem tocar em JavaScript ou TypeScript.

Faltava um sistema de templates que atendesse a quatro requisitos: segurança de tipos em tempo de compilação, velocidade sem alocações e escrita direta em std.Io.Writer, escape de todas as entradas por padrão para evitar XSS, e uma sintaxe que ainda parecesse escrever HTML. Nenhuma opção existente atendia a todos. O Ziex, com sua abordagem inspirada em JSX, oferecia ideias úteis, mas tem como alvo o WASM, o que não atendia às necessidades do autor. O Templ, do Go, forneceu o modelo mais claro.

O resultado é o zt, uma adaptação do Templ para Zig. Os templates são analisados e transpilados para Zig durante o zig build, por isso podem importar código da aplicação, e o código da aplicação pode importá-los. Os parâmetros são totalmente tipados e os erros de renderização aparecem em tempo de compilação. O código gerado simplesmente escreve em um std.Io.Writer, seja um socket ou um buffer.

O uso é direto. Os templates são declarados com a palavra-chave templ, podem aninhar componentes por meio de @children e aceitam parâmetros tipados, como registros de usuário opcionais. A renderização pode ser chamada diretamente ou pelo auxiliar render do Dusty para respostas HTML.

Разработчик с десятилетиями опыта веб-разработки, от PHP 3.0 до Python, Perl и шаблонов Django, недавно вернулся к веб-разработке на Zig. Создание бэкендов с zio и Dusty убедило его, что арена-аллокаторы и comptime в Zig делают веб-разработку практичной, а htmx или Datastar позволяют создавать SPA без JavaScript и TypeScript.

Не хватало системы шаблонов, отвечающей четырём требованиям: безопасность типов на этапе компиляции, высокая скорость без выделения памяти и с прямой записью в std.Io.Writer, экранирование всех входных данных по умолчанию для защиты от XSS и синтаксис, который всё ещё напоминает написание HTML. Ни один существующий вариант не удовлетворял всем требованиям. Ziex, с подходом, вдохновлённым JSX, предлагал полезные идеи, но ориентирован на WASM, что не подходило автору. Templ из Go дал самую понятную модель.

Результат — zt, адаптация Templ для Zig. Шаблоны разбираются и транспилируются в Zig во время zig build, поэтому они могут импортировать код приложения, а код приложения может импортировать их. Параметры полностью типизированы, а ошибки рендеринга выявляются на этапе компиляции. Сгенерированный код просто пишет в std.Io.Writer, будь то сокет или буфер.

Использование простое. Шаблоны объявляются ключевым словом templ, могут вкладывать компоненты через @children и принимать типизированные параметры, например необязательные записи пользователя. Рендеринг можно вызывать напрямую или через вспомогательную функцию render из Dusty для HTML-ответов.

一位拥有数十年网页开发经验的开发者，从 PHP 3.0 一路使用过 Python、Perl 和 Django 模板，最近开始使用 Zig 重新投入网页开发。使用 zio 和 Dusty 构建后端的经历让他们相信，借助竞技场分配器和 Zig 的 comptime，网页开发可以变得切实可行，而 htmx 或 Datastar 则让人无需接触 JavaScript 或 TypeScript 就能构建 SPA。

当时缺少的是一个满足四项要求的模板系统：编译期类型安全；无分配、直接写入 std.Io.Writer 的高性能；默认转义所有输入以防止 XSS；以及依然像在编写 HTML 的语法。现有方案没有一个能同时满足这四点。Ziex 采用受 JSX 启发的思路，提供了有用的想法，但它以 WASM 为目标，不符合作者的需求。Go 的 Templ 则提供了最清晰的模型。

结果就是 zt，一个借鉴 Templ 的 Zig 实现。模板在 zig build 期间被解析并转译为 Zig 代码，因此它们可以导入应用代码，应用代码也可以导入它们。参数是完全类型化的，渲染错误会在编译期暴露。生成的代码只是写入一个 std.Io.Writer，无论它是套接字还是缓冲区。

使用方式很简单。模板通过 templ 关键字声明，可以通过 @children 嵌套组件，并接受类型化参数，例如可选的用户记录。渲染既可以直接调用，也可以通过 Dusty 的 render 辅助函数为 HTML 响应完成。