Tweet
Tweet

Slide 1

Slide 1 text

Creating a dashboard using Laravel , Vue and Pusher

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

OPEN SOURCE SOFTWARE

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

https://spatie.be/en/opensource

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

WE ❤ POSTCARDS

Slide 9

Slide 9 text

Spatie
 Samberstraat 69D 2060 Antwerp
 Belgium

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

HIGH LEVEL OVERVIEW

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Technology stack Laravel Pusher Vue.js

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

DEMO

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

There will be 
 some live coding We’ll use 
 an internet connection

Slide 41

Slide 41 text

DISPLAYING ON A TV

Slide 42

Slide 42 text

Raspberry Pi 2

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

TRY IT OUT YOURSELF

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

WRAPPING UP

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

https://github.com/tlaverdure/laravel-echo-server https://github.com/spatie/vue-save-state Moarrr packages

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

QUESTIONS?