Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a realtime dashboard with Laravel Livewire (PHPKonf)

Building a realtime dashboard with Laravel Livewire (PHPKonf)

Freek Van der Herten

December 12, 2020

More Decks by Freek Van der Herten

Other Decks in Programming


  1. Building a real time dashboard
    with Laravel & Livewire

    View Slide

  2. About me

    Freek Van der Herten

    Partner & developer at SPATIE






    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


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


    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


    20% discount

    View Slide

  27. Thank you!



    View Slide