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

Dashboard laraconus

Dashboard laraconus

Freek Van der Herten

July 25, 2017
Tweet

More Decks by Freek Van der Herten

Other Decks in Programming

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

    View full-size slide

  6. Open source software
    ± 150 packages on Packagist
    ± 4 000 000 downloads total, ± 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

    View full-size slide

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

    View full-size slide

  8. https://spatie.be/opensource

    View full-size slide

  9. WE ❤ POSTCARDS

    View full-size slide

  10. Spatie

    Samberstraat 69D
    2060 Antwerp

    Belgium

    View full-size slide

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

    View full-size slide

  12. HIGH LEVEL OVERVIEW

    View full-size slide

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

  14. Technology stack
    Laravel Pusher Vue.js

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  22. There will be 

    some live coding
    We’ll use 

    an internet connection

    View full-size slide

  23. DISPLAYING ON A TV

    View full-size slide

  24. Raspberry Pi 2

    View full-size slide

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

  26. TRY IT OUT YOURSELF

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide