PHP on the frontend! No more Javascript!
ฝัง
- เผยแพร่เมื่อ 6 ก.ค. 2023
- 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 - วิทยาศาสตร์และเทคโนโลยี
aaron makes me love php
Pinned it
Laravel is NOT php.
@@orenders you can't run laravel on c#
@@dputra goteem
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.
"Have you ever had a thought..". None, I have a zero thought policy.
Even thought I don't use PHP, your videos are entertaining!
Zero thoughts, zero suffering. You may be onto something here
Fellow Laravel content creator here, absolutely love your style of video.
You have really nice personality & charisma in this video, keep it up man!
That means a lot to me, thank you so much!
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.
What tech stack do you use for your career now?
@@ryanlak1234 I'm in mobile development now. Mostly iOS development with Swift.
Another great video! Livewire is honestly so cool and magical.
Keep up the great PHP/Laravel content!
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!
Your style of explanation makes the topic more interesting. Great !!!
That's nice of you to say, thank you!
After each video that I watch from you, I have a big smile on my face. ❤
been waiting for Livewire v3.0 so long...
Your videos are the best. :)
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
I too am hopeful! Best of luck
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.
For anyone using Symfony, Symfony UX works similarly and has support for vue/svelt/react components too
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.
Enjoy!
Also worth a look for backend lovers: HTMX. Its functions very similarly, but is not tightly coupled to any particular backend language.
That was the first thing that came in my mind. Is it similar to htmx. 😊
@patricknelson Laravel + htmx is my next experiment, full-on!
Great!!! I wanna start to learn php and your videos helps a lot! tks man =D
Life changing :D Great video .. thanks a lot ! *Loving PHP for 20 years now.
This is the first time i feel like hitting the like button more than once on a TH-cam video 😊
I just fell in love with PHP. Thank you Aaron!
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
Bro this guy talks to me like I'm a toddler and I'm here for it, love the vibes
Love your sense of humor and content. Subscribed!
cool. just watched two of your vids. contents' both entertaining and educative. your explanation's very easy to follow too
great stuff. livewire is fun. now, more devs can have fun with livewire. keep it up
Oh, wow, this is like PHP and JavaScript had a child, love it 😙
Thank you so much for this. I would love more tutorials of maybe building a project from start to finish
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!
I love PHP!
Thanks for loving even more!
This is actually mindblowing. I cant believe i'm hyped to learn php
Wow you're a really good teacher!
Thank you. That means a lot
You speak with so much conviction😃.
I would like to see an overview of PHP for backends/APIs
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.
laravel protect it.
@@yoskokleng3658 How ? can you tell us more about that ?
@@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.
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
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.
very strange comment, we allready as several years use php 8
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?
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.
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.
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!
That’s what WASM is for.
@@Stopinvadingmyhardware What does that mean? Are you saying use WASM for managing state?
@@TheSaintsVEVO Why are you managing state machines in browsers? That’s the opposite of secure
@@Stopinvadingmyhardware UI state
Very interesting, I don’t know php but this is pretty neat concept
I love Livewire it’s all a php dev needs!!
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.
You can still kind of do that with wasm. Like PyScript does to execute python in the front end instead of javascript.
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).
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_.
@@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.
@@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 🤷
I am an "anything but JavaScript" type of guy. I welcome this.
Thanks Aaron for share useful content👍👏👏
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
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 ❤
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
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.
As a nextjs dev, Angular aint bad, php is on its own level of being bad
@@thedailycutline278 It's still better than JS
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.
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!
this framework built on top JS. So it never execute faster than JS. This framework hides JS implementation. Like Blazor.
@@davidstephen7070 blazor wasm is different if I understand correctly, they have their own "shadow DOM"
The advantage of PHP is that hosting is so cheap. With this technology it becomes even more interesting! Thank you
Very interesting. Might have to finally check out laravel properly now
Ladies and gentlemen... we got him! ❤️
Your videos are awesome! Would love more Laravel+Livewire content :D
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
That was awesome! Thanks Aaron!
The fact that livewire is made with tailwind too is the bomb
Omg that's amazing, thanks for sharing 😊
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.
Yeah I wish there were more PHP jobs as well. You might check out larajobs.com if you're open to remote!
@@aarondfrancis Thank you I will check out the site.
I have done in a project last year and i was quiet surprised how good that was , still have some improvements buts its great .
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.
I love this livewire thing!
Laravel Blade has this for some time, great to see expanded in livewire!
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.
The vibes are shifting. We're so back!
Turbo frame are something incredible!
@americanhero3881 What is it you don't enjoy with Rails?
@americanhero3881 Oh okey, their design regarding the "convention over configuration" can be hard to work with if you don't fully grasp it.
Not a php dev but I still think this is pretty awesome
Totally love the “hit the dislike button twice” part! Thank you for the great video on this topic!
and the poker face while saying it - niceeee
Awesome video Aaron! I wonder if there is any way to write PHP that runs in the browser?
nevermind, I watched till the end and I quite like the alpine.js approach.
TALL STACK for eveeeeeer
Calm down fascist…😂
Just kidding TALL stack is pretty cool even though I’m a VILT stack kinda guy
Hey Aaron, thanks for sharing! But what is the big difference between Livewire component and normal blade component?
A Livewire component has a bunch of magic that makes it "reactive" and a blade component does not
@@aarondfrancis Thanks :)
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
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...
i just love PHP
, i never understand why it doesn't get the glory it deserves,
That's why I'm here! 🫡🫡🫡 We'll return PHP to its rightful place at the top
@@aarondfrancis with you all the way
sir,
Really i liked your video 💖💖
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!
You made it! I'm here! Glad you enjoyed the course 🤗
I'm really loving what HTMX's doing...
Same!
Please just make a course on PHP and Laravel, your way of explaining things it´s awesome man!!!!!
what is the advantage of making multiple http requests to change an input value instead of using javascript to do that ?
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.
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...
Inertia is great! I'm a big Inertia fan
Looks good for simple pages.
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.
Been using Livewire for an year now - its fantastic!
Awesome! Way overdue.
I use livewire but when performance matters, I use react.
Between, great content.
Yikes, this seems kind of crazy. Needing to go to the sever for every minor change feels like a huge over reaction to JS. These sort of changes are really the concern of the client, not server
Eh you can still do stuff on the client, not everything requires a round trip. It's just like Liveview or Hotwire
@@aarondfrancis gotcha, well that’s good at least. Thanks for clarifying!
my plan was using redis at the backend pairing session id and value for glabal state management and frontend alpinejs , buti ll giive a chance to livewire
As a php developer who now does Angular, this looks so familiar.
Yes! Very similar syntax
Did you saw PHP in a sandbox enviroment with WebAssembly?
They did that a few weeks ago.
Great video
Aoran what tool do you use to record both the screen and your face ?
Screenflow!
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.
I would like to have seen the extra download cost of Livewire and Alpine (how big, or not) are they?
Alpine is teeny tiny and so is Livewire. I think Alpine is like 7kb gzipped or something silly like that!
God its so nice to hear someone talk good about PHP. I work with Java developers who only ever talk shit about PHP and I'm so over it.
Honestly I got tired of people talking trash all the time so I decided to start a counter-influence campaign
@@aarondfrancis I was wondering if you were being serious or sarcastic when you said “never hearing anyone say anything bad about PHP.” Lol!
Personally, after 10 years of working with PHP and a few years on the PHP Internals mailing list seeing how the sausage gets made I then discovered GoLang and experienced how great it is to be able to re-factor knowing that type safety has your back. Also, with finding my new skills in high $$$ demand like they never were when working with PHP, I cannot imagine ever doing PHP work again.
Not saying you are wrong to work with it or like it, just that I am enjoying coding again in a way I haven’t after my first few years with PHP. #fwiw
P.S. I watched your video not to slag No PHP but instead because I wanted to see how it was possible to do PHP on the front end. My take away is that it is not! The PHP is still running on the server and not in the browser. But, it is an interesting approach even though the title was click-baity! 😄
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).
JSS is a bad thing !
an all frontend and backend in vanilla javascript would be 🔥
@@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.
@@jefestarif that emoji stands for hell 😂
@@eugrus 😂
Great Video
"No more javascript" made me subscribe.
PHP is the best language for Web !!! You can build frontend and backend easy, more fast respect React
This is the first time that PHP makes me excited.
I am subscribing to this channel because the word PHP
I won't let you down
it's really a nice information
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.
Thank you very much!🙏
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.
I got an php internship do you think it's worth? Plus i know only the basics and never worked with a framework.
Any coding internship is probably worth it! Getting your foot in the door is invaluable. You can always change tech later if you need to (I haven't ever needed to)
We are about to start several new projects. I was going to use laravel+Reactjs. But this option is very interesting.
If you're looking at Laravel + React, do look at Inertia.js for that too
@@aarondfrancis thanks, I will do.
Best Explanation
I think, I am living in an era defined by "War of the Frameworks". You wake up every morning and find a new missile. Anyway, being from PHP background, I believe, we engineers love to make things fancy and complicated when it can actually be achieved in a much simpler way.
So gorgeous, I think I'll switch form Symfony to Laravel...
This is cool! But, it exchanges a lot of data between the client and the server. It consumes a lot of bandwidth or did I get it wrong?
It's not very much bandwidth, state is pretty minimal. You just have to be thoughtful about which interactions go to the server.