Creating a dashboard (phpworld)

Transcript

1. Creating a dashboard with Laravel, Vue and Pusher
2. About me Freek Van der Herten Partner & developer at SPATIE @freekmurze https://murze.be
3. Since 2003 Websites, applications and webshops Team 4 developers, 1 manager Specialization Laravel development
4. OPEN SOURCE SOFTWARE
5. Open source software ± 80 packages on Packagist + 1 200 000 downloads total, ±200 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
6. https://spatie.be/opensource
7. OUR OFFICE
13. https://github.com/spatie/dashboard.spatie.be
23. HIGH LEVEL OVERVIEW
24. 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
25. Technology stack Laravel Pusher Vue.js
26. Laravel 5.3 Render the initial page Fetch data from external API’s (scheduled) Broadcast events when new data has arrived Laravel
27. spatie/laravel-google-calendar spatie/last-fm-now-playing spatie/packagist-api graham-campbell/github Laravel
28. Provides full-duplex communication channels over a single TCP connection Transporting events from server to the browser In realtime Secure Paid service Pusher
29. WebSockets Transporting events from server to the browser In realtime Secure Paid service Pusher
30. Transporting events from server to the browser In realtime Secure Paid service Pusher Magic
31. 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
32. DEMO
33. Grid system The clock tile The Packagist tile Topics
34. There will be 
 some live coding We’ll use 
 an internet connection
35. DISPLAYING ON A TV
36. Raspberry Pi 2
37. Raspberry Pi 2 Powered by the USB port from the TV Uses Raspbian Jessie Boots into Chromium 51 in fullscreen mode Setup
38. TRY IT OUT YOURSELF
39. 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
40. ROUND UP
41. https://laravel.com https://pusher.com https://vuejs.com https://vuecasts.com Interesting links
42. 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
43. Credits Willem Van Bockstal @willemvbockstal Looks + grid system Sebastian De Deyne @sebdedeyne Scrutinising + JS wizardry
44. QUESTIONS?
45. Thank you! https://speakerdeck.com/freekmurze/creating-a-dashboard-phpworld https://joind.in/talk/19484 http://lanyrd.com/2016/phpworld/sfkfry/ https://spatie.be/opensource https://murze.be https://murze.be/newsletter
46. 2016 2016