The Modern Index.php File

Рет қаралды 15,887

2 ай бұрын

Have you ever wondered what single file components would look like in a Laravel application? Livewire Volt brings back the glory days of a single index.php file and allows you to write Livewire logic and your Blade markup all in one file.
Join us as we take a brief look at what Livewire is, what Volt is, and the flexibility that Laravel provides in your application.
About Volt:
Volt is an elegantly crafted functional API for Livewire that supports single-file components, allowing a component's PHP logic and Blade templates to coexist in the same file.
Links:
Livewire: livewire.laravel.com/
Volt: github.com/livewire/volt
Volt Docs: livewire.laravel.com/docs/volt

Пікірлер: 87

@JohnnyBigodes 2 ай бұрын

Just one thing for the future... Always show the artisan commands... For example you didnt show the command to have a class based component, but you showed it when you switched to the non class based one. You also could show that the class doesnt have to be on the same blade file and can instead be on its own php file. It is a bit better to follow. Besides that you make awesome videos and you are a great addition to the Laravel world. Thank you

@LaravelPHP Ай бұрын

Thank you for the support and for the suggestion. I appreciate it and I'll try to improve that in the future to show everything instead of just after the fact. Hopefully it did come across in the beginning talking about how Livewire works that the class and the blade separated is the standard way of doing things within Livewire (without Volt). Thanks! :) -Josh

@mnchabel8402 21 күн бұрын

Volt is a game changer, 1st day I used it I just got hooked

@LaravelPHP 21 күн бұрын

Same for me! -Josh

@lougarcia28 2 ай бұрын

I love livewire (and vold)... but this functional approach is not for me. I mean how can you say this is readable: state([ 'some_var' => 'some_value' ]) echo $this->some_var; "$this" is suppose to represent an instance of a class in PHP. No class is represented in the code base. ... sure, my example did not enclose the call to "some_var" inside a function, but still...

@isaachatilima 2 ай бұрын

I agree with you. The class approach make a lot more sense

@Lopoi 2 ай бұрын

Yeah, I agree with this. if instead of '$this' they could do '$state' or just use the variable itself could be better imo. Or if we are going on the react route, might as well do 'setSomeValue' already.

@lougarcia28 2 ай бұрын

I just realized... Livewire probably reads thru the file and creates a class(then object) based on it's contents. It leaves everything inside the tags, so state could be a method to create properties for the class. Calling the properties with $this now makes sense. But still not readable. $state as an alternative or a stand-in to $this makes more sense with how the component is coded.

@LaravelPHP Ай бұрын

I personally prefer the Class approach myself. BUT for those unfamiliar with PHP or even class-based languages, the functional API might feel for familiar or readable. But, that's why we have options (even if you choose not to use Volt entirely). :) -Josh

@DCBlogdev 2 ай бұрын

great video, I haven't played with volt enough yet looks very odd but kinda cool.

@LaravelPHP Ай бұрын

I love that mindset! It can be cool if you want to scaffold out a quick idea without committing to much in your code (one file). :) -Josh

@hectorcenteno7315 2 ай бұрын

Bringing spaghetti code back to the future !!

@LaravelPHP Ай бұрын

Only if we choose to write spaghetti code. But the benefit of Laravel is having the flexibility to choose whatever front-end works for the particular project we are working on at any given time. And if you just wanted to build one component in Volt where it might stay small, then you can do that too without changing the rest of your code structure. :) -Josh

@hectorcenteno7315 Ай бұрын

@@LaravelPHP yeah absolutely, but the must efficient way to write spaghetti code is to have the freedom to do it.

@sentgine Ай бұрын

Using Volt is a great way to build small, self-contained Livewire components. It's not designed for creating large components with lots of backend tasks. In the React world, Volt components are similar to server components. I really like it!

@LaravelPHP Ай бұрын

Great point! I look of Volt in a similar way where it allows me to scaffold out features as quickly as possible and break them up into smaller components, when needed. :) -Josh

