Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building a realtime dashboard with Laravel Live...
Search
Freek Van der Herten
December 12, 2020
Programming
0
740
Building a realtime dashboard with Laravel Livewire (PHPKonf)
Freek Van der Herten
December 12, 2020
Tweet
Share
More Decks by Freek Van der Herten
See All by Freek Van der Herten
Uncharted packages (Laravel Live Denmark)
freekmurze
0
160
I shall define this only once
freekmurze
0
360
An Introduction to Snapshot testing
freekmurze
0
440
Event Sourcing In Laravel
freekmurze
0
220
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
800
A practical look at multitenancy in Laravel
freekmurze
1
320
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
680
Highlights Flare codebase (Laracon online)
freekmurze
0
440
Introducing Mailcoach
freekmurze
1
590
Other Decks in Programming
See All in Programming
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
230
Jakarta EE meets AI
ivargrimstad
0
190
Security_for_introducing_eBPF
kentatada
0
100
nekko cloudにおけるProxmox VE利用事例
irumaru
3
370
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
170
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
760
たのしいparse.y
ydah
3
120
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
170
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
990
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
260
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
330
Java 23の概要とJava Web Frameworkの現状 / Java 23 and Java web framework
kishida
2
400
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Six Lessons from altMBA
skipperchong
27
3.5k
How GitHub (no longer) Works
holman
311
140k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Agile that works and the tools we love
rasmusluckow
328
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
160
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
A designer walks into a library…
pauljervisheath
204
24k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Why Our Code Smells
bkeepers
PRO
335
57k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Optimising Largest Contentful Paint
csswizardry
33
3k
Transcript
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
None
None
None
None
None
None
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