Building a realtime dashboard with Laravel Livewire (PHPKonf)

Transcript

1. Building a real time dashboard
   with Laravel & Livewire
   

   View Slide

2. About me
   
   
   Freek Van der Herten
   
   
   Partner & developer at SPATIE
   
   
   @freekmurze
   
   
   freek.dev
   
   
   spatie.be/prodcuts
   
   
   ohdear.app
   
   f
   l
   areapp.io
   

   View Slide

3. Open source
   
   
   ± 300 packages on Packagist
   
   
   ± 105 000 000 downloads total
   
   
   ± 5 500 000 downloads a month
   

   View Slide

4. https://spatie.be/open-source
   

   View Slide

5. https://spatie.be/open-source
   

   View Slide

6. Our dashboard
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. Introducing
    Laravel Dashboard
    

    View Slide

14. Laravel Dashboard
    
    
    A free open source package
    
    
    Takes care of positioning of tiles, and state
    
    
    Tiles themselves are separate packages
    
    
    Livewire components
    

    View Slide

15. Livewire
    
    
    Made by Caleb Porzio
    
    
    Server rendered partials
    
    
    No / minimal JavaScript knowledge necessary
    
    
    Refresh through polling
    
    
    laravel-livewire.com
    

    View Slide

16. Demo
    

    View Slide

17. Comparing WebSockets/Vue
    to Livewire
    

    View Slide

18. Our previous dashboard
    
    
    WebSockets to transmit new data
    
    
    Tiles rendered with Vue
    
    
    A single Laravel app
    

    View Slide

19. WebSockets/Vue
    
    
    + realtime
    
    
    + no meaningful extra load when connecting client
    
    
    - tech stack more complicated, WebSockets server needed
    
    
    - potentially display old data
    
    
    - build proces
    
    
    

    View Slide

20. Livewire
    
    
    + simple tech stack, just an app and a db
    
    
    + easy to package up tiles, only PHP knowledge needed
    
    
    + up to date from
    f
    i
    rst render
    
    
    - not realtime, but close
    
    
    - load on server increases with every user
    
    
    - Livewire isn’t an industry standard like WebSockets/Vue (yet)
    
    
    

    View Slide

21. In closing
    

    View Slide

22. Laravel Dashboard
    
    
    Easy to use package
    
    
    Set up a dashboard in no time
    
    
    Extensive documentation
    
    
    docs.spatie.be/laravel-dashboard
    
    
    

    View Slide

23. One more thing…
    

    View Slide

24. spatie.be/videos/laravel-package-training
    

    View Slide

25. Laravel Package Training
    
    
    Learn to build framework agnostic PHP / Laravel packages
    
    
    Best practices
    
    
    GitHub Actions
    
    
    Package source dives
    
    
    4 hours of quality content
    

    View Slide

26. Discount
    
    
    spatie.be/products?referrer=phpkonf
    
    
    20% discount
    
    
    

    View Slide

27. Thank you!
    
    
    freek.dev
    
    
    @freekmurze
    

    View Slide