We are going to discuss frameworks supported by Astro, plus special guest: Angular!
Legends
🟢 Excellent support
🟡 Moderate support
🔴 Poor support
🔴 Angular
Apparently our special guest favors separation of concerns via using separate files for HTML, CSS and JS. JSX is absolutely “Not invented here” to this opinionated framework.
An aside: this convention is frowned upon by Vue, despite its first version is inspired by AngularJS, the predecessor of Angular.
🟢 React
Being brought up and made popular by React, JSX is the de facto way to build stuff in Reactland.
Fun fact: React prevailed the usage of className and htmlFor, but “HTML-style” class and for usually just work in other frameworks.
🟢 Preact
Our sweet little React wannabe actively publicizes itself as an alternative to React, no wonder it has perfect support for JSX as well. But if you want, you can also go the lit way.
🔴 Svelte
Being a compiler-driven framework, Svelte relies heavily on its template syntax to achieve the magic, so JSX is a no-go.
However, the Svelte Language Tools does leverage JSX for type checking via svelte2tsx.
🔴 Alpine
Prioritized as a drop-in library to enhance ordinary websites, this is not something you use with JSX which assumes a compiler.
🟡 Vue
Even though templates (or let’s say, SFC) is the dominant way to author Vue components, decent JSX support is also provided for both Vue 2 and Vue 3.
Vue’s more sophisticated JSX transform requires Babel, which denies you the speed gains provided by esbuild/SWC. Also, components written in JSX do not preserve local state with Hot Module Replacement.
Worth mentioning, Volar, the Vue extension for VSCode, implements type checking as JSX just like Svelte.
🔴 Lit
Lit is born for Web Components and that thing doesn’t really get along with JSX. Technically you could transpile JSX to LitElement on you own, but let’s pass.
🟢 Solid
JSX is first class citizen in Solid, there are even helpers to write control flows in JSX conveniently.
Solid’s JSX transform uses Babel, thus have the same “lock-in” as Vue JSX.
🟡 Vanilla
Sure, you can use JSX without a framework! Be it MobX JSX, dom-chef or jsx-dom, it should feel right at home.
Depends on how you see it, Solid can be categorized as vanilla too since it creates ordinary DOM elements.
What gives?
I’m not going to argue about JSX vs Template DSLs, but to me, the biggest benefit of JSX is it enables trivially composing components with ordinary variables:
const Component = () => <div>Look mum, no SFCs!</div>
Other benefits of JSX include built-in editor support (instead of needing plugins like Volar), first class type checking support (instead of needing workarounds like vue-tsc), and better support for generic components. These are trade-offs template DSLs make for ergonomic developing experience.
👋 Hi DEV Community! My second post here, hope you find it more informative than my last post 🙈.
The first version of this post is written at the end of March, posted on my Notion page, hence the old screenshot of Astro homepage. Nonetheless, I added new content and restructured it for easier consuming. Suggestions are very much appreciated ✨!
Top comments (3)
The author of this article has no idea that Angular doesn't require separate files for css, html and component code. ... . .tells you something about this article
I said "favor", not "require". Vue doesn't require using SFC either, yet majority Vue components are SFC.
Also, this article is not for or against frameworks, but rather "JSX support in frameworks". Disapproving the whole article just because you think something is arguable does not seem right.
Thanks, it was a good read, bookmarked, and followed!