Dashboard (fosdem)

Transcript

1. Creating a dashboard
   using Laravel,
   Vue and Pusher
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. VACATURE
   FRONT-END DEVELOPER
   https://spatie.be/en/front-end-vacancy
   

   View Slide

6. OPEN SOURCE SOFTWARE
   

   View Slide

7. Open source software
   ± 90 packages on Packagist
   ± 1 900 000 downloads total, ±270 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 Slide

8. https://spatie.be/opensource
   

   View Slide

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

   View Slide

10. OUR OFFICE
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

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

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. HIGH LEVEL OVERVIEW
    

    View Slide

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

29. Technology stack
    Laravel Pusher Vue.js
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. 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 Slide

36. View Slide

37. DEMO
    

    View Slide

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

    View Slide

39. There will be 

    some live coding
    We’ll use 

    an internet connection
    
    

    View Slide

40. DISPLAYING ON A TV
    

    View Slide

41. Raspberry Pi 2
    

    View Slide

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

    View Slide

43. TRY IT OUT YOURSELF
    

    View Slide

44. 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 Slide

45. ROUND UP
    

    View Slide

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

    View Slide

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

    View Slide

48. 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 Slide

49. QUESTIONS?
    

    View Slide

50. Thank you!
    https://speakerdeck.com/freekmurze/dashboard-fosdem
    https://spatie.be/opensource
    https://murze.be
    https://murze.be/newsletter
    

    View Slide