@sentgine Ай бұрын

@@LaravelPHP I couldn't agree more!

@michaelbrauner 25 күн бұрын

Thanks for the great video! The functional api looks really slick. It's great what you're doing. One question - what's behind you on the wall in the three picture frames? I can't see everything.

@LaravelPHP 23 күн бұрын

Thanks for watching! :) Those posters are some of my personal mottos: "Create Consistently, Provide Value, Learn Out Loud." -Josh

@angelHighTech Ай бұрын

First of all, I would like to thank Laravel and its entire team. Then, I would like to say that I love PHP and it will never die haha. I think it's a great idea to create your own packages to reuse them in other projects. Why not a store-style like Composer for classic components that are repeated each time with simple logic and easy implementation documentation that could speed up the creation of web applications! Now all that's left is to touch on mobile haha.

@fmgchannel5650 2 ай бұрын

Yeah this is good, some people maybe use it but I'm like the oldy way

@LaravelPHP Ай бұрын

I love this mindset. Thank YOU. I prefer the Class Volt style myself, and the flexibility we have in Laravel is a HUGE benefit. We can build awesome things no matter how our code structure looks or what tools we use on the front-end. :) -Josh

@AntoRex78 2 ай бұрын

In the react components you can pass states as a props to the child components. Can we able to achieve same here in volt?

@Nat-ih9oe 2 ай бұрын

Yes you can, you can pass props to nested components.

@AntoRex78 2 ай бұрын

@@Nat-ih9oe cool, child component will re-render if props updated?

@devhammed 2 ай бұрын

@@AntoRex78 Yes, you can use reactive properties: state(['todos'])->reactive(); This will receive todos as a property from the parent and also the child will be updated when that change in the parent.

@1234matthewjohnson 2 ай бұрын

to me, it seems like the whole volt thing is kind of bucking the trend of MVC. i guess it has its use cases but it will quickly become spaghetti nightmare on a decently sized web app.

@LaravelPHP Ай бұрын

I think any coding structure has the ability to become spaghetti nightmare. But I do think that the benefit of Volt (like you mentioned) is the ability to scaffold out or quickly prototype a feature without having to do much work. Plus, it could be a great entry-path to folks coming from the JS world. :) -Josh

@lnplum Ай бұрын

As a React dev learning Laravel, I appreciate having the option but given the limitations of tooling support for this, I'll probably rather use class components. The only thing I'm really missing is the power of Typescript.

@LaravelPHP Ай бұрын

It's definitely something that we (Laravel and the community) are aware of. I definitely understand that. :) -Josh

@kemal6039 2 ай бұрын

Hey Josh! It's great to see you in the official Laravel channel. I have a question about single file components. I try to apply SOLID (mainly SRP) principles to my apps as best as I can. And I feel like putting logic into a component is kind of violating the Single Responsibility Principle. As far as I know, you need to put your resource methods (index, show, edit...) together, in the Controller file. Even though it's so cool to use Volt in simple apps like a todo list, I'm not sure how useful it would be in a more complex app. Am I wrong in thinking this way, or does this have a solution I'm not aware of? I'm not at all a professional in Laravel, these are just my opinions and things I've heard from tutorials and courses. I just wanted to hear some opinions on this.

@LaravelPHP Ай бұрын

I think the benefit of Volt in a more complex app is having to think critically of when and where to extract out functionality into separate components. Build things out in Blade/Alpine and only extract to Volt components when you need server interaction. Of course, you can still build apps with traditional MVC/Livewire and use a Volt component to prototype a feature. The possibilities are endless and the flexibility hasn't changed. :) (Also thank you for the support. Super happy to be here.) -Josh

@afolabiabiodun7582 Ай бұрын

Nan... this can go for a small project and not a sophisticated project. @josh can you make endpoint with this?

@LaravelPHP Ай бұрын

