Vue Overview

[00:00:00]
>> So story time, when I first started getting started with coding, I was one of those people who thought that JavaScript, well, in order to know JavaScript, you need to learn Java. And this was back in the day where I was learning from an O'Reilly book, I picked up an HTML book that my dad kinda left around.

[00:00:15]
And then so when I saw the JavaScript outside, I picked up the Java book instead and then I got really confused. And then I gave up, and I was discouraged for many, many years. But then when I started getting back into it, then I sort of learned, okay, so it's different.

[00:00:27]
And I started working with jQuery, and then at around this time, framework was starting to become really big. So of course, Angular at this point had really started to get really popular at that point, and then React came on the scene. And so at this point, I'm thinking, okay, how am I going to get my skills up to date?

[00:00:43]
And so I had kind of worked with all of these, and React was the one I'd really been pushing for at one of my old jobs when I really first started getting hands on experience with frameworks. Because after all, this was at least, as far as the statistics show, the most popular one.

[00:00:56]
And it gave me a lot of opportunities to practice JavaScript, so why not? But what's interesting is that at this company even though I was pushing for React, I had my team going. Well, there's this new kid on the block called Vue, and this around time Vue 2 come out that we should really check this out.

[00:01:10]
It's supposed to be basically just as performant as React, and it has a more approachable way of building apps. And for me, I was like, I wanna learn the most popular thing, right, the most cutting edge. So I was incredibly resistant to it. And so part of the reason I tell this story is because I want you to know that this is where I came from as far as experience working with all these different frameworks.

[00:01:29]
And then from this context of switching from React to Angular into the Vue ecosystem. And yeah, so we'll go from here. Okay, so just to make sure we clarify the simple definition of what Vue is. I think the simplest way to think about is it's a JavaScript framework for building web user interfaces, that's basically what it is.

[00:01:50]
It can certainly be used to power other things. Now, that we have frameworks that can help you build mobile apps, you can certainly use the underlying. But primarily, it's used to build web interfaces. Now, of course, the big question here is why Vue.js? Why would people consider using Vue?

[00:02:07]
The first thing is that it's designed to be approachable. And what does that mean when we talk about approachable? And so this is taken from the docs in that Vue builds on top of standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. For those coming from the React world, one of the things you'll know is that one thing React does is it goes all in on your ability to know JavaScript, right?

[00:02:31]
You have to be able to write basically everything in it, and things have sort of gotten improved since then. But especially in the beginning, you were sort of kept to the conventions of JavaScript when you were writing JSX. So you're writing HTML in your JavaScript, so you have to do things like class name instead of just class, because those are reserved words.

[00:02:47]
And you find yourself basically contorting the entire website into what made sense in JavaScript. And Vue's approach was that why not take what people already know, HTML, CSS, JavaScript, and let's just basically build on top of that instead. And so as a result, you get a different learning curve.

[00:03:05]
Cuz I know that when I started with React, I felt like the amount of JavaScript I needed to really get productive was super high. In terms of knowing a lot of either functional programming, or a lot of the methods in order to loop between elements. There was a lot going on as far as what's happening in React, so there's a decent onboarding curve.

[00:03:22]
But with Vue, I found that within the first couple hours, I was able to get not only onboarded. But I've taught people who have been out of practice for coding for a long time, and they got up and running real quick. And so I'll show you exactly how that goes, and we'll get to experience that yourselves.

[00:03:36]
So this is one of the things to consider when it comes to Vue. Performant is always a big thing, especially with frameworks these days. The big disclaimer I always wanna add it first is that vanilla JavaScript and browser API's have come a long way. And so if you haven't had a chance to check out some of the markers that post on TodoMVC and vanilla JavaScript.

[00:03:57]
And so you might not need a framework, and I say that as a core team member. But that said, Vue is designed from the ground up to be a reactive, compiler-optimized rendering system that rarely requires manual optimization. So when it comes to performants, especially the larger your apps get, a lot of times people are very curious about how we can basically prevent ourselves from creating bottlenecks in our performants.

[00:04:22]
Because we don't understand maybe some of the core primitives about JavaScript, and that's what frameworks allow for us, right? They abstract some of that performants away, so they say, we'll take care of that. You just write your business logic, and we'll go from there. And so you might have noticed too I'm not putting any sort of charts or numbers as far as sizes go at this moment.

