Inertia

Jeremy's classification of developer tools has always impressed me:

I've mentioned two types of web development tools, but I'm still not sure how to call these categories. Interior and external? For developers and users?

The first category includes build tools, version control, translators, preprocessors, and code inspectors. These tools run on your machine—or on the server—take the code you write and convert it into raw materials for the web: HTML, CSS, and JavaScript.

The second type of tools is composed of raw materials for the Web: CSS framework and JavaScript libraries.

This is a good way to think, and of course there are some subtleties. Sass belongs to the first category because it will not be delivered directly to the user, it only generates CSS delivered to the user. But it will still affect the user because the size of the CSS it generates will vary depending on how you use it.

Jeremy calls Svelte a library, whose goal is to compile as much as possible before the code is delivered to the user. There will still be some JavaScript code, but it does not contain the overhead of the developer-oriented API. The subtlety here is that Svelte can be used in a way that completely removes all JavaScript code. For example, SvelteKit can turn off its hydration function completely and pre-render the page, creating a completely JavaScript-free website (or at least only use it if you need it).

About React:

I know there are ways to make React behave more like the first type of tool, but this is definitely not the default behavior. And the default behavior is really important. For React, the default behavior is to assume that all the code you write—and the tools you use to write it—is sent to the end user.

I think this is reasonable, but the story seems to be slowly changing. I think widespread use is far from the way it is, but server components are worth paying attention here because they come from the React team itself, just as SvelteKit comes from the Svelte team itself.

About Astro:

[…] Unlike Svelte, Astro allows you to use the same syntax as existing framework React. So if you've learned React -- because you need to learn it to find a job -- then you can use Astro without learning new syntax.

I know you may not be able to convert an existing React website to Astro in one click, but there is at least a clear upgrade path.

This is not only correct in theory, but also in practice!

I just converted our small serverless micro website from Gatsby to Astro. Gatsby is based on React, so all components are built as React components. Pull Request is a bit messy, but it's here. I converted some of it into a .astro file, but left many components basically the same as .jsx React components. But React will not be sent to the user's website. The JavaScript code on the website has been almost completely removed, leaving only some handwritten native JavaScript code for very simple interactions.

So here are some coin tossing things happening. Coins merge? To me, Astro feels very much like a developer-oriented tool. It helped me . It uses the Vite compiler, which is very fast and enjoyable to use (Astro certainly has some shortcomings as it is not yet reached 1.0, but DX is largely implemented). It scopes my style. It allows me to write SCSS. It allows me to write components (using many different frameworks). But it also helps users. There is no JavaScript package on the website at all.

I guess this means Astro hasn't changed the category - it's a developer-oriented tool. It just happens to turn an originally user-oriented tool (even Svelte) into an almost entirely developer-oriented tool.

Since I still have a few links about Astro that have been in my pocket, Flavio has a great tutorial on getting started, and here is Drew McLellan and Matthew Phillips discuss Astro on the recent Smashing Podcast.

Here are some websites Dave and I discuss with me recently remade with Astro:

The above is the detailed content of Inertia. For more information, please follow other related articles on the PHP Chinese website!