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

Dashboard (PHP Leuven)

Freek Van der Herten
October 04, 2018
180

Dashboard (PHP Leuven)

Freek Van der Herten

October 04, 2018
Tweet

Transcript

  1. Creating a dashboard
    using Laravel ,
    Vue and Pusher

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

    View full-size slide

  4. About me
    fullstackbelgium.be

    View full-size slide

  5. About me
    fullstackeurope.com

    View full-size slide

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

    View full-size slide

  7. OPEN SOURCE SOFTWARE

    View full-size slide

  8. https://spatie.be/open-source

    View full-size slide

  9. Open source software
    ± 200 public repositories on GitHub
    ± 18 000 000 downloads total
    ± 1 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
    https://murze.be/the-story-behind-our-open-source-efforts

    View full-size slide

  10. WE ❤ POSTCARDS

    View full-size slide

  11. Spatie

    Samberstraat 69D
    2060 Antwerp

    Belgium

    View full-size slide

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

    View full-size slide

  13. HIGH LEVEL OVERVIEW

    View full-size slide

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

  15. Technology stack
    Laravel Pusher Vue.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  21. Easy to learn JS Framework
    Each tile is a component
    Listen for incoming events with Laravel Echo
    Update the tile
    Vue.js

    View full-size slide

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

    View full-size slide

  23. There will be 

    some live coding
    We’ll use 

    an internet connection

    View full-size slide

  24. DISPLAYING ON A TV

    View full-size slide

  25. Raspberry Pi 2

    View full-size slide

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

    View full-size slide

  27. TRY IT OUT YOURSELF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Thank you!
    https://speakerdeck.com/freekmurze/dashboard-php-leuven
    https://spatie.be/open-source
    https://murze.be
    https://ohdear.app
    https://fullstackeurope.com

    View full-size slide