Laravel: Folio, Livewire or Inertia?
Fast versus Flexible versus Total Control
On the old days of Laravel 5, trying to make the framework play nice with the emerging JavaScript frontends was very cumbersome and almost a hair-pulling experience. The best you could do was marry HTML, CSS, maybe some JavaScript, into your page and that was it.
Fast forward some years, and the frontend ecosystem has become surprisingly good. Not only the Blade Templating Engine has become the “backbone” for everything presentational in Laravel, which is by itself very easy to understand, but we also have more choice than prior years.
Long gone are those days when you would use HTML exclusively or suffer trying to make both Single Page Application (SPA) and backend play nice.
Folio — simplicity at the cost of flexibility
I have to say that Laravel Folio is a huge time-saver if you want to create a webpage using the Blade templating engine. It basically makes some assumptions by checking your resources/views/pages files, so there is no need to surf around directories creating more files or declaring more things.
<?php
use App\Models\Post;
use Illuminate\Support\Facades\Auth;
use Illuminate\View\View;
use function Laravel\Folio\render;
render(function (View $view, Post $post) {
if (! Auth::user()->can('view', $post)) {
return response('Unauthorized', 403);
}
return $view->with('photos', $post->author->photos);
}); ?>
<div>
{{ $post->content }}
</div>
<div>
This author has also taken {{ count($photos) }} photos.
</div>The idea of Folio is to allow you to make web pages in your application entirely based on Blade Views. Any logic is done at the top of your view, much like Vue Single File Components, and containerizes everything related to the view in just one file.
By confining everything into a single file, it’s easier to understand since you don’t need to deal with other files like controllers and routes. The problem is its simplicity: as you limit the scope to one file, you will need to do some programming juggling if you need something outside what Laravel Folio offers.
Livewire — modernity at the cost of simplicity
Livewire is kind of a different beast. It expands on Blade in terms of Components by bringing a novelty to them: they can have self-contained state and logic.
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 1;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}Livewire enables your frontend to only “refresh” one Component instead receiving a whole response (and a complete page refresh). A Component can have many backend actions, triggered by the frontend elements, from simple buttons to input forms. Alpine JS does most of the heavy lifting connecting everything without you even noticing the magic.
Because each Component is declared as a class, with its own view, properties and actions, creating a frontend with Livewire will make you rely heavily around them, rather than full, more declarative webpages.
Because of that, there is a learning curve to grasp the lifecycle of a “Livewire Component”, especially when you are doing more complex things, like Components that require multiple actions, advanced input validation, global states, or even tinkering with the underlying Alpine JS.
Inertia — control at the cost of time
Inertia is a great time saver in terms of connecting a JavaScript-driven frontend, like a Single Page Application (SPA), to your Laravel backend returning JSON responses.
<script setup>
import Layout from './Layout'
import { Link, Head } from '@inertiajs/vue3'
defineProps({ users: Array })
</script>
<template>
<Layout>
<Head title="Users" />
<div v-for="user in users" :key="user.id">
<Link :href="`/users/${user.id}`">
{{ user.name }}
</Link>
<div>{{ user.email }}</div>
</div>
</Layout>
</template>What’s great about Inertia is that comes with almost all tubes connected and ready to be used: routing, authorization, redirection, forms, states, and many other parts. Laravel side of things, most of the work is returning a JSON response with some Inertia magic.
The learning curve is not “that” high if you have some Laravel and JavaScript experience, but it will be for people who first-timers to either side of the coin.
About frontend frameworks, it’s officially compatible with Vue, React and Svelte — there is a lot of ground covered in terms of market reach — but there are also some community adapters for some lesser-known frameworks like CanJS, AdonisJS and Mithril.
So, what should I choose?
Surprisingly, it’s not difficult to recommend a frontend framework depending on your expertise and schedule.
- Folio is the obvious winner in terms of speed, especially prototyping.
- Livewire is great for reactivity but with it will require more work.
- Inertia simplifies the backend, but you will have full frontend control.
Don’t fool yourself if you have a leanient deadline and you still decide to go with Folio plus a page with Alpine JS to solve something on a particular way. Just be sure to decide wisely, as sometimes is a pain in the ass to change frontend frameworks mid-development, especially when you need to make the jump in terms of difficulty.
