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

Realtime dashboard (phpbenelux)

Realtime dashboard (phpbenelux)

Freek Van der Herten

January 27, 2017
Tweet

More Decks by Freek Van der Herten

Other Decks in Programming

Transcript

  1. Creating a
    realtime dashboard
    using PHP and websockets

    View Slide

  2. About me
    Freek Van der Herten
    Partner & developer at SPATIE
    @freekmurze
    https://murze.be

    View Slide

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

    View Slide

  4. Since 2003
    Websites, applications and webshops
    Team
    4 developers, 1 manager
    Specialization
    Laravel development

    View Slide

  5. VACATURE
    FRONT-END DEVELOPER

    View Slide

  6. OPEN SOURCE SOFTWARE

    View Slide

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

    View Slide

  8. https://spatie.be/opensource

    View Slide

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

    View Slide

  10. OUR OFFICE

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

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

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. HIGH LEVEL OVERVIEW

    View Slide

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

    View Slide

  29. Technology stack
    Laravel Pusher Vue.js

    View Slide

  30. Laravel 5.4
    Render the initial page
    Fetch data from external API’s (scheduled)
    Broadcast events when new data has arrived
    Laravel

    View Slide

  31. spatie/laravel-twitter-streaming-api
    spatie/laravel-google-calendar
    spatie/last-fm-now-playing
    spatie/packagist-api
    graham-campbell/github
    Laravel

    View Slide

  32. Provides full-duplex communication channels over a single TCP
    connection
    Transporting events from server to the browser
    In realtime
    Secure
    Paid service
    Pusher

    View Slide

  33. WebSockets
    Transporting events from server to the browser
    In realtime
    Secure
    Paid service
    Pusher

    View Slide

  34. Transporting events from server to the browser
    In realtime
    Secure
    Paid service
    Pusher
    Magic

    View Slide

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

    View Slide

  36. View Slide

  37. DEMO

    View Slide

  38. Grid system
    The clock tile
    The Packagist tile
    The Twitter tile
    Topics

    View Slide

  39. There will be 

    some live coding
    We’ll use 

    an internet connection

    View Slide

  40. DISPLAYING ON A TV

    View Slide

  41. Raspberry Pi 2

    View Slide

  42. Raspberry Pi 2
    Powered by the USB port from the TV
    Uses Raspbian Jessie
    Boots into Chromium 51 in fullscreen mode
    Setup

    View Slide

  43. TRY IT OUT YOURSELF

    View Slide

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

    View Slide

  45. ROUND UP

    View Slide

  46. Credits
    Willem Van Bockstal
    @willemvbockstal
    Looks + grid system
    Sebastian De Deyne
    @sebdedeyne
    Scrutinising + JS wizardry

    View Slide

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

    View Slide

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

    View Slide

  49. QUESTIONS?

    View Slide

  50. Thank you!
    https://speakerdeck.com/freekmurze/creating-a-dashboard-phpbenelux
    https://spatie.be/opensource
    https://murze.be
    https://murze.be/newsletter

    View Slide