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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. VACATURE
    FRONT-END DEVELOPER

    View full-size slide

  6. OPEN SOURCE SOFTWARE

    View full-size 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 full-size slide

  8. https://spatie.be/opensource

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. HIGH LEVEL OVERVIEW

    View full-size slide

  12. 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 full-size slide

  13. Technology stack
    Laravel Pusher Vue.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. There will be 

    some live coding
    We’ll use 

    an internet connection

    View full-size slide

  22. DISPLAYING ON A TV

    View full-size slide

  23. Raspberry Pi 2

    View full-size slide

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

    View full-size slide

  25. TRY IT OUT YOURSELF

    View full-size slide

  26. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide