PHP on the frontend! No more Javascript!

Laravel Livewire allows you to write PHP on the frontend (kind of!) so you don't have to futz about with Javascript anymore (mostly!)
Looking for PHP jobs or looking to hire PHP devs? Check out Larajobs: larajobs.com/?partner=108.
Check out the docs at laravel-livewire.com
01:44 Installing Livewire
02:26 Updating our default views
03:28 Making a Livewire component
04:37 Adding state
05:08 Binding state
06:45 Inspecting the network tab
09:35 Calling methods
11:28 Events, nested components, file uploads
12:16 Alpine.js
13:30 Livewire V3

[@teej_dv]

aaron makes me love php

[@aarondfrancis]

Pinned it

[@orenders]

Laravel is NOT php.

[@dputra]

​@@orenders you can't run laravel on c#

[@mihajlocolic01]

@@dputra goteem

[@omegaman7377]

Aaron is an incompetent. JavaScript support Unicode (think foreign language). PHP no not support. Unless you want to limit yourself to the anglophone market. PHP is a waste of your time.

[@isurujn]

I've been a mobile developer for the past 10 years but PHP has a soft spot in my heart, no matter how much hate it gets. I built a little backend for a mobile app I developed for a software competition way back in 2012 (and won 3rd place!). All vanilla PHP, no frameworks. I wasn't aware of Laravel back then. I tried it here and there but my career took me elsewhere. Your videos on PHP makes me wanna learn Laravel again.

[@ryanlak1234]

What tech stack do you use for your career now?

[@isurujn]

@@ryanlak1234 I'm in mobile development now. Mostly iOS development with Swift.

[@dmdboi]

"Have you ever had a thought..". None, I have a zero thought policy. Even thought I don't use PHP, your videos are entertaining!

[@aarondfrancis]

Zero thoughts, zero suffering. You may be onto something here

[@carloslfu]

I started watching PHP content again after 6 years of working with other languages, all because of your videos. I was surprised to see PHP added types! Also, Laravel and all of the PHP ecosystem have advanced a ton! Great content Aaron!

[@Icodestuff]

Fellow Laravel content creator here, absolutely love your style of video. You have really nice personality & charisma in this video, keep it up man!

[@aarondfrancis]

That means a lot to me, thank you so much!

[@David-ng9qh]

Another great video! Livewire is honestly so cool and magical. Keep up the great PHP/Laravel content!

[@khanalpride]

been waiting for Livewire v3.0 so long... Your videos are the best. :)

[@siyabdev]

Your style of explanation makes the topic more interesting. Great !!!

[@aarondfrancis]

That's nice of you to say, thank you!

[@V3LOXy]

For anyone using Symfony, Symfony UX works similarly and has support for vue/svelt/react components too

After each video that I watch from you, I have a big smile on my face. ❤

[@holonaut]

Great video! One thing worth explaining in the counter example: Every time you click the increment button, you not only send to the server that the "increment" function should be called, but also send the entire previous state of the component in the "memo" field. First the component gets hydrated, e.g. $counter gets set to 22 or whatever the "memo" says, and then the function is applied. The backend then increments it to 23 and sends the new view out, but also the new memo which is then stored by the frontend. Took me a day or two to figure this out. Before that, I thought some cache or db sorcery is going on.

[@patricknelson]

Also worth a look for backend lovers: HTMX. Its functions very similarly, but is not tightly coupled to any particular backend language.

[@elementxyz]

That was the first thing that came in my mind. Is it similar to htmx. 😊

[@JeremyAndersonBoise]

@patricknelson Laravel + htmx is my next experiment, full-on!

[@MrNichuya]

I've been using Livewire since version 1 and have never thought to use anything else since then, even started my first open source package for the TALL stack called tall-kit components

[@Rikco.337]

Life changing :D Great video .. thanks a lot ! *Loving PHP for 20 years now.

[@_alexlazar_]

Been watching your videos for the past week. It's this weekend that I'm building something with Laravel. I've been skimming through the docs a lot, and I'm hopeful

[@aarondfrancis]

I too am hopeful! Best of luck

[@timebroua]

I love PHP! Thanks for loving even more!

[@tinpa1756]

Bro this guy talks to me like I'm a toddler and I'm here for it, love the vibes

[@throbicon]

I just fell in love with PHP. Thank you Aaron!

[@joaolima3780]

