Headless WP Podcast

Exploring Nuxt 3 with Daniel Roe

March 16, 2023 WP Engine Developer Relations Season 3 Episode 14
Headless WP Podcast
Exploring Nuxt 3 with Daniel Roe
Show Notes Transcript

Daniel Roe is on the framework team for Nuxt, a Vue-based full-stack framework. Some of our most popular content is on Nuxt and headless WordPress. A new version of Nuxt, Nuxt 3, reached a stable release late in 2022. This new version comes packed with feature upgrades and Daniel has graciously agreed to join us to help us learn more about this new version of an awesome framework. In this podcast, we get into some of the following topics:
✔️ What's new in Nuxt 3 vs. Nuxt 2
✔️ Using the Composition API vs. Options API in Vue 3
✔️ Details about the Nuxt ecosystem

Nuxt 3:

Daniel's Website & Twitter:

Headless WordPress resources:


00:00:00.120 --> 00:00:01.220
Fran Agulto: To

00:00:01.420 --> 00:00:03.240
Fran Agulto: one, and we are recording

00:00:03.850 --> 00:00:16.860
Jeff Everhart: all right. Welcome to the headless Wp. Podcast. I am your host, Jeff Eberhardt and i'm joined today by my always stoked co-host, Fran Nicolto, and our guest with us is Daniel Rowe

00:00:16.890 --> 00:00:42.909
Jeff Everhart: Daniel is on the framework team for next of you, based full stack framework. Some of the most popular content we actually have on our website is based on nuts and headless wordpress. So a new version of nuts next 3 reach a stable release late in 2,022 this new version comes packed with feature upgrades. And Daniel has graciously agreed to join us to help us learn a little bit more about this new version of an awesome framework. So, Fran Daniel, how's it going?

00:00:44.150 --> 00:00:47.460
Daniel Roe: It's a it's a real pleasure to be here. Thank you so much for asking me.

00:00:47.780 --> 00:00:55.640
Fran Agulto: and you know how I am. I am super, and also the other thing is, is,

00:00:55.650 --> 00:01:14.670
Fran Agulto: I i'm he. I made him, I deemed my good friend Jason Langstow over at he's he's doing Astro. Now I think he's just a consultant there now. He used to work with me and notify. But I tend to copy this, the guest that he has on his learn with Jason Show. So I saw Daniel.

00:01:14.680 --> 00:01:33.970
Jeff Everhart: and I was like, oh, Daniel's like the view nuts Dude. I want to on our show, too. So yes, exactly, and like I was just. I was telling Daniel this right before we hit record. Like most of what you hear us talk about ends up being like next focus focused on next Js or react and stuff.

00:01:33.980 --> 00:01:46.460
Jeff Everhart: And me, you know, like I ignored react intentionally for so many years, because view I, You know, I I really found something that I enjoyed and so I don't get to talk about view enough, so i'm really excited to have have Daniel on the show.

00:01:46.470 --> 00:02:02.099
Jeff Everhart: and Daniel what we like to kind of ask everybody, just as a way to kick us off and to learn a little bit more about your background. So you know. What what did you do before Web Development? And what does that journey look like for you? How did you get into? You know Web development and working on the next framework team.

00:02:04.520 --> 00:02:10.310
Daniel Roe: Interesting question. So I think the first time I ever did anything Web related I was I was

00:02:10.600 --> 00:02:12.489
Daniel Roe: a teenager. I think I

00:02:12.680 --> 00:02:15.370
Daniel Roe: I designed a website. The my first paid

00:02:15.530 --> 00:02:18.260
Daniel Roe: thing was with I was used. I used dream weaver.

00:02:18.500 --> 00:02:22.600
Daniel Roe: and I distinctly remember Microsoft front page being involved.

00:02:22.800 --> 00:02:27.270
Daniel Roe: And like you sort of ftp stuff up somewhere.

00:02:27.290 --> 00:02:35.359
Daniel Roe: And I built a website which had heavy use of image maps. I can tell you this now, like the whole navigation with one big image map

00:02:35.680 --> 00:02:47.079
Daniel Roe: for a fashion company going to New York, and that was that was pretty fun. So I was. I was just a kid. I talked to myself at that point, but then I I went after university and studied law

00:02:47.110 --> 00:02:51.510
Daniel Roe: and did all kinds of other things. so I in fact, my

00:02:51.540 --> 00:02:55.290
Daniel Roe: the current for it into web development is much, much more recent.

00:02:55.370 --> 00:02:57.279
Daniel Roe: It was only

00:02:57.660 --> 00:03:02.709
Daniel Roe: Really, I've only been involved with with, with, not Steven for the last about 3 years.

00:03:02.960 --> 00:03:07.270
Daniel Roe: which seems hard to believe it feels like it's been a lot longer.

00:03:07.510 --> 00:03:15.139
Jeff Everhart: But the open source world moves fast fast, so i'm sure it does. I'm sure it feels like 10 years.

00:03:15.330 --> 00:03:23.760
Daniel Roe: but yeah, sorry I had a small I I had started a small creative agency, which, and that so a whole story on it. So that was a

00:03:23.960 --> 00:03:30.170
Daniel Roe: complete change from what I was doing before. But I started a small creative agency helping businesses figure out how to communicate clearly.

00:03:30.480 --> 00:03:33.350
Daniel Roe: and because I have this interest in programming

00:03:33.570 --> 00:03:35.780
Daniel Roe: it's all in my background.

00:03:35.840 --> 00:03:37.310
Daniel Roe: We started offering

00:03:37.450 --> 00:03:44.810
Daniel Roe: design, and i'd i'd do people's logo designs, and then we'd build their websites, and it was all in wordpress. I'll tell you that

00:03:44.950 --> 00:03:58.920
Daniel Roe: absolutely absolutely. I'm on home home turf, and I probably probably nothing of what I actually know is relevant anymore. But anyway, it hasn't changed in some ways. It hasn't changed that much like

00:04:00.100 --> 00:04:02.579
Daniel Roe: so well. Yes, we can explore

00:04:02.680 --> 00:04:03.880
Daniel Roe: for that, I

00:04:03.970 --> 00:04:12.100
Daniel Roe: but but yeah, and then then we built we started doing much more stuff with with with with with next, and I started helping out.

00:04:12.120 --> 00:04:15.329
Daniel Roe: We pivoted as a company into software as a service.

00:04:15.550 --> 00:04:19.299
Daniel Roe: a sort of reverse acquired One of our 5,

00:04:19.649 --> 00:04:22.389
Daniel Roe: you know, acquired one of our clients, but became them.

00:04:22.850 --> 00:04:24.369
Daniel Roe: You know what I mean, and then

00:04:25.520 --> 00:04:29.580
Daniel Roe: and then when I when we we shut down that that start up.

00:04:29.760 --> 00:04:35.639
Daniel Roe: I was asked if I would like to be full time on on next. So I'm. Currently being sponsored, actually to

00:04:35.850 --> 00:04:45.460
Fran Agulto: to be full time open source, which is fantastic, that is cool, man, that is really cool. And Daniel is kind of it's it's awesome. How you kind of

00:04:45.840 --> 00:05:00.399
Fran Agulto: segue to answer the second question because I was gonna ask you, do you have an experience of using wordpress. You obviously do. Now, do you have any experience using it in a headless fashion as well? I do. I do. I do so.

00:05:00.500 --> 00:05:05.629
Daniel Roe: So I mean, yeah, working directly with a wordpress. Api.

00:05:05.890 --> 00:05:16.459
Daniel Roe: and again, this is might be one of the areas where where my my number is a bit rusty. But but yeah, we've I I recall at at 1 point, for example, we built a a site.

00:05:17.940 --> 00:05:24.910
Daniel Roe: but build a couple of sites, I guess where clients had a the Cms. So the wordpress was was effectively their cms

00:05:24.980 --> 00:05:27.230
Daniel Roe: a lot of the

00:05:27.580 --> 00:05:29.030
Daniel Roe: the wordpress

00:05:30.570 --> 00:05:37.080
Daniel Roe: sections like the plugins you could install really had no effect. The all wordpress was doing is managing the

00:05:37.450 --> 00:05:38.969
Daniel Roe: content for the site.

00:05:39.080 --> 00:05:42.560
Daniel Roe: and then the front end was the next and that's website.

00:05:42.620 --> 00:05:51.200
Daniel Roe: and I think we we called the wordpress api at generate time. So it was even a static website, and anytime you changed the

00:05:51.360 --> 00:05:55.479
Daniel Roe: the content on the site. You then able to regenerate the static

00:05:55.880 --> 00:06:00.380
Daniel Roe: site. It was incredibly fast, because there were no runtime calls to be made.

00:06:00.440 --> 00:06:07.980
Daniel Roe: but it was all powered by wood press running behind the scenes, and and that, of course, was not static that was was running.

00:06:08.110 --> 00:06:15.450
Daniel Roe: So the client had all the the pros of the wordpress. Ui and an interface they're very familiar with.

00:06:15.540 --> 00:06:19.540
Daniel Roe: And then we had. We built had to obviously build out integrations for every

00:06:19.560 --> 00:06:20.570
Daniel Roe: possible

00:06:21.660 --> 00:06:32.459
Daniel Roe: taxonomy that we could legitimately express in the front end. We wanted to make it as close as possible, so that you know tags and categories have meaning on the front end. So obviously you

00:06:32.600 --> 00:06:34.530
Daniel Roe: you could make it extremely loose.

00:06:34.860 --> 00:06:41.310
Daniel Roe: and what else we we even I think we were able to do things like I think we had.

00:06:41.680 --> 00:06:43.090
I want to.

00:06:43.330 --> 00:06:45.420
Daniel Roe: You know the redirection plug in, I forget which.

00:06:45.670 --> 00:06:54.519
Daniel Roe: But that's just one redirection plug in that everybody uses. So yeah, and then it's called, I think it's called redirection. Actually.

00:06:54.620 --> 00:07:04.080
Daniel Roe: And I think we're even able to to actually use those redirects on the in the actual of where we were deploying the site.

00:07:04.240 --> 00:07:07.340
Daniel Roe: So it it felt quite integrated, even though technical.

00:07:07.470 --> 00:07:11.699
Daniel Roe: even though infrastructure it wasn't even running on the same hardware.

00:07:11.840 --> 00:07:16.800
Daniel Roe: but it, I think it worked quite well, and I've also used the wordpress api programmatic

00:07:17.750 --> 00:07:23.370
Daniel Roe: when doing Other Other sorts of things so need to sort of pull down hold on content.

00:07:24.820 --> 00:07:28.039
Daniel Roe: So I've got a bit of experience, but probably not in it as much as you guys.

00:07:28.270 --> 00:07:48.160
Jeff Everhart: That's that's awesome. Yeah, no, that's great to hear. And I will say, like You're spot on about the kind of plugin functionality right like a lot of the stuff that was made wasn't made for using it headlessly. And some of that stuff, I think, is changing a little bit in the ecosystem like we're seeing more and more people, either from the get go really care about

00:07:48.480 --> 00:08:04.270
Jeff Everhart: making their plugin usable via the rest. Api that's built into wordpress, or like writing their own bindings for Wp. Graph. Ql: I don't know if you've ever used that at all. but that sort of turns the wordpress database into, you know, like a graphql. Api.

00:08:04.300 --> 00:08:05.859
Jeff Everhart: Yeah, that's really neat.

00:08:05.980 --> 00:08:13.049
Jeff Everhart: oh, that's super cool. That's what it is cool, and that's actually really like One of my first introductions to

