Laravel Livewire is an amazing framework by @calebporzio which reminds me of struggle with classical php to make live component. Live Components means section in page to show real time data in it or Live Binding or you can see other fancy names to this. if you want to learn and understand then follow below resources which i find really useful.
- Livewire Docs
- Livewire CRUD
- Some new Features (published on Feb 2019)
- Livewire with Laravel Echo & Pusher
I am not doing another ToDo tutorial on Livewire. i am going to share my experience how we used to code before livewire and try to explain what problems i think livewire fixed and for what reasons i simply love this framework and why i would hesitate to use this framework in my projects.
How It Used To Be:
Back in classical php times below is the flow of creating the event based component / live componets, as @calebporzio discussed in his screen recording for livewire that same architecture is followed by GitHub and still use by some other projects with huge codebase where they return html to event calls and update the DOM. (probably should use some tool and update this).
so this partial loading was a bit of work where we had to sanitize request and then write html in PHP file inside Buffer tags and return processed html for event request and then injecting into DOM.
LOADING WITH FLICKER
i never like these empty spaces on page load and then flicker while loading components, i hate that most on page load
- on page load shows empty space
- load component which send request to load data
- shows preloader / placeholder and wait for response
- load data into components
Mixed Components
I am used to do mixed components like getting list from db in controller and passing individual item as prop to frontend components which then loads data for each component asynchronously. i see few benefit including one which i said i hate most is that flicker will be fixed as component structure will be loaded from server side with preloader. see below example
but problem with this is you have to maintain UI in 2 different files blade file with structure and Vue component with data.
there are couple of issue i see in day to day work with loading data only in blade file or only Vue Component or mixed component but i still like mix component unless we do SPA.
Livewire Saved
it really does save a lot efforts of loading those partials or making live binding to component and it makes component loading smooth instead of showing empty space and then loading component there, which again save efforts of making place holder for these components. how it does those please read reference articles.
It not just these 3 things i’ve mentioned are overcome by Livewire but i love how WebSocket fallback to HTTP ajax calls which is incredible with hot reloading and you can test you frontend with same pattern how you test your backend. So it feel like you stay in backend and follow same patterns to do your frontend. which brings me to my 3rd point that why …
Why I would hesitate to use Livewire
beside loving this framework with all these features and problems it fix, i would hesitate to use Livewire in my project. there are couple of reasons and the very main is to keep frontend and backend layers separate. if you are doing a quick prototype where you don’t need API endpoints or Admin panel with simple CRUD or you have expertise in backend but you want those fancy loading animations with optimized page load then its ok but again when you think of updating theme (UI) you would end up going backend and forth in updating events from backend (Livewire) and frontend code.
I don’t agree with all but you can also read “Making the case AGAINST Laravel Livewire” for further details.
I would still play with LiveWire and see how it goes but i’ve made my case and clear when would i use this framework. Despite not in favour to use Livewire i still consider myself fan of Livewire. and thanks to Laravel Community where amazing people are solving problems and introducing amazing solutions.