Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dashboard (dpc)

Freek Van der Herten
July 01, 2017
Programming
0
220

Dashboard (dpc)

Freek Van der Herten

July 01, 2017
Tweet

More Decks by Freek Van der Herten

See All by Freek Van der Herten
I shall define this only once
freekmurze
0
210
An Introduction to Snapshot testing
freekmurze
0
230
Event Sourcing In Laravel
freekmurze
0
150
Building a realtime dashboard with Laravel Livewire (PHPKonf)
freekmurze
0
480
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
520
A practical look at multitenancy in Laravel
freekmurze
1
240
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
470
Highlights Flare codebase (Laracon online)
freekmurze
0
200
Introducing Mailcoach
freekmurze
1
390

Other Decks in Programming

See All in Programming
可觀測性(Observability)的實踐
marcustung
0
1.6k
バックポートして学ぶ新APIの仕組み
yutailang0119
0
300
入門SQLi / Introduction of SQLi
satoki
2
840
SceneKit AND SwiftUI
akkeylab
0
210
PiPを応用した配信コメントバー機能の開発秘話と技術の詳解 / pip_streaming_comment_bar
narujpn
2
500
Drupal 10 from the pov of a Symfony 6 core-contributor
nicolasgrekas
1
310
VSCodeしか使ったことない新卒2年目がPhpStormくんと友達になるためにやったこと - PHP Conference Japan 2022
kotomin_m
0
120
php-conference-japan-2022
tasuku43
1
270
V8 as a container on CDN Edge worker
mizchi
5
960
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
6
9.6k
Layout Grid for Browser | FigmaのLayout Gridを拡張機能で実装してブラウザに持ち込んでみた話
hanzochang
0
110
SwiftUI Navigation のすべて
kalupas226
8
3.3k

Featured

See All Featured
Building Adaptive Systems
keathley
25
1.2k
Infographics Made Easy
chrislema
234
17k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.6k
Building a Scalable Design System with Sketch
lauravandoore
449
30k
Why You Should Never Use an ORM
jnunemaker
PRO
48
7.7k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
What's new in Ruby 2.0
geeforr
335
30k
Building an army of robots
kneath
300
40k
Side Projects
sachag
451
37k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
Rails Girls Zürich Keynote
gr2m
87
12k

Transcript

  1. Creating a dashboard using PHP and websockets

  2. About me Freek Van der Herten Partner & developer at

    SPATIE @freekmurze https://murze.be

  3. About me phpantwerp.be Dries Vints @driesvints Frederick Vanbrabant @TheEdonian

  4. Since 2003 Websites, applications and webshops Team 4 developers, 1

    manager Specialization Laravel development

  5. VACANCIES https://spatie.be/en/vacancies

  6. OPEN SOURCE SOFTWARE

  7. Open source software ± 120 packages on Packagist ± 3

    5000 000 downloads total, ±450 000 downloads a month A lot of benefits: learning, writing quality documentation and tests, showing the quality of our work, eating our own dogfood

  8. http://github-awards.com/users?type=world&language=php Open source software

  9. https://spatie.be/opensource

  10. WE ❤ POSTCARDS

  11. Spatie
 Samberstraat 69D 2060 Antwerp
 Belgium

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None

  29. https://github.com/spatie/dashboard.spatie.be

  30. HIGH LEVEL OVERVIEW

  31. 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

  32. Technology stack Laravel Pusher Vue.js

  33. Laravel 5.4 Render the initial page Fetch data from external

    API’s (scheduled) Broadcast events when new data has arrived Laravel

  34. spatie/laravel-twitter-streaming-api spatie/laravel-google-calendar spatie/last-fm-now-playing spatie/packagist-api knplabs/github-api Laravel

  35. Provides full-duplex communication channels over a single TCP connection Transporting

    events from server to the browser In realtime Secure Paid service Pusher

  36. WebSockets Transporting events from server to the browser In realtime

    Secure Paid service Pusher

  37. Transporting events from server to the browser In realtime Secure

    Paid service Pusher Magic

  38. Easy to learn JS Framework Each tile is a component

    Listen for incoming events with Laravel Echo Update the tile Vue.js
  39. None

  40. DEMO

  41. Grid system The clock tile The Packagist tile The Twitter

    tile Topics

  42. There will be 
 some live coding We’ll use 


    an internet connection

  43. DISPLAYING ON A TV

  44. Raspberry Pi 2

  45. Raspberry Pi 2 Powered by the USB port from the

    TV Uses Raspbian Jessie Boots into Chromium 56 in fullscreen mode Setup

  46. TRY IT OUT YOURSELF

  47. Source code https://github.com/spatie/dashboard.spatie.be Blog post https://murze.be/2017/06/building-realtime-dashboard-powered- laravel-vue-2017-edition/ Documentation

  48. ROUND UP

  49. Credits Willem Van Bockstal @willemvbockstal Looks + grid system Sebastian

    De Deyne @sebdedeyne Scrutinising + JS wizardry

  50. https://laravel.com https://pusher.com https://vuejs.com https://vuecasts.com Interesting links

  51. 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

  52. QUESTIONS?

  53. Thank you! https://speakerdeck.com/freekmurze/dashboard-dpc https://joind.in/talk/d9030 https://spatie.be/opensource https://murze.be https://murze.be/newsletter