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:
https://nuxt.com/docs/getting-started/introduction
Daniel's Website & Twitter:
https://roe.dev/
https://twitter.com/danielcroe
Headless WordPress resources:
https://developers.wpengine.com
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:
https://nuxt.com/docs/getting-started/introduction
Daniel's Website & Twitter:
https://roe.dev/
https://twitter.com/danielcroe
Headless WordPress resources:
https://developers.wpengine.com
WEBVTT
1
00:00:00.120 --> 00:00:01.220
Fran Agulto: To
2
00:00:01.420 --> 00:00:03.240
Fran Agulto: one, and we are recording
3
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
4
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?
5
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.
6
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,
7
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.
8
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.
9
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.
10
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.
11
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
12
00:02:10.600 --> 00:02:12.489
Daniel Roe: a teenager. I think I
13
00:02:12.680 --> 00:02:15.370
Daniel Roe: I designed a website. The my first paid
14
00:02:15.530 --> 00:02:18.260
Daniel Roe: thing was with I was used. I used dream weaver.
15
00:02:18.500 --> 00:02:22.600
Daniel Roe: and I distinctly remember Microsoft front page being involved.
16
00:02:22.800 --> 00:02:27.270
Daniel Roe: And like you sort of ftp stuff up somewhere.
17
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
18
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
19
00:02:47.110 --> 00:02:51.510
Daniel Roe: and did all kinds of other things. so I in fact, my
20
00:02:51.540 --> 00:02:55.290
Daniel Roe: the current for it into web development is much, much more recent.
21
00:02:55.370 --> 00:02:57.279
Daniel Roe: It was only
22
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.
23
00:03:02.960 --> 00:03:07.270
Daniel Roe: which seems hard to believe it feels like it's been a lot longer.
24
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.
25
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
26
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.
27
00:03:30.480 --> 00:03:33.350
Daniel Roe: and because I have this interest in programming
28
00:03:33.570 --> 00:03:35.780
Daniel Roe: it's all in my background.
29
00:03:35.840 --> 00:03:37.310
Daniel Roe: We started offering
30
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
31
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
32
00:04:00.100 --> 00:04:02.579
Daniel Roe: so well. Yes, we can explore
33
00:04:02.680 --> 00:04:03.880
Daniel Roe: for that, I
34
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.
35
00:04:12.120 --> 00:04:15.329
Daniel Roe: We pivoted as a company into software as a service.
36
00:04:15.550 --> 00:04:19.299
Daniel Roe: a sort of reverse acquired One of our 5,
37
00:04:19.649 --> 00:04:22.389
Daniel Roe: you know, acquired one of our clients, but became them.
38
00:04:22.850 --> 00:04:24.369
Daniel Roe: You know what I mean, and then
39
00:04:25.520 --> 00:04:29.580
Daniel Roe: and then when I when we we shut down that that start up.
40
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
41
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
42
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.
43
00:05:00.500 --> 00:05:05.629
Daniel Roe: So I mean, yeah, working directly with a wordpress. Api.
44
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.
45
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
46
00:05:24.980 --> 00:05:27.230
Daniel Roe: a lot of the
47
00:05:27.580 --> 00:05:29.030
Daniel Roe: the wordpress
48
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
49
00:05:37.450 --> 00:05:38.969
Daniel Roe: content for the site.
50
00:05:39.080 --> 00:05:42.560
Daniel Roe: and then the front end was the next and that's website.
51
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
52
00:05:51.360 --> 00:05:55.479
Daniel Roe: the content on the site. You then able to regenerate the static
53
00:05:55.880 --> 00:06:00.380
Daniel Roe: site. It was incredibly fast, because there were no runtime calls to be made.
54
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.
55
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.
56
00:06:15.540 --> 00:06:19.540
Daniel Roe: And then we had. We built had to obviously build out integrations for every
57
00:06:19.560 --> 00:06:20.570
Daniel Roe: possible
58
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
59
00:06:32.600 --> 00:06:34.530
Daniel Roe: you could make it extremely loose.
60
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.
61
00:06:41.680 --> 00:06:43.090
I want to.
62
00:06:43.330 --> 00:06:45.420
Daniel Roe: You know the redirection plug in, I forget which.
63
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.
64
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.
65
00:07:04.240 --> 00:07:07.340
Daniel Roe: So it it felt quite integrated, even though technical.
66
00:07:07.470 --> 00:07:11.699
Daniel Roe: even though infrastructure it wasn't even running on the same hardware.
67
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
68
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.
69
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.
70
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
71
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.
72
00:08:04.300 --> 00:08:05.859
Jeff Everhart: Yeah, that's really neat.
73
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
74
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.
75
00:08:19.910 --> 00:08:21.309
Jeff Everhart: man. It must have been
76
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.
77
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
78
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.
79
00:08:57.140 --> 00:09:01.169
Jeff Everhart: I was just like this thing flies it's so performant, and so clean
80
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
81
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
82
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.
83
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
84
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
85
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
86
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.
87
00:10:21.890 --> 00:10:23.440
Fran Agulto: so
88
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
89
00:10:38.440 --> 00:10:39.330
Daniel Roe: so?
90
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.
91
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
92
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.
93
00:11:05.450 --> 00:11:12.450
Daniel Roe: if the E. And next is for yeah, so initially, it is a
94
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.
95
00:11:25.430 --> 00:11:29.700
Daniel Roe: I'm so more it's, it's all it's all very interesting.
96
00:11:29.730 --> 00:11:33.149
Daniel Roe: So, for example, just our last release last week
97
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.
98
00:11:54.640 --> 00:11:56.960
Daniel Roe: In some cases, not. In some cases we have
99
00:11:57.630 --> 00:11:58.380
Daniel Roe: differently.
100
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
101
00:12:06.180 --> 00:12:08.530
Daniel Roe: is a framework for building web apps
102
00:12:08.780 --> 00:12:10.490
Daniel Roe: built on view.
103
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.
104
00:12:14.640 --> 00:12:17.019
Daniel Roe: it has a server component to
105
00:12:17.070 --> 00:12:21.489
Daniel Roe: and we've just finished a rewrite for n 3
106
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
107
00:12:28.390 --> 00:12:30.260
Daniel Roe: platform and
108
00:12:30.650 --> 00:12:31.610
Daniel Roe: agnostic.
109
00:12:31.810 --> 00:12:34.179
Daniel Roe: It runs in pretty much any
110
00:12:34.320 --> 00:12:38.000
Daniel Roe: any platform, and the ones that doesn't because we haven't. Yet.
111
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.
112
00:12:42.150 --> 00:12:46.209
Daniel Roe: So it runs on in cloud. Flow versus not the 5
113
00:12:46.460 --> 00:12:47.310
Fran Agulto: Oh.
114
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
115
00:12:58.810 --> 00:13:05.099
Daniel Roe: I i'm not stopping, because I've run out of of places that
116
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.
117
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.
118
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
119
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.
120
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.
121
00:13:36.170 --> 00:13:40.040
Daniel Roe: actually, you want as minimal cost, start up and then
122
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.
123
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.
124
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
125
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
126
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.
127
00:14:30.810 --> 00:14:31.730
Jeff Everhart: and like
128
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.
129
00:14:51.660 --> 00:14:53.140
Daniel Roe: I I I think I mean
130
00:14:53.240 --> 00:14:55.600
Daniel Roe: particularly over the last few
131
00:14:56.430 --> 00:14:57.540
months.
132
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
133
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
134
00:15:08.680 --> 00:15:12.949
Daniel Roe: building building frameworks. out there. Libraries?
135
00:15:13.280 --> 00:15:14.479
Daniel Roe: Who are just
136
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.
137
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.
138
00:15:28.080 --> 00:15:31.050
Daniel Roe: It's nice to feel sort of feel part of that
139
00:15:31.350 --> 00:15:33.860
Daniel Roe: and open source, of course, is
140
00:15:34.020 --> 00:15:34.840
Daniel Roe: is
141
00:15:36.100 --> 00:15:37.600
Daniel Roe: certainly isn't my experience
142
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.
143
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
144
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
145
00:16:14.310 --> 00:16:15.109
it's it's
146
00:16:15.490 --> 00:16:17.330
Daniel Roe: you got to hold these things lightly.
147
00:16:18.200 --> 00:16:19.549
Daniel Roe: so it's it's a good
148
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
149
00:16:36.590 --> 00:16:40.410
Fran Agulto: and setting up dynamic routes with a bracket syntax
150
00:16:41.750 --> 00:16:46.300
Fran Agulto: very similar in in view. Yes.
151
00:16:46.470 --> 00:16:48.930
Fran Agulto: Is there like a function? Yeah, like
152
00:16:49.250 --> 00:16:53.370
Fran Agulto: that that helps me server side render or statically set generate.
153
00:16:54.680 --> 00:16:56.180
Daniel Roe: Yes, so
154
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
155
00:17:04.119 --> 00:17:07.189
Daniel Roe: but not because always had file system based routing
156
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
157
00:17:14.230 --> 00:17:16.970
Daniel Roe: now we actually you can have square brackets
158
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
159
00:17:25.650 --> 00:17:29.270
Daniel Roe: it's a little bit different for server side data fetching.
160
00:17:29.380 --> 00:17:33.299
Daniel Roe: So we we have a composable strategy. So, rather than having it
161
00:17:33.350 --> 00:17:35.209
Daniel Roe: export from your file
162
00:17:35.420 --> 00:17:40.649
Daniel Roe: from your page which defines a function that's going to return the
163
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
164
00:17:49.530 --> 00:17:50.670
Daniel Roe: in next
165
00:17:50.720 --> 00:17:52.630
Daniel Roe: any component at all.
166
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
167
00:17:59.340 --> 00:18:01.159
Daniel Roe: and other firm is to with the same
168
00:18:01.190 --> 00:18:04.969
Daniel Roe: our system routing stuff. That's true for data fetching
169
00:18:05.000 --> 00:18:06.919
Daniel Roe: in view in in next
170
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.
171
00:18:13.300 --> 00:18:15.710
Daniel Roe: we we use asyn data call
172
00:18:16.240 --> 00:18:18.950
Daniel Roe: on this use. Async data composable
173
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
174
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
175
00:18:37.970 --> 00:18:39.760
Daniel Roe: that you can use to build a ui around it.
176
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
177
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
178
00:18:54.660 --> 00:18:59.960
Daniel Roe: hold into memory, and all of those components, instead of performing the request.
179
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
180
00:19:04.320 --> 00:19:07.050
Daniel Roe: from how it works in the next. In fact, my different.
181
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
182
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
183
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.
184
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.
185
00:19:32.140 --> 00:19:35.369
Daniel Roe: or you can use a a composable strategy.
186
00:19:35.460 --> 00:19:39.910
Daniel Roe: So You could have some it like. Think of a re react hook.
187
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.
188
00:19:44.420 --> 00:19:45.320
Daniel Roe: Any
189
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
190
00:19:51.060 --> 00:19:53.740
Daniel Roe: get order imported anywhere you use them in your app.
191
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.
192
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.
193
00:20:06.700 --> 00:20:10.340
Daniel Roe: So if you have a couple of components, only the same piece of data.
194
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.
195
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.
196
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
197
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.
198
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.
199
00:21:06.760 --> 00:21:08.170
Yeah, that is cool.
200
00:21:08.270 --> 00:21:11.249
Daniel Roe: So I mean, in fact, what whenever I've sort of
201
00:21:11.590 --> 00:21:14.159
Daniel Roe: my fingers in the next world.
202
00:21:14.180 --> 00:21:16.340
Daniel Roe: I or in the react world in general.
203
00:21:16.460 --> 00:21:20.990
Daniel Roe: I always try as much as possible to recreate.
204
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.
205
00:21:29.830 --> 00:21:31.360
Daniel Roe: Get how it works, but
206
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
207
00:21:37.460 --> 00:21:41.120
Daniel Roe: for for goodness sake, that that i'm on board with I
208
00:21:41.280 --> 00:21:43.790
Daniel Roe: I I think I I I can have.
209
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.
210
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
211
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.
212
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.
213
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.
214
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
215
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
216
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
217
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
218
00:23:05.330 --> 00:23:09.159
Jeff Everhart: that maybe you could help shed some light on so like
219
00:23:09.340 --> 00:23:12.110
Jeff Everhart: I know now there, and maybe this was
220
00:23:12.280 --> 00:23:17.420
Jeff Everhart: pain and view 3. Write the composition: Api versus the options Api
221
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
222
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.
223
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.
224
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,
225
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
226
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
227
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
228
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
229
00:24:23.730 --> 00:24:24.760
Daniel Roe: It's very well done.
230
00:24:24.830 --> 00:24:28.400
Daniel Roe: And actually at the moment, if you, whenever I am at a
231
00:24:29.010 --> 00:24:31.860
Daniel Roe: another. I've seen people ask the question.
232
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
233
00:24:37.060 --> 00:24:38.400
Daniel Roe: composition. Api. Now.
234
00:24:38.550 --> 00:24:39.680
Daniel Roe: So what is it?
235
00:24:41.670 --> 00:24:44.449
Daniel Roe: What is it? So? Basically the
236
00:24:44.670 --> 00:24:46.570
Daniel Roe: reactivity
237
00:24:46.660 --> 00:24:49.840
Daniel Roe: in view is a thing on its own.
238
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
239
00:24:58.630 --> 00:25:00.569
Daniel Roe: and so this is
240
00:25:00.590 --> 00:25:03.539
Daniel Roe: the essence of a lot of reactive frameworks.
241
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.
242
00:25:22.780 --> 00:25:24.640
Daniel Roe: you would have some reactive data.
243
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.
244
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?
245
00:25:37.240 --> 00:25:38.580
Daniel Roe: All the same things.
246
00:25:38.720 --> 00:25:39.520
Daniel Roe: data.
247
00:25:39.980 --> 00:25:40.870
Daniel Roe: computed
248
00:25:41.100 --> 00:25:42.020
Daniel Roe: properties.
249
00:25:42.320 --> 00:25:45.000
Daniel Roe: watches, methods, and just
250
00:25:45.030 --> 00:25:46.270
disconnect them
251
00:25:46.380 --> 00:25:51.239
Daniel Roe: from the component. What if they could be sort of standalone methods and utilities
252
00:25:51.790 --> 00:25:54.189
Daniel Roe: that you can use to create
253
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.
254
00:26:01.430 --> 00:26:04.419
Daniel Roe: and somehow get used in different places.
255
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
256
00:26:11.010 --> 00:26:15.870
Daniel Roe: View as a concept of the the V 3 has this concept of the
257
00:26:16.160 --> 00:26:20.459
Daniel Roe: that instance so immediately before following the setup function.
258
00:26:20.710 --> 00:26:24.199
Daniel Roe: you says, hey, the current instance is this: this one here?
259
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.
260
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.
261
00:26:34.690 --> 00:26:36.939
Daniel Roe: But basically you get the benefit
262
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
263
00:26:41.780 --> 00:26:45.270
Daniel Roe: it still lives in that.
264
00:26:46.050 --> 00:26:46.940
Daniel Roe: Hello!
265
00:26:47.080 --> 00:26:51.190
Daniel Roe: This has been a real transformative move. And actually, that's set up function
266
00:26:51.240 --> 00:26:54.730
Daniel Roe: started as just one lifecycle method in a whole
267
00:26:55.110 --> 00:26:56.260
Daniel Roe: component object.
268
00:26:56.320 --> 00:26:58.920
Daniel Roe: So actually, you you probably could actually use
269
00:26:58.980 --> 00:27:00.230
Daniel Roe: Bill. The methods in the computer
270
00:27:00.260 --> 00:27:02.859
Daniel Roe: use key and other stuff as well as a set of function.
271
00:27:03.260 --> 00:27:06.929
Daniel Roe: but basically almost everything it mattered
272
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
273
00:27:11.740 --> 00:27:14.409
Daniel Roe: is with a script that up lock.
274
00:27:14.490 --> 00:27:17.710
Daniel Roe: So you don't have a script lock where you export a default
275
00:27:17.830 --> 00:27:21.499
Daniel Roe: object which is the component which has a method called
276
00:27:21.520 --> 00:27:24.399
Daniel Roe: you. Just have a block, and everything in that block
277
00:27:24.420 --> 00:27:26.399
Daniel Roe: is the setup function.
278
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
279
00:27:32.780 --> 00:27:35.280
Daniel Roe: the values that are exposed to the template.
280
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.
281
00:27:43.050 --> 00:27:45.730
Daniel Roe: in the script set up lock. You can
282
00:27:45.760 --> 00:27:48.900
Daniel Roe: it. The compiler figures it out for you, basically.
283
00:27:48.980 --> 00:27:51.030
Daniel Roe: and we have some really great tooling
284
00:27:51.120 --> 00:27:52.300
Daniel Roe: with Zola
285
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
286
00:28:07.200 --> 00:28:12.009
Daniel Roe: and actually is it? Powers? Not just at Thes code, but neo them and
287
00:28:12.190 --> 00:28:16.380
Daniel Roe: all kinds of other ids and
288
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
289
00:28:23.610 --> 00:28:26.380
Daniel Roe: check check for that. That's it's it's really really cool.
290
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.
291
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
292
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
293
00:29:03.210 --> 00:29:07.560
Jeff Everhart: structure, and, like just minimized it so well, it was really cool to see.
294
00:29:07.920 --> 00:29:10.670
Daniel Roe: I don't know about any study, but I wouldn't surprise me.
295
00:29:10.770 --> 00:29:12.090
Daniel Roe: and actually.
296
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.
297
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
298
00:29:28.860 --> 00:29:31.850
Daniel Roe: you to have the concept of Nixon's.
299
00:29:31.980 --> 00:29:33.430
Daniel Roe: but Nixon's weren't
300
00:29:33.680 --> 00:29:34.830
Daniel Roe: type 12,
301
00:29:35.100 --> 00:29:36.940
Daniel Roe: so you could be
302
00:29:37.070 --> 00:29:38.060
Daniel Roe: effectively.
303
00:29:38.230 --> 00:29:40.319
Daniel Roe: You were like you could
304
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
305
00:29:54.410 --> 00:29:56.990
Daniel Roe: different data properties, which would also be merged.
306
00:29:57.510 --> 00:30:00.670
Daniel Roe: So everything was on the same flat surface.
307
00:30:01.730 --> 00:30:04.060
Daniel Roe: at which meant it was easy to collide.
308
00:30:04.320 --> 00:30:08.789
Daniel Roe: So if you had a data property called, you know, value or something
309
00:30:08.820 --> 00:30:11.499
Daniel Roe: easily overwritten by something else.
310
00:30:11.700 --> 00:30:14.160
Daniel Roe: it was really hard to know what was exposed.
311
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
312
00:30:19.110 --> 00:30:20.490
Daniel Roe: and
313
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.
314
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
315
00:30:32.260 --> 00:30:34.020
Daniel Roe: when the component is mounted.
316
00:30:34.240 --> 00:30:39.779
Daniel Roe: You can also have internal state which never is exposed to the end, user
317
00:30:39.830 --> 00:30:42.930
Daniel Roe: just within your composable. You set that up
318
00:30:42.980 --> 00:30:45.770
Daniel Roe: the internal state, and then maybe you watch it.
319
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.
320
00:30:54.070 --> 00:30:55.620
Daniel Roe: not mutably.
321
00:30:55.970 --> 00:30:58.580
Daniel Roe: What you exposed to them is is that computed?
322
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
323
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.
324
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.
325
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.
326
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.
327
00:31:45.080 --> 00:31:48.130
Fran Agulto: Jeff, I think you're gonna. This is making me think we need a
328
00:31:48.470 --> 00:31:51.650
Fran Agulto: I I I'm. Next.
329
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
330
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.
331
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.
332
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.
333
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.
334
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.
335
00:32:50.370 --> 00:32:52.720
Daniel Roe: but it should also be fully customizable
336
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
337
00:33:00.040 --> 00:33:02.349
Daniel Roe: which is amazing and really
338
00:33:02.420 --> 00:33:04.139
Daniel Roe: incredible. So
339
00:33:04.200 --> 00:33:05.350
Daniel Roe: the community
340
00:33:05.420 --> 00:33:09.099
Daniel Roe: I've created lots and lots of modules hooking into different
341
00:33:09.230 --> 00:33:11.920
Daniel Roe: bits. We expose from the framework itself.
342
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.
343
00:33:19.060 --> 00:33:20.920
Daniel Roe: We have to commit to Apis.
344
00:33:21.230 --> 00:33:22.970
Daniel Roe: The move from 2 to 3
345
00:33:23.360 --> 00:33:24.910
Daniel Roe: was a big move.
346
00:33:24.970 --> 00:33:27.940
Daniel Roe: and not one that i'm keen to repeat
347
00:33:27.960 --> 00:33:32.120
Daniel Roe: at any point again, because because I I guess, like like the
348
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.
349
00:33:38.740 --> 00:33:40.869
Daniel Roe: and a lot of the changes in that.
350
00:33:41.540 --> 00:33:42.250
you know.
351
00:33:42.940 --> 00:33:45.780
Fran Agulto: similar to the changes that happen in view. 3 and and
352
00:33:45.910 --> 00:33:48.169
Daniel Roe: they almost had to happen.
353
00:33:48.460 --> 00:33:49.780
Daniel Roe: but
354
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
355
00:33:57.350 --> 00:33:58.769
Daniel Roe: the point of view of modules.
356
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,
357
00:34:03.870 --> 00:34:05.579
Daniel Roe: I think a lot of things should be
358
00:34:05.810 --> 00:34:07.150
Daniel Roe: pretty intuitive.
359
00:34:07.260 --> 00:34:08.409
Daniel Roe: But, Jeff.
360
00:34:08.610 --> 00:34:12.750
Daniel Roe: when you, if you if you UN unpack it, if you haven't already.
361
00:34:13.060 --> 00:34:15.939
Daniel Roe: then let me know if things aren't
362
00:34:15.969 --> 00:34:18.449
Fran Agulto: so that's 3.
363
00:34:18.880 --> 00:34:21.630
Fran Agulto: That's awesome. Yeah, for sure.
364
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.
365
00:34:28.530 --> 00:34:31.840
Daniel Roe: so it's not just that next itself is written in typescript.
366
00:34:32.449 --> 00:34:34.960
Daniel Roe: and that all of the internal utilities are typed.
367
00:34:35.070 --> 00:34:38.330
Daniel Roe: But we are also able to do a lot of fun stuff
368
00:34:38.400 --> 00:34:40.280
Daniel Roe: for you in your project.
369
00:34:40.350 --> 00:34:44.279
Daniel Roe: So when you are making internal Api calls
370
00:34:44.380 --> 00:34:47.230
Daniel Roe: to your own endpoints, we get, we can
371
00:34:47.760 --> 00:34:51.919
Daniel Roe: auto complete them for you. In your editor. We can actually give you
372
00:34:52.130 --> 00:34:52.939
Daniel Roe: typed
373
00:34:53.199 --> 00:34:58.829
Daniel Roe: return types for those we actually know what the
374
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.
375
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.
376
00:35:08.690 --> 00:35:11.980
Daniel Roe: Or if you add a middleware to your project or a layout.
377
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.
378
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
379
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?
380
00:35:38.360 --> 00:35:42.129
Daniel Roe: and that is true for lots and lots of things throughout throughout the app.
381
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.
382
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
383
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.
384
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.
385
00:36:14.370 --> 00:36:17.290
Daniel Roe: So again, you'll hopefully find that things are being
386
00:36:18.360 --> 00:36:22.160
Daniel Roe: for you, and mean that you don't need to go back and
387
00:36:22.320 --> 00:36:27.300
Daniel Roe: switch between 3 things quite quite so much as you otherwise otherwise might.
388
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.
389
00:36:39.550 --> 00:36:43.960
Daniel Roe: Yeah, sure. So nitro is what we're calling the new next server.
390
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.
391
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.
392
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
393
00:37:06.250 --> 00:37:07.069
Daniel Roe: build tool.
394
00:37:07.210 --> 00:37:09.130
Daniel Roe: but what it outputs isn't
395
00:37:09.170 --> 00:37:10.170
Daniel Roe: so.
396
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.
397
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.
398
00:37:27.120 --> 00:37:31.629
Daniel Roe: it's the water is warm. But as a of us built an app.
399
00:37:32.260 --> 00:37:33.290
Daniel Roe: Oh, elk
400
00:37:33.340 --> 00:37:39.739
Daniel Roe: which is built in, and some other things. So check it out, Elk.
401
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
402
00:37:46.210 --> 00:37:49.450
Daniel Roe: of of a server that I actually
403
00:37:49.800 --> 00:37:51.909
Daniel Roe: gee, i'm i'm one of the people who runs
404
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
405
00:38:01.120 --> 00:38:05.230
Daniel Roe: but Yes, so so math that on. Is it another social network?
406
00:38:05.390 --> 00:38:07.080
Daniel Roe: what was I saying?
407
00:38:07.710 --> 00:38:10.580
Daniel Roe: Oh, we're talking about Nitro. I think that's right.
408
00:38:10.800 --> 00:38:14.190
Daniel Roe: and so actually for the native app
409
00:38:14.290 --> 00:38:15.229
Daniel Roe: or out.
410
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.
411
00:38:23.020 --> 00:38:28.349
Daniel Roe: So we actually even were able to to have this nitro server layer
412
00:38:28.420 --> 00:38:31.860
Daniel Roe: running in the browser. think express
413
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.
414
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
415
00:38:50.390 --> 00:38:53.849
Daniel Roe: something I would recommend, because you know, that's not the most
416
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.
417
00:39:02.110 --> 00:39:06.159
Jeff Everhart: Okay, so let me let me. Oh, sorry!
418
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
419
00:39:27.360 --> 00:39:31.030
Jeff Everhart: generate or something like that to then
420
00:39:31.650 --> 00:39:33.060
Jeff Everhart: create this
421
00:39:33.170 --> 00:39:36.349
Jeff Everhart: nitro executable? That, then, has
422
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.
423
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
424
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.
425
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.
426
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.
427
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
428
00:40:39.870 --> 00:40:41.840
Daniel Roe: so that, and not that like Webpack.
429
00:40:42.380 --> 00:40:44.199
Daniel Roe: just probably you don't want in production.
430
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.
431
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.
432
00:40:59.510 --> 00:41:00.430
Daniel Roe: So it is.
433
00:41:00.530 --> 00:41:01.809
Daniel Roe: It is very
434
00:41:02.180 --> 00:41:05.040
Daniel Roe: optimized, and it's something like
435
00:41:05.740 --> 00:41:12.149
Daniel Roe: the the size of that folder is like a fiftieth of the size that
436
00:41:12.210 --> 00:41:13.580
Daniel Roe: that the next 2
437
00:41:14.760 --> 00:41:15.770
Daniel Roe: production
438
00:41:17.200 --> 00:41:20.340
Daniel Roe: node modules was so
439
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.
440
00:41:30.210 --> 00:41:32.629
Daniel Roe: whereas the bones at Nitro
441
00:41:32.930 --> 00:41:35.380
Daniel Roe: cold Start project is like a free.
442
00:41:35.590 --> 00:41:43.990
Daniel Roe: So it it is. Oh.
443
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.
444
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
445
00:41:59.330 --> 00:42:03.160
Daniel Roe: to we mock that we pretend to be a network layer.
446
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.
447
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.
448
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.
449
00:42:31.990 --> 00:42:34.439
Daniel Roe: i'm like it feels like home.
450
00:42:34.650 --> 00:42:37.520
Daniel Roe: but it it's so much faster.
451
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.
452
00:42:44.540 --> 00:42:46.820
Daniel Roe: Everything is code split. So it it
453
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
454
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
455
00:43:00.130 --> 00:43:02.059
Daniel Roe: so some endpoint happens.
456
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
457
00:43:10.200 --> 00:43:11.020
Daniel Roe: something
458
00:43:11.100 --> 00:43:13.449
Daniel Roe: again. We can make that happen with
459
00:43:13.640 --> 00:43:15.320
Daniel Roe: no part of the plate.
460
00:43:15.410 --> 00:43:19.079
Daniel Roe: It's it's a and a lot of the same things are true.
461
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
462
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.
463
00:43:32.150 --> 00:43:37.390
Daniel Roe: Lots of lots of nice nice goodies from the nitro side.
464
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
465
00:43:52.340 --> 00:43:56.269
Jeff Everhart: rendering modes are available in next, and I know I saw, maybe, like
466
00:43:56.640 --> 00:44:01.110
Jeff Everhart: the possibility of combining different render modes is in the works.
467
00:44:01.410 --> 00:44:06.139
Daniel Roe: So we moved, so it's not to. This is a little bit complex
468
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
469
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
470
00:44:17.580 --> 00:44:18.839
Daniel Roe: I get static
471
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.
472
00:44:23.410 --> 00:44:24.729
Daniel Roe: but it was also
473
00:44:24.890 --> 00:44:25.720
Daniel Roe: global.
474
00:44:25.870 --> 00:44:27.740
Daniel Roe: And in next 3
475
00:44:28.020 --> 00:44:28.939
Daniel Roe: you can
476
00:44:29.460 --> 00:44:32.589
Daniel Roe: have a global, is this SSR. Or not.
477
00:44:33.310 --> 00:44:34.770
Daniel Roe: But in general
478
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
479
00:44:45.790 --> 00:44:46.599
Daniel Roe: or not?
480
00:44:46.780 --> 00:44:47.770
Daniel Roe: Do I want.
481
00:44:47.940 --> 00:44:50.799
Daniel Roe: or this route? Do I want that to be pre-rendered
482
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
483
00:45:03.450 --> 00:45:04.310
Daniel Roe: work
484
00:45:04.340 --> 00:45:05.730
Daniel Roe: in any environment
485
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
486
00:45:12.340 --> 00:45:13.479
Daniel Roe: the
487
00:45:13.540 --> 00:45:15.669
Daniel Roe: at SW. At the
488
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
489
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
490
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
491
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.
492
00:45:41.950 --> 00:45:42.740
It's a
493
00:45:42.890 --> 00:45:45.089
Daniel Roe: or the right kind of
494
00:45:45.410 --> 00:45:48.189
Daniel Roe: server to make that happen
495
00:45:48.350 --> 00:45:54.800
Daniel Roe: with that provider. So you don't you don't have to learn
496
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.
497
00:46:05.010 --> 00:46:08.429
Daniel Roe: and you don't have to learn the vessel. Build output Api.
498
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.
499
00:46:15.950 --> 00:46:19.869
Jeff Everhart: Yeah, that's really cool. That that route by route.
500
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.
501
00:46:27.160 --> 00:46:30.890
Jeff Everhart: because I know I've run into that right. And and also, I think.
502
00:46:31.000 --> 00:46:34.590
Jeff Everhart: isn't there some element, and maybe Nitro does this like
503
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.
504
00:46:48.340 --> 00:46:50.510
Daniel Roe: because at the moment in your app.
505
00:46:50.530 --> 00:46:51.569
Daniel Roe: We tell you
506
00:46:51.860 --> 00:46:55.249
Daniel Roe: these things are available globally. They can be auto-imported.
507
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
508
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.
509
00:47:14.810 --> 00:47:17.869
Daniel Roe: I think we can make that better. We're talking a little bit about.
510
00:47:18.260 --> 00:47:19.930
Daniel Roe: maybe
511
00:47:20.680 --> 00:47:22.740
Daniel Roe: making use of some of some
512
00:47:22.760 --> 00:47:26.079
Daniel Roe: 5 script features to possibly establish a different time
513
00:47:26.100 --> 00:47:27.909
Daniel Roe: of context for the Server Directory
514
00:47:28.460 --> 00:47:30.149
Daniel Roe: as opposed to the rest
515
00:47:30.210 --> 00:47:31.220
Daniel Roe: the rest of the app.
516
00:47:31.270 --> 00:47:34.790
Daniel Roe: But that adds a little that has quite a lot of complexity. And
517
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
518
00:47:42.860 --> 00:47:46.149
Daniel Roe: you might be in a portion of your code base
519
00:47:46.240 --> 00:47:49.119
Daniel Roe: that can't use the view
520
00:47:49.360 --> 00:47:51.450
Daniel Roe: stuff you use everywhere else.
521
00:47:51.640 --> 00:47:54.729
Daniel Roe: But the rule is pretty simple. It's the server folder.
522
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
523
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
524
00:48:07.610 --> 00:48:08.849
Daniel Roe: need to have
525
00:48:09.160 --> 00:48:13.859
Daniel Roe: an event, the event, the request of that to to them
526
00:48:14.370 --> 00:48:16.059
Daniel Roe: why, is, in the view part of the app
527
00:48:16.100 --> 00:48:17.749
Daniel Roe: they all hook into
528
00:48:19.080 --> 00:48:22.399
Daniel Roe: They they use the same kind of instance context.
529
00:48:26.450 --> 00:48:28.410
Daniel Roe: The the idea that they know
530
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.
531
00:48:34.380 --> 00:48:37.020
Daniel Roe: And so they don't need to have anything passed into them.
532
00:48:37.040 --> 00:48:37.939
Daniel Roe: So it's
533
00:48:38.020 --> 00:48:38.609
Daniel Roe: the
534
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.
535
00:48:43.660 --> 00:48:49.099
Jeff Everhart: It seems like a very tough problem to solve. Right?
536
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?
537
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.
538
00:49:08.100 --> 00:49:12.259
Daniel Roe: that that new ideas people are are riffing with, or
539
00:49:12.400 --> 00:49:14.100
Daniel Roe: we're implementing in x 3
540
00:49:14.390 --> 00:49:17.270
Daniel Roe: First, you know, without the next 2 module.
541
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.
542
00:49:25.600 --> 00:49:26.529
Daniel Roe: and
543
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.
544
00:49:34.650 --> 00:49:36.669
Daniel Roe: which is
545
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.
546
00:49:40.290 --> 00:49:43.080
Daniel Roe: but or maybe it's side base off. That might be a bit.
547
00:49:43.440 --> 00:49:48.960
Daniel Roe: but basically they They have a really great approach. They've wrapped next off.
548
00:49:49.090 --> 00:49:52.539
Daniel Roe: which is, despite the name, a a provider agnostic.
549
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
550
00:50:00.040 --> 00:50:02.910
Daniel Roe: that's great, and I think are already in
551
00:50:02.980 --> 00:50:05.219
Daniel Roe: communication with both Js.
552
00:50:05.300 --> 00:50:06.279
Fran Agulto: Hello
553
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.
554
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.
555
00:50:21.420 --> 00:50:22.049
Daniel Roe: What?
556
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.
557
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
558
00:50:39.810 --> 00:50:42.809
Jeff Everhart: sort of like file based Cms.
559
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.
560
00:50:46.880 --> 00:50:51.119
Daniel Roe: Yeah. So so next content it's. Yes, it's it's definitely neat.
561
00:50:51.340 --> 00:50:55.420
Daniel Roe: it is it's for mocked on based content.
562
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
563
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
564
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?
565
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.
566
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
567
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
568
00:51:58.650 --> 00:52:02.640
Fran Agulto: nice for us.
569
00:52:03.840 --> 00:52:05.019
Fran Agulto: I feel like
570
00:52:06.080 --> 00:52:08.839
Fran Agulto: I I was gonna say, you know I feel like
571
00:52:09.880 --> 00:52:15.630
Fran Agulto: it specifically. A use case for writing content in markdown would be
572
00:52:15.760 --> 00:52:18.189
Fran Agulto: Docs. But if if
573
00:52:18.630 --> 00:52:23.169
Fran Agulto: just just throwing it out there for shit and giggles like, if I was.
574
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.
575
00:52:31.710 --> 00:52:34.179
Fran Agulto: That's okay, too, right? Y'all, I mean.
576
00:52:34.410 --> 00:52:36.740
Fran Agulto: yeah.
577
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
578
00:52:45.180 --> 00:52:47.169
Daniel Roe: so? the
579
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
580
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.
581
00:52:58.880 --> 00:53:02.280
Daniel Roe: This might be more target to develop a audience.
582
00:53:03.390 --> 00:53:07.480
Daniel Roe: there's netlify Cms is fantastic Great Standalone
583
00:53:07.640 --> 00:53:10.160
Daniel Roe: also, I mean, i'm sure you you know this. But
584
00:53:10.200 --> 00:53:13.050
Daniel Roe: not. Everyone might know that
585
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.
586
00:53:26.450 --> 00:53:30.449
Daniel Roe: Get get repo, and allows you an interface to
587
00:53:30.820 --> 00:53:31.449
Daniel Roe: It's not done.
588
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.
589
00:53:42.120 --> 00:53:43.760
Daniel Roe: it is a get based the amount
590
00:53:44.170 --> 00:53:50.820
Daniel Roe: which is just been an announcement and and and put out there by
591
00:53:50.840 --> 00:53:53.600
Daniel Roe: which is
592
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
593
00:54:01.810 --> 00:54:03.480
Daniel Roe: and that's that's
594
00:54:03.770 --> 00:54:06.200
Daniel Roe: you know. That's under development. But that's definitely worth checking.
595
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
596
00:54:19.270 --> 00:54:21.409
Jeff Everhart: like trending toward that model.
597
00:54:21.520 --> 00:54:24.159
Jeff Everhart: it's kind of interesting to see.
598
00:54:24.350 --> 00:54:28.100
Fran Agulto: I think what was the other
599
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
600
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?
601
00:54:42.620 --> 00:54:45.470
Jeff Everhart: There is a view storefront. Yeah.
602
00:54:45.910 --> 00:54:48.929
Fran Agulto: Did you work on that, Daniel. Perchance the storefront.
603
00:54:49.150 --> 00:54:52.949
Daniel Roe: It didn't. No, no, no, i'm not part of the
604
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
605
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
606
00:55:09.360 --> 00:55:10.729
Daniel Roe: Now I don't know
607
00:55:11.230 --> 00:55:14.189
Daniel Roe: is, does you still have an adapter for wordpress?
608
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.
609
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.
610
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
611
00:55:50.570 --> 00:55:55.639
Jeff Everhart: released relatively. Recently so like it's definitely possible.
612
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
613
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
614
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.
615
00:56:17.130 --> 00:56:20.809
Jeff Everhart: although I have a feeling that the e-commerce part
616
00:56:21.040 --> 00:56:25.080
Jeff Everhart: just from our experience, and woocommerce is a little bit more challenging.
617
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
618
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
619
00:56:43.470 --> 00:56:45.170
Jeff Everhart: Some of that stuff happen
620
00:56:45.760 --> 00:56:50.599
Daniel Roe: is great, by the way, like it's it's beautiful as well as
621
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
622
00:56:57.410 --> 00:57:02.540
Daniel Roe: and I I know you know, for my time and agency world.
623
00:57:02.610 --> 00:57:04.030
Daniel Roe: that you know.
624
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.
625
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.
626
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.
627
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.
628
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
629
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.
630
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.
631
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
632
00:58:22.930 --> 00:58:23.850
Daniel Roe: defaults.
633
00:58:24.050 --> 00:58:27.520
Daniel Roe: I I would absolutely have this be the way wordpress is.
634
00:58:27.550 --> 00:58:28.920
Daniel Roe: Dependencies should be
635
00:58:28.940 --> 00:58:30.790
Daniel Roe: managed by composer.
636
00:58:30.940 --> 00:58:32.370
Daniel Roe: that doesn't
637
00:58:32.620 --> 00:58:35.350
Daniel Roe: as much as possible. Just take
638
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
639
00:58:39.780 --> 00:58:41.090
Daniel Roe: first step.
640
00:58:42.400 --> 00:58:45.329
Daniel Roe: And if people aren't familiar with that roots is just
641
00:58:45.360 --> 00:58:47.290
Daniel Roe: it's incredible.
642
00:58:47.490 --> 00:58:48.549
Jeff Everhart: Yeah,
643
00:58:48.710 --> 00:58:54.079
Daniel Roe: Anyway, I I absolutely loved absolutely love that that
644
00:58:54.200 --> 00:58:57.039
Daniel Roe: way of of both building and deploying.
645
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
646
00:59:03.750 --> 00:59:04.580
Daniel Roe: often
647
00:59:04.930 --> 00:59:07.509
Daniel Roe: registering types for
648
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
649
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
650
00:59:21.570 --> 00:59:26.150
Daniel Roe: maybe being looked after in a slightly different way under the hood.
651
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
652
00:59:31.170 --> 00:59:34.640
Daniel Roe: easier way. This is just my own back of
653
00:59:34.750 --> 00:59:36.740
Daniel Roe: lack of experience speaking.
654
00:59:37.010 --> 00:59:38.339
Daniel Roe: but I think that that could be.
655
00:59:38.770 --> 00:59:39.580
Daniel Roe: It's really nice.
656
00:59:39.880 --> 00:59:41.810
Daniel Roe: and
657
00:59:42.140 --> 00:59:43.100
Daniel Roe: what else?
658
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
659
00:59:48.340 --> 00:59:50.659
Daniel Roe: the Gutenberg blocks in view.
660
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
661
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
662
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.
663
01:00:19.970 --> 01:00:25.120
Fran Agulto: Yeah.
664
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.
665
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
666
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?
667
01:01:01.190 --> 01:01:03.889
Daniel Roe: Yeah, Good question.
668
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.
669
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
670
01:01:17.950 --> 01:01:20.890
Daniel Roe: coding is spent
671
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
672
01:01:27.300 --> 01:01:29.999
Daniel Roe: or rather he wakes up, and then that
673
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.
674
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.
675
01:01:54.730 --> 01:01:56.459
Fran Agulto: I'm going to go on a
676
01:01:56.580 --> 01:02:00.959
Daniel Roe: I'm going to a conference later this year. I later in in February.
677
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
678
01:02:07.570 --> 01:02:08.920
Daniel Roe: sort of dream
679
01:02:08.980 --> 01:02:10.980
Daniel Roe: dream life outside of
680
01:02:11.020 --> 01:02:14.860
Fran Agulto: where you. Where's the conference at?
681
01:02:15.240 --> 01:02:18.239
Daniel Roe: It's in Austria in dawn, Ben.
682
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.
683
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.
684
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.
685
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
686
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.
687
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.
688
01:03:23.620 --> 01:03:25.870
Daniel Roe: I am. I am. I am going to be there.
689
01:03:25.980 --> 01:03:28.609
Daniel Roe: so yeah, are you? Are you going?
690
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.
691
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
692
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
693
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.
694
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.
695
01:04:55.780 --> 01:04:56.680
Daniel Roe: Real pleasure
696
01:04:57.080 --> 01:04:58.700
Fran Agulto: all right.
697
01:04:59.760 --> 01:05:00.490
lighter.