Vue 3 Fundamentals Vue Overview
Transcript from the "Vue Overview" Lesson
[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: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: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: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: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: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.