Introduction
Roughly a year ago I had to make a very large scale application and I couldn't decide on a backend framework. However, I knew I wanted to use Vue.js as my front-end. So I began my long quest the ideal framework for my backend. I had doubts between Node.js and Laravel, and I couldn't really decide. I had almost no experience with Node.js or Laravel. The only back-end language I had experience with was vanilla PHP.
Enter Inertia.js, all of the sudden I found Inertia.js . A Laraval package created by Jonathan Reinink. Inertia.js allowed me to develop my large scale app using Vue and Laravel in one codebase. Which I really liked cause I hated to idea of having two GitHub repositories, one for the front-end and one for the back-end.
Now, remember I had almost no experience with Laravel and now I also had to learn Inertia.js on top of it in order to develop my entire application. And trust me, the deadline was though. But boy oh boy Inertia.js was such a pleasure to develop with. Learning Laravel was a breeze, applying Inertia.js was a breeze and I finished the project much faster than I initially anticipated.
For your understanding the project had some of the following features:
- Reservation system for clients
- Admin system to handle reservations (create, cancel, refund etc)
- Payment processing
- Date scheduling
- Different type of products
- Upselling items
Oh and the site is getting used by over a 1000 people per day. So I had to create a solid app that wouldn't crash and burn.
My experience with Inertia.js, Laravel and Vue.js was such a delight that I wanted to share this with you. Cause I feel like Inertia.js is not getting the attention it deserves. I honestly believe that a front-end developer, who needs basic CRUD back-end functionality, can develop some incredibly SaaS applications using this tech stack. And if you are more experienced with Laravel you can really make anything you can think of with the power of Vue combined.
What is Inertia.js?
Inertia.js is a package built for Laravel allowing people to develop single-page applications without building an API, using either Vue.js, React or Svelte for their front-end. According to their website Inertia.js is the new approach to building classic server-driven web apps, they call it the modern monolith.
So Inertia allows you to create client-side rendered apps, using React, Vue or Svelte by leveraging existing server-side frameworks. In my case Laravel, it can also work with Rails.
Inertia doesn't use client-side routing and it also doesn't require an API to be developed. You only need to develop the controllers and page views like you would normally do with Laravel.
So this means you can just write Laravel code and render on the client without having to output everything with an API and inherit everything in your SPA. Inertia streamlines this process by delivering straight from server-side to client-side. Saving a lot of time
Not a framework
It is important to note that Inertia itself is not another framework. It doesn't replace your existing server-side or client-side frameworks. It is designed to work with both. It is like the middleman connecting the two together.
They currently work with the following front-end frameworks:
- Vue
- React
- Svelte
And with the following back-end frameworks:
- Laravel
- Rails
Should you use Inertia.js?
Inertia is designed for developers and larger development teams who usually build server-side applications using Laravel or Rails. So developers who are used to creating controllers, that get data from a database using ORM and render views.
Typically with Laravel you would use blade templates to render your server-side rendered vies. But this becomes a bit harder if you want to swap it out with a JavaScript based SPA framework, such as Vue or React. Normally you would just start by creating an API and combining the two using said API.
This means creating either a GraphQL or REST API. Creating Auth functionality for that API. Client-side state management. Having your code split up in two repositories (one for front-end and one for back-end). This means you now also need two hosting packages to host each platform on.
You can already clearly see how much more work is involved the moment you want to use a modern client-side framework. Inertia removes all this extra hassle and complexity.
Inertia works almost the same as you normally render your views, getting data from the database and rendering it in your view. Inertia brilliantly makes the pages render in JavaScript components instead. This means you have the full power of your Vue or React front-end code while delivering everything from the server without having to build an entire API.
Why I started using Inertia.js
The main reason why I started using Inertia was because I hated the idea of having my code split up in two repositories. Also I really wanted to work with Vue.js for my front-end.
I didn't have the time to develop my own API and then handle all the logic on both sides. I wanted one project that did all the work for me. I didn't want to have to handle authorization with Vue.js cause I find it very annoying and a time waster to set up. I mean, handeling authorization using Laravel (PHP) is so much easier. I don't want to reinvent the wheel by using Vue. I want to write code and deliver my project quickly.
How Inertia.js works
Inertia allows you to build apps just you would regularly do with a server-side framework. It uses the framework's existing routing, controllers middleware, authentication and more functionalities.
The only thing that Inertia adds, or changes rather, is your view layer, the way you render your front-end. Instead of using your regular server-side rendering, such a blade template, the views are passed to JavaScript components. This means you can keep writing your server-side code, like Laravel, like you regularly would, in combination with state of art front-end frameworks, such as React and Vue.
If you are interested in the more technical background as in how this actually works, you can read that in the Inertia documentation.
My experience with using Inertia.js
Coming from a more front-end heavy background I was bit overwhelmed with using Laravel and to create my SaaS application. However since I was able to use Inertia, I was able to apply all the knowledge I had from Vue. This meant I only had to learn some Laravel specific items. Everything front-end related was nothing new.
If I had to this with Blade templating it would've been a nightmare for me! And I wouldn't be able to have finished my project on time and with great success.
So far I've been using Inertia for all my projects. It really made me switch my tech stack towards:
- Laravel
- Inertia
- Vue
- TailwindCSS
Oh btw before I forgot to mention, if you are afraid that Inertia won't work with Vue 2 or Vue 3. Don't worry, it works with both. Actually it doesn't matter what version you use cause Inertia doesn't affect Vue all that much. It just passes the data in a really clever way.
And for the past 6 months using this tech stack I have been literally amazed with the amount of code I can produce, and the quality of it. Honestly, having an idea for something and being able to turn it into an MVP within weeks (often just a good weekend), is a lot of fun!
Another great thing is that Inertia recently launched their SSR feature (server-side rendering) for their Github sponsors. Which takes this entire tech stack to the next level . Because the biggest problem with SPA's is that they don't rank well in Google due their JavaScript heavy nature. But now with Inertia you are also able to server-side render all of your pages, and rank better in Google. Of course there might be causes where you don't actually want SSR. For me it brings a lot of new interesting things to the table.
Conclusion
If you are working with Laravel already it highly recommend you checking out Inertia. Actually I recommend everybody trying out Inertia. It really combines the best of both worlds. One of the best back-end frameworks there is combined with the most popular front-end frameworks out there.
The learning curve is not that high, just a building a basic CRUD application with Laravel + Vue can probably be achieved within 1 day if you are a bit familiar with how MVP frameworks work.
Take it from me, I barely touched Laravel and never heard of Inertia before and I was able to build a very large and complex application in a matter of weeks.
If you have questions feel free to reach out to me! I'm happy to help. On that note, there is also an Inertia discord server . They are pretty active and so far I've had plenty of help over there. So thanks for anybody who's in that channel!
Top comments (2)
Sounds interesting. I will try. I come from the Laravel blade side and have little experience with vue. But I would like to use more vue.
Ah then I think you will like this one! You can control a lot with Laravel and use Vue for the more dynamic renderings on the page itself, for example real time Datatables. Send all the data with Laravel and let Vue handle the JSON without having to make or create API calls. Saved me a lot of time!