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
Tweet

More Decks by Freek Van der Herten

Other Decks in Programming

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