Dashboard (kdg)

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

   View Slide

4. THREE QUICK CAREER TIPS
   

   View Slide

5. A FEW CAREER TIPS
   1. Empathy
   Coding is just a means to an end
   Put yourself in the mind of some else
   Context is important
   It will make you a better human being too
   Empathy Gives You Superpowers by Matt Stauffer

   https://www.youtube.com/watch?v=fMFjO2szDnk
   Three quick career tips
   

   View Slide

6. A FEW CAREER TIPS
   2. Avoid else
   Three quick career tips
   if ($firstName) {
   if ($lastName) {
   if ($age) {
   return 'person is valid';
   } else {
   return 'age is required';
   }
   } else {
   return 'lastName is required';
   }
   } else {
   return 'firstName is required';
   }
   

   View Slide

7. A FEW CAREER TIPS
   2. Avoid else
   Three quick career tips
   if (! $firstName) {
   return 'firstName is required';
   }
   if (! $lastName) {
   return 'lastName is required';
   }
   if (! $age) {
   return 'age is required';
   }
   return 'person is valid';
   

   View Slide

8. A FEW CAREER TIPS
   2. Avoid else
   Three quick career tips
   https://medium.com/web-engineering-vox/improving-code-
   quality-with-object-calisthenics
   Your code sucks, let's fit it

   https://www.youtube.com/watch?v=GtB5DAfOWMQ

   

   Seven Ineffective Coding Habits of Many Programmers

   https://www.youtube.com/watch?v=ZsHMHukIlJY
   

   View Slide

9. A FEW CAREER TIPS
   3. Embrace the community
   Three quick career tips
   Everybody just holds a piece of puzzle
   Learn from each other
   Twitter, Meetups, Conferences
   Use each others solutions
   Give back
   

   View Slide

10. OPEN SOURCE SOFTWARE
    

    View Slide

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

    View Slide

12. Open source software
    ± 160 public repositories on GitHub
    +6 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 Slide

13. WE ❤ POSTCARDS
    

    View Slide

14. Spatie

    Samberstraat 69D
    2060 Antwerp

    Belgium
    

    View Slide

15. View Slide

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

28. View Slide

29. View Slide

30. View Slide

31. View Slide

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

    View Slide

33. HIGH LEVEL OVERVIEW
    

    View Slide

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

35. Technology stack
    Laravel Pusher Vue.js
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

42. View Slide

43. DEMO
    

    View Slide

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

    View Slide

45. There will be 

    some live coding
    We’ll use 

    an internet connection
    
    

    View Slide

46. DISPLAYING ON A TV
    

    View Slide

47. Raspberry Pi 2
    

    View Slide

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

    View Slide

49. TRY IT OUT YOURSELF
    

    View Slide

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

51. WRAPPING UP
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. QUESTIONS?
    

    View Slide