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
840
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 (ode aan de code)
freekmurze
0
32
Uncharted packages (Laravel Live Denmark)
freekmurze
0
230
I shall define this only once
freekmurze
0
450
An Introduction to Snapshot testing
freekmurze
0
510
Event Sourcing In Laravel
freekmurze
0
260
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
880
A practical look at multitenancy in Laravel
freekmurze
1
370
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
750
Highlights Flare codebase (Laracon online)
freekmurze
0
530
Other Decks in Programming
See All in Programming
Building AI with AI
inesmontani
PRO
1
260
dnx で実行できるコマンド、作ってみました
tomohisa
0
100
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
sg4k0
0
300
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
2
9.5k
スタートアップを支える技術戦略と組織づくり
pospome
8
12k
開発生産性が組織文化になるまでの軌跡
tonegawa07
0
190
Eloquentを使ってどこまでコードの治安を保てるのか?を新人が考察してみた
itokoh0405
0
3.2k
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
22
18k
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
moeka__c
5
2.5k
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
3
1.3k
仕様がそのままテストになる!Javaで始める振る舞い駆動開発
ohmori_yusuke
8
4.7k
PHPライセンス変更の議論を通じて学ぶOSSライセンスの基礎
matsuo_atsushi
0
170
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Optimizing for Happiness
mojombo
379
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
How STYLIGHT went responsive
nonsquared
100
5.9k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Music & Morning Musume
bryan
46
7k
We Have a Design System, Now What?
morganepeng
54
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Navigating Team Friction
lara
190
16k
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