In the modern world of programming, SPAs usually reflect the state of the art: fast, flexible, powerful. In constructing SPAs the Javascript language is the hero; when SPAs come to mind, so does a Javascript framework, which may be based on React (Next), Vue (Nuxt), Angular (Nest) or Svelte (SvelteKit). The fluidity of the final product and the development experience that come from using these tools is very rewarding, and the rewards only increase as the developer’s mastery grows.
However, there is another – less famous but very powerful – option when it comes to creating SPAs – an option that offers the advantages derived from a double development stack: Inertia.
Using Inertia combines the potential of Laravel with that of a Javascript library of your choice, used purely as a front-end tool, in a smooth, fluid and flexible way.
Why ‘default’ Laravel is not always the best choice for a modern full-stack experience
Everyone knows Laravel’s potential as a web development framework. I love Laravel – it is a very powerful tool, with elegant syntax, every possible back-end feature and with excellent support even for static front-end production through the Blade template engine. However, choosing Laravel as a full-stack development tool in order to create SPAs with modern features is not a solution without its drawbacks. Let’s take a look at the main issues:
– Laravel was created primarily as a back-end tool. Although it can be used as a full-stack template engine, that means losing all the advantages offered by a stack in a pure Javascript environment: by default, there is no reactivity, no state maintenance, and no asynchronous actions
– although a front-end library, such as React, can be hooked onto Laravel, there is no real link between the two worlds; they remain two separate tools put together in a single context
– in a Laravel app, every common action – such as clicking on a link – involves a new HTTP request with a consequent reload of the page and loss of the ‘state’, resulting in an old-fashioned user experience
– passing data between back-end and front-end and viceversa requires continuous fetch and Axios asynchronous requests
– all of these factors mean that managing the connection and features of a modern SPA, such as authentication, authorization, state maintenance, form handling and asynchronous UI updates is only feasible with adapters, plug-ins and mastery of the two universes. In the end, this solution often feels less convincing and less satisfying compared to a common full-stack Javascript solution.
Nonetheless, like many developers, I love Laravel. Using Laravel on the backend, in the context of web-based applications that don’t imply the kinds of operations that make Java and Python more attractive solutions, such as banking apps or augmented reality concerns, is certainly a powerful solution.
PHP is a great back-end development language for producing web-based applications such as B2Bs and enterprise tools, especially with the features introduced in the recent version 8. Taylor Otwell has done a great job in abstracting powerful Symfony functionalities, and a traditional tool such as Laravel built on top of PHP 8 on the back-end makes the server-side developer experience very rewarding.
So, how is it possible to reconcile the benefits of Laravel and PHP as back-end tools, despite the drawbacks that come with these tools in the production of modern SPAs? Inertia provides the answer, glueing Laravel perfectly to a client-side framework, like Vue or React, overcoming many of the drawbacks previously discussed in a very elegant and satisfying way.
The advantages of using glue between Laravel and a Javascript framework
Having analysed the disadvantages of using Laravel as a full-stack tool, let’s have a look at the advantages of connecting Laravel as a back-end tool and a Javascript framework as a front-end tool, in comparison to using a single Laravel stack and full-stack Javascript environments:
– first of all, if Laravel seems a winning choice, its solidity and completeness are at the user’s disposal on the back-end, in place of a server-side Javascript
– Laravel’s server-side traditional features, such as authentication, authorization, routing management, validation strategies, CSRF protection, controller and model management, can then be used
– the power of Eloquent ORM is available, but so is the ORM of the users’ choice; there is also the option not to use an ORM at all
– native support for MySQL, MongoDB and PostgreSQL
– the benefits of using Laravel Mix to compile assets can be leveraged
– to have a Laravel back-end and a JavaScript SPA means building an API with Laravel and using a JavaScript framework that is hosted separately. Inertia removes the need to make an API using REST or GraphQL, nor is it necessary to figure out an authentication system for that API, such as OAuth
– it’s no longer necessary to have two separate hosting services (one for the front-end and one for the back-end), nor two separate GIT repositories: the Laravel+Javascript framework stack is all in one place
– there’s no need to install extra libraries such as Axios, NextAuth or Iron Session, nor are there CORS issues to handle
– the first visit to the page loads pure HTML, and data is subsequently loaded to the page without a full reload through XHR and JSON
– filename manipulations aren’t required in order to leverage routing. Instead, use the traditional Controller to view component data flow in handling URL requests
– the views are JavaScript page components; this provides all the power of a client-side app, and the SPA experience, without the need to build an API
– tight coupling is established between the back-end and the front-end as if building classic server-side rendered apps, but with the flexibility and functionalities of a Javascript SPAs
– this approach provides the powerful features of modern Javascript SPAs: reactivity, asynchronous operations, state maintenance, progress indicators, scroll management, partial reloads, cache and asset versioning, links and history management and server-side rendering
– choose between three major Javascript frameworks on the client-side: Vue (2 o 3), React and Svelte
– React/Vue/Svelte is linked directly to the Laravel back-end, meaning properties and values are passed from Laravel controller’s computing to JS front-end component and vice versa
– enjoy powerful Breeze and Jetstream packages in official combination with Inertia
Conclusion
Inertia is a powerful solution that allows Javascript-like full-stack SPAs to be built using an old-school framework like Laravel, with PHP 8 as technology and either React, Vue, or Svelte on the front-end. This solution certainly offers all the benefits indicated above, but the final choice obviously depends on many factors.
Execution time, concurrency, asynchronous requests, async processing enabling faster build times and increasing flexibility are some of the Node upsides to PHP. However, the latter’s eighth version provides many powerful paradigms of its own, and is already a lot faster and much more flexible than in the recent past. While many developers decide to go serverless, splitting their apps into many parts, Inertia has proved that you can build big and powerful React/Vue/Svelte SPA monoliths.
At the end of the day, I can say without any doubt that Inertia.js provides a very good way to construct full-stack JavaScript web applications, combining all the cool features of your favourite JavaScript framework without the drawbacks of having to create an entire API with a REST or GraphQL layer to feed it, and without needing to worry about hosting Laravel and API separately.
Recommended article: How to Create a Catalog with Stencil
