0:00

All right, let's just go. I'm in

0:02

a new Airbnb. Literally, we

0:04

arrived last night, late, and it was

0:07

a ridiculous scramble, unpacking our

0:09

entire lives from a van,

0:11

and our guests arrive in like

0:13

10, 15 minutes. So I'm gonna end

0:16

this as soon as somebody walks through

0:18

that door. My life is very

0:20

hectic right now, but it is fun.

0:22

And I really hope I didn't just

0:25

hear River, because I'm trying

0:27

to record a podcast about.

0:29

Let's fix live wire. That's

0:31

so funny. The, the, the, the,

0:33

are you going to be as

0:35

next to a dumpster, which is

0:38

just our luck, doesn't smell, fortunately.

0:40

It's beautiful. Like what I'm looking

0:42

at right now is gorgeous. Like

0:45

there's a pool in the back,

0:47

the sun is shining, there's hedges

0:49

all around us, but right above

0:52

the hedges, you can see a

0:54

big, like, like, a truck lift

0:56

up a dumpster city. No,

0:58

it's nice. It's fun. It's good. This

1:01

is gonna be beautiful. So much

1:03

better than dreary freezing buffalo right

1:05

now. Okay. What I'm trying to

1:07

do is record an episode on

1:09

fixing LiveWire because the Primogen streamed

1:11

using LiveWire and Flux for like

1:13

eight hours the other day. The

1:15

point of he was doing it

1:17

for Laerville Cloud, but like they

1:19

needed to make a little interface

1:21

in their app and they used

1:23

LiveWire and Flux. So it wasn't

1:25

like a let's learn about LiveWire

1:27

and Flux. It was like a

1:29

let's use Laerville and Laerville Cloud.

1:31

They just happened to use these

1:33

tools. So it's not like... I have

1:35

notes for myself. I got a glimpse

1:37

of like what newcomers would run into

1:39

and that I really want to pay

1:41

attention to and there are things we

1:44

need to fix. And also the other

1:46

thing is everybody's mad that Volt is

1:48

in the starter kits and it's not

1:50

just plain live wire, which is kind

1:52

of perplexing to me, but the point

1:54

of this is not to be mad

1:56

at everybody for being mad. It's to

1:58

fix these problems so that people... aren't

2:00

mad, but again, like we established yesterday,

2:02

you can't just, the goal can't beat

2:05

for people not to be mad when

2:07

you change something, because inevitably, when you

2:09

change something, or when you try to

2:12

move a community forward, there will

2:14

be holdouts, there will be people

2:16

resisting that change, it will be

2:18

bloody. Think of react moving from

2:20

class-based to functional. That

2:22

was huge, and so many people were so

2:25

mad about that for so long. And

2:27

I don't know about, I

2:29

don't think anybody uses class

2:31

space anymore, nobody wants to,

2:33

the functional is great, whatever.

2:35

View may be the same thing. I

2:37

bet people are overall the like, the

2:39

anger over the view composition API change,

2:42

whatever. People are gonna be mad, they

2:44

just are, whatever. But okay, let's solve

2:46

these problems. So first off is the

2:48

vault thing, let's just tackle that head

2:50

on. I don't know, I need to

2:52

figure, I... Mentioned this at the last

2:55

layer of kind. I've mentioned it on

2:57

here. I've mentioned it on no point.

2:59

I've mentioned this so many times But

3:01

to me it is like inevitable This is

3:03

what we need to do is part of

3:05

this is just more names people don't like

3:07

names We talked about that yesterday. They're mad

3:10

that there's so many names. What's live wire?

3:12

What's vault with blah blah blah blah? We

3:14

need to just get rid of the con-

3:16

we need to basically bring Volt back down

3:18

to what it started out as, which was

3:21

like a passion project for Taylor to have

3:23

like a functional single file syntax close to

3:25

like views composition API. We should bring it

3:27

back to that. Because some people like that,

3:29

I'm not a fan of the functional

3:31

syntax. I'm not a fan of the

3:34

functional syntax. So we just stick with

3:36

the class-based file is literally. It's the

3:38

same. It's just like you took the

3:40

two files and you mushed them

3:42

into one. You could copy and paste that

3:45

vault class into a different file. Now

3:47

it's a live-wire class. Like

3:49

literally, you just extend live-war

3:51

components instead of vault component.

3:54

Public properties, attributes, methods, computed

3:56

props. The whole thing. It's

3:58

all of the things right there. But what we

4:00

need to do is introduce, uh, just

4:02

dissolve the name volt for that type of

4:04

thing. So now there's no more like

4:06

ships with volts. It's just like it's live

4:08

wire live wire. You can create a

4:10

component in one of two modes, single file

4:12

mode or split file mode, but it

4:14

all starts with a blade component. You have a

4:17

blade component. And at the top there's at wire,

4:19

it's a blade directive. You can pass in the

4:21

class name. If you want it to be,

4:23

if you want the PHP to be in a separate

4:25

class in a different file in your app name space,

4:27

pass in a class name to that blade file. Now

4:29

you're good. Alternatively, if you want