Great!!! I wanna start to learn php and your videos helps a lot! tks man =D

[@str2254]

This is actually mindblowing. I cant believe i'm hyped to learn php

[@raident29]

i just found your channel and subbed to it. ive been using php for the past 9 years. ive known live wire for the past year but havent dared to try it. i will try this now.

[@aarondfrancis]

Enjoy!

[@heyalejandro175]

That was awesome! Thanks Aaron!

[@igorskyflyer]

Oh, wow, this is like PHP and JavaScript had a child, love it 😙

[@donald5297]

This is the first time i feel like hitting the like button more than once on a KZbin video 😊

[@MrAlexh037]

Love your sense of humor and content. Subscribed!

[@jasper2virtual]

I always don’t know should I implement spa backend (php page routing), or spa frontend (restful api + JavaScript routing)? Can anyone suggest a good article or book to guide me the designs decision. Thanks

[@johnforeverrules]

great stuff. livewire is fun. now, more devs can have fun with livewire. keep it up

[@krtirtho]

As a svelte fanboy this thing burns my soul Just imagine storing state in server It breaks REST, frontend and abuses HTTP requests I thought Angular was the worst. This is beyond Angular 😂 Btw, nice video ❤

[@aarondfrancis]

Nah state is on the frontend it just gets sent to the backend to rehydrate the state on the backend. PHP builds and destroys the world on every request, so there's no stored state

[@RockyPrabowo]

Ah yes. This is a typical post-2020 frontend developer saying bullshit about a mature tech they never tried. PHP is stateless by design. It never stores states beyond a lifetime of a request.

[@thedailycutline278]

As a nextjs dev, Angular aint bad, php is on its own level of being bad

[@MrSandvich03]

@@thedailycutline278 It's still better than JS

[@liquidsnake6879]

You do realise most roundtrip applications are vastly outperforming "modern" SPA crap right? We deal with network latency, you deal with 30 megabytes of javascript bundles and tons of nonsense from libraries you don't even understand blocking your thread.

[@janedawg09]

cool. just watched two of your vids. contents' both entertaining and educative. your explanation's very easy to follow too

[@imdtap1448]

It's a sign from the heavens..Dary and Gio had me thinking about learning PHP...Now A-A-Ron...Been thinking about this for at least 3 years (im JS loser wannabe)... Imagined if I would have listened to myself and committed? I would be well on my dream of working from home in my pj bottoms and tshirt...

[@DanteMishima]

Thank you so much for this. I would love more tutorials of maybe building a project from start to finish

[@dinoskostas5728]

That was very intresting! But i have one question. The section that you showing that the input updates the ouput via http post request like the ngModel in angular. So my question is if this is secure or not. Because everyone has access to the dev tools and they can easily see those updates and i assume that can lead to an html injection or more am I right or am i missing something?

[@vinayghael3490]

Thanks Aaron for share useful content👍👏👏

[@christianlembke3410]

Omg that's amazing, thanks for sharing 😊

[@ernestharuna]

I've been on this path for a long time. I used Blade previously, but now, I'd use Livewire instead, it has some interesting features found in other Javascript frameworks

[@imqqmi]

Wow, looks like such an elegant way of reducing js frameworks! In my next php project I'll be sure to check it out. I've been ripping out react and angular from projects and replacing it with vanilla javascript and server side code as much as possible. Made a tremendous improvement in speed and maintenance and readibility. Haters of php haven't used php 7.4 onwards and all the new features it provides. And lets be honest, many who use async, dependency injection and inheritance in C# or java make an absolute mess of things, including myself.

[@orenders]

very strange comment, we allready as several years use php 8

[@amponsahhubert4884]

You speak with so much conviction😃. I would like to see an overview of PHP for backends/APIs

[@ThePandaGuitar]

Wow you're a really good teacher!

[@aarondfrancis]

Thank you. That means a lot

[@mackynyxz]

I love this livewire thing!

[@tannercampbell]

i been using Laravel + Vue for several years and its been great! The one off time I need some SSR or related thing I just use Blade. I haven’t really found the need for Livewire (because my experience with Vue has been so good) but this makes me want to give it a shot and mess around

[@ronaldbarcat]

I think this is good for quick prototyping or showing quick mvp and for relatively smallish projects. Since I started with API driven development with Laravel, I never wanted to go back to tightly coupled monolithic web development. As fullstack web dev, embrace the new tech stack, frontend frameworks are there for a reason and it's inevitable if you want your skillset to be marketable.

