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

Dashboard (domcode)

Dashboard (domcode)

Freek Van der Herten

November 28, 2017
Tweet

More Decks by Freek Van der Herten

Other Decks in Technology

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

    View full-size slide

  4. OPEN SOURCE SOFTWARE

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. WE ❤ POSTCARDS

    View full-size slide

  9. Spatie

    Samberstraat 69D
    2060 Antwerp

    Belgium

    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.5
    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
    knplabs/github-api
    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. 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

  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 56 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 post
    https://murze.be/2017/06/building-realtime-dashboard-powered-
    laravel-vue-2017-edition/
    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://github.com/tlaverdure/laravel-echo-server
    https://github.com/spatie/vue-save-state
    Moarrr packages

    View full-size slide

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

    View full-size slide