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

Dashboard (domcode)

A1b4b398630bbd32b77a82cbc37fae9a?s=47 Freek Van der Herten
November 28, 2017
Technology
0
75

Dashboard (domcode)

A1b4b398630bbd32b77a82cbc37fae9a?s=128

Freek Van der Herten

November 28, 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 Technology

See All in Technology
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
195f71c8183f8d27da66aa0618f293b6?s=48 task4233
1
260
EKS AnywhereとIAM Anywhereを組み合わせてみた
28dd434482959f605e535fb81f691326?s=48 regmarmcem
0
410
Simplify Cloud Native Security with Trivy
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
0
730
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
2f73f93f91c4401b0baf12029226a681?s=48 tobachi
PRO
5
1.8k
ReverseETLでユーザーに価値を届ける基盤を実現した話
0c847ea07895706f7435ef67d31a5f6e?s=48 hakky
0
350
DeepDive into Modern Development with AWS
F42c7349266a0ebefe5b67b7f43c565d?s=48 mokocm
1
350
psql, my favorite tool!
18749909c147a9ee98f6b112911943cc?s=48 nuko_yokohama
1
180
Dangerous attack paths: Modern Development Environment Security - Devices and CI/CD pipelines
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
PRO
0
170
森林情報のオープンデータと QGISでの利用
2a35cc4d9c9dd2672aba2f097980e5d1?s=48 kou_kita
0
330
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門（駆け足版）
Cc073a7c6b0a79918ff1da48acb709e7?s=48 kkmory
0
220
Amazon Comprehendで始める感情分析
57c6e82f3c8eece6caa83c6d2dadbcb3?s=48 46ta
0
200
Micro frontends and micro services
Acc7788c2c6d2c4b43b875fcad502cd2?s=48 kashif98
0
150

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
334
37k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.3k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
12k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
6k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
55k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1.1M
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k

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. Since 2003 Websites, applications and webshops Team 6 developers, 1

    manager Specialization Laravel development

  4. OPEN SOURCE SOFTWARE

  5. Open source software ± 170 public repositories on GitHub +7

    000 000 downloads + 700 000 downloads a month A lot of benefits: learning, writing quality documentation and tests, showing the quality of our work, eating our own dogfood

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

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

  8. WE ❤ POSTCARDS

  9. Spatie
 Samberstraat 69D 2060 Antwerp
 Belgium

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

  28. HIGH LEVEL OVERVIEW

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

  30. Technology stack Laravel Pusher Vue.js

  31. Laravel 5.5 Render the initial page Fetch data from external

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

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

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

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

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

    Secure Paid service Pusher

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

    Paid service Pusher Magic

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

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

  38. DEMO

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

    tile Topics

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


    an internet connection

  41. DISPLAYING ON A TV

  42. Raspberry Pi 2

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

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

  44. TRY IT OUT YOURSELF

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

  46. WRAPPING UP

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

    De Deyne @sebdedeyne Scrutinising + JS wizardry

  48. https://github.com/tlaverdure/laravel-echo-server https://github.com/spatie/vue-save-state Moarrr packages

  49. Thank you! https://speakerdeck.com/freekmurze/dashboard-domcode https://spatie.be/opensource/laravel https://murze.be

  50. QUESTIONS?