Building a real time dashboard with Laravel & Livewire

About me Freek Van der Herten Partner & developer at SPATIE @freekmurze freek.dev spatie.be/prodcuts ohdear.app f l areapp.io

Open source ± 300 packages on Packagist ± 105 000 000 downloads total ± 5 500 000 downloads a month

https://spatie.be/open-source

https://spatie.be/open-source

Our dashboard

No content

No content

No content

No content

No content

No content

Introducing Laravel Dashboard

Laravel Dashboard A free open source package Takes care of positioning of tiles, and state Tiles themselves are separate packages Livewire components

Livewire Made by Caleb Porzio Server rendered partials No / minimal JavaScript knowledge necessary Refresh through polling laravel-livewire.com

Demo

Comparing WebSockets/Vue to Livewire

Our previous dashboard WebSockets to transmit new data Tiles rendered with Vue A single Laravel app

WebSockets/Vue + realtime + no meaningful extra load when connecting client - tech stack more complicated, WebSockets server needed - potentially display old data - build proces

Livewire + simple tech stack, just an app and a db + easy to package up tiles, only PHP knowledge needed + up to date from f i rst render - not realtime, but close - load on server increases with every user - Livewire isn’t an industry standard like WebSockets/Vue (yet)

In closing

Laravel Dashboard Easy to use package Set up a dashboard in no time Extensive documentation docs.spatie.be/laravel-dashboard

One more thing…

spatie.be/videos/laravel-package-training

Laravel Package Training Learn to build framework agnostic PHP / Laravel packages Best practices GitHub Actions Package source dives 4 hours of quality content

Discount spatie.be/products?referrer=phpkonf 20% discount

Thank you! freek.dev @freekmurze