inertia-laravel VS Svelte

This is (as far as I know) not documented and I had to dive into the sourcecode for both the inertia server runner and the Laravel command to start the server to understand what is going on. Here we go.

So here is a quick guide how to set up a new Rails 7 app using my favorite projects out there: Inertia and Svelte. You can also skip all this and download the endresult directly from here: https://github.com/buhrmi/rails7-starter

Might be interested in https://inertiajs.com/

Laravel Viltify is a heavily opinionated Laravel starter kit. It's intent is to seamlessly integrate Vue, Inertia.js, Laravel, TailwindCSS and Vuetify, so you don't waste your time learning how to do it and focus on writing your application, leaving setup behind.

Can't believe nobody recommended inertiajs here!

I would recommend InertiaJS for using Vue.js with Rails. It lets Rails continue to handle navigation so you don't have to replicate it client side. Same thing with views which gives you a very nice balance between an SPA and a fully server rendered app.

Now more than ever, it has become very easy to integrate React in your Laravel project, as opposed to before when one had to depend on APIs to connect the two stacks. This meant two different hosting environments and two Git repos to manage. But with InertiaJS we can build SPAs (single page apps) with your preferred front-end in one single project without need for APIs. Inertia has support for React, Vue or Svelte to use in your front-end. You pass data in your controllers as in any ordinary Laravel project, only difference is you're now rendering your views as JavaScript elements instead of blade. This can be done in two ways:

Awesome. I’m noticing a ton of “alternative” front end development tools these days: Hotwire, Stimulus Reflex, LiveView, Livewire, etc.

However I don’t think javascript is the fundamental blocker. When people say they dislike building SPAs, they probably mean they dislike APIs and the whole circus of double validations, error catching, form handling and cache invalidations that come with a React/Vue SPA.

Inertiajs[1] is a really solid middle ground of MVC goodness and client side interactivity.

[1] - https://inertiajs.com

React has introduced measures like batching state updates, background concurrent rendering and memoization to tackle this. My opinion is that the best way to solve the problem is by improving their reactivity model. The app needs to be able to track the code that should be re-run on updating a given state variable and specifically update the UI corresponding to this update. Tools like solid.js and svelte work in this manner. It also eliminates the need for a virtual DOM and diffing.

Similarly to Promises/A+, this effort focuses on aligning the JavaScript ecosystem. If this alignment is successful, then a standard could emerge, based on that experience. Several framework authors are collaborating here on a common model which could back their reactivity core. The current draft is based on design input from the authors/maintainers of Angular, Bubble, Ember, FAST, MobX, Preact, Qwik, RxJS, Solid, Starbeam, Svelte, Vue, Wiz, and more…

Svelte is a powerful web framework that offers a fresh approach to building web applications. Its simplicity, reactivity model, and built-in features make it an excellent choice for developers looking to create efficient and maintainable applications. By following this guide, you should now have a good understanding of how to get started with Svelte and build your first components, routes, and transitions. You can read more about svelte on the official Svelte website.

Use .NET features (especially dotnet watch) as a setup for a client-side Svelte application, starting from a simple C# console app.

Volar originally was Vue3's language support tool for VScode (I don't know about other editors). By today, volar has become a language indipendent framework to create language tools. It might still be a bit early for the dev with skill issues like me to use it and build some tools, but astro and svelte already use Volar to create their language tools.