Templating in JavaScript, from Zero Dependencies on Up (2021)
The article explores dependency-free templating in JavaScript, favoring template literals and functions over traditional methods like JSX. It demonstrates creating components with functions and suggests a small dependency for enhanced syntax. Benefits include simplicity and flexibility for rendering in diverse environments.
Read original article
The article discusses templating in JavaScript without dependencies, focusing on using template literals and functions to generate HTML. It contrasts this approach with traditional templating languages like JSX, highlighting the simplicity and flexibility of the dependency-free method. The post explains how components can be created using functions that return strings, showcasing examples and patterns for composing components with children. It also mentions enhancing the syntax with a small dependency for a more JSX-like experience. The article concludes by emphasizing the benefits of zero dependency templating, enabling rendering in various environments without additional tools or complexities.
Related
8 commentsYears back I dove completely in on Svelte and even wrote my own SSG that helped kick off the Islands/partial hydration crazy... Elder.js. It was fun, but burnt me out of open source.
Today, I only pull for a template language and deal with SSR/Hydration for pages that really need it.
I want JS projects that don't break 6 months after the last build. The way you get that is by not adding more dependencies and not chasing the latest craze.
I noticed the article doesn't mention escaping HTML, which you probably should do if you're expecting user input. Fortunately, such a utility is included in Deno's standard library: https://jsr.io/@std/html/doc/~/escape
Similarly, for XSS, the `xss` package on npm works great for Deno.
For example, a plain string template will not help with selective DOM updates; that’s why we end with a tree DSL like JSX.
For many different reasons, you’ll like to have lazy component rendering. That’s why using `Component(props)` is not the same as `factory(Component, props)`.
I’m not saying that the author is wrong or right. If you only want a server-side template or one-off template for a simple page, then using JS/TS string templates is better than relying on a DSL like Handlebars or Pug. The client-side story is a bit different, and that’s why there are so many frameworks for it.