00:08:13.160 --> 00:08:19.889
Jeff Everhart: headless Wordpress. As a thing, I think, was pretty much exactly what you were describing. I remember going to like a local meet up.

00:08:19.910 --> 00:08:21.309
Jeff Everhart: man. It must have been

00:08:21.550 --> 00:08:31.690
Jeff Everhart: 2,000 18,017 or something at was like kind of like after wordpress. It merge the Api in the core. I had just learned view at the time.

00:08:32.130 --> 00:08:48.849
Jeff Everhart: and I had not heard about next yet, and went to this presentation. That was, you know, like, oh, yeah, let's build a how. This wordpress site and I was already all in on view, and they were like, oh, there's this thing called Nux, and I was like, oh, my gosh! This is amazing, exactly sort of that, you know, I think we actually did use to generate command

00:08:48.860 --> 00:08:57.020
Jeff Everhart: make it all run statically, but it was just such a a beautiful experience, and I just remember being blown away at how fast it all was.

00:08:57.140 --> 00:09:01.169
Jeff Everhart: I was just like this thing flies it's so performant, and so clean

00:09:01.320 --> 00:09:11.079
Jeff Everhart: and just. There's so many abstractions that you has, that I just. I love that, you know, like I was able to bring into it, because I had spent so much time trying to

00:09:11.380 --> 00:09:21.099
Jeff Everhart: think about like, okay? Well, how do I? How do I bring like a full fledged view, spa application inside of wordpress? And it was always just this like nasty Kluji thing

00:09:21.290 --> 00:09:31.909
Jeff Everhart: that was really difficult to feel feel productive in. And it's like, then, once you think about it that way, you're like, oh, yeah, okay, I'll just make this totally separate thing. Wordpress just becomes an Api for me.

00:09:32.060 --> 00:09:43.250
Fran Agulto: so I don't know. Here, here we are. So so the so i'm the I'm, the i'm the newbie in the house as far as comes to Mexican view, and

00:09:43.960 --> 00:09:51.269
Fran Agulto: you know the the next question. I kind of want to, and and maybe you can. You can guide me in in for for put on your

00:09:51.340 --> 00:10:02.679
Fran Agulto: your professor. I had on, if you will at Daniel for me, because I kind of learned in parodies on hey? I've used this already, Daniel, can you tell me what

00:10:03.190 --> 00:10:21.879
Fran Agulto: this equals to this. So, for example, like if i'm using next Js right, and I've been one of many of developers in our industry who've been dragging and kicking and screaming, having to use react because it's a love hate out there. Some deaths love it. Some Dave devs actually loathe it.

00:10:21.890 --> 00:10:23.440
Fran Agulto: so

00:10:23.480 --> 00:10:37.049
Fran Agulto: with with that being said, you and Max, would you say like from a straight parity standpoint? Next is to view what next is to react? Let's start. There. Is that? Is that a fair? Say

00:10:38.440 --> 00:10:39.330
Daniel Roe: so?

00:10:39.780 --> 00:10:48.049
Daniel Roe: Obviously you have to compare next to next, because the name at the very least like that, even if you didn't know anything of the history of that you'd be thinking.

00:10:48.270 --> 00:10:56.089
Daniel Roe: Why are these 2 names so similar? and the I, as far as I think I can probably say pretty canonically

00:10:56.180 --> 00:11:05.430
Daniel Roe: just by not being there at the time. That that next was started. soon after next, and I think that you and next is for view.

00:11:05.450 --> 00:11:12.450
Daniel Roe: if the E. And next is for yeah, so initially, it is a

00:11:12.640 --> 00:11:25.280
Daniel Roe: it, it's a framework which does similar things to next, or or did similar things. The 2 frameworks have diverged quite a lot of the time, and we've even had convergent evolution. In some ways.

00:11:25.430 --> 00:11:29.700
Daniel Roe: I'm so more it's, it's all it's all very interesting.

00:11:29.730 --> 00:11:33.149
Daniel Roe: So, for example, just our last release last week

00:11:34.890 --> 00:11:54.629
Daniel Roe: sort of released at composable, which allows a certain kind of way of defining SEO data, and actually just a couple of days ago. Next release something extremely similar. I'm sure not at all affected. But we we are sort of because we're in the same space. We are sort of evolving in similar directions.

00:11:54.640 --> 00:11:56.960
Daniel Roe: In some cases, not. In some cases we have

00:11:57.630 --> 00:11:58.380
Daniel Roe: differently.

00:11:58.400 --> 00:12:05.329
Daniel Roe: But you're absolutely right to compare us next. And next are similar kinds of things. I would say next

00:12:06.180 --> 00:12:08.530
Daniel Roe: is a framework for building web apps

00:12:08.780 --> 00:12:10.490
Daniel Roe: built on view.

00:12:10.680 --> 00:12:14.540
Daniel Roe: it's a full stack framework, so it's not just about the front end.

00:12:14.640 --> 00:12:17.019
Daniel Roe: it has a server component to

00:12:17.070 --> 00:12:21.489
Daniel Roe: and we've just finished a rewrite for n 3

00:12:21.730 --> 00:12:27.760
Daniel Roe: and and a lot of what some of what i'll say is particularly dri of Max 3. So it actually is, is built to be

00:12:28.390 --> 00:12:30.260
Daniel Roe: platform and

00:12:30.650 --> 00:12:31.610
Daniel Roe: agnostic.

00:12:31.810 --> 00:12:34.179
Daniel Roe: It runs in pretty much any

00:12:34.320 --> 00:12:38.000
Daniel Roe: any platform, and the ones that doesn't because we haven't. Yet.

00:12:38.800 --> 00:12:42.119
Daniel Roe: How did that that adapt it for it? Not because we don't want to.

00:12:42.150 --> 00:12:46.209
Daniel Roe: So it runs on in cloud. Flow versus not the 5

00:12:46.460 --> 00:12:47.310
Fran Agulto: Oh.

00:12:47.490 --> 00:12:58.590
Daniel Roe: in any way you might think and it does so natively, and in most cases as much as possible. We want it to be 0. Config oh, and I should say like aws, lambda, and it runs on, you know, deploy, and

00:12:58.810 --> 00:13:05.099
Daniel Roe: I i'm not stopping, because I've run out of of places that

00:13:05.380 --> 00:13:11.010
Daniel Roe: so. and and so it's it's really sort of re- architected. The server bed is re- architected to be.

00:13:11.170 --> 00:13:16.940
Daniel Roe: What would we? How would we build a framework of if we were designing it to be for today.

00:13:17.180 --> 00:13:22.909
Daniel Roe: and for the way that things can be today. So lots and lots of about that is about how you

00:13:23.180 --> 00:13:31.010
Daniel Roe: how you build a server. If it's super fast, cold, start, so you it changes how you think about what the server should be. It's not.

00:13:31.360 --> 00:13:36.059
Daniel Roe: It's not that you You want lots of upfront cost in terms of startup.

00:13:36.170 --> 00:13:40.040
Daniel Roe: actually, you want as minimal cost, start up and then

00:13:40.130 --> 00:13:47.180
Daniel Roe: incremental cost, as you need to load additional javascript into memory, for example, that that kind of thing.

00:13:47.800 --> 00:13:52.739
Daniel Roe: So I'm: i'm getting into the weeds. Basically No, that's what we're here we love.

00:13:52.930 --> 00:14:11.839
Jeff Everhart: and that's awesome. I mean, because, like I feel like the the multi- sorry for and the no. This is cool. The multi deployment. I don't know whatever you want to call that like multi-target deployment strategy like you see popping up everywhere, and I think that's so. Neat that it's like. We're no longer kind of constrained to just

00:14:11.850 --> 00:14:17.100
Jeff Everhart: these node servers. Right? We can have all of these different environments in the C frameworks

00:14:17.120 --> 00:14:30.759
Jeff Everhart: targeting them in this way like you do it, I know, like Remix does it? You know, Astro, to some degree like there's tons of adapters and all these different ways that you can deploy it, and especially with something like quick and stuff like that. So it's really cool to see that happen.

00:14:30.810 --> 00:14:31.730
Jeff Everhart: and like

00:14:32.000 --> 00:14:51.100
Jeff Everhart: I i'm glad we're like moving away from this like come competition thing like which one's better. And like everybody, is really just taking the best ideas and saying, You know what that makes a lot of sense like we. We should all do something like this, and you just kind of see, like the bar incrementally get better and better across all of these different tools.

00:14:51.660 --> 00:14:53.140
Daniel Roe: I I I think I mean

00:14:53.240 --> 00:14:55.600
Daniel Roe: particularly over the last few

00:14:56.430 --> 00:14:57.540

00:14:57.840 --> 00:15:03.450
Daniel Roe: Yeah, I mean, i'm, i'm just seeing such great discourse in the Javascript front end community

00:15:03.480 --> 00:15:08.070
Daniel Roe: like that. There's been been a lot that there are a lot of people that who are

00:15:08.680 --> 00:15:12.949
Daniel Roe: building building frameworks. out there. Libraries?

00:15:13.280 --> 00:15:14.479
Daniel Roe: Who are just

00:15:14.560 --> 00:15:22.559
Daniel Roe: a delight to sort of talk to and and work with. You know we're sort of we're trying to make the world generally better place.

00:15:22.820 --> 00:15:27.950
Daniel Roe: I think we're trying to make it better for developers, for our end users.

00:15:28.080 --> 00:15:31.050
Daniel Roe: It's nice to feel sort of feel part of that

00:15:31.350 --> 00:15:33.860
Daniel Roe: and open source, of course, is

00:15:34.020 --> 00:15:34.840
Daniel Roe: is

00:15:36.100 --> 00:15:37.600
Daniel Roe: certainly isn't my experience

00:15:37.750 --> 00:15:46.230
Daniel Roe: a great place, because it's a it's a place powered by people helping other people, which which makes makes for something really nice. So yes.

00:15:46.360 --> 00:15:54.280
Daniel Roe: it's totally totally good when we're able to sort of spur each other on and and and and help us get better even when it's

00:15:54.600 --> 00:16:14.199
Daniel Roe: even even when you know you, you have a bit of an awesome moment that they they got their first. Yeah. Yeah, the you sort of you think. How can this? My my in progress? Demo for X. It's not going to be quite the ground breaking thing that I thought it was going to be. But but that's that's that's fine, Of course

00:16:14.310 --> 00:16:15.109
it's it's

00:16:15.490 --> 00:16:17.330
Daniel Roe: you got to hold these things lightly.

00:16:18.200 --> 00:16:19.549
Daniel Roe: so it's it's a good

00:16:20.140 --> 00:16:36.580
Fran Agulto: I do want like a quick side weed thing that Jeff, you might even be the answer. but it's all through it to both of you all thinking about data fetching and the ways I data fetch in next js with get static props, get server-side props and Isr

00:16:36.590 --> 00:16:40.410
Fran Agulto: and setting up dynamic routes with a bracket syntax

00:16:41.750 --> 00:16:46.300
Fran Agulto: very similar in in view. Yes.

00:16:46.470 --> 00:16:48.930
Fran Agulto: Is there like a function? Yeah, like

00:16:49.250 --> 00:16:53.370
Fran Agulto: that that helps me server side render or statically set generate.

00:16:54.680 --> 00:16:56.180
Daniel Roe: Yes, so

00:16:56.340 --> 00:17:03.880
Daniel Roe: Those things are are are very, very similar. Okay, Next to there was a slightly different syntax for dynamic router prams

00:17:04.119 --> 00:17:07.189
Daniel Roe: but not because always had file system based routing

00:17:07.210 --> 00:17:13.990
Daniel Roe: from the very, very early days, and also always had layouts and things like that which have only come a bit more recently to to next

00:17:14.230 --> 00:17:16.970
Daniel Roe: now we actually you can have square brackets

00:17:17.000 --> 00:17:25.550
Daniel Roe: just like next, so that you'll be very familiar with that that will feel totally. this is this is the same

00:17:25.650 --> 00:17:29.270
Daniel Roe: it's a little bit different for server side data fetching.

00:17:29.380 --> 00:17:33.299
Daniel Roe: So we we have a composable strategy. So, rather than having it

00:17:33.350 --> 00:17:35.209
Daniel Roe: export from your file

00:17:35.420 --> 00:17:40.649
Daniel Roe: from your page which defines a function that's going to return the

00:17:41.000 --> 00:17:49.399
Daniel Roe: the paths of the roots, and a way of sort of getting the the static data for the roots which then gets passed to your page

00:17:49.530 --> 00:17:50.670
Daniel Roe: in next

00:17:50.720 --> 00:17:52.630
Daniel Roe: any component at all.

00:17:52.780 --> 00:17:59.160
Daniel Roe: And then, by the way, this is all unique to next. So this is not generally true across the view, although there are lots of view, frameworks

00:17:59.340 --> 00:18:01.159
Daniel Roe: and other firm is to with the same

00:18:01.190 --> 00:18:04.969
Daniel Roe: our system routing stuff. That's true for data fetching

00:18:05.000 --> 00:18:06.919
Daniel Roe: in view in in next

00:18:07.040 --> 00:18:13.209
Daniel Roe: you and any component at any level in your app and register a a data.

00:18:13.300 --> 00:18:15.710
Daniel Roe: we we use asyn data call

00:18:16.240 --> 00:18:18.950
Daniel Roe: on this use. Async data composable

00:18:19.000 --> 00:18:27.189
Daniel Roe: is going to do a couple of things. It's going to perform data fetching. So in an app which is not statically generated doesn't have any

00:18:27.430 --> 00:18:37.890
Daniel Roe: static component. It's just gonna fetch that for you, and it's going to manage the State and give you an error status and a pending, and all of that composable goodness

00:18:37.970 --> 00:18:39.760
Daniel Roe: that you can use to build a ui around it.

00:18:39.960 --> 00:18:48.079
Daniel Roe: But when you statically generate a page, all of those get packaged up into a single payload for you automatically, and that payload gets

00:18:49.140 --> 00:18:54.489
Daniel Roe: generated alongside your page. So when you then navigate to that page. The payload is fetched

00:18:54.660 --> 00:18:59.960
Daniel Roe: hold into memory, and all of those components, instead of performing the request.

00:19:00.410 --> 00:19:04.070
Daniel Roe: all the data from the payload. So you it's. It's a bit different

00:19:04.320 --> 00:19:07.050
Daniel Roe: from how it works in the next. In fact, my different.

00:19:07.300 --> 00:19:11.840
Daniel Roe: So next is very much sort of top down. So you fetch it all at the page level, and then you

00:19:12.000 --> 00:19:17.829
Daniel Roe: pass it into the components, or you set a context, or something like that, whereas in in next

00:19:17.900 --> 00:19:25.050
Daniel Roe: and that's you. You sort of it's very much at at the bottom. You could have a deeply nested component that needs some piece of data.

00:19:25.280 --> 00:19:31.870
Daniel Roe: And actually you could have more than one component that needs the same piece of data. and actually you can sort of do duplicate it by a key.

00:19:32.140 --> 00:19:35.369
Daniel Roe: or you can use a a composable strategy.

00:19:35.460 --> 00:19:39.910
Daniel Roe: So You could have some it like. Think of a re react hook.

00:19:40.140 --> 00:19:43.269
Daniel Roe: It's different in terms of how it works, but it it looks a little similar.

00:19:44.420 --> 00:19:45.320
Daniel Roe: Any

00:19:45.470 --> 00:19:50.779
Daniel Roe: any exports you put in a couple of magic directories and nuts called composables and utils

00:19:51.060 --> 00:19:53.740
Daniel Roe: get order imported anywhere you use them in your app.

00:19:54.050 --> 00:19:59.869
Daniel Roe: So it's a really easy way of of taking logic that you are. Find you. You're repeating.

00:20:00.130 --> 00:20:06.569
Daniel Roe: Put it in one place, and then you can use it in multiple places. And if you do that with the data fetching it gets automatically de-duplicated.

00:20:06.700 --> 00:20:10.340
Daniel Roe: So if you have a couple of components, only the same piece of data.

00:20:10.490 --> 00:20:17.969
Daniel Roe: And you're generating a page. It will be one piece of data that is shared across all 3 of those components.

00:20:18.230 --> 00:20:30.369
Jeff Everhart: and so like I actually have somebody ask me a question. That is very similar to that, because it sounds like knucks supports like better like co-location of You know your data fetching code inside of your inside of your component.

00:20:30.410 --> 00:20:37.890
Jeff Everhart: where this I think they were like a reactive, and they're in client side react. I think that's something that people do quite often right is I've got my

00:20:38.160 --> 00:20:57.210
Jeff Everhart: data fetching code inside of my component and each components responsible for fetching its own data where they were coming over trying to do in a a static static, a generated next page, and i'm like No? Well, if you want this data in here like it, it's got it all be passed in through these props and kind of then you, you know you drill it down into whatever component you need.

00:20:57.270 --> 00:21:05.450
Daniel Roe: I do love that about view, by the way, that the co-location, the fact, and you have that single file with the the script.

00:21:06.760 --> 00:21:08.170
Yeah, that is cool.

00:21:08.270 --> 00:21:11.249
Daniel Roe: So I mean, in fact, what whenever I've sort of

00:21:11.590 --> 00:21:14.159
Daniel Roe: my fingers in the next world.

00:21:14.180 --> 00:21:16.340
Daniel Roe: I or in the react world in general.

00:21:16.460 --> 00:21:20.990
Daniel Roe: I always try as much as possible to recreate.

00:21:21.010 --> 00:21:29.550
Daniel Roe: Yeah, so because I like, I like Css, You know, I like I like I I I I yes, styles component signed up.

00:21:29.830 --> 00:21:31.360
Daniel Roe: Get how it works, but

00:21:31.700 --> 00:21:37.379
Daniel Roe: I like css I mean, I want to be. I want to be writing Css: Yes, I want to. I want it to be nested

00:21:37.460 --> 00:21:41.120
Daniel Roe: for for goodness sake, that that i'm on board with I

00:21:41.280 --> 00:21:43.790
Daniel Roe: I I think I I I can have.

00:21:43.860 --> 00:21:53.770
Daniel Roe: But but I I want to. I want to have you know, a css module or something that I import, and I want it to be right next to my, if I can't have it in the same file, I jolly well want it right next to it.

00:21:53.880 --> 00:21:58.709
Daniel Roe: so you can actually have the the sort of the logic and the template and the Css

00:21:59.160 --> 00:22:03.460
Daniel Roe: there together. But it's it's not not always quite as straightforward as that.

00:22:03.770 --> 00:22:09.870
Daniel Roe: and in the react wells. But it the view you do. I mean. You can write you components in in in Tsx.

00:22:09.990 --> 00:22:21.109
Daniel Roe: Jsx. Or whatever. But I think it's cool. There's magic you can do with a compiler as well if you with a single path compiler so, and and performance optimizations as well. Don't get me started on that.

00:22:21.190 --> 00:22:27.930
Fran Agulto: Yeah, I think the single file components honestly, were one of the first things that really drew me to view where I was just like. This is just

00:22:27.980 --> 00:22:47.479
Jeff Everhart: so simple. And I had come from, I think, more like an angular Js background, where there were like sort of direct directives all over the place right? So I was kind of used to this magical HTML if you will, anyway, and view just really reinforce that for me. and I think it's just such a nice developer experience, I think, like

00:22:47.510 --> 00:22:56.240
Jeff Everhart: Spelt might have tried to implement pieces of that, and I know Astro has a similar flavor where you can just sort of. You've got a script. You've got some HTML, and then you've got

00:22:56.300 --> 00:23:05.270
Jeff Everhart: your style tag that you can open and do all that stuff in the same file. So there is one question that I kind of have as a view developer

00:23:05.330 --> 00:23:09.159
Jeff Everhart: that maybe you could help shed some light on so like

00:23:09.340 --> 00:23:12.110
Jeff Everhart: I know now there, and maybe this was

00:23:12.280 --> 00:23:17.420
Jeff Everhart: pain and view 3. Write the composition: Api versus the options Api

00:23:17.620 --> 00:23:25.940
Jeff Everhart: so I don't know if you could like dig into what those are, you know like. When When should a developer use them? So I think the options api right is kind of what

00:23:26.350 --> 00:23:35.530
Jeff Everhart: anytime you see me right view, friend. It's probably it's the options. Api right. I've got this kind of configuration object inside of my script tag where it's got.

00:23:35.540 --> 00:23:50.960
Jeff Everhart: you know. Maybe you know the observable pieces of my data methods that my component can access, and then, like life cycle hooks. where I know that the the composition Api is quite a bit different. And so yeah, I don't know if you could like elaborate on that a little bit I would love to hear your thoughts.

00:23:51.840 --> 00:23:56.640
Daniel Roe: I absolutely. I mean it's one of the big things moving from view to to view 3,

00:23:56.700 --> 00:24:05.760
Daniel Roe: and something. It was quite divisive originally. So when it was first proposed, people were saying, oh, this is going to be the test. A few it's got, you know. I for one i'm going to

00:24:05.890 --> 00:24:12.160
Daniel Roe: switch framework, you know. There was. It was a really big up, I think Evan managed it quite well in terms of

00:24:12.240 --> 00:24:17.009
Daniel Roe: listening to people taking feedback on board, making sure that the the transition wasn't

00:24:17.060 --> 00:24:23.480
Daniel Roe: what people feared, I don't think he was intending to. But yeah, but it was. It was very

00:24:23.730 --> 00:24:24.760
Daniel Roe: It's very well done.

00:24:24.830 --> 00:24:28.400
Daniel Roe: And actually at the moment, if you, whenever I am at a

00:24:29.010 --> 00:24:31.860
Daniel Roe: another. I've seen people ask the question.

00:24:31.980 --> 00:24:36.870
Daniel Roe: You know how many people are using composition Api versus options Api. The vast majority using

00:24:37.060 --> 00:24:38.400
Daniel Roe: composition. Api. Now.

00:24:38.550 --> 00:24:39.680
Daniel Roe: So what is it?

00:24:41.670 --> 00:24:44.449
Daniel Roe: What is it? So? Basically the

00:24:44.670 --> 00:24:46.570
Daniel Roe: reactivity

00:24:46.660 --> 00:24:49.840
Daniel Roe: in view is a thing on its own.

00:24:50.060 --> 00:24:58.289
Daniel Roe: So, you can have a like a reactive value, and the idea is when you change that value, then things that depend on it also have to be updated to

00:24:58.630 --> 00:25:00.569
Daniel Roe: and so this is

00:25:00.590 --> 00:25:03.539
Daniel Roe: the essence of a lot of reactive frameworks.

00:25:05.010 --> 00:25:22.540
Daniel Roe: and and so in view in view 2 you have a Everything is really component. Driven. There was a view observable that you could access and sort of construct stuff under the hood, but mostly people access it through components to in a given component.

