Introduction

[00:00:00]
>> Hi everybody. I'm Sara Drasner. I'm really excited to be here today in part because I just love giving workshops for Frontend masters but also because I'm a huge fan of Frontend Masters as a student. This is just one of my favorite platforms for learning. So today we're gonna talk about Vue.js.

[00:00:15]
As I mentioned before, my name is Sarah Drasner. This is me as a child picking my nose and also my relationship with authority. If you need to get in touch with me, that is my handle on Twitter, @sarah_edo. So if you need to ask me questions or anything like that, that's where you can find me.

[00:00:32]
I am VP of developer experience at Netlify. And I'm also on the Vue core team. Right now I'm really focused on Docs work which is really exciting because we have this major release for Vue 3 that just came out. So I got to work on that. And you might notice that a couple of examples here and there are similar to the Docs.

[00:00:49]
That's because I wrote them, so you'll see a lot of different examples and some from that area. So why are we talking about Vue today? Why should we spend a whole day covering Vue? Well, there are a couple of different reasons. One is it's really amazing framework that a lot of people like around the world.

[00:01:09]
You might notice that it's the second most starred GitHub repository in the world after Free Code Camp. Does this matter? No, that doesn't matter at all. GitHub stars are not a reflection of how good something is. But it doesn't not matter in the sense that it does show that people really like Vue, people really like working with Vue all over the world.

[00:01:29]
So why do I like Vue? I really like it because it's declarative if you're familiar with imperative and declarative programming. Vue is really declarative. In other words, things are not written like steps in a recipe. In imperative programming, we're saying do this, do this, do this. With declarative programming, we're really setting a few things and letting the computer do the hard work.

[00:01:50]
And you'll see that as soon as we start to dive in to the API. It's really legible. There's a legibility of distinction between methods, computed, and watchers. I used to be a consultant and I'd have to dive into different code bases that were unfamiliar to me. And because I knew exactly how those pieces of the API were working and the legibility of that distinction, I could jump right in and I could get started and that was really helpful.

[00:02:16]
Because of this, it's really easy to maintain, and I love that as a maintainer. Even if I'm jumping into an old project of my own, it's really helpful to be able to get a lay of the land really, really quickly and get started. Vue kind of has a reputation for being simple and easy to learn.

[00:02:30]
And I think that that's a really, really amazing thing that you'll see today as we start to work with it. It's really powerful. And you might think, well it's simple though, how can it also be powerful? But I think what you'll see is that the surface layer is very simple, but it also dives underneath those obstructions.

[00:02:48]
So you have something very simple on the surface, but you can also get beneath the obstructions in case they get in your way. It's a collection of the best of the best. When Evan You was first working with Vue, he looked over the whole framework landscape and he said, okay, well, I really like this piece from Knockout.

[00:03:05]
I really like this piece from Angular. I really liked this piece from React. So you might notice if you come from other frameworks, like, hey, this looks a little familiar. It's because it really is borrowed from all of these different frameworks. And it is a collection of this best of the best.

[00:03:20]
Now, what you might assume when you look at something that takes from so many other places, and even invents its own, that it might feel jumbled. But what I really appreciated about it is that even though it's gathering the best of the best, it still manages to feel really elegant when you're working with it.

[00:03:39]
It gives me what I want when I need it, and then it gets out of my way. There's a UX premise, that's Don't Make Me Think. And Kathy Sierra who's a UX expert says, don't make me think about the wrong things. And I think that that's how I feel when I use Vue.

[00:03:53]
I'm able to build super fast because it gives me all of the things that I need. And then all of the things that are kind of repetitive tasks that I find myself doing over and over again, it gives me really simple API's to just do those things quickly.

[00:04:08]
So I really love it. It's a way to be really productive because of all of those things because it's easy to maintain, because it's powerful. And goodness gracious, it's freaking fun. I love working with Vue and I'm gonna have such a fun time teaching you today. I hope you're gonna have a great time learning.

[00:04:24]
I put this little GIF in there, that's a little yak shaving. If you're not familiar with the term, yak shaving is when you do a bunch of other things because you have to get something done in programming. I like Vue because it keeps me from yak shaving. It says, hey, a lot of developers are probably gonna take an input and they're gonna trim out whitespace.

[00:04:43]
So I'll just give you a modifier called dot trim. So you don't have to keep doing that over and over again. Or maybe you're gonna loop through a lot of arrays in your life. Maybe we'll just give you a simple way of doing that. So that's really helpful as a developer.

[00:04:59]
I'm showing you this iPhone and that's not because we're gonna talk about mobile even though everything that we're showing you is responsive, works on mobile, and things like that. It's more because it's a metaphor. When I'm using the iPhone, I feel like I'm working with a really sophisticated piece of machinery.

[00:05:13]
I know that some of the smartest engineers in the world work on the iPhone. But yet when I use it, I don't feel talked down to, I feel like everything's at my fingertips. I feel like I can access everything really, really easily. And I think that is a metaphor for how I feel when I'm using Vue.

[00:05:30]
I feel like I have something really powerful in my hands, but it never feels like I'm fighting with it. It always feels like everything is right at my fingertips. So let's do a quick comparison of other frameworks just on a technical level of what some of the similarities and some of the differences are.

[00:05:48]
It offers a virtual DOM, same with Angular, same with React, same with a lot of JavaScript framework. And we're actually gonna talk a little bit about what the virtual DOM is today, so you get to know what that premises. It offers reactive component that offer the view layer only.

[00:06:03]
So this is both similar and different from both React and Angular. React, despite the name is not reactive, although you can make it reactive but the use of libraries, but it is the view layer only, whereas Angular is reactive, but it's an MVC. It offers model, view, and controllers.

[00:06:21]
So that's a slight difference and similarity to both of those frameworks. As props and a centralized state management store similar to React, as we get to the last section today, we're gonna start using Vuex. We're also gonna talk about the composition API which is a new feature in Vue 3, which can be used as a centralized state management store as well.

[00:06:42]
It offers conditional rendering and services similar to Angular. If you come from an Angular background, you might look at the directives and say, I know about these. It's inspired by Polymer for simplicity and performance. Vue offers similar development style with HTML styles and JavaScript composed in tandem. Vue offers the thing called single file components, which have HTML script and styles all in one component.

[00:07:08]
And I'm gonna show you a few different ways to make Vue components today. And that's typically how Vue developers are working with Vue, and you'll see that when we move into Vue CLI. Scoped styles in single file components are available to you just by writing an attribute that says scoped.

[00:07:26]
And it's similar to some types of CSS and js-like CSS modules in React. So what this course is, let's just get the lay of the land really quickly. This is an introduction. It assumes no prior knowledge, even of frameworks. You can come really, really fresh and everything is starting really at the base.

[00:07:46]
We're gonna go slowly through every single piece to try to give you a good lay of the land of all of what Vue has to offer. It's all this stuff to get you going. Because it's an eight hour course and there's a lot to cover. I'm gonna cover the things that I think are most valuable to you to start to build applications so that by the end of the day, you can feel comfortable starting to build things.

[00:08:06]
It has a lot of exercises to help you learn. You'll notice in this course, I have all of these distinct modules and sections and I show you a bunch of different ways of working with the same concept. That's because I don't want you to learn just one way of working because that just kind of gives you one path.

[00:08:24]
So I might show you an example of list rendering one way and then another way and then another way so that you can kind of get to see it in a bunch of different contexts. It's also so that if later on, you wanna go back to the course and you say hey, I forgot what computed was, you can go right to the computed section fork a CodePen, play with it and get going again.

[00:08:46]
So this course does not do a full application live coding, we're covering basic premises and a couple of more advanced features. So we'll make sure that you have all of the things that you need to get going. And then we're also gonna cover things like the composition API, which is an additive more advanced feature.

[00:09:04]
We're gonna talk about different ways to work with Vuex and so on and so forth. And anything that's out of the scope of the course, I'll try to give you more resources so that you can dive off into learning a little bit more about it. What we won't cover.

[00:09:19]
We're not gonna cover ES6/ECMAScript 2015, however you wanna call it, and above, but we'll use it. This course is assumptive that you have modern JavaScript knowledge and there's lots of other courses like Will Sentence's courses that kinda go over those premises if you need a refresher. We're not gonna go into minor details so that we can cover more ground and give you the full lay of the land in the eight hours.

[00:09:42]
And we won't cover edge cases for that same reason. We're gonna dive right into the things that get you going. But there's another course in one day, again, where we will build some of those things and we'll kind of dive into some of the idiosyncrasies of things. Before we start, the repo lives at github sdras intro-to-vue, here it is.

[00:10:04]
So in here, all of the things that I used while I'm working, I'm gonna work in VS Code a little bit today. All of the things that I use to work in VS Code, all the things that I work in Chrome Dev tools and extensions are linked up here.

[00:10:19]
And here are all of the slides, all the slides have embedded CodePen demo. So if you need to get back to them right away, you can. The password for all of the slide decks is Vue with exclamation points. So you can click right to there and get going.