4:31

to do it in line all in

4:33

one file at wire and then just write

4:35

your code and then end at wire or

4:37

at end wire, you know, so it's just

4:39

kind of like the equivalent of that PHP block

4:41

that's in volt right now, except we're just

4:43

going to call it at wire. This

4:46

is just like, um, they have

4:48

in Swift UI and it's sensible.

4:50

And then people can just opt

4:52

in or out as they please

4:54

and then problem solved. Nobody in

4:56

my mind will just make it so that nobody's

4:58

mad about volt because it won't even be a

5:00

different thing. It'll just be like, nobody's

5:02

going to be like, we hate that

5:04

in the new starter kits, all the,

5:07

all the live wire components are, are

5:09

in line. Like they're all at wire with,

5:11

with the class in line instead of

5:13

in a separate class. Like nobody's going to,

5:15

maybe three people will complain about that,

5:17

but everybody else will just be like, they

5:19

won't feel the thing that right now

5:21

people feel like they're going against the grain

5:23

to do what they want to do,

5:25

to use their separate classes. They feel like

5:27

you're setting a precedent and I don't

5:29

want to go against that because you're sort

5:31

of, and I'm, I'm that way too.

5:33

I love the happy path. So what we

5:35

need to do is just make, make

5:38

their way, not feel like it's violating the

5:40

happy path is what we need to do.

5:42

Okay. Cause I like the single file

5:44

thing for most components. When they get too

5:46

big, I break them out totally. I

5:48

like that. That's the way it

5:50

should be thought of. Keep them in the same

5:52

file. If it's simple, break them out. If you

5:54

don't, if it's not simple. Okay. So

5:57

that's one solution that needs to be

5:59

done. period. What else needs to be

6:01

done to fix this stuff? Well, I mean,

6:03

that's really the big thing I think that

6:05

needs to be done from as a reaction

6:07

to all the Twitter drama that I woke

6:09

up to this morning. That's

6:12

the thing that needs to change. Now,

6:15

let's talk about LiveWire

6:17

more broadly. There are other

6:19

things that need to change based

6:22

on the Primogen stream and things I

6:24

saw him get wrapped up in.

6:26

So yes, the word volt is confusing

6:28

for people. I think we think

6:30

we should absorb volt into LiveWire, not

6:32

make it a separate name, not make

6:34

it a separate concept so that

6:37

newcomers aren't confused. He was a

6:39

little confused by that. Yeah,

6:42

whatever. There's ways of using volt that

6:44

I'm not that into, wrapping,

6:47

taking a normal blade vial and then

6:49

just wrapping part of it in at volt.

6:51

It's a little confusing for people. I

6:53

think people need just, I don't

6:55

know. Okay. This

6:59

was actually interesting. In the moment,

7:01

Taylor assumed that WireModel, that he

7:03

needed WireModel debounce because otherwise it

7:05

would send requests too much as

7:07

you type and that's just not

7:09

the case. Like WireModel in LiveWire

7:11

3 is not that way. Like it

7:13

doesn't send any network requests. You

7:15

could type in every field in

7:17

a form and everything is wire modeled

7:19

and you will send zero network requests

7:22

until the submit button is hit or

7:24

whatever and then it'll only send one

7:26

network request. That was a huge, huge

7:28

shift in LiveWire v3 that I needed

7:30

to make to cut down on network

7:32

requests and make it more just like

7:34

normal JavaScript apps. Okay,

7:37

let's see what else. They added back

7:39

end, oh, they didn't, well, they're smart. This

7:41

is one that they actually knew to

7:43

do. They added back end authorization

7:45

inside their LiveWire methods, but newcomers don't

7:47

necessarily think they need to. This is an

7:49

area that you, I try to put

7:51

documentation around this, but you could get tripped

7:53

up where like picture you have a

7:55

blade file, like a LiveWire component of blade

7:57

file and you have like, that

8:00

if in blade is admin and then

8:02

a button that says wire click do

8:04

something dangerous and then you have that

8:06

do something dangerous method in your live

8:08

wire component well people can actually still

8:11

call that method they would just do

8:13

it themselves you know and people don't

8:15

always realize that but they did when

8:17

they they're their programery enough that they

8:19

were like okay this backend code that's

8:21

like dangerous is I shouldn't just rely

8:23

on the template blocking it. I should also

8:26

add back-end authorization. I'm super glad

8:28

they did that and they thought

8:30

to do that, but it did

8:32

flag to me that like, these,

8:35

again, these are like very, very,

8:37

it's like basically the top three

8:39

programmers, I don't know, they're like

8:41

really good programmers. And they

8:44

almost didn't do it, but they

8:46

did do it. So we should make this

8:48

so that people don't do that.

8:50

Also, there's so many like misconceptions

8:52

around live wire. based on the way

8:54

it used to be. And that's frustrating,

8:57

but whatever, just a few. Mainly like

8:59

that wire model thing that was a

9:01

little frustrating and then also somebody in

9:03

the comments was like be aware that

9:05

live wear leaks all this sensitive data

9:07

about your eloquent models and it's like

