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
Realtime dashboard (phpbenelux)
Search
Freek Van der Herten
January 27, 2017
Programming
0
91
Realtime dashboard (phpbenelux)
Freek Van der Herten
January 27, 2017
Tweet
Share
More Decks by Freek Van der Herten
See All by Freek Van der Herten
Uncharted packages (ode aan de code)
freekmurze
0
26
Uncharted packages (Laravel Live Denmark)
freekmurze
0
220
I shall define this only once
freekmurze
0
420
An Introduction to Snapshot testing
freekmurze
0
510
Event Sourcing In Laravel
freekmurze
0
260
Building a realtime dashboard with Laravel Livewire (PHPKonf)
freekmurze
0
830
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
860
A practical look at multitenancy in Laravel
freekmurze
1
360
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
740
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
450
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
130
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
400
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.2k
Leading Effective Engineering Teams in the AI Era
addyosmani
6
430
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
860
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
490
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
160
株式会社 Sun terras カンパニーデック
sunterras
0
310
Catch Up: Go Style Guide Update
andpad
0
230
CSC509 Lecture 06
javiergs
PRO
0
260
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
380
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Navigating Team Friction
lara
190
15k
Statistics for Hackers
jakevdp
799
220k
Bash Introduction
62gerente
615
210k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
For a Future-Friendly Web
brad_frost
180
9.9k
Writing Fast Ruby
sferik
629
62k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building an army of robots
kneath
306
46k
Docker and Python
trallard
46
3.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Transcript
Creating a realtime dashboard using PHP and websockets
About me Freek Van der Herten Partner & developer at
SPATIE @freekmurze https://murze.be
About me phpantwerp.be Dries Vints @driesvints Frederick Vanbrabant @TheEdonian
Since 2003 Websites, applications and webshops Team 4 developers, 1
manager Specialization Laravel development
VACATURE FRONT-END DEVELOPER
OPEN SOURCE SOFTWARE
Open source software ± 90 packages on Packagist ± 1
800 000 downloads total, ±240 000 downloads a month A lot of benefits: learning, forced to write documentation and tests, showing the quality of our work, eating our own dogfood
https://spatie.be/opensource
http://github-awards.com/users?type=world&language=php Open source software
OUR OFFICE
None
None
None
None
None
https://github.com/spatie/dashboard.spatie.be
None
None
None
None
None
None
None
None
None
None
HIGH LEVEL OVERVIEW
The dashboard is a single HTML page Displayed by a
full screen browser Without full page reload Each tile wil be updated by JavaScript Each tile has it’s own update frequency In short
Technology stack Laravel Pusher Vue.js
Laravel 5.4 Render the initial page Fetch data from external
API’s (scheduled) Broadcast events when new data has arrived Laravel
spatie/laravel-twitter-streaming-api spatie/laravel-google-calendar spatie/last-fm-now-playing spatie/packagist-api graham-campbell/github Laravel
Provides full-duplex communication channels over a single TCP connection Transporting
events from server to the browser In realtime Secure Paid service Pusher
WebSockets Transporting events from server to the browser In realtime
Secure Paid service Pusher
Transporting events from server to the browser In realtime Secure
Paid service Pusher Magic
Lot of ♥ from the Laravel community Easy to learn
Each tile is a component Listen for incoming events Update the tile Vue 2 Vue.js
None
DEMO
Grid system The clock tile The Packagist tile The Twitter
tile Topics
There will be some live coding We’ll use
an internet connection
DISPLAYING ON A TV
Raspberry Pi 2
Raspberry Pi 2 Powered by the USB port from the
TV Uses Raspbian Jessie Boots into Chromium 51 in fullscreen mode Setup
TRY IT OUT YOURSELF
Source code https://github.com/spatie/dashboard.spatie.be Blog posts https://murze.be/2016/06/building-dashboard-using-laravel-vue https://murze.be/2016/06/grid-layout-dashboard/ Documentation
ROUND UP
Credits Willem Van Bockstal @willemvbockstal Looks + grid system Sebastian
De Deyne @sebdedeyne Scrutinising + JS wizardry
https://laravel.com https://pusher.com https://vuejs.com https://vuecasts.com Interesting links
https://www.geckoboard.com/ http://www.cyfe.com/ https://razorflow.com/ http://dashing.io/ Built by Shopify, Ruby. No
longer maintained, but works great Alternatives
QUESTIONS?
Thank you! https://speakerdeck.com/freekmurze/creating-a-dashboard-phpbenelux https://spatie.be/opensource https://murze.be https://murze.be/newsletter