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

Creating a dashboard

Creating a dashboard

On the wall mounted TV in our office a dashboard is displayed. At a glance we can see what the current tasks for each member of our team are, which important events are coming up, which music is playing, if it will rain in the next 30 minutes, ... and much more.

In this 30 minute demo I'll explain how we leveraged both Laravel and Vue to build the dashboard. After demonstrating the dashboard itself we'll take a deep dive in the code. We'll take a look at the entire flow: the grid system, broadcast events, the Pusher service, some cool Vue mixins and much more. After this talk you'll be able to setup a dashboard using our code available at https://github.com/spatie/dashboard.spatie.be

Freek Van der Herten

July 27, 2016
Tweet

More Decks by Freek Van der Herten

Other Decks in Technology

Transcript

  1. Creating a dashboard
    with 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
    4 developers, 1 manager
    Specialization
    Laravel development

    View full-size slide

  4. OPEN SOURCE SOFTWARE

    View full-size slide

  5. Open source software
    ± 80 packages on Packagist
    + 700 000 downloads
    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

  6. https://spatie.be/opensource

    View full-size slide

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

    View full-size slide

  8. HIGH LEVEL OVERVIEW

    View full-size slide

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

  10. Technology stack
    Laravel Pusher Vue.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  16. Lot of ♥ from the Laravel community
    Easy to learn
    Each tile is a component
    Listen for incoming events
    Update the tile
    Vue.js

    View full-size slide

  17. Starting fresh
    Grid system
    The clock tile
    The Packagist tile
    Topics

    View full-size slide

  18. There will be 

    some live coding
    We’ll use 

    an internet connection

    View full-size slide

  19. DISPLAYING ON A TV

    View full-size slide

  20. Raspberry Pi 2

    View full-size slide

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

  22. TRY IT OUT YOURSELF

    View full-size slide

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

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

    View full-size slide

  25. https://www.geckoboard.com/
    http://www.cyfe.com/
    https://razorflow.com/
    http://dashing.io/ 

    Built by Shopify, Ruby. No longer maintained, but works great
    https://panic.com/statusboard/
    Alternatives

    View full-size slide

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

    View full-size slide

  27. Thank you!
    https://joind.in/talk/xxx
    https://speakerdeck.com/freekmurze/creating-a-dashboard
    https://murze.be
    https://spatie.be/opensource

    View full-size slide