[@carlosviniciusmonteirodeso5060]

I still haven't got around to programming with PHP, but after watching this video, I was curious about this 'Livewire'. I'm going to send this video to my friend who loves PHP and Laravel

[@Blamethemsm]

I just finished writing a router/ controller framework. 😂 Then i learned about htmx and loved life. This is just a whole 'nother level of amazing.

[@austinedeclan10]

I am an "anything but JavaScript" type of guy. I welcome this.

[@miguelcaf]

I'll re-watch this video many times because I just searching this, a way to use php on front-end. I don't know if is the best pratice but I'll exercise my code this way! Thaks a lot!

[@jamesrosemary2932]

I remember in the early days of the web that you could install a DLL or a plugin in your browser which made it possible to interpret any language you wanted (as long as that language was designed for the web, of course). So there were websites that were made with VB or Java or JS. Or you could write the plugin yourself and interpret your own favorite programming language (not an easy job, but the possibility was there). All thanks to a property of the tab script: type. All that is over. I miss those times.

[@_akuma06]

You can still kind of do that with wasm. Like PyScript does to execute python in the front end instead of javascript.

[@MrShaheer]

you could also use JS on the server side in the early days of web programming (IIS supported it. ). You could also write STYLESHEETS with JS. Those were called JSS instead of CSS (Javascript Style Sheet).

[@folkrav]

Those often came with the very "fun" caveats that security was abysmal and compatibility with different OSes/browsers was crap. From a developer perspective, they may have been fun, but from a user perspective, I can safely say I don't miss this _at all_.

[@jamesrosemary2932]

@@folkrav Well, although what you say is true for the general public, there are specific cases where it has practical application and is even desirable, for example in a backend application for a company's intranet.

[@folkrav]

@@jamesrosemary2932 Then you end up with situations like at some Fortune 100 place I did consulting at, where most developers outside those working on said internal tools used Linux. Pretty much all had to keep a Windows VM around just to run IE cause that intranet software relied on Silverlight 🤷

[@ariaieboy_ir]

TALL STACK for eveeeeeer

[@sibow]

Calm down fascist…😂 Just kidding TALL stack is pretty cool even though I’m a VILT stack kinda guy

The advantage of PHP is that hosting is so cheap. With this technology it becomes even more interesting! Thank you

[@harshwebdev]

Really i liked your video 💖💖

[@Xcombo]

It seems like it works very well, but I am concerned about the excessive http requests. It may be fine for small sites, but if you scale to a couple thousands of users, you are going to want as little backend requests as possible in order to not crash your server.

[@yoskokleng3658]

laravel protect it.

[@loicknsenda673]

@@yoskokleng3658 How ? can you tell us more about that ?

[@yoskokleng3658]

@@loicknsenda673 go to larvae’s document and find it. In code we will found it in config of laravel project. Laravel project protect too many request from the same ip and we can set how many request that allow user request per minute in the same ip. Remember -> in the same ip Laravel can handle thousands request. Your service won’t crash at all.

[@grim.reaper]

Very interesting, I don’t know php but this is pretty neat concept

[@TheJobCompany]

My only problem with the "HTML over the wire" pattern is that it makes it too easy to build applications that require too much server interactions for trivial state changes that can just as easily take place on the client entirely. This results in poor design, such as the way GitHub has to make a request just to render a markdown preview. That's why I prefer how React Server Components by design make it so you cannot, for instance, use state on a server component, forcing you to make it clientside.

[@aarondfrancis]

Servers are great though! Super powerful, very awesome. And I'm not sure using GitHub as the negative example is very compelling. I get it though, HTML over the wire isn't right for every situation. It is right for more situations than it gets credit for though!

[@Stopinvadingmyhardware]

That’s what WASM is for.

[@TheSaintsVEVO]

@@Stopinvadingmyhardware What does that mean? Are you saying use WASM for managing state?

[@Stopinvadingmyhardware]

@@TheSaintsVEVO Why are you managing state machines in browsers? That’s the opposite of secure

[@TheSaintsVEVO]

@@Stopinvadingmyhardware UI state

[@chriscjjones8182]

Very interesting. Might have to finally check out laravel properly now

[@aarondfrancis]

Ladies and gentlemen... we got him! ❤️

[@imdanielmartinez]