An API endpoint would still be handled in the Framework itself and wouldn't be how you would use Volt. :) -Josh

@TheKennyWorld Ай бұрын

Volt it's a great idea! Before we could have everything in one file but in the class and now also in the template, make sense. The functional syntax looks terrible though.

@LaravelPHP Ай бұрын

I like the class syntax myself, but I know the functional syntax appeals to a lot of folks. It's great to have options. :) -Josh

@srhanzd3022 2 ай бұрын

😍😍😍

@bobbybonillapayday 2 ай бұрын

This was excellent! My question, though, is how would SEO and site performance be affected against something like a laravel-inertia-vue app with ssr? Like anything seems like it has excellent use cases, but coming from that aforementioned stack, this seems very promising

@LaravelPHP Ай бұрын

This would all be Server rendered so no issues with SEO and site performance. There are some fun options within Livewire 3 for navigation helpers to try to achieve a SPA feel without being a full SPA. Overall, use what works for you and build beautiful things. :) -Josh

@finnalpha Ай бұрын

I'm done when he wrote a class above a div

@perfect.stealth Ай бұрын

As someone who never used Livewire i wanna say it looks approachable because it reminds me of Vue that i use for every project. However i dont see the reason to use this instead of something like Inertia

@LaravelPHP Ай бұрын

I'm glad it looks approachable! I think that's the goal. To make a style like this seem easy to use for people who are used to Vue/React/Svelte. And it's not meant to replace Inertia by any means. Just another tool in the toolbelt. :) -Josh

@perfect.stealth Ай бұрын

@@LaravelPHP you guys really nailed it on that one I must say.

@perfect.stealth Ай бұрын

@@LaravelPHP and thank you all for your service. For making top class software that are free to use. You guys literally carry my career ❤️

@hamiha Ай бұрын

feels like Wordpress?

@gocanto 2 ай бұрын

Imaging this mess in a big team 😂

@LaravelPHP Ай бұрын

I think it could be a mess whether with traditional MVC/Livewire or with Volt. But the benefit comes down to the speed of prototyping features. :) You don't have to solely use Volt components in your application. It's why I think the flexibility of Laravel is a strong suit. -Josh

@harishst202 2 ай бұрын

Are we going back to the Old School Web Development? 🤔

@LaravelPHP Ай бұрын

Nope. The web is in too good of a place to go back. But, I think the Single File Component piece is very appealing to folks coming from the JS ecosystem who are interested in checking out Laravel. The benefit of having a ton of flexibility with how we build amazing apps in the framework. :) -Josh

@user-tb4ig7qh9b 2 ай бұрын

If you do not familiar with laravel dd stands for var_dump() and die; so it is not like console.log

@LaravelPHP Ай бұрын

Good point. I probably should have clarified that like JavaScript folks might use Console.log to help debug as they go, DD helps do the same, even though it is not the same in how it works. -Josh

@user-tb4ig7qh9b Ай бұрын

@@LaravelPHP I am not a laravel developer but dd and dump just a fantastic tool it is like a orange lambo

@user-tb4ig7qh9b Ай бұрын

@@LaravelPHP console.log it just handy on browser when you use it in server you need to import util module and format things

@balodoc 2 ай бұрын

nit for me bruh

@LaravelPHP Ай бұрын

Completely fine! I think that's why Laravel is so fantastic with having options for how we build amazing things. :) -Josh

@balodoc Ай бұрын

Not even impressed, I’d rather use Symfony

@perfect.stealth Ай бұрын

@@balodoc then use Symphony

@tonyalvesengenharia 2 ай бұрын

Why all you guys use hats?? Is that a Pattern?

@EvandroVVarela 2 ай бұрын

Baldness

@LaravelPHP Ай бұрын

That's a good question. 🤔

@3dxspx703 2 ай бұрын

So if you're kinda fan of react, then you'll love this, I guess? But still, volt approach is just a syntactic sugar. Is laravel delving away from its MVC structure? Pfft

