Oct 06 2023
Laravel has many great offerings when it comes to starter kits such as:
And stacks such as:
Each of these starter kits is meant to provide you with everything you need to start your web project without sweating the small details. They all provide some sort of authentication, js framework and css framework.
However each of these stacks can lead to a different developer experience. In this post we'll compare each one and outline them in the following format:
Pros: What makes it good?
Cons: What makes it uncomfortable?
Conclusion: Who is this for?
Let's get started.
I wanted to start with breeze since it's the simplest starter kit available. If you've been around the laravel ecosystem for a while breeze is the child of the make:auth command we all used to know and love. It comes in a variety of flavors offering both a Javascript stack, a livewire stack, and the classic blade stack.
Breeze is so simple it doesn't even have a dedicated documentation page. You can find out everything you need to know about breeze right here.
Let's get into the breakdown:
Fast installation. Just install it and run php artisan breeze:install
Out of the way. Breeze doesn't do a lot so you won't have to modify anything.
Quick start: Based on the stack you choose, you'll already have tailwindcss and either livewire or inertia already working.
The only cons I can think about for breeze is that if you start your project with it and later on you realize you need some of the features that jetstream offers it's a bit difficult to switch. All of these starter kits are assuming you're on a new application, if you're not on a new application it's not impossible to switch but there will definitely be issues.
Breeze is THE best option if:
You're new to laravel and/or web development. If you're new to the framework, something like jetstream is going to set up a massive ammount of scaffolding that might end up being more confusing if you don't know your way around laravel very well.
Your app doesn't need any crazy features like team management, api token management, 2FA, etc. If you don't need these then Jetstream will be adding a lot of extra boilerplate and dependencies that you might never touch.
When it comes to laravel starter kits jetstream is the heavy hitter. You get almost an entire authentication system built for you right out of the box. Besides the regular authentication features (registration, login, email verification, password resets) you also get:
API token management (optional but very easily enabled)
Profile management with
Profile pictures (just have to enable it)
2FA (already set up)
Track browser sessions and log out all browser sessions
Team management (optional on installation)
Can create teams
Invite people to teams
Team permissions
Team switching
And a host of other features I might have missed here. In addition to functionality you also get a bunch of components pre-built for whatever stack you chose. I'm talking buttons, alerts, form inputs, panels. All already built for you inside the components folder.
A lot for you out of the box. Especially if you're building a SAAS product.
Components already built and styled
Teams option is really nice if you know you'll need it in your app. Even if you don't need it right now but think you might need it in the future, it's as easy as hiding the team dropdown so users can't see it.
If you don't need at least half of the features that jetstream provides, it might be more effort than it's worth to start with jetstream and take out what you don't need, than it would be to start with breeze and add what you need yourself.
One of the biggest draws to jetstream is the teams feature. If you think you'll want that functionality in your app jetstream is the way to go 💯 percent of the time. If you don't need teams and don't need at least half of the features that jetstream offers, then it might be more work to start with jetstream and take out what you don't need, than to start with breeze and add what you need down the line.
Both breeze and jetstream let you choose between a livewire front end (blade templating with alpine and php for functionality) or InertiaJs (Vue or React).
Important note: I have used both livewire and inertia extensively and livewire is by far my favorite stack. In the conclusion section of inertia I will explain my gripes with it. But I will still point out the advantages and disadvantages of both objectively so you can make your own choice.
From their home page
Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.
Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love.
InertiaJS lets you use a laravel back end the same way you're used to, and it provides an easy connection to pass data from the back end to your vue/react components. Every page of your app will be a javascript component that gets data passed from a controller.
Example:
![Inertia example](/assets/blog/inertiaexample.png align="left")
And your front end component would look like this (assuming Vue JS):
![Vue example](/assets/blog/vuecode.png align="left")
Inertia makes it really easy to have a site that feels like an SPA without having to actually build an SPA. They have done a really good job with their adapters for back end frameworks. If you love working with vue or react and like to keep things "clean" by having your front end and back end being mostly separate, then inertia is a great option for you.
P R O D U C T I V I T Y
I used inertia for a lot of projects, and one of the biggest reasons why I stopped using it is that I wasn't working with a dedicated front end developer which made it really difficult to get things done in a timely manner.
Nowdays VueJS and React are a whole framework on their own, which means that you need to keep two whole frameworks in your head at all times. Not to mention the constant context switching between php and javascript whenever you need to do anything.
Think about it like this. Say you want to add a form on your page to create a new resource. You'll have to:
Create a controller
Create a route
Create a front end component for the page if it doesn't already exist
Create a component for the form
Make sure your form is hitting the correct route and sending the correct data.
And now if you want to add a field to the form after you've made it you'll have to edit 2-4 files.
I'll elaborate more on this in a different article but for now this is where I'll leave it with inertia.
If you love javascript and want the "SPA feel" inertia is a great choice. If you don't like working with javascript that much then you should go with livewire.
Livewire attempts to bring you the power of frameworks like react and vue while still keeping you very close to php. And it does a very good job at creating that middle ground. Especially with the release of Volt which lets you make single file php components (how cool is that?).
I've been using livewire for a bit now and it deserves it's own article. But for now let's get to the pros and cons:
Really easy to be productive. Since your component is already your back end you have all the laravel functionality already there for whatever you need to do.
Less mental load. Livewire is just php with some alpine sprikled in if you choose to. Which means you only have to deal with one language.
Easy to mess up and DDOS yourself if you don't think about what you're doing on the front end.
Not very intuitive at first. Takes a little bit of thinking to figure out what the right workflow is.
If you don't want to deal with javascript at all or very little, but still want your app to feel modern and "reactive", then livewire is an amazing option. I would also recommend it if you're new and are already comfortable with laravel and want to start getting a little more into the modern reactive web app space.
I hope this was a good comparison of all the different options we get for starter kits in the laravel ecosystem. We're spoiled for choice which is great, but it can also be a little daunting to figure out where to start if you're not already familiar with all of these tools.
Let's do a quick summary of my thoughts on which stack you should pick:
Simple app and you don't like javascript: Breeze with livewire
Simple app and you love javascript: Breeze with inertia
Need teams and/or more advanced authentication: Jetstream with whatever your preferred front end is (see above)
If you made it to the end thank you so much, I appreciate it. I'll put out more articles going more in depth on everything that was discussed here and many other interesting web dev topics.