We are going to discuss frameworks supported by Astro, plus special guest: Angular!
🟢 Excellent support
🟡 Moderate support
🔴 Poor support
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.
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
htmlFor, but “HTML-style”
for usually just work in other frameworks.
Being a compiler-driven framework, Svelte relies heavily on its template syntax to achieve the magic, so JSX is a no-go.
Prioritized as a drop-in library to enhance ordinary websites, this is not something you use with JSX which assumes a compiler.
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 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.
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.
Depends on how you see it, Solid can be categorized as vanilla too since it creates ordinary DOM elements.
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 ✨!