There was time in webapp development when employing Bootstrap and jQuery at frontend were the most favored options. Then there were heavyweight JS frameworks like Angular, React, Vue to handle interactivity and making webapps’ UI reactive – this gave rise to SPA (Single Page Application). SPAs are actually webapps but behave more like desktop applications whereof you don’t load / refresh whole webpage on a single event (like clicking a button); in fact, your rendered view remains intact while the change only happens where it is meant to be, and in turn webapp feels like desktop application.
Laravel kept pace with this rapidly evolving frontend development landscape. Couple of years ago when you installed Laravel 7, “UI” module was pretty much standard to scaffold the frontend. Two years fast forward, we have a plethora of choices for the way we develop our webapp with Laravel 9. Let’s dig in and see which options we have at our disposal with latest Laravel iteration.
Remember this, we’re mainly talking about frontend choices here which come along with Laravel. On the backend side, Laravel ubiquitously stands tall with unmatched robustness.
Remember one thing more – do not fall into the trap of fanboy-ism. Every technology is here to serve us, the case is not the other way around – so choose you toolset on its strength. For example, I’m SCJP (Sun Certified Java Programmer) and SCWCD (Sun Certified Web Component Developer). However, I chose PHP and Laravel for backend development… why? Because I have a small setup and we have to develop backend as quick and as neat as possible. Laravel fits the bill here. In my first accounting software I used jQuery for interactivity. Then moved on to Livewire, ended up in too much complicated backend, then moved to Vue with Inertia in next accounting software. Earlier, I developed few websites in Bootstrap because of its rapid development and simplicity. Then for webapps I chose Tailwind for ease of UI customization. So, choose the toolset which offers you best value according to the problem in hand. As they said: not every problem is a nail, so use your hammer wisely!
Traditional webapp or SPA?
SPA proves to be way better strategy when it comes to developing modern day webapp. Well, let’s discuss this.
There is nothing wrong with traditional webapp per se. It’s a solid approach of building web applications where the views are integral part of the software and they are rendered at server-side first and all data is incorporated in response and then the resultant contents, normally HTML, are sent to the client. Traditional Laravel app using Blade templating engine, classic asp.net, JSP, Django are some of the shining examples of traditional webapp development frameworks. One big advantage here is that the framework is tightly integrated; the developers of framework make sure that everything is streamlined from backend to frontend and whole MVC cycle works reliably.
However, as of late most of the action has gradually been moving on to frontend which gave rise to SPAs. All along this, came enhanced decoupling of backend from frontend.
One peculiar good thing which comes out of this decoupling is about skill-set of developers; once you acquaint yourself with a JS framework such as React, Vue, Svelte, Next etc., then that skill-set is reusable even if the other parts of development stack are changed. No matter what framework you choose for backend and business logic, your frontend skills with any JS framework will always be relevant and useful. And that’s a real practical advantage of opting SPA and JS framework route.
Another advantage of decoupling and SPA route is easy integration of already developed backend with mobile version of your app which is a big deal nowadays as the mobile version is almost always requested by the end-users due to prevalent use of mobile devices.
Moreover, well established JS frameworks like Vue and React have huge libraries of packages which are readily available to incorporate in your webapp without the need to reinvent the wheel.
JQuery, AlpineJs, React, Vue, Next
Few years ago, jQuery was the king in front-end development. jQuery made writing JavaScript code fun with its shorter syntax and smarter approach to sprinkle interactivity on a webpage. Then came heavy duty JS frameworks like Angular, React, Vue and then their smarter allies like NextJs, NuxtJs etc. Employing component-based approach, these frameworks actually did what was done to programming languages with OOP approach. Think of components just like objects in OOP i.e., they represent a self-contained chunk of code which is reusable, and which helps in organizing the whole code in distinguished but well-connected hierarchy of components instead of one big spaghetti of code that was the case with procedural languages.
When the dust settled (well it’s not settled yet among modern JS frameworks), the casualty was jQuery along with its simplicity.
Modern JS frameworks are good at what they are meant for i.e., developing reactive and complex frontends for webapps. However, what about scenario where we need to add little bit of interactivity without the hassle of employing whole complexity of a JS framework, for instance adding a search bar or adding a sliding menu (those good old days of jQuery!). Well, to address this, some smart guys came up with an excellent solution in the shape of AlpineJS. This lightweight JS framework is like a jQuery library with a syntax of modern JS framework like Vue. So, with AlpineJS we get the functionality of jQuery along with modern syntax sans the burden of heavy-duty JS framework.
Let’s also discuss briefly about the two heavyweights i.e., React and Vue. For me either of them could be picked as both are capable; however, each of them shines bright with their own tools and tricks. There are some other factors to look out; React has been introduced by Facebook and is supported by big players and therefore it has more traction towards corporate giants. If you work at a big setup, chances are that you’d end up using React. Vue is a choice of small to medium setups due to its syntax and novice-friendliness.
As with big power comes big responsibility, in programming world, with big framework comes big complexity. And then come more tools to fix these complexities. Here, we are talking about NextJs and NuxtJs which came around lately to suppress the complexities introduced by React and Vue respectively.
JS choices discussion is endless and most of the time needless. You just pick the tool which suits your needs or where you feel more comfortable. All in all, the real winner here is Laravel which makes our lives so easy as developers and leverages all the best frontend technologies which are contemporarily available.
As far as my personal opinion is concerned, I like clean, clear and easiest way of achieving goals that’s why my personal choice is Vue as in VILT stack (Vue Inertia Laravel Tailwind) which I employ in my projects in order to keep things clean and simple.
Breeze or Jetstream
Breeze is the default package for UI scaffolding which comes packed with Laravel. So, if you are trying out Laravel for first time or doing some small project, go with Breeze. If you can’t decide for your next serious project, go with Jetstream – you’ll get more goodies, and you can simply skip features of Jetstream you don’t want e.g., Teams. Just remember this: Breeze for small projects, Jetstream for serious and large projects. In Laravel’s official documentation words, we can sum it up quickly – For those brand new to Laravel, we recommend learning the ropes with Laravel Breeze before graduating to Laravel Jetstream.
Bootstrap or Tailwind
Usually if you google “top CSS frameworks”, you’ll end up with a sizable number of lists which place Bootstrap as top CSS framework. Well, this fact still holds ground if you talk about designing a simple website or doing quick prototyping of a webapp. However, when you need high level of UI customization which is typical of webapp development, Bootstrap seems to create more frustration than make developer life easier.
Enter Tailwind CSS. As of late, Tailwind CSS has been making its way towards top, thanks to its unique appeal of utility-first and high level of UI customization and slowly but surely it has started to appear as top CSS framework on various updated lists on the Internet e.g., Best CSS Frameworks for Front-End Developers in 2022.
Though, Laravel has traditionally been supporting Bootstrap, but Tailwind was gradually growing its roots with Laravel. And now it seems Laravel ecosystem, with its latest iterations, has completely done away with Bootstrap and embraced Tailwind wholeheartedly.
The clear advantage of using Tailwind over Bootstrap or any other CSS framework is flexibility of styling – you can rapidly create webapps with their own identity, look and feel without breaking a sweat. So here the choice is clear: if you are creating a small website or maintaining the old webapp, you may stick with Bootstrap; otherwise, Tailwind is the way to go.
Livewire or Inertia
Livewire is kind of a similar technology as introduced by Microsoft in .net through Blazor. The big problem with tools like Blazor and Livewire is that they break convention by exposing backend logic variables to frontend and hence kill the idea of decoupling the backend from frontend. And if more variables are thrown in the controller and view accesses or modifies them frequently, things get messy quickly. If you want to have more idea about what’s wrong with Livewire you may read this article. A practical example is the accounting software we started in Livewire stack and had to stop further development due to complexities introduced in controllers and views. Rewriting and then enhancing our accounting software in VILT (Vue Inertia Laravel Tailwind) stack proved to be seamless experience.
However, it’s worth mentioning here that Livewire is quite an interesting technology which, at the cost of decoupling, makes your life easy by creating a tunnel (using Ajax) between backend and frontend through exposing variables and functions to both sides of the tunnel. Suppose if you change the value of a variable at frontend, the backend controller will take the change immediately and update the backend logic as well based on this changed value and the result will be instantaneous to end-user. This is really helpful if you are embedding a basic interactivity like a search field in your webapp. It’s also worth mentioning here that Livewire along with AlpineJS is really a powerful combo which is backed by Laravel as one of the recommended frontend stack.
On the other hand, Inertia is not a new framework or library, it’s just a glue between backend and frontend. It merely hides the extra code needed to send XMLHttpRequest (XHR) calls between backend and frontend. The backend logic of a Laravel app remains the same i.e., you call a route and send some data along with it. On the frontend while employing a JS framework like Vue, you receive data through props. Similarly, from frontend, you seemingly use simple URLs along with data and you don’t even know that you’re actually using classic XMLHttpRequest (XHR) behind the scenes. Therefore, by employing Inertia, backend and frontend code remain almost intact and true to their original framework syntax. All in all, you get a solid SPA mechanism without changing code syntax much…that’s why they tag Inertia as “Modern Monolith”.
Let’s just sum it up by saying – Livewire is suitable for some basic interactivity like incorporating search field in your webapp. Whereas Inertia along with Vue or React is to be employed for full-fledged reactive SPAs.
Conclusion
Let’s compress the above paragraphs:
- Go on the Traditional path of app development, if your boss says so or you are required to develop / maintain traditional style webapp (view layer using Blade templating engine). Go with SPA if you have choice or if you are starting afresh. SPA will also equip you with modern ways of developing backends independent of frontends and along the way you’ll learn some great JS frameworks like React or Vue.
- Both Vue and React are excellent choices – although Vue has got more gitstars than React and due to Vue’s simplicity it’s great choice for small to medium size web development teams, however, React is the undisputed champion when it comes to working with corporate giants.
- If you have started with Laravel recently or prototyping an app or developing a small webapp, Breeze is fine. If you are developing a serious project, Jetstream is the appropriate option.
- If you avoid JavaScript and love the backend development strengths of Laravel and just want to give small amount of interactivity to your webapp, then go with Livewire and Alpinejs. Otherwise go all the way on Inertia path.
- When it comes to serious webapp development, go with Tailwind without looking back.