00:25:22.780 --> 00:25:24.640
Daniel Roe: you would have some reactive data.

00:25:24.770 --> 00:25:32.039
Daniel Roe: You would have some properties that were computed from that data. You would have some methods, and you would have, you know watches, and so on.

00:25:32.210 --> 00:25:37.109
Daniel Roe: But it was all component related, whereas the composition Api said, Well, what if we could take that?

00:25:37.240 --> 00:25:38.580
Daniel Roe: All the same things.

00:25:38.720 --> 00:25:39.520
Daniel Roe: data.

00:25:39.980 --> 00:25:40.870
Daniel Roe: computed

00:25:41.100 --> 00:25:42.020
Daniel Roe: properties.

00:25:42.320 --> 00:25:45.000
Daniel Roe: watches, methods, and just

00:25:45.030 --> 00:25:46.270
disconnect them

00:25:46.380 --> 00:25:51.239
Daniel Roe: from the component. What if they could be sort of standalone methods and utilities

00:25:51.790 --> 00:25:54.189
Daniel Roe: that you can use to create

00:25:54.510 --> 00:26:00.939
Daniel Roe: composables, bits of logic that can stand on their own and live in a shared utilities folder, for example.

00:26:01.430 --> 00:26:04.419
Daniel Roe: and somehow get used in different places.

00:26:04.650 --> 00:26:10.659
Daniel Roe: And so there was this new setup function that was introduced, and in a separate function you could use all these new composables

00:26:11.010 --> 00:26:15.870
Daniel Roe: View as a concept of the the V 3 has this concept of the

00:26:16.160 --> 00:26:20.459
Daniel Roe: that instance so immediately before following the setup function.

00:26:20.710 --> 00:26:24.199
Daniel Roe: you says, hey, the current instance is this: this one here?

00:26:24.250 --> 00:26:30.269
Daniel Roe: And so now, when you use any of those utilities, you knows they're all related to this component. That's running the setup function.

00:26:30.600 --> 00:26:34.589
Daniel Roe: As soon as this had a function finishes, we unset the instance and move on to the next one.

00:26:34.690 --> 00:26:36.939
Daniel Roe: But basically you get the benefit

00:26:37.110 --> 00:26:41.649
Daniel Roe: of being able to write code that isn't coupled to the component. But when it's run

00:26:41.780 --> 00:26:45.270
Daniel Roe: it still lives in that.

00:26:46.050 --> 00:26:46.940
Daniel Roe: Hello!

00:26:47.080 --> 00:26:51.190
Daniel Roe: This has been a real transformative move. And actually, that's set up function

00:26:51.240 --> 00:26:54.730
Daniel Roe: started as just one lifecycle method in a whole

00:26:55.110 --> 00:26:56.260
Daniel Roe: component object.

00:26:56.320 --> 00:26:58.920
Daniel Roe: So actually, you you probably could actually use

00:26:58.980 --> 00:27:00.230
Daniel Roe: Bill. The methods in the computer

00:27:00.260 --> 00:27:02.859
Daniel Roe: use key and other stuff as well as a set of function.

00:27:03.260 --> 00:27:06.929
Daniel Roe: but basically almost everything it mattered

00:27:06.950 --> 00:27:11.719
Daniel Roe: started to happen in that setup function. And now the most common way people are using view

00:27:11.740 --> 00:27:14.409
Daniel Roe: is with a script that up lock.

00:27:14.490 --> 00:27:17.710
Daniel Roe: So you don't have a script lock where you export a default

00:27:17.830 --> 00:27:21.499
Daniel Roe: object which is the component which has a method called

00:27:21.520 --> 00:27:24.399
Daniel Roe: you. Just have a block, and everything in that block

00:27:24.420 --> 00:27:26.399
Daniel Roe: is the setup function.

00:27:26.710 --> 00:27:32.560
Daniel Roe: and the compiler is able to. to Normally, you would from a component function, you would return

00:27:32.780 --> 00:27:35.280
Daniel Roe: the values that are exposed to the template.

00:27:35.950 --> 00:27:42.779
Daniel Roe: which is a nice Also, because you basically can encapsulate data which isn't exposed, and you can deliberately expose certain things.

00:27:43.050 --> 00:27:45.730
Daniel Roe: in the script set up lock. You can

00:27:45.760 --> 00:27:48.900
Daniel Roe: it. The compiler figures it out for you, basically.

00:27:48.980 --> 00:27:51.030
Daniel Roe: and we have some really great tooling

00:27:51.120 --> 00:27:52.300
Daniel Roe: with Zola

00:27:52.380 --> 00:28:07.079
Daniel Roe: that will actually give you full types, typescript support for this in your template. And you're like in your HTML. You you get that as well as in the in the script, so you can fully type. Check your your U 3 project like right the way through it's it's great

00:28:07.200 --> 00:28:12.009
Daniel Roe: and actually is it? Powers? Not just at Thes code, but neo them and

00:28:12.190 --> 00:28:16.380
Daniel Roe: all kinds of other ids and

00:28:16.590 --> 00:28:23.570
Daniel Roe: it looks like it might actually start to become framework agnostic as well, even though it's not so. It's

00:28:23.610 --> 00:28:26.380
Daniel Roe: check check for that. That's it's it's really really cool.

00:28:26.830 --> 00:28:46.010
Jeff Everhart: Yeah. And I just remember like looking, I would do you just doing some research for this podcast, looking through the thought behind that switch, like from from the options api to the composition. Api. Like I do like that. They've preserved the options Api, and it's really sort of opt in like. I think that's important for any technology moving forward. It's like not to leave people in the dust.

00:28:46.160 --> 00:28:56.049
Jeff Everhart: but I feel like, was there like some sort of eye tracking study that they did to like. Really, look at how how much people had to jump around with the first with the options. Api

00:28:56.090 --> 00:29:03.140
Jeff Everhart: versus you know the composition, Api, because it's like it's just seemed like you took a whole bunch of boilerplate and

00:29:03.210 --> 00:29:07.560
Jeff Everhart: structure, and, like just minimized it so well, it was really cool to see.

00:29:07.920 --> 00:29:10.670
Daniel Roe: I don't know about any study, but I wouldn't surprise me.

00:29:10.770 --> 00:29:12.090
Daniel Roe: and actually.

00:29:12.320 --> 00:29:19.519
Daniel Roe: even when you throw the script set up. we we need to have the scripts at a block in. The change is even more striking.

00:29:19.550 --> 00:29:28.449
Daniel Roe: and that's even if you're just talking about a single component and not talking about idea of shared things that can be used by multiple components. And the moment you do that

00:29:28.860 --> 00:29:31.850
Daniel Roe: you to have the concept of Nixon's.

00:29:31.980 --> 00:29:33.430
Daniel Roe: but Nixon's weren't

00:29:33.680 --> 00:29:34.830
Daniel Roe: type 12,

00:29:35.100 --> 00:29:36.940
Daniel Roe: so you could be

00:29:37.070 --> 00:29:38.060
Daniel Roe: effectively.

00:29:38.230 --> 00:29:40.319
Daniel Roe: You were like you could

00:29:41.320 --> 00:29:53.700
Daniel Roe: think of it like sort of stacking components on top of each other, and so they could all have the same life, cycle, hook, and effectively. They would all get cold, and but they could also all have different methods, and so they would sort of be merged

00:29:54.410 --> 00:29:56.990
Daniel Roe: different data properties, which would also be merged.

00:29:57.510 --> 00:30:00.670
Daniel Roe: So everything was on the same flat surface.

00:30:01.730 --> 00:30:04.060
Daniel Roe: at which meant it was easy to collide.

00:30:04.320 --> 00:30:08.789
Daniel Roe: So if you had a data property called, you know, value or something

00:30:08.820 --> 00:30:11.499
Daniel Roe: easily overwritten by something else.

00:30:11.700 --> 00:30:14.160
Daniel Roe: it was really hard to know what was exposed.

00:30:14.380 --> 00:30:18.590
Daniel Roe: because it was all in a mix, and it wasn't visible to you as an offer

00:30:19.110 --> 00:30:20.490
Daniel Roe: and

00:30:21.040 --> 00:30:24.839
Daniel Roe: and I think there there are a lot of. There were some other issues as well, and you know.

00:30:24.930 --> 00:30:31.929
Daniel Roe: but the composition, Api solves those because you're in your own composable. You can do something like register a call back when the

00:30:32.260 --> 00:30:34.020
Daniel Roe: when the component is mounted.

00:30:34.240 --> 00:30:39.779
Daniel Roe: You can also have internal state which never is exposed to the end, user

00:30:39.830 --> 00:30:42.930
Daniel Roe: just within your composable. You set that up

00:30:42.980 --> 00:30:45.770
Daniel Roe: the internal state, and then maybe you watch it.

00:30:45.870 --> 00:30:53.950
Daniel Roe: and then you give the user like. Think of a toggle. You have your state, which is the toggle's value. You don't expose that to the user directly.

00:30:54.070 --> 00:30:55.620
Daniel Roe: not mutably.

00:30:55.970 --> 00:30:58.580
Daniel Roe: What you exposed to them is is that computed?

00:30:58.730 --> 00:31:08.440
Daniel Roe: It tracks the current value and a method to top of it. And so that's all the user needs. That's the Api. They need that you internally have more stuff, and maybe when they toggle it, you then

00:31:08.510 --> 00:31:13.629
Daniel Roe: store it in local storage, so that the next time it's You know the page you can load it in.

00:31:13.740 --> 00:31:20.670
Daniel Roe: You can do all of that. That's internal. The user. Doesn't need to know that they just have to focus on the Api which you expose to them. That's a much nicer way.

00:31:21.200 --> 00:31:28.739
Daniel Roe: I think. If everything else you were doing every internal property you had had to get exposed on the component that was using it.

00:31:28.810 --> 00:31:44.979
Daniel Roe: That' be a bad, bad thing and a recipe for disaster, as your users figure out. But if I change this underscore internal value for whatever it is. Well crack Open the view dev tools, and.

00:31:45.080 --> 00:31:48.130
Fran Agulto: Jeff, I think you're gonna. This is making me think we need a

00:31:48.470 --> 00:31:51.650
Fran Agulto: I I I'm. Next.

00:31:51.660 --> 00:32:10.569
Jeff Everhart: Yeah, I'm definitely gonna have to redo our our next tutorial. So I think we're the one we have on our site right now is for next 2. So we'll definitely need to that that definitely like blend. So we talked a little bit. Those that Thank you so much for all those extra like view details. but

00:32:10.580 --> 00:32:25.619
Jeff Everhart: so yeah, let's talk a little bit more specifically about next so I obviously use it for a few projects a while back and and enjoyed next to for sure. So you know what's really changed since from not going from next to to next 3.

00:32:26.640 --> 00:32:34.279
Daniel Roe: Well, one of the things that I always say about that which I haven't actually said so far is that I think not the the philosophy behind. Next.

00:32:34.520 --> 00:32:40.060
Daniel Roe: in my, at least, from my point of view, is that it should be extremely simple to use.

00:32:40.170 --> 00:32:45.650
Daniel Roe: So the idea is the best practices should be, should be baked in, so you should benefit from them.

00:32:45.710 --> 00:32:50.340
Daniel Roe: You shouldn't need to do the hard hard things in terms of getting set up.

00:32:50.370 --> 00:32:52.720
Daniel Roe: but it should also be fully customizable

00:32:52.890 --> 00:32:59.859
Daniel Roe: as you go, and this is one of the differences between next and next, for example, so next has a modules ecosystem

00:33:00.040 --> 00:33:02.349
Daniel Roe: which is amazing and really

00:33:02.420 --> 00:33:04.139
Daniel Roe: incredible. So

00:33:04.200 --> 00:33:05.350
Daniel Roe: the community

00:33:05.420 --> 00:33:09.099
Daniel Roe: I've created lots and lots of modules hooking into different

00:33:09.230 --> 00:33:11.920
Daniel Roe: bits. We expose from the framework itself.

00:33:12.030 --> 00:33:18.579
Daniel Roe: and it means that next is not a model in any way. You can't just move. It can't just change.

00:33:19.060 --> 00:33:20.920
Daniel Roe: We have to commit to Apis.

00:33:21.230 --> 00:33:22.970
Daniel Roe: The move from 2 to 3

00:33:23.360 --> 00:33:24.910
Daniel Roe: was a big move.

00:33:24.970 --> 00:33:27.940
Daniel Roe: and not one that i'm keen to repeat

00:33:27.960 --> 00:33:32.120
Daniel Roe: at any point again, because because I I guess, like like the

00:33:32.330 --> 00:33:38.700
Daniel Roe: like in with the move from view to to view 3 is also not a move. I would be keen to repeat again.

00:33:38.740 --> 00:33:40.869
Daniel Roe: and a lot of the changes in that.

00:33:41.540 --> 00:33:42.250
you know.

00:33:42.940 --> 00:33:45.780
Fran Agulto: similar to the changes that happen in view. 3 and and

00:33:45.910 --> 00:33:48.169
Daniel Roe: they almost had to happen.

00:33:48.460 --> 00:33:49.780
Daniel Roe: but

00:33:50.150 --> 00:33:57.330
Daniel Roe: but so so there were there. There's an Api changes in terms of how you interact with next

00:33:57.350 --> 00:33:58.769
Daniel Roe: the point of view of modules.

00:33:59.000 --> 00:34:03.769
Daniel Roe: from the point of view of users. If you're getting started in the next 3,

00:34:03.870 --> 00:34:05.579
Daniel Roe: I think a lot of things should be

00:34:05.810 --> 00:34:07.150
Daniel Roe: pretty intuitive.

00:34:07.260 --> 00:34:08.409
Daniel Roe: But, Jeff.

00:34:08.610 --> 00:34:12.750
Daniel Roe: when you, if you if you UN unpack it, if you haven't already.

00:34:13.060 --> 00:34:15.939
Daniel Roe: then let me know if things aren't

00:34:15.969 --> 00:34:18.449
Fran Agulto: so that's 3.

00:34:18.880 --> 00:34:21.630
Fran Agulto: That's awesome. Yeah, for sure.

00:34:21.929 --> 00:34:28.210
Daniel Roe: The so. So. what? What's changed? So I think one of the things people notice is that it's it's type safe.

00:34:28.530 --> 00:34:31.840
Daniel Roe: so it's not just that next itself is written in typescript.

00:34:32.449 --> 00:34:34.960
Daniel Roe: and that all of the internal utilities are typed.

00:34:35.070 --> 00:34:38.330
Daniel Roe: But we are also able to do a lot of fun stuff

00:34:38.400 --> 00:34:40.280
Daniel Roe: for you in your project.

00:34:40.350 --> 00:34:44.279
Daniel Roe: So when you are making internal Api calls

00:34:44.380 --> 00:34:47.230
Daniel Roe: to your own endpoints, we get, we can

00:34:47.760 --> 00:34:51.919
Daniel Roe: auto complete them for you. In your editor. We can actually give you

00:34:52.130 --> 00:34:52.939
Daniel Roe: typed

00:34:53.199 --> 00:34:58.829
Daniel Roe: return types for those we actually know what the

00:34:59.050 --> 00:35:03.190
Daniel Roe: or, if you add a module to your next integr, we automatically add its types.

00:35:03.440 --> 00:35:08.419
Daniel Roe: so that you then get type safe access to the module options when you're configuring it.

00:35:08.690 --> 00:35:11.980
Daniel Roe: Or if you add a middleware to your project or a layout.

00:35:12.060 --> 00:35:20.469
Daniel Roe: When you're selecting the layout in a little way and your page, you again get type like auto-complete drop down in your editor for what the possible middleware or layouts would be.

00:35:21.000 --> 00:35:33.379
Daniel Roe: or with your runtime config When you say, hey, this is something that I want to be overwritten at runtime you get again. Type safe access to that in your app. So when you're accessing config dot, whatever value

00:35:33.740 --> 00:35:38.120
Daniel Roe: it it gets dropped down, you you know it's up to the end of the string. What is it?

00:35:38.360 --> 00:35:42.129
Daniel Roe: and that is true for lots and lots of things throughout throughout the app.

00:35:42.340 --> 00:35:49.500
Daniel Roe: actually, even in terms of network requests. We recently landed a Pr. Upstream and nitro. I think we still need to fully implement it in next.

00:35:49.520 --> 00:35:55.499
Daniel Roe: That gives you parameter like type, safe method access. So you get request to one endpoint

00:35:55.780 --> 00:36:02.089
Daniel Roe: we might return something different than a put request to that same endpoint, and we actually reflect that in the typing you get within your app.

00:36:02.140 --> 00:36:14.329
Daniel Roe: So there's lots and lots of interesting stuff that we're able to do by having a different approach to typescript. And that's it's very much in service. It's not just. This is cool, but hopefully this is in service of a better. Dx.

00:36:14.370 --> 00:36:17.290
Daniel Roe: So again, you'll hopefully find that things are being

00:36:18.360 --> 00:36:22.160
Daniel Roe: for you, and mean that you don't need to go back and

00:36:22.320 --> 00:36:27.300
Daniel Roe: switch between 3 things quite quite so much as you otherwise otherwise might.

00:36:27.750 --> 00:36:38.960
Jeff Everhart: That's awesome. I think. Anytime you can make that stuff more intuitive for people there's there's no real downside you touched on Nitro a second. Could you elaborate on what? What nitro is.

00:36:39.550 --> 00:36:43.960
Daniel Roe: Yeah, sure. So nitro is what we're calling the new next server.

00:36:44.270 --> 00:36:52.139
Daniel Roe: So it's this this optimized layer that can be then deployed anywhere to any any different provider.

00:36:52.420 --> 00:36:59.230
Daniel Roe: and it is there, there's some things about it that it was saying so. When is it? As I said, it was meant to be universal.

00:36:59.250 --> 00:37:06.159
Daniel Roe: That means it has no node runtime node dependencies. I'm not. It's a node

00:37:06.250 --> 00:37:07.069
Daniel Roe: build tool.

00:37:07.210 --> 00:37:09.130
Daniel Roe: but what it outputs isn't

00:37:09.170 --> 00:37:10.170
Daniel Roe: so.

00:37:10.450 --> 00:37:14.920
Daniel Roe: in a project I was building recently. I don't know if you are. You mastered on fans.

00:37:15.740 --> 00:37:27.069
Fran Agulto: Maybe not. I don't think we've made it over there yet. I haven't made it over there yet to any of you, though. But should I? If you're hanging out there, I i'll, I'll go. Yeah, okay.

00:37:27.120 --> 00:37:31.629
Daniel Roe: it's the water is warm. But as a of us built an app.

00:37:32.260 --> 00:37:33.290
Daniel Roe: Oh, elk

00:37:33.340 --> 00:37:39.739
Daniel Roe: which is built in, and some other things. So check it out, Elk.

00:37:40.020 --> 00:37:45.880
Daniel Roe: and we actually you can visit, even if you're not logged in, or I have an account on nested on, and you'll see the public feed

00:37:46.210 --> 00:37:49.450
Daniel Roe: of of a server that I actually

00:37:49.800 --> 00:37:51.909
Daniel Roe: gee, i'm i'm one of the people who runs

00:37:51.960 --> 00:38:00.170
Daniel Roe: and and but you'll get a feel for what what it looks like. Obviously a lot of stuff you can't can't see until you actually do do login. But

00:38:01.120 --> 00:38:05.230
Daniel Roe: but Yes, so so math that on. Is it another social network?

00:38:05.390 --> 00:38:07.080
Daniel Roe: what was I saying?

00:38:07.710 --> 00:38:10.580
Daniel Roe: Oh, we're talking about Nitro. I think that's right.

00:38:10.800 --> 00:38:14.190
Daniel Roe: and so actually for the native app

00:38:14.290 --> 00:38:15.229
Daniel Roe: or out.

00:38:15.350 --> 00:38:22.689
Daniel Roe: we couldn't run a server at all. So actually we pull Nitro into the browser.

00:38:23.020 --> 00:38:28.349
Daniel Roe: So we actually even were able to to have this nitro server layer

00:38:28.420 --> 00:38:31.860
Daniel Roe: running in the browser. think express

00:38:32.050 --> 00:38:45.330
Daniel Roe: in the browser, and it's it's able to actually handle incoming requests and do an interesting stuff like that, so it's universal. It can run anywhere. It can run it a service worker. Your entire next step can be rendered in a service worker in your own browser.

00:38:45.530 --> 00:38:50.189
Daniel Roe: and and I actually have like a render which is shared between tabs. Now that is probably not

00:38:50.390 --> 00:38:53.849
Daniel Roe: something I would recommend, because you know, that's not the most

00:38:53.960 --> 00:39:01.890
Fran Agulto: study of deployment options. But you can if you want to, if you want to.

00:39:02.110 --> 00:39:06.159
Jeff Everhart: Okay, so let me let me. Oh, sorry!

00:39:06.190 --> 00:39:27.060
Jeff Everhart: I could go on forever. So you you must interrupt. I just wanted to. I just want to unpack a little bit just for my own understanding, because it was. It's a sound of cool, and I think this is an important distinction. So next still requires node to to build right. You need to have Node installed on your machine to run, You know I I forget what the command was, but like

00:39:27.360 --> 00:39:31.030
Jeff Everhart: generate or something like that to then

00:39:31.650 --> 00:39:33.060
Jeff Everhart: create this

00:39:33.170 --> 00:39:36.349
Jeff Everhart: nitro executable? That, then, has

00:39:36.380 --> 00:39:47.910
Jeff Everhart: no runtime dependencies can be deployed everywhere. That sounds really cool, and because that was one of the initial things that struck me when I was like we recently did like a framework guide that was really like.

00:39:48.050 --> 00:39:54.450
Jeff Everhart: How how do you deploy this thing on our on our like hosting platform, and it did seem like there was a little

00:39:54.660 --> 00:40:00.680
Jeff Everhart: like it seemed a little bit more complicated. But now, like I understand why it wasn't as simple as you know.

00:40:00.730 --> 00:40:13.109
Jeff Everhart: Npm: Run, start, or something like that. But now I understand why, right? Because we don't want note there like. We just invoke this javascript file, and you get all the goodness wherever you're at. So that's really cool.

00:40:13.700 --> 00:40:19.880
Daniel Roe: So I mean the default default nit out, but is is node server, but there are lots of others as well.

00:40:20.030 --> 00:40:39.510
Daniel Roe: but it is. Stand alone. So If you were building an X 2 app you would. You would run you when you build, and then you might re install just the production dependencies. You might sort of purge the dev ones. But you still need Next to the dependency it's a runtime dependency, or there was a next start dependency which just had the

00:40:39.870 --> 00:40:41.840
Daniel Roe: so that, and not that like Webpack.

