Introduction to Vue.js Introduction

[00:00:00]
>> Sarah: Yeah, I wanna take a second to thank Frontend Masters for having me here. Like Mark said, I gave a course here a couple years ago, and I've since been doing a lot of workshops and stuff. I also saw Mark give a SVG talk a few years before I gave my SVG animation workshop.

[00:00:15] It was super awesome. Okay, so without further ado, let's dive into Vue.js. My name is Sarah Drasner, this is a photo of me as a child and also my relationship with authority. I'm a consultant, which does not mean that I'm unemployed. I work for companies like Salesforce and IBM and Microsoft and I feel really grateful that I get those kinds of opportunities.

[00:00:41] If you need to find me on Twitter to ask questions or anything, that's my Twitter handle. So we're all here to learn Vue.js. Why should we learn Vue.js? What is all the hype about? It's kind of blowing up lately and I think that there are some things that are really, really cool about this framework that make it really unique.

[00:01:00] And we're gonna kind of dispel some myths about it as well. It's very declarative. I really like that about it. It's super legible because it's so declarative. When you are working with it, as a consultant, I have to jump into these code bases that I don't have a lot of context for.

[00:01:18] And when I jump in to a Vue project, I know where things are right away. I can automatically look at something like a function, and know whether it's using methods, computed value, or a watcher, and kind of understand what that might be doing immediately off the bat. It's really, really nice to be able to just jump into a project and see what you need to see in order to get working.

[00:01:42] It's easy to maintain because it's so legible. When you haven't worked on a project for a little while and then you come back, you actually understand where everything might be. It's nice and self-documenting that way. It's really powerful. I think a lot of times when something is simple and easy to use, we think that it doesn't have a lot of horsepower.

[00:02:04] That's not true of Vue. Vue actually is incredibly feature rich, but it also is simple and I think that that's a really dynamic composition. It's a collection of the best of the best. You might've just started hearing about it after you've heard about things like React and after you've heard about things like Angular, because it came after all of those things.

[00:02:27] And really what Evan, who's the author of Vue, did was he took his favorite parts of all of the frameworks that you guys have mentioned earlier today and he kind of took them and kind of collected them into one place. Now you'd think something that takes so many disparate ideas would be kind of like a mess or something.

[00:02:48] But the most amazing part about it is, he did so in an elegant manner. You don't feel like it's just a bunch of jumbly things smashed together. You actually feel like you just have this really feature rich ecosystem. I think that the coolest thing about the web today is that we are all learning from each other.

[00:03:06] And that when frameworks compete, we kind of get the best of everything, right? Vue borrows from React, React borrows from Vue, and then both are better because of that. So that's really, really nice. This is one of the biggest reasons I use Vue. It gives me what I want when I need it and then it gets out of my way.

[00:03:26] There's a great quote by Kathy Sierra, she is like a UX expert. And you might have heard of the thing don't make me think, but she says don't make me think about the wrong thing. I think that that's a really good phrase for how I feel when I'm using Vue.

[00:03:41] I feel like all of the stuff that I need abstracted away from me that feels like I've already done it a million times, why should I have to keep reinventing the wheel here, is abstracted away. And everything that I need and if I need to dip down into some of the custom properties, custom directives, I can do so.

[00:04:00] That's really, really great. So it's a way to be really productive. I feel very, very productive in Vue. I feel like I'm almost constantly in that great flow state that makes being a developer so exciting. Goodness gracious, it's freaking fun. [LAUGH] I love web development. I think Vue actually gives me this resurgence of excitement of working on the web again and that is just immeasurable.

[00:04:25] I put this in here because I think, a lot of times, when we're building out sites, we end up doing the same things over and over again. And you even can see a developer over there implementing the same thing you did last week. Vue basically looks at all of those things, those kind of common use cases and keeps you from yak shaving.

[00:04:43] It keeps you from having to reimplement the stuff that you're probably going to be doing again and again. We're not going to talk about mobile today, that's not why the iPhone is on the screen. The reason the iPhone is on the screen is because I get the same feeling using Vue as I do the iPhone.

[00:05:01] The iPhone is a sophisticated piece of machinery and I know some of the best engineers in the world work on it. But when use it, I don't feel like I'm being talked down to. I don't feel like it's getting in my way of using it. I feel like I have a lot of strength and power in that device.

[00:05:16] And I still can navigate it very easily, so that's a kind of metaphor that I'm using here. We're gonna do a quick comparison of frameworks because people might want some of that but I'm also gonna link off to a page that has a ton of resources for that if you're more interested in that material.

[00:05:32] It has a virtual DOM, just like React, if you're used to those kind of core premises. That's the same kind of idea. It has reactive components. Reactivity, we're gonna dive into in one of the sections and I'm gonna talk about what it means to be reactive. You might have heard this kind of buzzword in programming lately, in RXJX, Angular is reactive as well.

[00:05:56] But Angular is an MVC view, uses the View layer only, kind of similar to React. So it has props and a redux-like store, similar to React. And the last part of this workshop today we're going to dig into Vuex which is like the redux counterpart in Vue. It has conditional rendering and services similar to Angular.

[00:06:18] When we're working on the first section and the directives if you've come from an Angular background you're gonna feel very, very, very much at home. It's inspired by Polymer because it kind of emphasizes simplicity and performance. So it has a similar development style. It's called a progressive framework because we're working with what you are writing is like html and styles in JavaScript composed in tandem and eventually were gonna be working with them in single file templates.

[00:06:48] This does not mean that that's the only way to work with it. If you're more comfortable with something like JSX that is totally available to you in Vue. Today we're not gonna be discussing the way that you would work with it with JSX because it's kinda like while in Rome, we're gonna learn the Vue way of working with stuff.

[00:07:04] But that is definitely available to you so don't feel like If you come from a React background you have to divorce yourself from all of the things that you love. It has slightly better performance than React and has no use of polyfills like Polymer. So it's an isolated, less opinionated view then Anguler.

[00:07:21] We mentioned this before because it's not an MVC. It's just the Vue layer only and if you need more horsepower you kind of add things that you need, like React does.