Introduction

[00:00:00]
>> Ben Hong: Welcome, everyone. Hopefully you all are here for intermediate view with Frontend Masters. My name is Ben Hong. I'm on the Vue core team and I actually recently joined the Angular team as well. So I do a lot of things for the web and open source and so primarily I get to do a lot of docs work and then basically just helping to make the web technology more accessible to everyone out there, so that everyone can keep building awesome things on the web.

[00:00:18]
As far as prerequisites for this course, basically we expect that you've taken some sort of Vue 3 Fundamentals. So if you haven't, if this is your kind of first foray into it, we have a Vue 3 Fundamentals workshop that I've taught before. So I also expect that you have a basic understanding of Composition API.

[00:00:34]
This workshop really is about diving more in depth into it and what we can do with it as a result. Also, we'll be doing a lot with script setup, so if you're new to that, don't worry about it. It's basically just all Composition API, as opposed to some options, some Composition API.

[00:00:47]
Essentially all it is. Once we dive into it, you'll get right into it. And then I say this with the utmost in quotes, basic understanding of TypeScript, in the sense that there is TypeScript in the code that you'll see. But we're not doing heavy type creation or anything, it's just there to help with some of the auto completion type inferences, that kind of thing.

[00:01:07]
Fear not, if you see the typescript in there, that's not what this course is focused on. So as far as setup goes. For those in the chat and those here, hopefully you've had a chance to check out the repo on github.com, so it's under github.com/bencodezen/intermediate-view.git. And if you go ahead and clone that down, basically that's where we'll be doing all our exercises.

[00:01:26]
So as you see the main branch right there, you can go ahead and basically NPM install and that should basically get you up and running. And then basically going forward, I'll be checking out branches as we go through. So you have different stopping points and checkpoints for you to kinda check back and go over different things.

[00:01:40]
As far as the things we're gonna cover, we're gonna focus on four primary topics today. And so we'll start off with components and then we'll be looking at composables and really diving deep into that. Because I think this is where a lot of the Vue ecosystem is currently kind of moving towards.

[00:01:55]
So I wanna get everyone very familiar with that. And then we'll have a section later on on routing, as well as some of the sort of upcoming movements as far as where that's going from enterprise perspective. And as well as kind of taking a deeper dive into state management, where it's at, especially in a composition kind of world.

[00:02:13]
Where are we with that and what do we recommend as far as working with it? Okay, so the question is, what are we building? Well, we're gonna be building a todo app, just kidding. This is not an intro class. We've all been bored by the todo app and done it way too many times.

[00:02:29]
And so this is an intermediate course, which means we're gonna be dropping you into, well, essentially a legacy code base. So just to give you a little bit of a tour of what you have. So we have essentially, as far as the structure goes, we have our frontend app inside of the app folder.

[00:02:43]
So this is your standard Vue 3 scaffolded with Vue 3 app. And then there's a backend in quotes I put, because it's really just a JSON file. And we're leveraging a library, if you haven't heard of before, called json-server, and it basically fakes an API rest point for a JSON file locally.

[00:03:01]
So that's really all it is, nothing fancy. So nothing's being sent to the cloud, everything's just being done locally. So let's go ahead and take a look at the enterprise app that you all are gonna be walking into. And so it's called Point of Vue and it's your own personal productivity dashboard.

[00:03:18]
And so overall, you can see here, this is like, we got our homepage. And then you can choose your focus in terms of the things that you're intending to do. And we have, basically you see your tasks here, you can filter it down, we can even look at the planner as far as what's been planned for what week.

[00:03:34]
You can switch the different weeks, look at it in detail. It gives you some metrics on things that you've planned, what you've actually spent time on. And there's even a reflection page to kinda see how has your completion rate been along with your time efficiency. And overall it looks pretty good, but I'm not gonna lie, it's pretty buggy.

[00:03:53]
Some of the features are missing that you would expect to be there. And AI may or may not have been involved in coding some of the tickets. So inside you'll see some of these coding practices don't look quite right. And so in some ways it's kind of your modern day enterprise app.

[00:04:09]
So as far as this goes, basically the key thing I wanna emphasize here is that you're walking into a code base that is already there's opportunities for improvement, lots of it. So do not take what you see in there as gospel as, that pattern, I should copy that.

[00:04:24]
We're not at that point. So just to reiterate, so what you're working on is you've inherited a legacy code base. And while it does work as far as some of the major features, it is far from perfect and we're here to kind of improve it. So this is a quote when I was talking with David at his talk.

[00:04:39]
And I love this because it says LLMs weren't trained on good code, they were trained on your code. And I thought that was a great quote because a lot of times, as we know, we live in a world where we have AI generated code and it's being injected in.

[00:04:52]
But as we all keep playing around, you'll notice that sometimes it just does things that does not make sense. Like for example, I think at one point it was trying to inject router functions so that it could add a button to navigate to another page. And that is just a big no, no, right?

[00:05:08]
It's a button element. We have anchored tags for a reason. But for Some reason the LLMs have learned that, a lot of people do this, so I'm gonna do this too. And so it's an interesting state that we're in right now. But so as a result, I just thought this was kind of a funny quote by David.

[00:05:23]
So as far as participation tips for this workshop, first off, don't be afraid to deep dive in the code. Again, this workshop is about getting hands-on experience with the techniques and the patterns that we're talking about. So the best way to get experience with that is obviously to go in there, try stuff out.

[00:05:38]
And so I have dedicated exercises for different things we'll be trying to solve together. But I left a lot of different things to explore so that you can go and try out different things and basically enhance the code as you see fit.