@scott_itall8638 2 ай бұрын

Think its just allowing people to stay with current trends, all the frameworks are tending to lean towards to same conventions.

@AntoRex78 2 ай бұрын

Yes, 💯

@LaravelPHP Ай бұрын

I don't think it's delving away at all. Rather expanding opportunities for people to learn and experience Laravel. The flexibility given within the framework has never been greater and for those coming from more of a SFC approach (React/Next, Vue/Nuxt, etc.), this might be a great option if you don't prefer to use MVC structure with Inertia. But use what makes sense for YOU and build beautiful things. :) -Josh

@DivyankKabra-fj8vj Ай бұрын

I am using livewire volt but on the server is return 404 on the click event. can you please help me in this

@isaachatilima 2 ай бұрын

I am having a challenge changing layout using class api. Someone help me, I am running out of coffee 😭

@LaravelPHP 2 ай бұрын

The Layout attribute would be added after the "new" keyword. Here's an example in the docs: livewire.laravel.com/docs/volt#class-based-volt-components Hope that helps. :)

@LarryGarfieldCrell 2 ай бұрын

"This looks super real." - Um, because it's the same thing you had before, but not inside a class? That makes it real? That's... yeah I'm assuming you just misspoke because every interpretation of that sentence I can think of is unflattering.

@LaravelPHP Ай бұрын

I think you might have misheard me or I didn’t speak clearly. “This looks super readable.” I think Volt Functional API helps bridge the gap for people who have lived outside of the PHP or even OOP world for some time and, to most people, the functional API is more readable than class-based structure. - Josh

@LarryGarfieldCrell Ай бұрын

@@LaravelPHP Functional or procedural? Because if it's causing persistent state changes then I challenge that it's functional, because the functions aren't pure. (It's really common for people to confuse those terms.)

@nulljeroka 2 ай бұрын

Nah I think is not only horrible but a shoot in the foot bad idea to have all in one file. Let's not become React Pls. We; PHP community should know better.

@lasarkolja9692 2 ай бұрын

Comming from Sveltekit, I really like this way 😇

@daleryanaldover6545 2 ай бұрын

This is not really from react server components, everything started with svelte component. Vue copied it, then react followed. All in all, this is a better pattern.

@LaravelPHP Ай бұрын

I don't think it's trying to become like React, but rather giving more flexibility and options to how we build beautiful apps within the Laravel ecosystem. Some (like myself) might prefer the SFC approach while others love the MVC approach with or without traditional Livewire. :) -Josh

@nulljeroka Ай бұрын

@LaravelPHP Fair point. I still think the SFC is inherently defective. I think if we take a look at some of the worst takes on JS land, it all comes from unnecessary optimization and an absurd quantity of syntactic sugar in which you have hundreds of approaches. Many of them sub-par. I personally think this is not innovation. Battle tested technology is labeled as boring because there are solid and proven reasons to adhere to simplicity and reliability. SFC, in my opinion, is bad takes. Once you're dealing with a non-trivial component, it becomes absurdly complicated and messy, which is why I favor separation of concerns SoC principles.

@wizamit 2 ай бұрын

Very bad variable and function names. Makes this video uneeserily confusing. 😅

@LaravelPHP Ай бұрын

That's a great point. We will seek to make that more intentional in the future. :) -Josh

@viperpeter001 2 ай бұрын

single file for logic n view is always a bad idea very bad idea

@jokokentir666 2 ай бұрын

agreeee

@unsignedchar000 2 ай бұрын

cringe

@AliAwwad 2 ай бұрын

What if you need to store field value without waiting for all form to be filled then submit ? Single file with update method for specific field such as profile image makes sense

@jmon24ify 2 ай бұрын

It depends on how you use it. It can definitely lead to bad discussions if you don’t encapsulate your components in a reusable fashion using patterns found in frontend frameworks like vue, react and svelte.