00:40:42.380 --> 00:40:44.199
Daniel Roe: just probably you don't want in production.

00:40:44.480 --> 00:40:51.110
Daniel Roe: and but that's not true with nuts 3. So the next 3 it generates a folder by default called output.

00:40:51.190 --> 00:40:59.230
Daniel Roe: and that dot output folder can be taken anywhere. It doesn't have, and it has all the node modules inside that it needs. It has the server. It has everything.

00:40:59.510 --> 00:41:00.430
Daniel Roe: So it is.

00:41:00.530 --> 00:41:01.809
Daniel Roe: It is very

00:41:02.180 --> 00:41:05.040
Daniel Roe: optimized, and it's something like

00:41:05.740 --> 00:41:12.149
Daniel Roe: the the size of that folder is like a fiftieth of the size that

00:41:12.210 --> 00:41:13.580
Daniel Roe: that the next 2

00:41:14.760 --> 00:41:15.770
Daniel Roe: production

00:41:17.200 --> 00:41:20.340
Daniel Roe: node modules was so

00:41:20.370 --> 00:41:30.130
Daniel Roe: a fiftieth it's like, and like the cold start went from the bare bones. Next to project was 300 ms. Cold start.

00:41:30.210 --> 00:41:32.629
Daniel Roe: whereas the bones at Nitro

00:41:32.930 --> 00:41:35.380
Daniel Roe: cold Start project is like a free.

00:41:35.590 --> 00:41:43.990
Daniel Roe: So it it is. Oh.

00:41:44.550 --> 00:41:53.670
Daniel Roe: that server does by default, is it? Well, I say all it does a lot of things, but one of the things that does is connect these different endpoints so.

00:41:53.770 --> 00:41:59.270
Daniel Roe: and they can make local calls to each other, for example, which bypass the network layer. So we don't need

00:41:59.330 --> 00:42:03.160
Daniel Roe: to we mock that we pretend to be a network layer.

00:42:03.250 --> 00:42:10.239
Daniel Roe: but you can when you're rendering your view page, for example, and you hit your own Api.

00:42:10.470 --> 00:42:19.930
Daniel Roe: you don't have to. We don't have to make a real network request which will slow down the rendering of that page. We can actually hit the Api as though it's a direct local function.

00:42:20.190 --> 00:42:31.929
Daniel Roe: that is just in the scope of that component, and by we we mock it, we we make it seem like it's, an we give it, there's a request and response object and all the things that you would expect. So if you are in that.

00:42:31.990 --> 00:42:34.439
Daniel Roe: i'm like it feels like home.

00:42:34.650 --> 00:42:37.520
Daniel Roe: but it it's so much faster.

00:42:38.180 --> 00:42:44.460
Daniel Roe: And so, anyway, the the lots of of really cool things that we've been able to do with Nitro. It's also.

00:42:44.540 --> 00:42:46.820
Daniel Roe: Everything is code split. So it it

00:42:46.930 --> 00:42:54.849
Daniel Roe: that uses dynamic imports to load in only the code for the endpoints that are required. So if you and you can have have lazy

00:42:55.120 --> 00:43:00.070
Daniel Roe: initialization if you need to. So if you have some task that needs to happen before something

00:43:00.130 --> 00:43:02.059
Daniel Roe: so some endpoint happens.

00:43:02.370 --> 00:43:09.830
Daniel Roe: it not just supports that, too. So you need a connection to a database. It's gonna happen once, but only once before the first request to

00:43:10.200 --> 00:43:11.020
Daniel Roe: something

00:43:11.100 --> 00:43:13.449
Daniel Roe: again. We can make that happen with

00:43:13.640 --> 00:43:15.320
Daniel Roe: no part of the plate.

00:43:15.410 --> 00:43:19.079
Daniel Roe: It's it's a and a lot of the same things are true.

00:43:19.140 --> 00:43:24.339
Daniel Roe: with the nitro side of app, of of app. So you have the same kind of dynamic file based

00:43:24.680 --> 00:43:31.739
Daniel Roe: routine, so you can, and you can use dynamic parameters all of that, all of that is there for the the server.

00:43:32.150 --> 00:43:37.390
Daniel Roe: Lots of lots of nice nice goodies from the nitro side.

00:43:37.610 --> 00:43:52.179
Jeff Everhart: Yeah, that does sound awesome. So like I'm: yeah. So in and you said, that supports the edge already. I'm just support referencing back on my core questions from stay in the weeds for a second while we're here. So yeah, all right, that's that all sounds amazing. Could you talk for us a little bit about what kind of

00:43:52.340 --> 00:43:56.269
Jeff Everhart: rendering modes are available in next, and I know I saw, maybe, like

00:43:56.640 --> 00:44:01.110
Jeff Everhart: the possibility of combining different render modes is in the works.

00:44:01.410 --> 00:44:06.139
Daniel Roe: So we moved, so it's not to. This is a little bit complex

00:44:06.280 --> 00:44:10.649
Daniel Roe: as well. The the question was often, how do I? What mode are you in

00:44:10.670 --> 00:44:17.460
Daniel Roe: next to, because you could be in Server SSR. Mode or not, and you could have a target server or

00:44:17.580 --> 00:44:18.839
Daniel Roe: I get static

00:44:19.070 --> 00:44:23.280
Daniel Roe: and all of these things, and it was a little complicated. I will grant you.

00:44:23.410 --> 00:44:24.729
Daniel Roe: but it was also

00:44:24.890 --> 00:44:25.720
Daniel Roe: global.

00:44:25.870 --> 00:44:27.740
Daniel Roe: And in next 3

00:44:28.020 --> 00:44:28.939
Daniel Roe: you can

00:44:29.460 --> 00:44:32.589
Daniel Roe: have a global, is this SSR. Or not.

00:44:33.310 --> 00:44:34.770
Daniel Roe: But in general

00:44:34.960 --> 00:44:45.720
Daniel Roe: almost everything that you configure is root specific. There's a concept called root rules, so you can say, do I want these roots to be SSR

00:44:45.790 --> 00:44:46.599
Daniel Roe: or not?

00:44:46.780 --> 00:44:47.770
Daniel Roe: Do I want.

00:44:47.940 --> 00:44:50.799
Daniel Roe: or this route? Do I want that to be pre-rendered

00:44:50.910 --> 00:45:02.550
Daniel Roe: or this route do I want it to have a still while we validate strategy, but maybe like the the next jess experience that you're having, and actually this one I want in the background to be revalidated, and that's going to then

00:45:03.450 --> 00:45:04.310
Daniel Roe: work

00:45:04.340 --> 00:45:05.730
Daniel Roe: in any environment

00:45:05.830 --> 00:45:12.200
Daniel Roe: a node, it will work just as well. But if it's deployed, for example, on, and that the 5 who have support for

00:45:12.340 --> 00:45:13.479
Daniel Roe: the

00:45:13.540 --> 00:45:15.669
Daniel Roe: at SW. At the

00:45:15.740 --> 00:45:20.969
Daniel Roe: to the end level. It will take advantage of that at the Cdn level, and so

00:45:21.160 --> 00:45:27.390
Daniel Roe: and but that's all of the and so and you can even define headers, or turn on course or

00:45:27.750 --> 00:45:33.530
Daniel Roe: set up redirect all it by a root rules, and those those there's work with

00:45:33.590 --> 00:45:41.890
Daniel Roe: very, very minimal configuration, because it's they're not complex tools. And then, whatever provider you using, they output the right kind.

00:45:41.950 --> 00:45:42.740
It's a

00:45:42.890 --> 00:45:45.089
Daniel Roe: or the right kind of

00:45:45.410 --> 00:45:48.189
Daniel Roe: server to make that happen

00:45:48.350 --> 00:45:54.800
Daniel Roe: with that provider. So you don't you don't have to learn

00:45:55.060 --> 00:46:04.370
Daniel Roe: redirect. So he this file. It's just it's done for you on on that. You don't have to figure. Not that it's complex. I'm not the but it you. It just is done.

00:46:05.010 --> 00:46:08.429
Daniel Roe: and you don't have to learn the vessel. Build output Api.

00:46:08.820 --> 00:46:15.050
Daniel Roe: It's not meant for end users. We're trying to abstract all that away.

00:46:15.950 --> 00:46:19.869
Jeff Everhart: Yeah, that's really cool. That that route by route.

00:46:20.090 --> 00:46:26.850
Jeff Everhart: you know, specificity is is really need in my mind. And just, I think just makes everything super flexible for people.

00:46:27.160 --> 00:46:30.890
Jeff Everhart: because I know I've run into that right. And and also, I think.

00:46:31.000 --> 00:46:34.590
Jeff Everhart: isn't there some element, and maybe Nitro does this like

00:46:34.700 --> 00:46:48.230
Jeff Everhart: where it's kind of hard to tell where. If it are you in the client? Are you in the server like what's available to me there? Does Nitro patch any of that stuff for you. Maybe i'm not. That is that is true, and that is something that I think we can make better.

00:46:48.340 --> 00:46:50.510
Daniel Roe: because at the moment in your app.

00:46:50.530 --> 00:46:51.569
Daniel Roe: We tell you

00:46:51.860 --> 00:46:55.249
Daniel Roe: these things are available globally. They can be auto-imported.

00:46:55.390 --> 00:47:02.119
Daniel Roe: but that does mean it. It it's possible in your nitro endpoint to think oh, I can use the view composable

00:47:02.470 --> 00:47:14.460
Daniel Roe: because you're used to using it in your view endpoint, and your editor still thinks it's globally available, and you put it in, and you get an error. This isn't defined because it's not auto imported into your server roots. It is a different context.

00:47:14.810 --> 00:47:17.869
Daniel Roe: I think we can make that better. We're talking a little bit about.

00:47:18.260 --> 00:47:19.930
Daniel Roe: maybe

00:47:20.680 --> 00:47:22.740
Daniel Roe: making use of some of some

00:47:22.760 --> 00:47:26.079
Daniel Roe: 5 script features to possibly establish a different time

00:47:26.100 --> 00:47:27.909
Daniel Roe: of context for the Server Directory

00:47:28.460 --> 00:47:30.149
Daniel Roe: as opposed to the rest

00:47:30.210 --> 00:47:31.220
Daniel Roe: the rest of the app.

00:47:31.270 --> 00:47:34.790
Daniel Roe: But that adds a little that has quite a lot of complexity. And

00:47:35.580 --> 00:47:42.820
Daniel Roe: anyway. That's that's a that's work in progress. So, but that that is definitely something that we could get better at in terms of

00:47:42.860 --> 00:47:46.149
Daniel Roe: you might be in a portion of your code base

00:47:46.240 --> 00:47:49.119
Daniel Roe: that can't use the view

00:47:49.360 --> 00:47:51.450
Daniel Roe: stuff you use everywhere else.

00:47:51.640 --> 00:47:54.729
Daniel Roe: But the rule is pretty simple. It's the server folder.

00:47:54.870 --> 00:47:59.960
Daniel Roe: where that is true, and what we're doing is as much as possible trying to name

00:47:59.990 --> 00:48:07.449
Daniel Roe: things. Name the composables so that it's clear whether or not they're in the view, part or not, all the nitro composables

00:48:07.610 --> 00:48:08.849
Daniel Roe: need to have

00:48:09.160 --> 00:48:13.859
Daniel Roe: an event, the event, the request of that to to them

00:48:14.370 --> 00:48:16.059
Daniel Roe: why, is, in the view part of the app

00:48:16.100 --> 00:48:17.749
Daniel Roe: they all hook into

