
Lesson Description
The "Wrapping Up" Lesson is part of the full, Intermediate Vue course featured in this preview video. Here's what you'd learn in this lesson:
Ben covers composables, file-based routing, and state management in Vue, stressing advanced composition patterns and tools like Pinia. He also encourages improving TypeScript and JavaScript skills, recommending Nuxt for DX and VuePress for static sites.
Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> Ben Hong: We did a lot. I know it sounded like four sections when we first started with components Composables, Routing and State Management. But as we know, the meat of today was really just getting our hands elbow deep in Composables so that when you go back to your code bases, you're just going to be like, yeah, I'm just going to create one and you're not going to think twice about it.
[00:00:21]
I think if that's where people are feeling and then you got to get your hands on with some of those more call it advanced composition design patterns where there are more edge cases. But again, as software architects, we do need to understand how to navigate those things. Those are things that we touched on as well.
[00:00:39]
And then a lot of you got to play with file based routing, it seems for the first time, which is fun. Yeah, so that's for me it's such a big DX improvement. And then finally of course we kind of wrapped it up to show that all our work with Composables really is not so far from the state management library.
[00:00:55]
We already have the official one we have for vue. So again, I have met people at other workshops who they're like pinyout's great but we decided to hand roll our own. We have our type safe, you know, we have our documented way of doing it and I can't stress enough if that works for you.
[00:01:09]
Good, go for it. Just know that you know these pre built options are still very suitable and worth your time should you choose to use it. Just a comment in the chat that this was a very informative workshop and a really great addition to your fundamentals course. Great, I really appreciate that.
[00:01:27]
But just kind of in terms of other final thoughts, so just kind of, these are the things that we covered, lots of different techniques within them. So do not sell yourself short of the things we did. So of course the next question is now you've just finished the intermediate workshop, what is next?
[00:01:44]
And so to you I present this comic. I hate myself. That's where it starts. A therapist comes by and says, [LAUGH] Look, typescript. And then, wow, I hate this even more. I kid now the thing is that typescript, I don't know for me personally, I have a love hate relationship with it.
[00:01:59]
There are times where I'm like, wow, this is great. It's doing exactly what I want. And then there's other time where the build tool is breaking and I'm like, nothing works. I want to chuck all this in the bin. For me it's very much a love hate relationship.
[00:02:10]
That said, it's more I said in Jess. I mean obviously we're here as a front end workshops, frontend masters workshop. But VUE is ultimately, I tell this to people all the time. It's a framework about helping to get the cruft out of the way so you can do what's important to you.
[00:02:25]
And once we provided those fundamentals with composition API now, as we talked about, a lot of the Nuxt really is just about advancing your skills as a JavaScript software architect. Because the patterns we're talking about, singletons, factories, we talked about different ways to share, state, how to keep them modular.
[00:02:42]
Those are all things that it shared across the fields we do, regardless of whatever framework it is that you do. So there are wonderful, as you know, workshops or for those of you are new wonderful workshops they have here to take your JavaScript or TypeScript knowledge further on.
[00:02:59]
So if typescript is scary, definitely this is the place to check out. Then for those who haven't had the joy of checking this out, be sure to check out Nuxt. Nuxt is kind of this wonderful paradise of DX enhancements that the things you love about Vue 3 they were like, cool, we're going to just build stuff in that we think has worked really well and then you just try it out.
[00:03:24]
So things like the page, the file based routing that we did, that's built into this. So people who have been using Nuxt 3 have had this for quite some time. It's only recently come to Vue 3 as a separate place plugin. They have things like auto imports on your composables.
[00:03:38]
They have already built-in patterns for how API libraries can be, or API fetching can be done. They have their own native use fetch as well because we built like a very bare bones one on our own. And then more importantly, nuxt can handle all the SSR hydration. You want to do some stuff static, you want to do some stuff like client side rendered, it can do all that.
[00:04:00]
And so the hybrid rendering it makes just to show you, nuxt hybrid rendering. Like I don't know if any of you have ever dove into this on your own, but like SSR is a rabbit hole. And so what's cool, da, da, da, check this out, you can just set route rules and then tell it which strategy you wanted to use for what page.
[00:04:30]
Yeah, you say like cool, pre-render this, do stable while revalidate on that. I mean the acronyms kind of get all over the place. But you can see here, I Don't know. I don't know if it gets much easier than that, right? When it comes to mixing your renderings strategy for your site, especially when a lot of things, you don't need to be constantly re rendered or not everything needs to be SSR'd.
[00:04:53]
You know, I think in software development we do have a tendency to like over index on whatever the hot thing is. And so SSR was the way we always did it and then it's almost like we forgot about it and then it became a thing again that everyone's like, ssr everything.
[00:05:05]
It's like there's a world where everything plays together. And so this kind of stuff reminds me that, yeah, we can have some stuff that's pre rendered, which is great. You statically generate it. Other stuff like blog posts, right, you don't need that to be generated especially on the client side, just generate one.
[00:05:20]
So deployment, cache it, things like that. And so nuxt is phenomenal if you have a chance to play around with another project and you're starting a new VUE project again. Can't speak highly enough of nuxt. The team is phenomenal if you're looking for someone to follow. Daniel Rowe is the project lead on nuxt.
[00:05:37]
He is fantastic. And then I'm curious, has anyone here heard of vitepress? Yay. Okay, great. For those who haven't, this is the successor to vuepress, if you didn't hear about that one. And essentially it's just a static site generator that creates a doc site that looks just like vpress.dev.
[00:05:59]
it basically looks like this, except everything is configured via markdown. And so if you're getting started, you can see here, da da da, the homepage is just that. You add the title, the description, some theme config stuff, and then you get all this navigation, you get theming, you get the ability to have like next page, like it's basically all marked down, but the back end of it, it will statically generate for you.
[00:06:27]
And then it even uses VUE underneath the hood for theming. And so there's actually a lot of open source projects use this these days and they're not even VUE related. They just wanted to create a doc site. And VPRESS is incredibly easy. You start up the starter project, you add some markdown files.
[00:06:41]
Voila, it works. It's pretty great. So shout out to vitepress as well. For those looking for like, hey, I want to spin up like a little internal dock site for my team. This is great. This is like, I can't this is phenomenal for that kind of thing and people use it at scale like I think Pinia, all the docs you see in the View, I think we all use vitepress.
[00:07:00]
>> Speaker 2: Pretty much the whole like view nuxt.
>> Ben Hong: I think Nuxt does have nuxt docs though, so that's where I hesitate. So it's similar, yeah, but nonetheles, vpress on its own impressive Nuxt docs, I guess. Honorary honorable mention to them as well, having a chance to use them as much.
[00:07:17]
But they also create great stuff. But yeah, you can see file based routing. Yay, huzzah, congratulations. You ought to be proud of yourself. I really appreciate everyone spending the time with me today. I know it's been a long day, but again, with all your feedback and questions and stuff, it really makes this a pleasurable experience.
[00:07:38]
So thanks everyone for coming.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops