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
870
0
Share
Building a realtime dashboard with Laravel Livewire (PHPKonf)
Freek Van der Herten
December 12, 2020
More Decks by Freek Van der Herten
See All by Freek Van der Herten
Uncharted packages (ode aan de code)
freekmurze
0
65
Uncharted packages (Laravel Live Denmark)
freekmurze
0
260
I shall define this only once
freekmurze
0
480
An Introduction to Snapshot testing
freekmurze
0
560
Event Sourcing In Laravel
freekmurze
0
280
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
920
A practical look at multitenancy in Laravel
freekmurze
1
400
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
790
Highlights Flare codebase (Laracon online)
freekmurze
0
590
Other Decks in Programming
See All in Programming
Transactional Change Stream Processing With Debezium and Apache Flink
gunnarmorling
1
110
【ディップ|26年新卒研修資料】OpenAPI/Swagger REST API研修
dip_tech
PRO
0
270
密結合なバックエンドから TypeScript のコードを生成する
kemuridama
1
270
Agent Skills を社内で育てる仕組み作り
jackchuka
1
2.2k
プラグインで拡張される Context をtype-safe にする難しさと設計判断
kazupon
2
230
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
2
280
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
rio432
0
160
RailsTokyo 2026#4: AI様があれば、 Hotwireの弱点は消えるか?
naofumi
4
490
GitHub Copilot CLIのいいところ
htkym
2
410
プロパティの順序で型推論が壊れる!? TypeScript6.0の修正からContext-Sensitivityの仕組みを追う
bicstone
2
630
Import assertionsが消えた日~ECMAScriptの仕様はどう決まり、なぜ覆るのか~
bicstone
2
190
AlarmKitで明後日起きれるアラームアプリを作る
trickart
0
140
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
4k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
170
Design in an AI World
tapps
1
210
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
1
320
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
140
RailsConf 2023
tenderlove
30
1.4k
Ruling the World: When Life Gets Gamed
codingconduct
0
230
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
120
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
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