htm VS jsx

Because AI-UI is a JavaScript module, you specify the layout as a series of function calls. However, it also fully supports JSX and htm, so you can use a more familiar markup at the cost of the loss of some type safety. There's more about these choices in the AI-UI guide here.

I know what "MVC" _stands_ for, but I'm asking what _context_ you mean that in. Are you talking about how to define your server-side data models and endpoints? How you're organizing client-side fetching and caching?

Normally "MVC" as a concept doesn't get used in the React ecosystem (the way it did with Backbone.js).

FWIW it's certainly _possible_ to use React as a script tag, but it's extremely rare. It's normally expected that the frontend _is_ actually bundled and compiled, whether it be using a pure-SPA build tool like Vite, or one of the full server-side frameworks like Next or Remix.

Note that the SPA build output is just a set of static HTML/JS/CSS files, which do not require a separate Node server process for hosting - they can be served by any HTTP server.

My own advice would be to use Vite and build as an SPA.

_If_ you absolutely want to use React as _just_ a `` tag with no build step, I'd recommend also using <a href="https://github.com/developit/htm">https://github.com/developit/htm</a> to at least give you JSX-like syntax for writing your components.

The preact team also dislikes transpiling jsx so they've developed an alternative using tagged template literals: https://github.com/developit/htm

So getting this to work without bundler magic is very hard. It's not surprising why NextJS is investing in a bundler. Though one thing that really sticks out is how much complexity we add for just miniscule dev ergonomics. Not using JSX and using something like htm would make all this easier (removing the bundler entirely), it's a lot of overhead to avoid a couple of quotes. React should really have a tagged-template mode. Also all of this is indirection is actually bad for dev ergonomics too! One of the reasons I did this is because I'm absolutely sick of magic caches and sorting through code that's been crushed by a bundler into something I don't recognize and can't easily debug. While we can't get rid of this completely (ts/jsx) this preserves the module import graph completely on the client-side making it easy to find things as you are working and preserving line numbers. This obviously is not useful for a production build and there's a lot of work that would need to go in to support both modes over the same code, but it's depressing no tools really work like this for local development.

You can also do JSX and skip the build step with preact + htm : https://github.com/developit/htm#example

While I was able to achieve this fairly easily, the developer experience of manually stitching strings together wasnt great. Being myself a fan of buildless libraries, such as htm and lit-html, I figured I'd try to take a stab at implementing a DSL for component-like templating in Service Workers myself, called Service Worker Templating Language (SWTL), here's what it looks like:

I would however highly recommend https://github.com/developit/htm

I thought the same thing, but apparently "HTM" is a JSX like javascript string template representation of HTML, and it can be found here: https://github.com/developit/htm

If you're going to do a no-build approach, assume modern JS (so you don't have to transpile the JS syntax). Also, you can use https://github.com/developit/htm as a nearly-identical equivalent to JSX syntax, also without transpiling.

This seems like a case of caring way too much about something that's hardly very different. JSX versus tagged template strings can be incredibly similar to one another.

The examples in this article are using vanilla template strings to author raw html, but that only misses a couple of nicities JSX has. There are tagged template string libraries like htm[1] that do include some of the few nicities JSX has, but which are actually compatible with the official language.

[1] https://github.com/developit/htm

Have you ever visited a website that took forever to load? Frustrating, isn't it? Fast loading times and smooth user experiences aren't just nice-to-haves—they're essential for keeping visitors around and ranking high on search engines. Server-Side Rendering (SSR) with JSX presents an effective solution to these challenges. Unlike client-side rendering, where JavaScript constructs the page within the user's browser, SSR generates the complete HTML on the server before sending it to the client. This approach offers significant benefits for performance, Search Engine Optimization (SEO), and overall simplicity.

> Where is jsx defined, as a language?

https://facebook.github.io/jsx/ is the primary home.

> are there multiple transpiler implementations?

Yes. Off the top of my head:

Babel: https://babeljs.io/docs/babel-plugin-transform-react-jsx

Typescript: https://www.typescriptlang.org/docs/handbook/jsx.html

esbuild: https://esbuild.github.io/content-types/#jsx

> is it standardized at all?

In terms of well documented, yes. In terms of a TC-39 standard accepted as a part of JS and intended for browsers to consume? No. Unless you count how much it borrows from E4X [0] which was an optional part of the "lost version" of JS that was EcmaScript 4, then "sort of".

[0] https://en.wikipedia.org/wiki/ECMAScript_for_XML

Svelte syntax? Yes, there is upcoming initiative JSX 2.0 which includes shorthands like that. However, have no idea whether it will be released any time soon. So let's say "this is part of React/JSX 1.0" (shrugging)

Inherent support for JSX in the language itself

JavaScript ＋ HTML（DOM）＝　JSX

FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties.

But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1].

1: First sentence of https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”

JSX stands for 'JavaScript XML' and is a syntax extension for JavaScript. It is used to create DOM elements that are then rendered in the React DOM. Although it looks like HTML, it is actually an XML-like syntax specifically written for use in React. Interestingly, JSX is not valid JavaScript either. JSX needs to be compiled by a tool like Babel to be translated into regular JavaScript that a browser can understand. Put simply, JSX describes what the UI should look like, and React takes care of properly rendering it.

Alternatively, you can use JSX syntax (like with React), but then you need build-tools.

Note: For React component files (JSX) we'll use .tsx to maintain JSX support and for non React files we'll use the .ts file extension. However, if you want you could still use .ts file extension for React components without any problem.