00:48:19.080 --> 00:48:22.399
Daniel Roe: They they use the same kind of instance context.

00:48:26.450 --> 00:48:28.410
Daniel Roe: The the idea that they know

00:48:28.520 --> 00:48:34.300
Daniel Roe: where they are and what the next instances just by being called in the right place.

00:48:34.380 --> 00:48:37.020
Daniel Roe: And so they don't need to have anything passed into them.

00:48:37.040 --> 00:48:37.939
Daniel Roe: So it's

00:48:38.020 --> 00:48:38.609
Daniel Roe: the

00:48:39.620 --> 00:48:42.409
Daniel Roe: yeah, but that that is something. I think we probably could make a bit better.

00:48:43.660 --> 00:48:49.099
Jeff Everhart: It seems like a very tough problem to solve. Right?

00:48:49.330 --> 00:49:01.900
Jeff Everhart: Yeah. So what is the next ecosystem look like right now? So if I wanted to implement off like a package that does off for me for some other features like, what what do options look like for users there?

00:49:02.360 --> 00:49:07.980
Daniel Roe: So there's this. There's great great support in the next 3 ecosystem. There are lots of modules that exist.

00:49:08.100 --> 00:49:12.259
Daniel Roe: that that new ideas people are are riffing with, or

00:49:12.400 --> 00:49:14.100
Daniel Roe: we're implementing in x 3

00:49:14.390 --> 00:49:17.270
Daniel Roe: First, you know, without the next 2 module.

00:49:17.670 --> 00:49:24.529
Daniel Roe: There are lots of modules in the next 2 ecosystem that are, that aren't needed now in the next 3, because actually we have built in support.

00:49:25.600 --> 00:49:26.529
Daniel Roe: and

00:49:26.560 --> 00:49:34.490
Daniel Roe: you know i'm really pleased with with where we are right now. So also, for example, there's a great community led Project by side base.

00:49:34.650 --> 00:49:36.669
Daniel Roe: which is

00:49:36.970 --> 00:49:40.099
Daniel Roe: they've they've called out it maybe a little bit computing the next off.

00:49:40.290 --> 00:49:43.080
Daniel Roe: but or maybe it's side base off. That might be a bit.

00:49:43.440 --> 00:49:48.960
Daniel Roe: but basically they They have a really great approach. They've wrapped next off.

00:49:49.090 --> 00:49:52.539
Daniel Roe: which is, despite the name, a a provider agnostic.

00:49:52.730 --> 00:50:00.010
Daniel Roe: just so that you can actually use all of the drivers providers for nut next off in next. So

00:50:00.040 --> 00:50:02.910
Daniel Roe: that's great, and I think are already in

00:50:02.980 --> 00:50:05.219
Daniel Roe: communication with both Js.

00:50:05.300 --> 00:50:06.279
Fran Agulto: Hello

00:50:06.360 --> 00:50:14.459
Daniel Roe: To implement it as a as a both Js. Adapter. So your choices for offer pretty good.

00:50:14.540 --> 00:50:20.180
Daniel Roe: and a lot of times off it doesn't have to be complex. You don't actually even need a a library for it.

00:50:21.420 --> 00:50:22.049
Daniel Roe: What?

00:50:22.760 --> 00:50:26.270
Daniel Roe: But it's it's totally up to you. Of course there are choices out there.

00:50:27.060 --> 00:50:39.359
Jeff Everhart: Yeah, definitely. I'm trying to think of other cool things out there. I've seen. So like I obviously we work for a wordpress company. So we're going to use the Cms. Maybe use wordpress. I know that there was also like a a nuts and content

00:50:39.810 --> 00:50:42.809
Jeff Everhart: sort of like file based Cms.

00:50:42.890 --> 00:50:46.179
Jeff Everhart: I don't know if that's worth talking about at all. That seems kind of neat.

00:50:46.880 --> 00:50:51.119
Daniel Roe: Yeah. So so next content it's. Yes, it's it's definitely neat.

00:50:51.340 --> 00:50:55.420
Daniel Roe: it is it's for mocked on based content.

00:50:55.520 --> 00:51:05.730
Daniel Roe: So you and and not only I think you can have ch you can have Jason and and other other kinds as well. But the idea is that it it lives in your your version control system

00:51:06.290 --> 00:51:12.330
Daniel Roe: now, and so it's possible to write pages. Your content of your website in lockdown

00:51:13.000 --> 00:51:27.250
Daniel Roe: Often this is great for documentation based websites. oh, yeah. And and you know all about that. Yeah, what? What? What? What's your what's your what's your docs all in in mockdown?

00:51:27.280 --> 00:51:42.449
Jeff Everhart: Yeah, they're all the Dx files, and it's like, not natively. I'm i'm not a super this. It just isn't my favorite setup. We didn't make the site but it's sort of like ingest those directly from Github, and our site is base is next Js.

00:51:42.490 --> 00:51:54.509
Jeff Everhart: it ingests them directly from Github, and then, you know, parses them, renders them but it's like 2 separate repos, so it just becomes hard to manage and so, having something that's all just like

00:51:54.650 --> 00:51:58.609
Jeff Everhart: in 1 one repo for all at all. The site, and the Docs would be

00:51:58.650 --> 00:52:02.640
Fran Agulto: nice for us.

00:52:03.840 --> 00:52:05.019
Fran Agulto: I feel like

00:52:06.080 --> 00:52:08.839
Fran Agulto: I I was gonna say, you know I feel like

00:52:09.880 --> 00:52:15.630
Fran Agulto: it specifically. A use case for writing content in markdown would be

00:52:15.760 --> 00:52:18.189
Fran Agulto: Docs. But if if

00:52:18.630 --> 00:52:23.169
Fran Agulto: just just throwing it out there for shit and giggles like, if I was.

00:52:23.390 --> 00:52:31.549
Fran Agulto: if I was running a blog, and I just didn't want to mess with wordpress or anything. I just really wanted to just write my stuff and mark down in a blog.

00:52:31.710 --> 00:52:34.179
Fran Agulto: That's okay, too, right? Y'all, I mean.

00:52:34.410 --> 00:52:36.740
Fran Agulto: yeah.

00:52:37.090 --> 00:52:45.089
Daniel Roe: I mean, I I I think the question when when you're choosing a Cms it, there are lots of factors, and one of the most important is obviously who is using it

00:52:45.180 --> 00:52:47.169
Daniel Roe: so? the

00:52:47.510 --> 00:52:52.729
Daniel Roe: the so at the moment the choices are. If you, if you're writing your content and mock down

00:52:54.660 --> 00:52:58.670
Daniel Roe: I think probably this is not going to be, you know. This might not be.

00:52:58.880 --> 00:53:02.280
Daniel Roe: This might be more target to develop a audience.

00:53:03.390 --> 00:53:07.480
Daniel Roe: there's netlify Cms is fantastic Great Standalone

00:53:07.640 --> 00:53:10.160
Daniel Roe: also, I mean, i'm sure you you know this. But

00:53:10.200 --> 00:53:13.050
Daniel Roe: not. Everyone might know that

00:53:13.090 --> 00:53:26.110
Daniel Roe: hosted by not the 5. It's, an it's an app that you can use yourself. I mean I it it like it's it's not it's not part of the platform, and it's not paid. It is it's incredible. It's a way of it integrates with your own.

00:53:26.450 --> 00:53:30.449
Daniel Roe: Get get repo, and allows you an interface to

00:53:30.820 --> 00:53:31.449
Daniel Roe: It's not done.

00:53:31.900 --> 00:53:40.600
Daniel Roe: there's also Nuts studio. I don't know if you've come across this. No, no! What is I I want to look it up now. Next student.

00:53:42.120 --> 00:53:43.760
Daniel Roe: it is a get based the amount

00:53:44.170 --> 00:53:50.820
Daniel Roe: which is just been an announcement and and and put out there by

00:53:50.840 --> 00:53:53.600
Daniel Roe: which is

00:53:56.220 --> 00:54:01.009
Daniel Roe: company that's been started by the people who founded next. So Sebastian and Alex

00:54:01.810 --> 00:54:03.480
Daniel Roe: and that's that's

00:54:03.770 --> 00:54:06.200
Daniel Roe: you know. That's under development. But that's definitely worth checking.

00:54:06.840 --> 00:54:19.160
Jeff Everhart: Oh, wow, yeah, that does look cool. This looks pretty cool. Actually. Yeah. And it's interesting to see that, like they started nuts labs too, like they're so I feel like there's so many open source projects who are

00:54:19.270 --> 00:54:21.409
Jeff Everhart: like trending toward that model.

00:54:21.520 --> 00:54:24.159
Jeff Everhart: it's kind of interesting to see.

00:54:24.350 --> 00:54:28.100
Fran Agulto: I think what was the other

00:54:28.210 --> 00:54:36.840
Fran Agulto: just switching a web app or site. Used case here to to ecom didn't view. Launch a

00:54:37.180 --> 00:54:42.539
Fran Agulto: thing like shop if I had to react hydrogen you have like some kind of is it storefront?

00:54:42.620 --> 00:54:45.470
Jeff Everhart: There is a view storefront. Yeah.

00:54:45.910 --> 00:54:48.929
Fran Agulto: Did you work on that, Daniel. Perchance the storefront.

00:54:49.150 --> 00:54:52.949
Daniel Roe: It didn't. No, no, no, i'm not part of the

00:54:53.080 --> 00:54:58.590
Daniel Roe: that was built on nuts, though. So if you still front was built on that next 2

00:54:58.790 --> 00:55:08.390
Daniel Roe: and I believe they're migrating to next 3 at the moment. so. but yeah, so you storefront is is absolutely a a

00:55:09.360 --> 00:55:10.729
Daniel Roe: Now I don't know

00:55:11.230 --> 00:55:14.189
Daniel Roe: is, does you still have an adapter for wordpress?

00:55:14.980 --> 00:55:26.809
Jeff Everhart: I actually look the other day, and it's not listed on their integrated headless Cms's and I was like, oh, I need to fix that a long enough time.

00:55:27.410 --> 00:55:32.520
Daniel Roe: I think it should be. Oh, yeah, not. I bet there are people doing it already.

00:55:32.620 --> 00:55:50.250
Jeff Everhart: But well, there's one developer in our discord Scottie Kennedy. He? What is he working on? I think it's a Wu nux, maybe. Yeah, it's a little nuts. We'll call it one. Yeah, yeah, based on woocommerce. And next, I think his is actually

00:55:50.570 --> 00:55:55.639
Jeff Everhart: released relatively. Recently so like it's definitely possible.

00:55:55.690 --> 00:56:00.769
Jeff Everhart: And I I went and looked at View Store front one day. It was like, oh, man, I need that. Put that on my list of

00:56:00.800 --> 00:56:09.689
Jeff Everhart: like outreach. Yeah, exactly, because it should be on there. I guess both as a Cms, I mean, and technically like doing what Scott is doing

00:56:09.830 --> 00:56:16.719
Jeff Everhart: that's the Cms. But also the e-commerce platform as well, using woocommerce so that really could be both.

00:56:17.130 --> 00:56:20.809
Jeff Everhart: although I have a feeling that the e-commerce part

00:56:21.040 --> 00:56:25.080
Jeff Everhart: just from our experience, and woocommerce is a little bit more challenging.

00:56:25.200 --> 00:56:33.659
Jeff Everhart: But like to speak to that that ecosystem there's a lot of developers who are like, you know, building things like Scottie. There's another product called Co-part

