JSX But With Lua | Prime Reacts - AI Summary & Article | ClarifyTube

This article delves into the motivation and technical aspects behind the creation of LuaX, a custom JSX-like syntax for the Lua programming language. The creator, Ben Vinness, developed LuaX out of a strong dislike for static site generators and the complexities introduced by modern web development frameworks like React. The core idea is to enable server-side HTML generation using Lua, leveraging its simplicity and embeddability. The article highlights the frustration with current tools that demand excessive configuration, obscure templating languages, and unnecessary client-side JavaScript for features that could be handled server-side. It champions the simplicity of "HTML inside of JS" (or in this case, Lua) over "JS inside HTML," allowing developers to write more expressive and less constrained code for generating web pages. The project serves as a testament to the power of solving one's own problems and the joy of creating custom tools.

The Motivation Behind LuaX

The primary driver for creating LuaX was the creator’s profound dislike for static sites. Historically, building websites was straightforward: copy HTML files to a server, and you had a site. The introduction of PHP further enhanced this by allowing dynamic server-side code snippets. However, the modern web development landscape, particularly with the dominance of frameworks like React, has introduced what the creator perceives as unnecessary complexity.

I hate static sites, no seriously. I actually hate static sites. I got into programming because I wanted to make websites. When I started out, you could just copy HTML files up to your server and you had a website. It was magical. And PHP made it even better, you could throw in a little snippet of server-side code and you had a dynamic page. Those days are gone.

The current process often involves organizing markdown files, struggling with "janky tools" to cobble them into a website, learning "weird template languages with weird functions and bad control flow," and grappling with cloud control panels for bucket permissions and CDN settings. This regression in simplicity feels like a step back compared to the ease of development 15 years ago.

The Problem with Modern Web Development

A significant pain point for the creator is the insistence on serving every personal website from a CDN, which restricts dynamic behavior. Even a minor update, like changing a copyright year in the footer, necessitates a full site rebuild and redeployment. When dynamism is desired, it's often achieved with client-side JavaScript, leading to heavier and slower pages. To compensate, developers add serverless backends, server-side rendering, and hydration, piling on extra complexity instead of simple server-side code. This paradigm wastes CPU time and money.

What's saddest to me is that when people do want that dynamism, and they often do, they end up doing it with JavaScript, making their pages heavier and slower. Then to compensate for this, they'll add some kind of serverless backend serving rendering plus hydration in a pile of extra complexity instead of just doing a little server-side code. They're wasting people's CPU time and their own money.

The creator champions JSX-like syntax because it flips the ownership: it's "HTML inside of JS" (or Lua), not "JS inside HTML." This approach means that when complex logic is required, developers don't need to learn an "underpowered language" or "contort work to fit a broken system." Instead, they can just write code in a familiar programming language, and the system handles the rest.

Why Lua for LuaX?

The choice of Lua for LuaX was deliberate and based on several advantages inherent to the language:

Simplicity and Embeddability

Lua is known for its simplicity and ease of embedding into existing applications. The creator's website is built in Go, and Lua fit the bill perfectly for integration. Embedding Lua into a Go application took only about 17 minutes, demonstrating its seamless integration capability.

Easy Parsing

Lua has an extremely simple grammar, fitting entirely on one screen. Its official parser is less than 1,500 lines of code. This simplicity made it easy to create a custom recursive descent parser for LuaX. The transpiler, which converts HTML tags into Lua tables, is also concise, comprising less than a thousand lines of code, with the majority dedicated to parsing Lua and only about 300 lines for the new features.

Server-Side Execution Only

A crucial distinction of LuaX, compared to traditional JSX used with frameworks like React, is its exclusive server-side execution. This eliminates the complexities of reasoning about both client-side and server-side logic simultaneously, which often leads to "weird things" like massive state management libraries (e.g., Redux) to manage state updates across complex component trees.

Comparison with Templating Languages

The creator has experimented with numerous templating languages over the years, including Mustache, Liquid, Nunjucks, Blade, Django, and Go templates (commonly seen in systems like Hugo). While Go templates are considered "not half bad," most templating languages share a "pre-processor model."

Pre-processor Model Limitations

This model assumes a template is mostly static HTML with "slots to paste Dynamic values," akin to a simple find-and-replace operation. While initially sufficient for simple values, it rapidly escalates to managing complex conditional logic, "weird inheritance systems," and custom functions injected into the template language. This approach often falls short because it doesn't allow the manipulation of HTML as data; the HTML remains "opaque" to the template language. Web pages are complex documents requiring sophisticated logic, which these languages struggle to provide.

The problem is that no pre-processor style templates actually allow you to manipulate the HTML as data. The HTML is opaque. The template language doesn't understand it. Web pages are complex documents that often need serious logic to assemble, logic that requires the template language to work with the document structure instead of just text.

Even PHP, despite being a "real programming language" with arrays, loops, and functions, still doesn't inherently "understand HTML" in the same way, essentially functioning as a more sophisticated pre-processor. The core limitation, according to the creator, is that at the end of the day, most web rendering is reduced to "string concatenating" repeatedly.

The Joy of Personal Projects

The project was driven by a personal goal: "to make myself happy." The creator emphasizes that finding something that "upsets you and fix it your way" is one of the most important goals of any side project. It doesn't need to be life-changing or garner social media cred; the act of creating and learning is its own reward. The experience of building a transpiler in a weekend, a task that would have been daunting earlier in his career, was particularly gratifying. While LuaX isn't production-ready for public use, it fulfills the creator's needs perfectly.

My goal with this project was to make myself happy and I think I succeeded. This is one of the most important goals of any side project: find something that upsets you and fix it your way.

This philosophy extends to other tools and frameworks as well. The creator humorously states that "Go templates suck, Temple.guide sucks, LuaX sucks, React sucks, Leptos sucks, they all suck." The key is to "choose your suck" and find the "least sucky" solution for a given project, embracing that no universal solution exists.

Takeaways

Motivation for LuaX: The creator developed LuaX due to a strong dissatisfaction with modern static site generators and the complexities of frameworks like React, aiming for a simpler, server-side HTML generation experience.
Server-Side Focus: LuaX is designed exclusively for server-side execution, avoiding the complexities that arise from managing both client-side and server-side logic inherent in frameworks like React.
Advantages of Lua: Lua was chosen for its simplicity, ease of embedding into existing applications (like a Go backend), and its straightforward grammar, which made parsing and transpiler development significantly easier and quicker.
Critique of Templating Languages: Most traditional templating languages, based on a "pre-processor model," are seen as inadequate for complex web pages because they treat HTML as opaque text rather than data that can be manipulated programmatically.
The Value of Personal Projects: The article underscores the importance of building tools for oneself, driven by personal frustration and a desire to create, rather than focusing on resume building or public acclaim, as this process leads to significant learning and personal satisfaction.

JSX But With Lua | Prime Reacts