Hello, everybody, Welcome to another exciting episode of JavaScript Jabber. I am Steve Edwards, the host with the face for radio and the voice for being a mine. But I'm still your host, at least for today. Chuck has out had some work to do. Dan he is on vacation, so he's taken some time off. So it's me and on the panel. I have mister A j O'Neil. How you doing, aj.
I'm doing fine, flipping fantastic. No, yo yo yo.
Yo y oh? Did you on the back end? Oh? Back end?
Sorry, you asked me a question, So okay, I give you the answer, and then I added the yo yo yo yo yo yo, coming at you live from my goodness. Isn't the weather heavenly today?
Yes? It is here too. It's awesome. I was thinking the fall was coming way too early last week, but that's warming up. Supposed to be ninety here in Portland tomorrow. We're looking at some sunny sky and some good weather.
So we did a drive through the mountains yesterday with the kiddos.
Hey, Jay, see the fall colors.
Yeah, it was wonderful.
Yeah, okay, it is after the twenty first, so I guess we can start calling it fall now, can't we? Although here we tend to have really nice September and October Indian summer they call it, so that's always nice. Anyway, as we blaberon, let's welcome our guests, mister Daniel Kelly. How you doing, Daniel, Hey, Steve doing great?
Great to be here.
So Daniel is a prominent member of the view JS community, and so since I don't do the views on view podcast anymore, I like to bring in some view JS content into JavaScript jabber every once in a while, and this is my chance.
Yeah, get a rep view here.
Yes, that's right. We need a good view of what's going on. Sorry, I missed my dang it, I missed my sound effect. I'll do it. Delay there we go, thank you. Okay. So, first of all, Daniel, why don't you just give us an intro on who you are and why you're famous and we'll go from there.
Sure. So, I am the lead instructor over at view School. We're one of the primary places you can go to learn view JS, whether you're a beginner or you know, even in a more advanced view person. We've got all kinds of tutorials available for everyone. So I've been working with view School for almost four years now, Has it really been that long? Yeah, Google, I think.
Yeah.
So we also run in the in the conference kind of circuit there. I go to conferences all the time with view School. We put on a few virtual conferences and also recently got into the certification space, so we worked with Evan you to create an official view Jess certificate so you can take an exam, you know, show potential employers. I know my stuff, right, So yeah, that's kind of what I do on the day to day these days.
So let's talk about that for a minute. I know, way back when before I got into web development, I was doing software and I got into doing some network certifications. So if you're looking at network certifications for instance, I was doing on one. Uh this is Windows. This is early days of Linux. I don't even know if Linx was out yet, but like Windows NTI network certifications. You know, there's a plus certifications, and I know that it's seen as a way to say, hey, I really know what
I'm talking about. I can remember when I was in the drouple world. You know, there was always issue when you know, when hiring a developer to do a druple site for you. How do you know that they know their stuff? And I know that up Drupal has come up with certification test if I remember, I haven't looked in a while. So you know, view development, any type of development can cover a wide array of topics, you know, absolutely, So I'm just curious this first chance I've had to
talk to somebody about this. Can you talk about what's involved in generating a certification test? And obviously you got the input from the guy who created you, which is you can't get much lower level than that speak right.
We're very happy about that for sure.
Right, and then so and then what does it cover? What are the main areas?
So we've got yeah, we've got it really focuses on like core VIEWJSS, right, and we have two different levels of the certification. So there's like a mid level or just kind of regular level developer short and then there's the senior level developer certification. And so at the at level one, we're basically testing, Hey, do you know just like the basics of you? Right, can you create a component? Do you know how props and emits work? Do you know how to you know how to start a view application?
Kind of basic things like that, and the way we test you on that is we provide multiple choice questions at the beginning of the exam and then we provide two different coding challenges that you have to complete to build some kind of some kind of little app right, So it's fairly in depth in terms of what you actually have to do to pass the exam. I mean, if you can't create this, if you can't complete the coding challenge and actually write the code for yourself, you're
not going to pass. And then at the senior level, it's the same structure. It's multiple choice questions and two different coding challenges, but the topics are a little bit more advanced, things like using Typescript with view, things like writing test for your view components, things like a few more advanced things that are a little less used but can be very useful for creating you know, intuitive APIs
for your components, things like provide inject for example. So yeah, it's it's an interesting dynamic and we've had a lot of good feedback from people. One of my favorite things to share is actually we have a boot camp that goes along with the certification as well. It's a three
day boot camp. It's a virtual thing, right, but it's basically me or a colleague of mine doing a just an educational style boot camp thing and people can ask questions and we go over all the different topics that are on the exam and teach the concepts and so on. But I actually had one guy who works on a very popular UI library in the View community who attended. You're like, why would he attend? Like he knows View right,
and he came out telling me he learned stuff. So I'd really like to talk about that really really makes me feel good.
So I assume that with I mean, there's a huge number of apps ot out there and still in View two. I mean, I will work on a very large one every day. And you know V three has been out for is it two years now? I want to say twenty twenty.
Actually I believe I think it's been almost four years now.
That isn't really wow anyway, Okay, so you have, you know, a lot of U two step out the View three is the latest and greatest. So are there cerif case to test for both? Is everything focused on View three?
That's a great question. It is focused on View three. All of our exams focus on the current level and as soon as the as soon as the current latest is has changed to you know, increment to the next thing, then we will have new exam material for that next level. That's kind of our strategy there. But yeah, it's all
of you three. It does focus on the composition API as opposed to the options API because that is the recommendation from the VJs stocks now and that's the direction Evan wanted to take it while we were developing it.
So yeah, okay, so how many any ballpark figure on how many people have been taken it so far?
Oh? How many have taken it? That's a really great question. I couldn't give you an exact number. I know it's I mean, we're literally getting people taking it every day. Their exams come in every day for the past year. So do the math on that. I'm not sure exactly how many.
But yeah, so is this run through view school? Is that you school that's running this certification? More of a open source type thing, I guess for lack of a better term.
Right, we uh, it is our team that produces the content along with third parties like Evan, but the brand is called Certificates dot dev. So the website is certificates dot dev and we had we started out with just the view exam, but we found that that was so meaningful to people that we pivoted to also not pivoted. We expanded to also do other certifications as well. So
now we also offer an Angular certification. We're actually launching tomorrow a JavaScript certification, a more general JavaScript certification, and we offer a next certification as well.
M okay yea, I'll put the link up here in the little banner here for a second. Angler. So are you guys you have somebody with Angular expertise that's that's doing that one?
We do absolutely. So. We we partnered with a guy named Alan. Oh, he's gonna kill me because I I'm gonna butcher. His last name Gerard I think it is. Anyways, he had an a give their certification that he's been working on for years and he wanted to partner with us just to make his processes a little bit easier and so on. So he is definitely an expert with that kind of material and provided a lot of that.
It was just a matter of, you know, changing it up a little bit to fit our standards in our platform requirements.
Okay, Yeah, so here's the view and interesting. So having had to administer and take online tests and scenarios and stuff out of curiosity, how you mentioned that there's some multiple guests excuse me, multiple choice questions throughout the test, and then there's some coding challenges and things. So how has that done? Is that like a clonable repo that you can do and push back to a repo or is it just like an online thing like a hacker rank environment or how exactly is that test done?
So it is all in the browsler. In fact, we're pretty what's the word for, we are literally watching you during the exam. There's there's this entire proctoring setup. Yeah, it's intense, right, there's your camera's on, your screen is being monitored, your your mic is on. It's it's monitoring everything.
A G.
You want to say something, I.
Can tell I always bomb those like when the quession is on, oh yeah, I bombed with yeah. When the pressure is on like that, I forget how to do fizz buzz. And oftentimes it seems like in most of those situations they're looking for a very specific answer, so it's not like, hey, here's a here's a problem that's reasonable to have, and then walk us through what are you thinking about that? How would you solve it? It's okay, so you've got the numbers twelve, twenty seventy to eight
and four. They're in an array, but they're backwards, they're inside of an object, and you need to have uh less than oh two lot in like like, so, how do you solve this problem? And it's like, uh what, yes, and then and then and then like you saw that and they're like, well, that's not the solution that we have in our bookshet here, so.
Totally totally yeah, And we we've done a lot of work to try to avoid that as much as we can while still being uh, you know, you have to have the parameters that they work in, and we tried to make the coding challenges specifically kind of lifelike things. For example, I don't want to give too much away, but maybe there's, you know, in the the view one, maybe you have to create like a carousel, right that has some kind of functionality that requires JavaScript rotating the images,
you know, blah blah, so on and so forth. So we try to make it a fairly realistic thing where you understand what the goal is. So so yeah, that that's kind of our way of trying to avoid the situation you're talking about. But we definitely have found over time that we've had little instances exactly like you're talking about, and people report would report such things to us, and we've been able to work and improve it over time. So during the coding challenge portion of the exam, it
is all in your browser. We embed a stack blitz project into the into the platform. I don't know if you've heard of stackltz before.
So last week we just talked to Tomatsolkowski from Stacklitz about tutorial Kit and I was about I was about to ask you if that was what you were using, or maybe it was just embedding stacklits within your in the test.
Yeah, that's right. It is just the classic stacklitz ebed. They came out with tutorial Kit. I believe they actually launched they announced it, they launched it at JavaScript. I'll shoot, I'm getting my conference names mixed up at front end Nation, which is a conference FE school puts on an online conference, and so yeah, that that wasn't quite out when we first released the certification.
So yes, we do no stack Q. We've had Eric Simon's on I think when they first started talking about embedding node in the browser a few years ago. So yeah, we're familiar with right.
I'm sure it sounded a little crazy at that point, but I love it right.
Right, right for sure? So cool? What about Okay, so people are coming in and you know, taking the certification test, say hey, I got the certificate, I can do view. Have you seen that being utilized requested in the employment community in terms of people who are actually looking for view developers. What kind of reception has that been getting.
Sure, that's an excellent question from my point of view. I don't have any I guess case studies per se on the employer side of Hey, we were looking for a view developer, and we saw some of our applicants out of view certification, and so they're the ones we hired. Honestly, our marketing team would probably have a ton of that, a ton of that valuable stuff, right. But I've definitely heard testimonials from view developers themselves who have said, hey, I got this in order to help me with the
job search. Whether it actually ended up helping them long run, that's something I don't have the feedback on to be honest. But one thing we also I think is a really great benefit besides just the higher ability of a developer getting the start, we also think another great benefit and something we hear actually from people who have taken the exam is that they really just want to take it to kind of give them the confidence that they're up
to date and their knowledge. They can kind of feel confident that, hey, I have the knowledge it takes to be a modern day day view developer, and so that's something they self evaluate, right, and we get a lot of feedback about that being the case for them.
So it's yeah, sort of just a measuring tool, I guess, or a way to bone up on what's the latest and make sure you're learning the right thing and not focusing on something it's antiquated that's going to go away.
Right, exactly right, because because evn't reviewed it all and said ahead, this is what you need to know, right and uh and yeah, we also we have had a few employers I know specifically who you know, have given this exam, bought this exam for their employees in order to give people raises or you know, elevate their position and the team things like that. Right, So that's been a successful use case for it.
Okay, cool, all right, so uh let's talk about we'll do well, we'll do some shameless plugs towards the end per View school. In terms of View in general. Obviously we talked about how you three came out almost four years ago or a little over four years ago, and I want.
To google that, Steve, I don't want to tell you the wrong thing. View V three When did it come out? Let's see twenty two?
Two years okay? Oh no, it is twenty two, No, I'm sorry. It is officially released on September eighteenth, twenty twenty, became the default version of February twenty two.
Yep, yep, that's that's okay, okay.
So so if you go to view dot the View website, it's by default of View three and you got to click on a link to go view the V two docs with what sort of makes it the default? So we're on as we were talking about before, and we're on three point five is the current release of View? What what's so, what's the latest and greatest coming out of view with with the latest releases, Since you're probably right on top.
Of that absolutely, so viewpoint three point three was a pretty big one. So with that came define model. I'm not sure if you've used define model yet. It's it's a really handy kind of wrapper around a common pattern for for taking a prop in and then emitting an event up whenever the value for that that prop changes. So think of like a custom input field, right. You bring a prop in that's called model value, and then
you send an event up called update model value. Right, And so define model essentially just lets you skip the kind of and dance there and directly alter the prop that came in inside of your child component. So whenever you actually assign a new value to that prop, you're not actually mutating the prop, which would be a no no right. Instead, what it's doing under the hood is it's emitting update model value for you. So it's just a little ergonomic quality of development thing. So that was
a kind of big addition to three point three. Now that's been quite a number of months now since set one's been out.
Can I ask you one question real quick. One of the things I used to talk about was component v model, which is basically where you you know you have a parent and a child and you can do something within the child and then admit it back up to the parent, you know. And the example I have is one that I actually use in an inertia app where I have a just like an index listing and a table, and then within I do all The table itself is a separate component, but the search field that I'm using it
is in the parent. And because I'm using inertia, I got to use a to find URL. So basically in my table, I say, you know, I do all my stuff or no, I take it back. My route has to be defined in the parent. The search field is actually in the child, and so I read the child, passed it up to the parents what we can call the u ur L and that's basically a component V model where you can map that real easily and have that dynamic field. Is this different or is this an
improvement on components and the model? Are they just? Are they different things?
It's very similar, So really we are talking about the same thing. Like it's the V model on the using the V model in the parent on the child component. That's exactly what this is supporting. Okay, but it's just when you're doing your logic inside the child. It's making that logic inside the child a little bit easier to reason about in short, less lines.
Right, okay, so it's yeah, sort of the longest same. Yeah, it's really it's an easy way to because it's one of the thorning our problems with making everything self contained component, you know, trying to so you don't have this huge, you know, five hundred line component with everything in it. You can break things into reusable components. But then you've got to communicate between the parent and the child, and that's where it gets gets really sticky and dynamic ways.
So okay, so sorry to interrupt, so or you were going on from there.
No worries, No worries. So three point four, honestly, I have no real recollection of.
Of what that's a very important release.
Yeah, truly minor release, right at least in my mind. So three in three point five just because it's very recent site I am thinking about. Of course, there's always performance improvements in every release, right, But also three point five brought about a feature called props destructure. So when you're working with the Composition API inside of your script set up tags, you use a a macro called defined props. In order to define your props.
Right.
Uh, well, if you wanted to add defaults to your to your props, you had to use this weird with defaults method kind of wrap the whole defined props call and then have a second argument to the with defaults be your your actual defaults. So you're kind of like declaring your props here, and then you're declaring that the defaults for those those props here, and you kind of have to, you know, put those keys in twice, and
it's just kind of weird and cumbersome. And then when you're working with your props, you have to say constant props equals defined props, and then you're working with those you know, those props off of that props object. So what props destructure does is it allows you to destructure your props from defined props. Okay, so now you're not working with props dot blah blah blah, oh throughout the components, throughout the script section anyway. Now you can just get
the actual prop name. Right, So I got this and it's it's it's seamless. They're not real reactive refs, so you don't have to use that value. They're under the hood. It actually compiles back to props dot whatever the prop name is. Yeah, it's just super handy. And the other benefit is is you can define the defaults in the destructure statement. There's no with defaults function that you have to do anymore. So, yeah, that's the big ad for point five.
I've wrestled with that for quite a while, uh, in a particular app that I do. So that's I got to look into this for sure.
Okay, yeah, definitely do, definitely do.
Uh see, so I'm looking at your view school article on what's coming in three point five. So use template ref yep use ID. That's more for server side rendering. It looks like it is.
That's a really cool one though, especially if you're in the next world just getting a uniquely generated generated ID. But it's that same uniquely generated ID both on the client and the server. So there's no more like juggling and passing the unique ID that you generate on the server down to the client. You just you just call it and it's the same everywhere. There's no mismatch hydration, mismatch issues, which has just been a pain in the past.
Right, that's a good segue. So moving into next we talked earlier about next and what's going on next, and you had mentioned this a few bullet points for those in the jobs world who might not know what next is. Next is basically next for React. I don't remember which camp first, and I know next is alphabetic that alphabetically before next, so maybe it came first.
I think that's the case.
Yeah, right, I think there has a sort of similar tool they came out with. I can't remember what it's called. Smelt has spelt kit. So just so you can understand the next side of things where View is just primarily front of Joba script ne excuse you, the whole server and during your stack stee.
But I think next like had to come out first because next is like a play on words on is that what it is? Because who would name something nuxt like?
That's a good question, Yeah, I think it. Yeah, I could ask that about View and Drupel and any number of other names too, so so interesting.
Fact. Uh, the name of the framework, View comes from the French word for view. Know, that's.
Fast. Fast.
View is like the view layer like the u I layer.
Right, Okay, so that actually has significant.
You didn't take the same strategy, Evan took the same for both view and meat. He just just grabbed the French word for yeah.
The story of I always remember the story of Drupel where it came from. And it was actually a typo, really and because Dre's Boytart is Belgian and he was he meant he was trying to drop hell. It was like a French from Belgian word for drop, like a drop of water, and it was a misspelling and and ended up just sticking with it and it took off from there. So sort of funny how some of these names come about.
The best way. Yeah, right, happy accidents.
Yes, So nuxt, why don't you give us an overview of next, what it does and what its capabilities are, at least currently.
Sure, sonuxt is like, the big benefit of Next is the server side rending portion. They take a lot of I mean, you could server side render with just vanilla view, right, but you're having to build a lot of things up on your own if you decided to go that out. So Next makes it really easy to make server rendered you applications. But the really cool thing that's happened with nuxts three versus with nuxt two, well number one, they've
embraced the composition API like wholeheartedly. Okay, so next three. Composition API is like the first party way of interacting and creating, which I like a lot of view developers these days, I think have jumped on the composition API vote. I know some haven't, and that's fine, but it's kind of the direction a lot of the framework is going. But the other really exciting part though about these Nuxt steps is that you have the ability to specify where
and how you're going to render things so grandularly. And what I mean by that is you could choose to render a certain page only on the client. So think about just that one page is rendered just like a normal view application. You can skip the knuxt server side rendering all together, okay, And that's at the page level. You could do the same thing for the server. You could say, render this page only on the server, don't hydrate it on the client side. I don't want any
of that JavaScript coming down. And you know this is just a content oriented kind of page.
I don't know, I can about page or something like that, right, that's a common.
Use exactly exactly, So you can do that not just at the app level. You used to could do that at the app level. Now you can do that at the page level, so you can mix and match your you know, different rendering modes per page. But then you
can also even do that at the component level. So you could have this, you know, one page is rendered universally both on the client and the server, but nested down inside that page, you could have a component that's only rendered on the server, and then whenever the props for that component change, it doesn't run any client side JavaScript, It just goes back to the server, fetches it, it renders on the server in it replaces that HTML you
know on the page. So it's a really dynamic way of being able to choose exactly when and where you're you're rendering your your few components so that that server rendered example, is really great for something like rendering markdown. Right. Loading a markdown parser into your browser is kind of a heavy thing, and a lot of times what we're using markdown for is for displaying static content, so we
don't need that run in the browser. We can save so much you know, time in terms of loading by just rendering out of the server and sending the loaded thing. But then that's just that one component on your page, all your other stuff could still be be dynamic, so pretty cool.
So that's sort of the ASTRO approach to things, isn't it pretty much where you can everythink server and then you can have your I mean, I'm sure you don't use the same terminology. They call it islands architecture, where you can have your little islands of interactivity in the middle of server side content. So that's pretty much the at least from that from that high level. But I'm sure there's a lot of other more dynamic stuff you can do within next, within your.
Compass, right. Oh yeah, there's there's tons of other stuff that can do. But in terms of your comparison ASTRO, that's exactly right. That's yeah. ASTRO is the server rendered by the fault, right, and then client rendered by opt in nuxts is kind of the opposite, m h. It's it's universal by the fault and then you can you can opt into client only or server only per pageer
or per component. But yeah, in terms of like other things that NUTS has to offer for the view developer, just a lot of quality of life things, things like auto imports for all the composables in your composables directory, things like auto imports for the core view reactive functions, you know, things like wrath, computed all that kind of stuff. You just they just work. You just use them and they work right, which is nice. But if you want to still import everything like you have the ability to
do that. You can turn off the auto imports and things like that.
So so now if you're using NEXT, one of the big differences, and I think NEXT is like this or some of the other ones, is how your routing is handled. Whereas with us with a strictly view front end, you have your front end routes that you have to define and view router, whereas with NUTS it's all based on folder structure. So you'll have a structure and then you can define you know, I want my u RL to look like this, so that's how you name your folders.
And then you can pass in dynamic values like ID values and you know, so what to render a blog post based on its slug or you know, however you have identified it, so that's you know, that's a pretty common thing. I've seen people. In fact, I've worked on an app one time where everything was they were connecting to a dot net back end. Okay, but they used Next because they liked the page routing instead of just straight view on the front end.
Okay, that's fair and a good opportunity for shameless plug. We do have a Laravell course at the school where we do that same thing. We use really Ravell for the back end as an API, yeah, and we use Next on the front end.
Interesting, okay. Yeah, So my day to day is a pretty huge app with Laravell and rest APIs that you know was initially built way back in Q two where it's all APIs and then the view front end connects to the back end, you know, through the defined APIs. I myself, you know, people have heard me talk about this. I'm a huge fan of Inertia JS if you familiarly
love Inertia. In fact, I had Jonathan on here a couple of times when Inertia was pretty new, and I will work with it with Lara Bell Laraval on the back end, you on the front end, Inertia in the middle, and it's it's awesome.
Very cool. I've got a colleague just came onto our team within the like last eight months maybe, and yeah, he was really big in there. Inertia taught me some things on it and looks really interesting. I haven't had the opportunity myself to use it in product.
But yeah, it's really like if you're and if you're familiar like next is, you know your back end isn't no, you're writing in no jess if you're doing any back end right. So for someone like me who comes from the PHP world and it's familiar with Lara Belle and PHP, then that's a godsend being able to use something like that that you're already familiar with and you don't have to learn, you know, a whole new coding technology. So a nurse is awesome, and it's it's so fast, it's
crazy how fast it is. So I'd be real curious to see this course. I don't know if you oh, you said it's just Laravell with if you're using so, if you're using Laravell for the back end with Next, you're still doing the service side rendering because your Laravell controllers are returning your your content to your next components and it's fully rendered HTML. That it's I mean you're using Blade templates for the formatting of HTML or how's that happening?
Uh?
So it's I'm trying to find the earl here. So if you just google the name of the course is Laravelle back ends for JS three, uh, and then view school, I'm sure you could find it. But the whole approach is, yes, we're still server do we service side? Remember in the course we might turn SSR off?
Actually yeah, here it is, okay.
We do. We turn SSR off, but you would you don't necessarily have to. You could do the server side rendering a bit. But but basically we used in the course, we use next just as the client right and as as the JavaScript runs in the client. And the only reason we chose to use nexts instead of straight view was just because of some of the niceties like the auto imports and things.
Okay, yeah, now I remember from a performance standpoint, one of the editions that I'm pretty sure it was NEXT three was Nitro, which is basically a rendering engines. So can tell us about Nitro.
So, uh, there's kind of this weird like stacking order of what what builds next and the next core team actually having a organization now on GitHub called unjs, which powers a lot of the inner workings of NUTS. But those those packages that are also available for the wider community at large to use, and Nitro is one of those packages. Right, So Nitro is the kind of the server layer there. It renders your view components on the server side, of course, and so it's the HTML to
the browser. But the other really cool thing that Nitro enables the nuxt three project to have out of the box is API end points. This is something you didn't have too. So now you just have a folder in your NUTS project called server, and then you have a folder inside of that folder called API, and any file within that directory automatically becomes an API endpoint. So you've really got the whole, like everything you need to build a full stack app right there inside of your one
next project. There's no reason to hook it up to an external API anymore. Of course, you still could, I mean, there's nothing wrong with that, right We use Layravell in the course. But if you don't want to have to manage the separate back end, you can actually have your entire You can have your rest API and your you know, and your actually user facing applications all in the same repo, which is is pretty cool.
So it's sort of a drop in if you have APIs written for what any CMS online CMS versus maybe something or even something that you have locally such Lavo, my XQL or you know, no JS with Mango API defined or something like that, then you can drop it in and use it with with next.
Yeah, I wouldn't necessarily say you could drop it in. I mean it is. They do have their own syntax right now. Okay for for the API in points. But if you have the data in a database somewhere, you know, you can just start interacting with that database directly via these these API and points and then sending the you know, the data to your your front end, right.
And so is it sending everything as props? Then? Is it's how? It's how it's how does it send it to the front end.
So on your on your view pages. So you talked about that page file based route in just a moment ago, right, So uh, in your view components, you call a composable, a built incomposable called use fetch and it makes a fetch request and you just pass it the route for that API end point. Right, So you do slash api, slash users or slash posts or whatever. So that's how you connect your view pages to those those API endpoints,
and of course on the server side. On the server side, when you make that request, it's actually going to skip the network layer altogether, and it's just going to go call the function that that API endpoint is is made up of. But then on the client side, when you're navigating you know, first page load, it's all server side rendered and it hydrates. But then as you navigate the new pages, it's gonna make that request asynchronous lyad right,
So uh, it's it's it's pretty nice. Like it handles things like you know, serializing your Jason for you, so like you can just return an object from the API in point. You don't have to serialize it first or tell it what kind of data it is or something like that. You just you return an object. It assumes, okay, this is this is Jason and things like that. You also have type safe autocompletions for your for your API
end point route. So if I'm calling U s fetch on my front end on my page, as soon as I start typing in the r L, I get a list of of drop down autocomplete says what endpoints are available, right, so I can just pick, oh I want API slash users or I want API slash posts and because it all exists in the same project, that makes that possible, right.
So yeah, so okay, so you mentioned that it's been extracted into its own, separate sort of rendering engine. Is it still geared specifically for view or is it something that can be used with other front ends? You know? I think of for instance, VAT. When VS first came out, the original literation was view only, and then the next version he said, okay, you can plug and play with anything, and it's just gone nuts with how many people replace
webpack with with VT and so on. So is unjus is this the same idea or is it still strictly for view?
Yeah, it is the same idea. Everything in the UNJS organization is completely framework agnostic, and indeed other frameworks have picked up have picked up packages and have built off them to make their own own thing. I can't remember. I can't remember what it is, but there was some other you know how the JavaScript world is frameworks every week, But there's there's some new framework. I read about recently that they they built their server layer on top of Nitro.
But yeah, that's that's the approach.
Hmm. Yeah, I've seen that before. I did some work with another company that had a specific JavaScript form render everything was rendering forms, and they extracted it, you know, and made it open source. They had a story where another company used it and made millions of dollars work, but they wouldn't even mention the company name when we talked to them. But uh, yeah, that's cool when you
can extract that use it for other things as well. Yeah, any other next, next things, new features, you know, anything, what's coming down the pike with Next three.
I know Next four is coming fairly soon. That's I'm not totally sure that the biggest thing in Next four is there's going to be a change to the project structure. Like a lot of the things that we're in your root directory for next three will now be nested under an app directory an app directory for next four. And I think there's some like typescript benefits to that, like why you're watching certain files locally or something while you're developing. Now it can it can focus on just that one
app fold or something. I don't remember exactly what it is, but it's supposed to make your development process just a little bit, you know, faster, your your depth serve a little faster or something like that.
Yeah, so I'm curious. So they're going to do a next four but still based on View three? Is that?
Yeah?
Right? Because it doesn't sound everything I'm you know, reading, I was just reading something by Linusborg, uh that you know, View two two. The three was such a huge you know, gutting and rewriting of everything and lots of backwards breaking stuff. Although they did do so. I think it's still sported the option d API, but it was still so huge. It sounds like VI four is going to be not quite as aggressive, shall we say, or changing going forward.
Which is a good thing. Yeah. Yeah, And and I think the view like where View is at in its life It's it's stable, and it's well loved, it's it's easy to use, Like I don't think at this point in its lifespan you need this this major change like we had from two to three, right right, which is great news for developers. It's less things we have to do to migrate.
And then are probably hopefully you know, sort of encourage people to upgrade from View two to V three, which is not a small undertaking undertaking, especially when you deal with some very large you know, enterprise type applications.
And and everything, depending on the libraries you're using and things.
Oh yeah, absolutely, I do know. And I've mentioned this before. I think it was two point seven of you had composition API stuff embedded in it, and the idea being that you could still be on YouTube but slow sort of migrate to V three and then you know, throw the switch in and migrate over to V three from there.
Yep, yep, it's I mean, they definitely made some good tooling to help help you make that migration. But like you said, the enterprise level, you know size applications, it's yeah, it's it's still work and quite a bit of it.
Oh yeah. We have like upwards of probably five six hundred different components in our View two app alone. That's been around, you know, for probably ten eleven years. So it wouldn't be a small undertaking, especially when you start incorporating you know, typescript, because I tried to mess with typescript in View two a couple of times and it
was Yeah, it was not a good experience. I mean it's basically sort of bolted on instead of you know, built in, right, So it definitely made things a lot more difficult, but you know that pretty much any thing large is going to be incorporating tax script anymore.
Yep.
Cool. Anything else you next related that we didn't cover that you're you're dealing with a view school or covering mm hmm, well.
I think we just about covered it all, Steve. I guess I do want to throw in one shameless plug for our VGs masterclass. Of course, we did release that. It's a progressively released course, so we started releasing it back in March of this year, and we're still releasing lessons where you build a real world application, specifically a project management app, something like Asana or a Monday or something like that. So if you are you have the basics of you down then and you want to kind
of take it to the next level. Uh, this is a really great course for you.
All right? Cool? Yeah, I've got the you are l up here on the screen for those who are watching the view JA three masterclass at Viewschool dot Io. Alrighty uh, before I forget, if people want to follow you and give you money and read all your view wisdom, where's the best places to do that.
I'll have to go set up the donation app right now. So that sounds like a great idea. Now, you could follow me on Twitter. I'm Daniel Kelly Underscore Io. That's where I'm most active, if you can even call me active. I'm not a huge social media guy, but you can follow me there. View School is view school io on Twitter and just you know, just google Daniel Kelly LinkedIn or view School LinkedIn you'll be able to find us there as well.
All righty, So with that, we will move on to Picks picks for part of the show, where we can talk about whatever we want doesn't necessarily have to be tech related obviously within recently. AJ, We'll let you go first. What do you got for us for picks this week?
Oil Boy? Have I got a good one for you? I don't think I'm gonna take this back, because you know, sometimes I make recommendations and then a month later I'm like, actually, that was a bad idea. Okay. Browsers finally, as of March twenty twenty three, have support for ekmascript modules ubiquitous support, So whether you're on iPhone or Android, or Chrome or Edge or Safari or Firefox. As of March twenty twenty three,
all browsers finally support ekmascript modules. That was about eighteen months ago, and that's my threshold for when I say, okay, it's safe to use a browser feature, because you know, a lot of people they haven't had a power outage in the last eighteen months, and so if they haven't had a power outage, they haven't like their browser hasn't been updated yet because they're you know, their computer's still going.
Or maybe if they're on Windows where you know it like just shuts down the computer no matter what you're doing, like you're in the middle of typing a document, it's like shutting down to update. So I guess like within eighteen months, either people have had a power outage or their computer has like crashed from pending updates. So with that on the browser side, we're good to go. We can use ekmascript modules. We don't need transpilers. It can work.
As of March twenty twenty four, there was a pr for uh ekmascript support in Node that is now available as an experimental feature in Node v twenty two. So I believe that it is now safe to publish ECMAScript modules without any transpilers. And so you might say, oh, node notes had notes had support for it forever. No, it hasn't. Node has only supported note has had the red blue function problem, the colored function problem, where you can either use ESM or you can use common JS,
but you can't use both. In almost every module in the entire ecosystem uses common JS. So the moment that you introduce an import an ESM dependency, now you break everything or you have to transpile. But the new feature flag is that as long as you don't use a
top level of eight. So if you just have an a knit function or a main function, if there's anything that you need to do as part of the initialization of your module, if you're willing to just put that in a knit function that you export or a main function that you export, or you know, as long as you couch that or put it in a caching function where the first time whatever function needs that thing, you know it runs as long as you put the top
level a weight inside of an export. So basically, as long as you don't have a true top level A weight, you can now require an ESM module from a common JS module, which means that we no longer have the
red blue function problem. That modules in Node are just modules except for that one case if they actually have in the body of the sm a weight whatever, and I think that I hope, I hope that we can all agree that it's a sacrifice worth making to move that a weight into a function that's exported as the
innit function or whatever. So that so that you can publish a module without transpiling, and it'd be available every now, of course, since most people are on I would say most people, since most most popular influencers are now on the typescript bus. You know, you're not getting away from the transpiling problem, but you can. That's a topic for another time. You can have I use the type shirt
checker every day. All of my code is typed. I even am using cql C with node such that I had a left join in a sequel statement and sq c allows you to write the raw sequel and then generate the code. So rather than writing the code that generates the sequel, you write the sequel that generates the code parameterized all that. It's wonderful. I love it. I had a left join in my SQL code and I got a type error on one of the things I
was iterating over. It said, you know, error, this can be null and that was the moment when I felt we have arrived. Technology is maybe good again, Like maybe we're on the right track. If I can write sequel and get a type error from a left joint, maybe maybe there is a bright future somewhere on the horizon.
So I was wondering when I was able to sleep better at night lately. That answers my question.
So that's that's my that's my main pick is just that, And I I am you know, I don't know how many experimental features have made it all the way to the point where they have a flag and are properly documented in everything, and then don't make it in. But this seems like a no brainer. So I'm I'm willing to put my my eggs in this basket and say it's time to use ESM imports. But for please, please, for the love of all that is holy and and heavenly, and say in this world, just use one default export.
Don't have a billion trillion exports. Please. But that said, this is something I'm excited about. Uh. There have been headaches around this for a long time because of the bundlers, not because of the browser. Because of the bundlers. It's been a pain in the butt to get isomorphic code working in both note in the browser. The browser's super easy to do, and note it's super easy to do. You don't need to require SHIM or any of that.
You just need a simple ore. But because of the way that the bundlers do the window detection versus the global dis detection versus, there's all this crap that you like boilerplate. There's like six lines of boilerplate that you have to have in order to get a common JS module that would otherwise work. Find a note in the browser without any problem, without hardly like with one line literally one line of quote unquote boilerplate for the bundlers.
Yet it's it's atrocious because they all do it wrong. They don't follow this BAC. They don't anyway. But yeah, so I'm I believe. I believe from today onward, I will be writing es M import and export. And I know that that went way over there are alloted two minutes. Oops.
Oops. So another we can blame Flow at Progressive for all the problems for those who don't understand. In the America, we have these insurance commercials down named Flow always talking about bundling insurance.
So they're everywhere.
That's what comes to my mind. Unfortunately, was that it? AJ.
I'm hoping you're gonna field the best dad joke ever, the best tech the best tech dad joke ever. Yeah, okay, all right, are you gonna do it or do I need to do it for you?
Oh yeah? Oh yeah, So let's talk about that. So, for those who follow me on Twitter, AJ made an attempt at a dad joke that apparently went over my head and so I just finally got it explained to me this morning before we came on. So you want to explain it, AJ, And for those who are maybe those who are less dense than I will get it.
I think it just is your experience, not that's this. But oh so Steve was talking to me and he said, what do you think about SQL migrators AJ? And I said, well, you know, they have their ups and downs.
Wait sorry, sorry, sorry, I was pulling up a tweet and getting because yeah, I didn't get the migration tools I've used, didn't don't use the updown, up and down terminology, and and so I missed it and I felt sorry. It is it a for effort, though I appreciate the thought going to the dad joke. Whenever you see that, that's that tells me that you're learning.
Speaking to my heart.
Speaking of dad jokes of the week, let's see. This one's a little long, but hopefully you'll get the It's maybe a little more visual, but that's what I got for this week. So imagine this thing was Monday, Greg, Tuesday, Ian, Wednesday, Greg, Thursday, Ian, Friday, Greg, Saturday, Ian, Sunday Greg. That is known as the Gregorian calendar. Right. I was talking to my friend one day not too long ago, and I said, you know, I used to be a heavy drinker and he said, oh, you stopped drinking.
He said, no, I just lost weight.
I saw that one on Twitter the other day.
Yeah, I wrote that Originally I really like I write all my dad jokes and then finally, did you know? It's funny when you die, people cry and they're upset and they beg for you to come back, but when you do, they freak out. So those are the dad jokes of the week. All right, Daniel, your turn. What do you got for us? Uh?
So picks? Uh, I'm gonna go with a book pick. I have been listening to a book called The fairy Tale because he actually reads books anymore.
Uh.
Listen to it, uh through Spotify and it's by Stephen King. Definitely recommend checking that out if you're you're into Stephen King. Very very well written book and it hasn't gotten to the creepy part yet, but like there's a little hints of it in there and it's very intriguing. So definitely recommend that one.
Yeah, you know, Stephen King, you gotta expect some level of creepiness.
Right, absolutely, absolutely, as far as I'm gonna do. I'm gonna throw a music pick in here as well, because I've had an earworm for the past week. I'm a nineties kid. Does anybody remember Yellow Card? Does that band named ls?
Yeah?
Us? Yes, all right?
Is that is that the her hair is everywhere? Or is that?
No? No, no, her hair is not everywhere? Believe? No, no, no. What was the name of it? The very popular one? Man? I can't even remember the most potful one they have. I think it was called Believe, but I'm not singing it for you.
Uh.
Yeah, that's been my earworm for the past week. Very you know, heavy guitars. They have violin in there, which is really interesting.
You know. I love that I think that that's the best. When when Hello Maybe came out, that was one of the things that I thought was so great. I love orchestral crossover in any music, be it punk or rap or anything. I love orchestral crossovers.
Oh it's it's beautiful because you have h I mean, they live. They have a violinist in their band, and so she'll do this like solo, violent thing, and then the the whole band will kick in and it's really cool selling. But I think Believe is the name of one of the most popular.
Songs, Okay, Believe by Yellow Card. I was not familiar with that band, but then I wasn't really listening to a lot of radio in the indies.
If you remember a story of the year. They kind of remind me of them slightly, just a little less.
Screamy, less screamy, more musical. That's right, cool, alrighty, Well, thank you Daniel for coming on. It's been good to have you. It's been good to talk to you on JavaScript Ever. We've already talked about where people can give you money, So thanks everybody for watching and listening, and we will talk to you next time on JavaScript Ever.