The fact that livewire is made with tailwind too is the bomb

[@lpanebr]

This is awesome.

[@DevlogBill]

I actually like PHP, it was my very first backend technology which I dabbled with for about 2 months and afterwards jumped into Django with Python which is OK. There is so much you can learn with PHP as your first programming language. I only wish there were jobs for PHP developers in NYC, there are barely no jobs here.

[@aarondfrancis]

Yeah I wish there were more PHP jobs as well. You might check out larajobs.com if you're open to remote!

[@DevlogBill]

@@aarondfrancis Thank you I will check out the site.

[@ditzdee1]

been an fullstack and backend developer but, currently more interested in backend. PHP is my first language in this industry. while trying other language, I find it's simpler not to think how to manage garbage collector (PHP only keep it until the request is done), and to manipulate array and more of them. Only it's sytax take longer than other few languages. I love this language, but still the market job requrements in my country is rare for this language for backend.

[@aadamishmael8549]

Awesome! Way overdue.

[@Dutep]

Your videos are awesome! Would love more Laravel+Livewire content :D

[@lagcisco]

So much happier our team got rid of NextJS/React/GraphQL/MaterialUI for regular boring vanilla Rails+HotWire+Tailwind+AlpineJS. So much code was deleted and accumulated cruft to support the graphql api and the entire massive React app. We can put out features a lot faster now and even performance improved, less complex deployments as well, wins all around.

[@aarondfrancis]

The vibes are shifting. We're so back!

[@mikopiko]

Turbo frame are something incredible!

[@mikopiko]

@americanhero3881 What is it you don't enjoy with Rails?

[@mikopiko]

@americanhero3881 Oh okey, their design regarding the "convention over configuration" can be hard to work with if you don't fully grasp it.

[@yousufameer]

Best Explanation

[@baadrqaaba9529]

I have done in a project last year and i was quiet surprised how good that was , still have some improvements buts its great .

[@DharmikGohil-bw2ug]

Great Video

[@victorpinasarnault9135]

Did you saw PHP in a sandbox enviroment with WebAssembly? They did that a few weeks ago.

[@underflowexception]

Great video

[@behrad9712]

Thank you very much!🙏

[@pkop4]

hard to tell if the livewire namspacing on some of your files and components is due to app name or livewire feature itself. seems using a more unique app name would avoid that confusion.

[@hamzahakoun1072]

what is the advantage of making multiple http requests to change an input value instead of using javascript to do that ?

[@aarondfrancis]

All depends on the use case! You can defer or debounce the input like I mentioned. In reality, you'd be using it for things you would normally need ajax for.

[@areyousureyouareawake]

"No more javascript" made me subscribe.

[@dsuess]

I love PHP!! Hands down, I'd prefer to do more of the code in PHP and less in React/Angular, especially if this is going to execute faster than JS. Great breakdown, thank you!

[@davidstephen7070]

this framework built on top JS. So it never execute faster than JS. This framework hides JS implementation. Like Blazor.

[@dputra]

@@davidstephen7070 blazor wasm is different if I understand correctly, they have their own "shadow DOM"

[@fernandoboueres]

Laravel Blade has this for some time, great to see expanded in livewire!

[@DCBlogdev]

I love Livewire it’s all a php dev needs!!

[@ladanski]

As a php developer who now does Angular, this looks so familiar.

[@aarondfrancis]

Yes! Very similar syntax

[@sidatsuarezgarcia5062]

Please just make a course on PHP and Laravel, your way of explaining things it´s awesome man!!!!!

[@neelkamal7837]

it's really a nice information

[@md6886]

Looks good for simple pages.

[@mycreativecode]

my man love u for PHP

[@werewasyo]

but can the state be so big and complex that it makes livewire/hotwire a bad choice versus choosing something like react/vue?

[@kewltune4683]

Totally love the “hit the dislike button twice” part! Thank you for the great video on this topic!

[@windyhen2567]

and the poker face while saying it - niceeee

[@MarkConstable]

I would like to have seen the extra download cost of Livewire and Alpine (how big, or not) are they?

[@aarondfrancis]

Alpine is teeny tiny and so is Livewire. I think Alpine is like 7kb gzipped or something silly like that!

[@negativerfan]

This is the first time that PHP makes me excited.

[@viragjacint]

No way!!!! I just finished your mysql course! It was epic! Really happy that I found your personal channel! Can't wait to see more videos from you!