00:56:33.850 --> 00:56:43.220
Jeff Everhart: that is like you know building a better woocommerce Api layer. For example, you know, for example, that you can tap into, so it's cool to see

00:56:43.470 --> 00:56:45.170
Jeff Everhart: Some of that stuff happen

00:56:45.760 --> 00:56:50.599
Daniel Roe: is great, by the way, like it's it's beautiful as well as

00:56:51.010 --> 00:56:57.330
Daniel Roe: but I think I guess partly what I was saying about choosing is thems is that it really matters to your users are

00:56:57.410 --> 00:57:02.540
Daniel Roe: and I I know you know, for my time and agency world.

00:57:02.610 --> 00:57:04.030
Daniel Roe: that you know.

00:57:04.570 --> 00:57:11.159
Daniel Roe: Anyway, I think that they're just a lot of choices, so you might might find the next Content is right for you, but it might also not be right.

00:57:11.370 --> 00:57:15.069
Daniel Roe: So it's it's it's it's good to have options out there.

00:57:15.190 --> 00:57:22.270
Jeff Everhart: Yes, if we ask a marketer to write Mark down, they will probably stop. They will. Yeah, they would. Yeah.

00:57:24.610 --> 00:57:44.199
Fran Agulto: it's it's it's a a a marketer has told me, Fred, I don't want it. Yeah, this is a terrible experience for me. I don't want to write Mark down. Yeah, but oh, and I just realized we're we're pushing up on the hour. Yeah, so let's if you've got just a few minutes, you know, we got maybe just 2 more questions for you. Is that all right? That's cool.

00:57:45.110 --> 00:57:53.379
Jeff Everhart: Cool. So this is we'll skip forward and you know definitely. Look at. I'll be dropping some next content here in the next month or so. So if you're listening once, i'm

00:57:53.620 --> 00:58:02.660
Jeff Everhart: you know, updated way on getting started i'll do that. So this is a question I like to ask everybody, and it's great because you have a little bit of wordpress experience already. So if you could wave a magic wand.

00:58:02.830 --> 00:58:11.800
Jeff Everhart: You know. What is one change you would make to wordpress to make it better for headless developers, or you know what what would make it better for people who want to use it with next.

00:58:13.740 --> 00:58:22.679
Daniel Roe: Well, I don't know about at least or not. I'll think about that in a second. But absolutely. One thing that I would do is make the roots stack

00:58:22.930 --> 00:58:23.850
Daniel Roe: defaults.

00:58:24.050 --> 00:58:27.520
Daniel Roe: I I would absolutely have this be the way wordpress is.

00:58:27.550 --> 00:58:28.920
Daniel Roe: Dependencies should be

00:58:28.940 --> 00:58:30.790
Daniel Roe: managed by composer.

00:58:30.940 --> 00:58:32.370
Daniel Roe: that doesn't

00:58:32.620 --> 00:58:35.350
Daniel Roe: as much as possible. Just take

00:58:35.380 --> 00:58:39.709
Daniel Roe: head rock and make that wordpress. That is what I would say as an absolute

00:58:39.780 --> 00:58:41.090
Daniel Roe: first step.

00:58:42.400 --> 00:58:45.329
Daniel Roe: And if people aren't familiar with that roots is just

00:58:45.360 --> 00:58:47.290
Daniel Roe: it's incredible.

00:58:47.490 --> 00:58:48.549
Jeff Everhart: Yeah,

00:58:48.710 --> 00:58:54.079
Daniel Roe: Anyway, I I absolutely loved absolutely love that that

00:58:54.200 --> 00:58:57.039
Daniel Roe: way of of both building and deploying.

00:58:59.590 --> 00:59:03.709
Daniel Roe: I think to make it better if I had this developers, I think I've struggled

00:59:03.750 --> 00:59:04.580
Daniel Roe: often

00:59:04.930 --> 00:59:07.509
Daniel Roe: registering types for

00:59:07.640 --> 00:59:13.719
Daniel Roe: custom, taxonomies and things so particularly when developers have their own. Maybe they've had an agency build something

00:59:13.910 --> 00:59:20.199
Daniel Roe: like, and they have an existing data set existing plugins that lots of data is in there, but it's maybe being

00:59:21.570 --> 00:59:26.150
Daniel Roe: maybe being looked after in a slightly different way under the hood.

00:59:26.390 --> 00:59:31.129
Daniel Roe: it would be nice to be able to expose things to the Api a lot in a lot

00:59:31.170 --> 00:59:34.640
Daniel Roe: easier way. This is just my own back of

00:59:34.750 --> 00:59:36.740
Daniel Roe: lack of experience speaking.

00:59:37.010 --> 00:59:38.339
Daniel Roe: but I think that that could be.

00:59:38.770 --> 00:59:39.580
Daniel Roe: It's really nice.

00:59:39.880 --> 00:59:41.810
Daniel Roe: and

00:59:42.140 --> 00:59:43.100
Daniel Roe: what else?

00:59:43.690 --> 00:59:48.320
Daniel Roe: Oh, I mean. Obviously it would be nice if you were able to write some of the

00:59:48.340 --> 00:59:50.659
Daniel Roe: the Gutenberg blocks in view.

00:59:50.960 --> 00:59:59.460
Jeff Everhart: Yeah, that was sort of. So. I knew that you were gonna say that I don't know. I don't know if it

00:59:59.540 --> 01:00:09.359
Jeff Everhart: I think you do. There is kind of like a hard react dependency there which I was really disappointed, and there was a second, I remember, before they had gone all in on Gutenberg, where

01:00:09.370 --> 01:00:19.840
Jeff Everhart: reacted like change their licensing structure, and for a second map Mullen was like, maybe we're gonna look at view, and I've never been so ecstatic. I was like, oh, please do it.

01:00:19.970 --> 01:00:25.120
Fran Agulto: Yeah.

01:00:25.680 --> 01:00:31.769
Jeff Everhart: yeah. So that would be really cool. that I don't think we're going to get to. But yeah.

01:00:31.950 --> 01:00:41.709
Fran Agulto: okay, no. Those are all awesome suggestions. Yeah. And France got one question. The last question to wrap us up y'all, and this is Frans fun question. But here's the thing is, I think

01:00:42.110 --> 01:01:00.139
Fran Agulto: Daniel actually just does also code for fun. So besides coding, Daniel, what do you? What do you? What do you like to do for fun? Do you do rock, climb on your spare time, or you said you had to put a kid out. Are you a father, or do you? Yeah, tell us a little bit about what you do to decompress from code?

01:01:01.190 --> 01:01:03.889
Daniel Roe: Yeah, Good question.

01:01:05.590 --> 01:01:12.060
Daniel Roe: Good question. So I I am a dad. Yeah, I've got a 3 year old son who is absolutely lovely.

01:01:12.510 --> 01:01:17.719
Daniel Roe: and so a lot of my my day. Basically a lot of the day that is not

01:01:17.950 --> 01:01:20.890
Daniel Roe: coding is spent

01:01:20.950 --> 01:01:26.850
Daniel Roe: playing with him and around when he's around. So i'm i'm with him most morning when he wakes up

01:01:27.300 --> 01:01:29.999
Daniel Roe: or rather he wakes up, and then that

01:01:30.130 --> 01:01:40.819
Daniel Roe: that can I wake up up to it? but we. We then sort of go, and you know, cuddle and milk and stuff like that. So it's it's it's fun.

01:01:42.570 --> 01:01:54.340
Daniel Roe: One thing I am looking forward to this year, and which I I think probably is one of the things I love most in the world which I didn't do last year, and maybe not, for a couple of years, is ski.

01:01:54.730 --> 01:01:56.459
Fran Agulto: I'm going to go on a

01:01:56.580 --> 01:02:00.959
Daniel Roe: I'm going to a conference later this year. I later in in February.

01:02:01.020 --> 01:02:07.379
Daniel Roe: and 2 days of talks, and in 2 days skiing, and I am honestly so stoked that is

01:02:07.570 --> 01:02:08.920
Daniel Roe: sort of dream

01:02:08.980 --> 01:02:10.980
Daniel Roe: dream life outside of

01:02:11.020 --> 01:02:14.860
Fran Agulto: where you. Where's the conference at?

01:02:15.240 --> 01:02:18.239
Daniel Roe: It's in Austria in dawn, Ben.

01:02:18.450 --> 01:02:30.969
Fran Agulto: Okay, i'm thinking of coming. I was thinking, maybe if I could give them up to pay for me and Jeff to meet you there. Snowboarding? I'm there, that's been my we I knew not to for snowboarding. Yeah.

01:02:30.980 --> 01:02:41.680
Jeff Everhart: we moved to Florida, and I had snowboarded this year, and I was like, oh, man, that I really miss this! So is this a viewcom. It's just like No, it's not of you.

01:02:41.690 --> 01:02:54.310
Daniel Roe: So it's it's, in fact, for those probably more react speakers there than than you, because you totally can't see Ddds is going to be there Doesn't get any more reaction to that. Oh, my gosh, yeah.

01:02:54.430 --> 01:02:59.199
Fran Agulto: I wonder if the remix guys will be there, too, like Mike. Yeah, yeah, that's

01:02:59.770 --> 01:03:13.379
Fran Agulto: yeah, that that's Probably that sounds like a fun trip. Just let's see if we can finish what we'll put in some pro. If there's a Cfp. We'll submit some stuff. See? Yeah, we were all.

01:03:13.390 --> 01:03:23.580
Jeff Everhart: and I know there's a of like there's a view Conf: right maybe happening in the Us. And New Orleans. Are you going to be there by chance.

01:03:23.620 --> 01:03:25.870
Daniel Roe: I am. I am. I am going to be there.

01:03:25.980 --> 01:03:28.609
Daniel Roe: so yeah, are you? Are you going?

01:03:28.850 --> 01:03:37.820
Jeff Everhart: I think we're gonna try. I'm gonna try for sure. Yeah, that that was really close in between Fran and I geographically.

01:03:38.060 --> 01:03:54.720
Fran Agulto: so i'm definitely going to submit a presentation and see if I can get the company. Oh, it's me 2,040 out there. Yeah, yeah, You know what i'm gonna try. I don't. Hmm. The thing is I I i'm not. I could speak it a react cough. But I I don't know anything about you, but that gives me time to learn it real quick, yeah

01:03:54.730 --> 01:04:14.099
Fran Agulto: enough to not my company pay for me to go to either way. I set up a booth or something. Here's the thing to you all. and yeah, Daniel, it it'd be cool to meet you. But you seem like a cool beer, too, and we have a beer and stuff. But like what I was gonna say is I'm in Austin, Texas, and

01:04:14.110 --> 01:04:33.400
Fran Agulto: it's a 45 min I can hop on a plan and be in New Orleans and 45 min. So if even if Wpman says, hey, we're not going to pay you. But you should go. But Jeff can speak there. I i'll meet you all there, and i'll pay my way there. It's cheap. So yeah.

01:04:33.410 --> 01:04:55.500
Fran Agulto: Well, Daniel, I appreciate you coming on man, it's super grateful for you to come on and and and give us some more deep dive nerdiness into the view. And next ecosystem and world, because that's something. I believe we're lacking on our developer relations site for headless work for us here. So so I appreciate it. Many things, so gratitude. Yes, thank you so much. Man.

01:04:55.780 --> 01:04:56.680
Daniel Roe: Real pleasure

01:04:57.080 --> 01:04:58.700
Fran Agulto: all right.

01:04:59.760 --> 01:05:00.490