VILT Stack - A future-proof way to build with Laravel in the 2020s

THIS IS WILD. A stack that lets you build fast, allows for clean code with clear separation of concerns, uses the best of modern css practices and is reactive.

No, I’m not talking about all the hype for TALL stack you might have heard about. I’m talking about the VILT Stack.

VILT translates to WILD in Scandinavian languages (hat tip to Juhlin for that name) and in this post I’m going to go through why it deserves that moniker.

Vue.JS  ||  Inertia.JS  ||  Laravel  ||  TailwindCSS

Vue.JS

Vue is a powerful and lean javascript framework. Like React it works using a virtual DOM and offers a fast, reactive way to handle your front-end application.

Whereas React embeds the html within the Javascript using JSX (another thing to learn), Vue has a template section. I found this a much more intuitive approach to use than React.

I’m not alone. If you use the (admittedly very arbitrary) measurement of GitHub stars, Vue has taken the lead over React in 2020. This is a framework that has some pulling power.

A new version 3 is on the horizon and it seems like there will be minimal breaking change, making your existing applications future-proof. A relief not to have to refactor and relearn.

However the problem with React and Vue are the additional load required when making a Single Page Application (SPA). We needed to move so much into the front-end.

The backend would provide a compartmentalised api and the front-end will be managed, routing and all by the Javascript framework.

If you come from a Laravel background, you will know much of this is already baked in. This creates an additional overhead, causes projects to take longer and cost more.

Inertia.JS

Inertia resolves this problem by allowing you to take advantage of your Laravel backend. It’s the glue between Laravel and Vue. For example instead of managing your routing with Vue, we can let this be handled with Laravel.

It mixes the best of server-side with the best of client-facing JS.

For example in my Laravel web.php route file I can point to my controller:

Route::get('/', 'HomeController@index')->name('home');

From where I can simply pass:

public function index()
{
    return inertia('home', ['title' => 'Example Title']);
}

With a default setup this will then look for the corresponding:

/resources/js/Pages/home.vue

And so on, we can setup a complex application using the same patterns already established in Laravel.

The hype for Inertia.JS is really minimal at the moment. If you compare it to other ‘movements’ within the front-end/Laravel community such as Livewire and Tailwind it can raise alarm. There are often mentions in the Discord community about how active the community actually is.

Fortunately, Jonathan Reinink has committed to working Full Time on Inertia.JS come August. With a lot of community PRs queued in GitHub and a growing online community base I think that this adapter will go from strength to strength.

Laravel

The L in VILT.

Laravel is the foundation upon which the others sit upon. It is so many things. A clean, structured way to model your database data using Eloquent. Concise collections to manipulate the data. Adaptable foundations with a thriving ecosystem of packages to extend. And most importantly, a mature and forward-leaning community that are constantly reimagining the future of web development.

Laravel is driving application development with an astonishing pace. There is a range of complimentary hosting and development tools and services that have sprung up alongside the framework. This productisation of services usually performed by your in-house team now facilitates small teams to do more for less. From email testing, to error-logging to up-time monitoring - a bespoke Laravel solution exists.

Needless to say, I’m passionate at the direction of travel for this community and it’s potential to rapidly build robust web applications.

TailwindCSS

TailwindCSS requires a mindset shift. Instead of writing your own CSS you are handing over responsibility to Tailwind. You will need to use it’s pre-made utility classes. So instead of writing:

style="color=#000"

You can write:

class="text-black"

And ultimately instead of creating a class called .blog-card and then adding your CSS like:

.blog-card { ... }

Instead of that, we explicitly write all our utilities in the HTML code.

At first this might alarm you, but the VILT stack really allows this to come into it’s own with Vue components

Our Inertia.JS Vue setup means that any Vue files created are available to use through our application. So instead of creating a .blog-card, we will create a BlogCard.Vue component.

We get a much cleaner reusability and avoid all the legacy headache that can come from making amendments to a global class that is implemented differently across the site.

Alongside that is the significant ongoing developments with Tailwind. Unlike an earlier cousin Bootstrap, Tailwind has monetised with its UI offering. This has injected some reinvestment into the project that has already reaped rewards for users, including the addition of PurgeCSS (which will radically reduce the size of CSS used on the project), a VS Code Intelliphense extension to keep your code quality high and a recent Typography plugin.

This is a new approach to CSS and its high adoption is a strong sign that it is here to stay. Your code will be consistent and allow teams to work alongside each other without a handful of dev naming conventions and approaches all standing on each others feet.

In Practice

Want to have a look at how this works in practice? I’ve just released the MVP for a PropTech startup called sqft.capital.

If you head here you will get a pre-filled form that you can adjust. It’s a finance modelling tool for property developers. We are only on the first phase of many and we have another release due for Autumn (Fall).

It really does show off the power of a Vue reactive site sitting on top of Laravel. Have a go and let me know what you think of how the application handles.