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

Dashboard (Laraconeu)

A1b4b398630bbd32b77a82cbc37fae9a?s=47 Freek Van der Herten
August 30, 2017
Programming
0
380

Dashboard (Laraconeu)

A1b4b398630bbd32b77a82cbc37fae9a?s=128

Freek Van der Herten

August 30, 2017
Tweet

More Decks by Freek Van der Herten

See All by Freek Van der Herten
An Introduction to Snapshot testing
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
220
Event Sourcing In Laravel
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
140
Building a realtime dashboard with Laravel Livewire (PHPKonf)
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
470
A tour behind the scenes of Oh Dear (PHP Benelux)
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
500
A practical look at multitenancy in Laravel
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
240
A practical look at multitenancy in Laravel (Laracon US)
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
470
Highlights Flare codebase (Laracon online)
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
190
Introducing Mailcoach
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
390
Highlights from the Flare codebase (Full Stack Ghent)
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
420

Other Decks in Programming

See All in Programming
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
2
150
Amazon SageMakerでImagenを動かして猫画像生成してみた
5426a03f740cd61fa5e0d4bfdb7a6cc8?s=48 hotoke_neko
0
120
Pluggable Storage in PostgreSQL
62f5ee39e37ba4f8a22acc714781c879?s=48 sira
1
190
企業内スモールデータでのデータ解析
6aceb3377c71b05c1285459c596d1d1f?s=48 hamage9
0
910
Pythonで鉄道指向プログラミング
Cc15f7fbb06e96bdb56992e3d42ea8cd?s=48 usabarashi
0
130
YATA: collaborative documents and how to make them fast
009174d68aa95ae39054afa749013f78?s=48 horusiath
1
170
ESM移行は無理だけどおれもSindreのライブラリが使いたい！
208355d7af69fa84a78048f78077048a?s=48 sosukesuzuki
2
560
回帰分析ではlm()ではなくestimatr::lm_robust()を使おう / TokyoR100
7a0892afffbcbd35fd84d46508b3a914?s=48 dropout009
0
4.6k
動画合成アーキテクチャを実装してみて
D5b3791309c8a03d37f05d238ded370d?s=48 satorunooshie
0
570
AWS Config Custom Rule、ノーコードでできるかな？
822eaa655305fe3cffb0b034913f0cd2?s=48 watany
0
250
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
190
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
150

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.3k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.9k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
44
2.4k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
47
4k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
84
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k

Transcript

  1. Creating a dashboard using Laravel , Vue and Pusher

  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. OPEN SOURCE SOFTWARE

  6. https://spatie.be/en/opensource/laravel

  7. Open source software ± 160 public repositories on GitHub August

    2016: ± 800 000 downloads August 2017: ± 5 000 000 downloads ± 500 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. WE ❤ POSTCARDS

  10. None
  11. None
  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. https://github.com/spatie/dashboard.spatie.be

  29. HIGH LEVEL OVERVIEW

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

  31. Technology stack Laravel Pusher Vue.js

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

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

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

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

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

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

    Secure Paid service Pusher

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

    Paid service Pusher Magic

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

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

  39. DEMO

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

    tile Topics

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


    an internet connection

  42. DISPLAYING ON A TV

  43. Raspberry Pi 2

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

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

  45. TRY IT OUT YOURSELF

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

  47. WRAPPING UP

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

    De Deyne @sebdedeyne Scrutinising + JS wizardry

  49. https://github.com/tlaverdure/laravel-echo-server https://github.com/spatie/vue-save-state https://docs.spatie.be/laravel-uptime-monitor Moarrr packages

  50. Thank you! https://speakerdeck.com/freekmurze/dashboard-laraconeu https://spatie.be/opensource/laravel https://murze.be https://murze.be/newsletter

  51. QUESTIONS?