9:09

dude that was so v too bro.

9:11

We don't leak anything except the ID

9:14

and I think the class name we

9:16

do we leak whatever wouldn't already be

9:18

leaked by like other live other layer

9:20

of all packages that serialized models eloquent

9:22

models. I think Eco does that I

9:24

don't know Jobs do it but that's

9:26

in the back end. All

9:29

right, Taylor thought that you had to bind

9:31

value so like colon value on an

9:33

input as well as wire model just to get

9:35

it to load like when the page loads

9:38

and that's wrong It's just just wire model.

9:40

It's all you need but he realized

9:42

that later on I don't know if somebody

9:44

told him or he just like remembered whatever

9:46

but yeah like and Taylor is not like

9:49

a full-time live where person's not even that

9:51

much of a front-end person So some of

9:53

these things are like, oh yeah, I mean

9:56

the guy wrote blade blade he invented blade

9:58

Of course he's going to think. to write

10:00

colon value equals to like seed the initial

10:02

value of an input and not realize that

10:05

you can just rely on wire model. Okay.

10:07

Oh, here's one about flux. So prime kept

10:09

being like, this doesn't look good. I

10:11

want to make it look good. Let's go

10:13

to flux. And he would like open up

10:16

flux, but he didn't like find what he

10:18

was looking for all the time. There were

10:20

sometimes he did, but I think what

10:22

he did, but I think what he wanted

10:25

is a giant. I don't actually know. This

10:27

is a whole other topic. But he wanted

10:29

more, you know? More examples. We're like, I'm

10:31

not always the best at this. I

10:33

sort of assume that people will remix things

10:36

as they please. And there are some, whatever.

10:38

There's, we need more variants. I'm always like,

10:40

yeah, you know, I'm very, very careful about

10:43

adding official variants, but what I would

10:45

really like to do. He treats it almost

10:47

like. I don't know, it's a grab bag.

10:49

He wanted to go to Flux and just

10:51

grab chunks of markup and paste it in.

10:54

And one was like a form, he

10:56

wanted just like find a form and paste

10:58

it in, but that wasn't that easy for

11:00

him. And the other one was he wanted

11:03

like a call out. We don't even have

11:05

a call out component, so we need

11:07

to have that. And he wanted like a

11:09

card variant, and so he went to cards,

11:11

whatever. He's just doing what people do, which

11:14

is like, like, like, like, like, like, like,

11:16

like, like, Look at the navigation, find

11:18

the closest thing to what you're looking for,

11:20

and just scroll around and look at the

11:23

examples until you find something that looks like

11:25

what you want, and then you copy and

11:27

paste it and then rework it. So

11:29

I need to cater to that experience more

11:31

than I do right now. Okay, let's keep

11:34

going. Yeah, Prime got tripped up because he

11:36

needed to add an exclamation point on B.G.

11:38

Red 200. So he wanted to like

11:40

override the background of a card and he

11:43

used it. It wasn't working. He was just

11:45

adding B.G. Red 200 and it wasn't working.

11:47

And I just like went in the chat

11:49

and was like, you need to add

11:51

an exclamation point because it needs to like

11:54

take precedence over the default card background. And

11:56

so some. basically you can

11:58

solve this in one

12:01

swoop by having

12:03

an intelligent tailwind merge

12:05

type situation like they haven't react

12:07

it's called tailwind merge I

12:09

think and I think Shad Cn

12:11

uses it basically like if

12:13

a class is passed in something

12:15

intelligent will go oh there's

12:17

a new bg -class being passed

12:19

in let's override the last one

12:21

or let's override the existing one

12:24

on there and let this one

12:26

you know just exist the problem

12:28

there is one of these for

12:30

PHP and I just have never

12:32

and never even entertained using it

12:34

because I can't imagine like there's

12:37

already performance issues with blade components

12:39

I can't imagine if everywhere we

12:41

ever use a class we loop

12:43

through an array we like

12:45

take a string split it out

12:47

into an array and loop through every

12:49

item and reg X every single item

12:51

like there's no way

12:53

that's performant you

12:56

know so alas

12:58

there are some hacks

13:00

around this it would be nice

13:02

to have a better story for it is what I'm

13:04

saying I don't know what the answer is it would

13:06

be great if there was

13:08

like a compile time tailwind merge

13:10

and maybe there is and

13:12

maybe that's this is this is

13:14

a problem we should solve

13:16

yeah yeah we should yes okay

13:18

it's easy to get like caught up

13:20

in being opinionated like you

13:22

could hold like well all

13:25

right shout out to Adam Wathen

13:27

for being opinionated

13:29

he is strongly opinionated and it

13:31

has worked very well for him

13:33

because his opinions are very good

13:35

but here's a bad opinion no but

13:37

I went to him with this like

13:39

problem and he's like we literally

13:41

never need the exclamation point

13:44

I think I got to go I think

13:46

people are entering my house

13:48

well let's call this

13:50

a part one all right this

13:52

is fixing live wire part one

13:54

we'll do part two whenever I get

13:56

another moment of silence I'll

14:00

be seeing you in you.