written by
Aidan Perera

Say Hello to Livewire

Code 2 min read
Livewire Laravel | Fonseka Innovations

In this article, I will talk about Laravel Livewire. If you haven’t heard already about it, it’s a new web framework developed by Caleb Porzio. (Who is Caleb Porzio?)

What is Livewire all about?

So what is it?

According to the Cambridge dictionary, it is someone who is very active and has much energy.

This tech sure has so much energy in terms of developing a web application.

Believe in the Backend” that’s one thing what Livewire tells the developers.

Due to the increase in JavaScript libraries, it lets the developers utilise the backend. This is purely to drive Laravel application to get the modern web experience without messing with JavaScript.

Therefore, Livewire is a full-stack framework of Laravel. That makes building dynamic interfaces simple, without leaving the comfort of Laravel.

So can it do stuff what JavaScript does?

The answer is yes, but up to a specific limit. However, we can’t replace JavaScript with Livewire. But this is a neat technique to use.

Livewire Laravel | Fonseka Innovations

It basically renders the initial components using Blade components. Blade is the Laravel’s templating language. When any interaction occurs, it makes an AJAX request to the server with the updated data.

Then the servers re-renders the component with a new HTML code, similar to DOM operations. This way, the application will give a dynamic behaviour to the application.

Livewire Benefits

  • There will be no need to create a dedicated REST endpoint to engage with the application. It handles its own REST endpoints.
  • Few methods as the components will include all the properties, events.
  • Not only we can integrate it with Vue.js but also we can replace some component.
  • Can integrate Laravel Echo to get real-time broadcasting notifications. (What is Laravel Echo? )

There is one main problem with this. Due to the events sending requests to the backend, it will cloud the application with round trips.

If the web application is a simple application, it will be fine. But when it comes to a more extensive application, this will become a problem.

With the 2020 Laracon, Taylor Otwell announced Jetstream by Laravel. Jetstream by Laravel is a beautifully designed application scaffolding for Laravel.

Not to mention, you can jet start any web application using Jetstream. Additionally, it is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.

Features and components included in Jetstream;

  • Login
  • Registration
  • Email verification
  • Two-factor authentication
  • Session management
  • API support via Laravel Sanctum
  • Team management

Not a Replacement

In conclusion, Livewire is not a total replacement for JavaScript libraries. Also, it does not force you to use Livewire components only. Additionally, we can integrate Vue.js as well. Furthermore, it has a ton of other useful features such as;

  • CSS transitions
  • Input validation
  • Computed properties
  • Resource authorisation
  • Polling
  • Loading states

Likewise, you can give Livewire a try. Also, you can start off any project with Jetstream with Livewire stack. I have started many small projects with Jetstream with Livewire, and the results are pretty amazing.

If you are planning on building a smaller-scale application or even a cloud-based web application, feel free to contact us.

References

laravel dynamic ui livewire jetstream vuejs blade react ui java script web development caleb porzio JS reactive web applications web applications