[@aarondfrancis]

You made it! I'm here! Glad you enjoyed the course 🤗

[@JasonJA88]

I'm really loving what HTMX's doing...

[@aarondfrancis]

Same!

[@oszi7058]

Love it xD!!!!

[@adolfomoram]

I tried for one year, maybe more, I think SPAs are a bit complicated to implement with livewire I also found it hard to work with JavaScript libraries like tagify or file pond, when it reloads it overwrites the state messed up the library. I then changed to Inertiajs and Vue and I am loving it so far...

[@aarondfrancis]

Inertia is great! I'm a big Inertia fan

[@nIghtorius]

Not so running hot for this. Every single client side thing has te be called back to the backend? I worry for performance.,

[@acuteclub7381]

love u man

[@aarondfrancis]

🥰

[@MrShaheer]

You could also use JS on the SERVER SIDE in the early days of web programming in 1999! long before NODE.JS was a thing (IIS supported it. ). You could also write STYLESHEETS with JS. Those were called JSS instead of CSS (Javascript Style Sheet).

[@Eloii_Xia]

JSS is a bad thing !

[@jefestar]

an all frontend and backend in vanilla javascript would be 🔥

[@MrShaheer]

@@jefestar oh yeah. It could have been that, but the support wasnt good enough, only Microsoft supported it and their version wasnt as powerful as Node.

[@eugrus]

​@@jefestarif that emoji stands for hell 😂

[@jefestar]

@@eugrus 😂

[@3WR6f3]

hell yea can't get enough of php!!

[@dfrontierit2114]

I have been using pure PHP for the past 12 years. All modern frameworks seem so complicated and just reinventing the wheels, by the way these frame works just come and go with the trends. Also the frameworks seem to just cater to the capabilities of the moment whereas all the modern cool features yet work best and simple on pure codes. Also I am literally able to code out a project by the time a person tries to setup and configure frameworks. The long way worked well for me after all than the shortcuts and trends.

[@hamidimomov232]

Awesome 👍

[@alaminjumamagoti504]

Aoran what tool do you use to record both the screen and your face ?

[@aarondfrancis]

Screenflow!

[@kamalkamals]

Finally php team weak up , but i guess it still limited and the data binding already exist on other language programming like c# with reactivity value of each variables like in your video, hope in the future php team make more changes :) good video keep up.

[@FelonyKNviction]

Not a php dev but I still think this is pretty awesome

[@abinciberciber9192]

What's the impact on the server side in a application that holds more than 1k users, or much more, simultaneously?

[@aarondfrancis]

State is serialized and sent to the front. There's no long-running process! PHP is still created and destroyed on every request.

[@celebritydev1]

I use livewire but when performance matters, I use react. Between, great content.

[@cbbcbb6803]

Keep up the good work! We should be able to use any programming language in the browser. LiveWire for C++ or Fortran? Why not? 🤭

[@Rockodona]

Laravel really is pushing great dev experience. I worked 2 years with Symfony, it's a terrible abstraction hell. Great to see PHP gettin some good love by Laravel. This looks fire

[@greekapostle4548]

I really have the same situation . I know laravel and typescript but at my work the core system built with symfony 3 with multiple databases . Im so confued with symfony i guess it is hard and dont have clear documentation what you do advice me ? I really have hard time with the company enviroment but i can not do anything cause it is my first job

[@thedazman67]

Things have been much improved with Symfony 4 onwards

[@zorokutend]

@@thedazman67 It's ok if the project is newly created with Symfony 4. Upgrading and migration is always a pain in the ass. I hate that part of my work.

[@nevyanplamenov5409]

@@greekapostle4548 Well, if you are not in dire need for money, better leave that job and look for another one. No point in torturing yourself working in hostile environment

I really like symfony. OK, i just used it in very small projects and the version was 5 and above. What I like is: It is nearly the same as spring boot in java or NestJS in Typescript world. The ideas are great.

[@LanceBryantGrigg]

This could really catch on for the right app. I suspect people will prefer not to have the automagic for some cases; I am curious too see what happens.

[@user-ks2ic5nk2y]

i just love PHP , i never understand why it doesn't get the glory it deserves,

[@aarondfrancis]

That's why I'm here! 🫡🫡🫡 We'll return PHP to its rightful place at the top

[@user-ks2ic5nk2y]

@@aarondfrancis with you all the way sir,