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
760
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
180
I shall define this only once
freekmurze
0
370
An Introduction to Snapshot testing
freekmurze
0
460
Event Sourcing In Laravel
freekmurze
0
230
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
820
A practical look at multitenancy in Laravel
freekmurze
1
330
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
700
Highlights Flare codebase (Laracon online)
freekmurze
0
460
Introducing Mailcoach
freekmurze
1
600
Other Decks in Programming
See All in Programming
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
Domain-Driven Transformation
hschwentner
2
1.9k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
210
チームリードになって変わったこと
isaka1022
0
200
color-scheme: light dark; を完全に理解する
uhyo
5
390
sappoRo.R #12 初心者セッション
kosugitti
0
260
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Code Reviewing Like a Champion
maltzj
521
39k
The Language of Interfaces
destraynor
156
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Producing Creativity
orderedlist
PRO
344
39k
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