[00:04:39]
Because one of the things that Vue, and I think a lot of frameworks are doing right now is that they're always trying to find ways to continue to be smaller, right, and they're learning from each other as we go. So when you're deciding whether or not Vue is the performance framework for you, especially if you're gonna like migrate an enterprise level app, you're probably gonna wanna do some benchmarks of your own.

[00:04:56]
Because there're gonna be different contexts to why you might be making decision, because different bottlenecks exists within different contexts. Okay, the other thing is that Vue is versatile. So what does that mean? So via the docs, it's a rich, incremental, adoptable ecosystem that scales between a library and a full-featured framework.

[00:05:16]
And so for anyone who's gotten into the discussion, usually developers get very heated about the library versus framework argument, right? And that was a big thing for React too, is React a library? When is it a framework? Basically, for Vue, what I will tell you is that it can be used basically as a CDN, basically as a drop in library to your page, which we'll play around with just in a little bit.

[00:05:35]
Or it can be blown up to a fully framework project that you're used to expect or you've come to get familiar with when it comes to front-end applications. And so that's basically the difference I would say between the two, that one usually requires build tools, the other one does not.

[00:05:50]
And so Vue is really good at doing that. The other thing that drew me to Vue, especially the more I learned about it, is that it is community first. Something that I think is often overlooked when it comes to Vue is that currently, it is basically within the big three of the frameworks, right, we have React, Vue, Angular.

[00:06:05]
And if we think about it, React has Facebook backing it, we have Google backing Angular. Yet Vue is a community-based open source project that's managed to climb to the popularity that it has now. I think that speaks a lot to the conventions and API's that were designed when Vue was built as far as its approachability.

[00:06:23]
I know people like to jump on the bandwagon as far as what big tech companies are doing. But then the fact that Vue is able to do this while basically learning from different frameworks. And basically helping to do what's best for the community, I think that's always been a really attractive selling point of Vue.

[00:06:37]
It's cuz you know that it's driven by doing what's best for the community rather than what's best for the corporation. And that we've seen trends of that over the community at times, but that's one of the things I really liked about it. The other thing about Vue is that most of the core team is actually made up of volunteers across the world.

[00:06:57]
So I think we have somewhat like 26 different countries of volunteers basically helping to maintain and build the project. And that provides for a kind of international perspective on what's happening in the world as far as different kinds of apps. And so especially when people talk about numbers and popularity, a lot of things like npm tend to take statistics from sort of the Western Hemisphere of the world.

[00:07:16]
But a lot of things in Asia might not be included in that, and we do know that Vue is heavily used in Asia. And so it's really cool to see the different kinds of perspectives that come with that. And so with that, we get a really sort of international mindset when it comes to building Vue.

[00:07:32]
Okay, of course, that said, people when they think about Vue, because it's not backed by Google, it's not backed by Facebook, they wanna know that it's enterprise-proven and granted. Now that it's Vue 3, we've seen a lot of different apps. I wanna just show a couple for those who might not be familiar with this.

[00:07:49]
But Apple actually use Vue to build their introduction to SwiftUI. And so the way you know this by the way is if you install Vue devtools, which I'll show you how to do later. You'll notice in the upper right here, it'll actually detect when Vue is being used and it'll basically flash green.

[00:08:04]
By flash green, I mean it'll have that enabled state, otherwise, it would be grayed out. And so here's another page, here's the Google Careers page where they're also using Vue. And then some of you might have started using Zoom in the pandemic, and so, yep, Zoom also uses Vue.

[00:08:23]
As far as e-commerce goes, we have REI. So for all the outdoor people out there, when you're using the e-commerce, Vue is powering that. L'Oreal Paris as well, we've had the team actually speak at some of the conferences before. It's really fascinating to learn about the different things they're doing when it comes to makeup.

[00:08:38]
So some of the things they were doing were interactive visually, imagery where you could change the lipstick. And then it would change the image color of the model and stuff like that. They're doing some really cool stuff as far as reactivity in that kind of thing. And then here's the fun one, Nintendo.

[00:08:54]
Nintendo is powered by Vue as well as. So if you ever logged in play around with that, they are also using Vue. And if you didn't know, MediaWiki, which is the big organization behind Wikipedia, as well as some other properties. They actually did a really long investigation into deciding which framework they would adopt going forward for their basically migration.

[00:09:15]
And basically, they landed on Vue, which we were really happy to hear. And so if you're ever looking to see kind of why they did that, there's a whole paper on that. So I just wanted to at least alert you all if you're curious about a big organization migrating the Vue and their reasoning behind it, that is there for y'all to read.