Draft: Introduce Inertia

What does this MR do and why?

This is a demo implementation of an idea I had a while ago. It's a very experimental/different approach to how we do "Vue on top of Rails" today and I'd be interested in everyone's opinion!

The challenges

• Due to the way we init Vue apps from SSR Haml, every page nav is a full reload, and every page load rebuilds the entire DOM. Makes everything slower than it could be, not great for UX.
• Many pages consist of many Vue apps, all being initialized based on custom DOM elements and repeated index.js files doing the new Vue dance. This is noisy in both Haml and JS and just isn't great DX.
• etc.

The opportunity

• Our main nav, the left sidebar is a full Vue app nowadays. And so are the page breadcrumbs. And so are more and more feature pages of GitLab. So for some pages, both the full nav, and the content are Vue, yet we still do classic page loads, recreating everything from scratch 🤔

The idea

How about we use Inertia? Don't know it? No worries, it's more popular in the Laravel world, but works as well with Rails! Please check out its docs, it's a great read!

Now to the MR:

• It adds both the inertia gem and js to the codebase.
• It adds a new inertia.haml layout file for the "cold start" when an inertia page is loaded the first time.
• It migrates a few pages from the "Your work" area to use Inertia.
• It uses Inertia's <Link> component in the "Your work" sidebar, so that you can actually navigate from page to page, SPA-style 🪄

How to run this locally

You need to run your GDK with Vite! Webpack is currently not working.

Enable the todos_vue_application feature flag.

Now go to http://gdk.test:3000/dashboard/todos/vue. This page is now rendered as SPA, fully by Vue, with Inertia behind the scenes. While on an Inertia-enabled page, navigate to the Issues page in the Your work sidebar:

• The 3 horizontal issues/mrs/todos buttons all use Inertia nav. Check your network tab while clicking them!
• In the sidebar menu below, the magic links are marked with a 🪄.
• You can also check a page that I didn't change, like Groups. When on such a page, visiting an Inertia page works as well, but isn't that magic, because "cold start".

recording_1726060799300

The bigger picture

With Inertia in place, we would have the opportunity to migrate more and more pages to single Vue apps, and then put those into Inertia pages. As you can see in my demo, for Vue apps that use graphql already, this effort can be pretty minimal.

At the same time, it's not an "all now, or nothing ever" situation, but we could keep things working as they are today, and migrate page by page.

Inertia's concept could allow us to make GitLab's frontend feel much faster, without giving up any of the existing Rails controller logic that exists today.

We could keep state (like Duo Chat drawer) around while going from one page to the next.

Things to consider

• We'd have to duplicate our app layout for the time being. We'd still need the Haml partials, as long as a single Haml page exists, and that would be a long time, even in the best scenarios. But since all parts of that Layout are Vue components already, the effort would be very managable, I think.
• For "session things" like signin, we could just keep the Haml pages as they are. Totally fine with Inertia, and a different layout anyway.
• An Inertia page is only really faster in its load time when it was navigated to from another Interia page. That means we'd need a certain "network effect" before the majority of page navs are much faster.
• For this "SPA nav" to work, every such link has to a Inertia <Link> component, not an <a>. That means there will be challenges in rendering markdown links, I guess (haven't tried that yet).

Thanks for reading so far and trying out the MR! Let me know what you think