What do you want to learn?
Skip to main content
Vue.js: Big Picture
by Daniel Stern
This course provides a preliminary introduction to all sub-topics of Vue, facilitating a fast and streamlined learning process for the target student.
Start CourseBookmarkAdd to Channel
Table of contents
What Is Vue.js?
Hello and welcome to Vue.js: Big Picture. I'm Daniel Stern, also known as the Code Whisperer, and throughout this short course, I'll be walking you through everything that you need to know to become a Vue expert. While we won't be diving into detail in any of these topics, this will give you the context you need to pursue a full Vue education if you decide it's something you're interested in. Don't forget, if you want to get in touch, you can follow me on Twitter @danieljackstern. So what will we be discussing throughout this course? First, we'll understand exactly what Vue is, and we'll learn if it can help your business achieve its goals, whatever they may be. We'll get an overview of the core features that Vue developers have to know. We're not actually going to learn the ins and outs of all these features, but we will learn what they are. We'll also learn about the specific challenges Vue can help you solve. So if you have a particular coding problem down at the workplace, we'll learn if Vue is something that could help you with that or if not. In addition, we'll try to understand Vue relative to frameworks that we might already be familiar with. We'll compare it to a couple of frameworks like React and Angular and gain a bit more context on what it's all about. Finally, I'll advise you on some further resources that I think would be great for you to continue learning more about Vue when you complete this short course. In the next clip, we'll discuss the process of creating business solutions using Vue.
Creating Business Solutions with Vue.js
I decided to begin this course not by discussing the technical aspects of Vue, but by discussing the business aspects. Can is solve the problems that your business has? Can through it solving those problems increase the revenue that your business earns? If it can increase the revenue of the business you own or work at, then there's a good argument that spending time to learn it and master it is not just fun and interesting, but a valuable way to spend time and a valuable skill to learn. In this chart, the pie represents the total amount of commerce going through two different channels, Native App and Desktop & Mobile. As we can see, the purple part, or the subset of the market where Vue is useful, is the one we're interested in. This chart shows us that of all the e-commerce being done, applications where Vue can get involved form a very large, in fact, a majority chunk of those. Currently, VUE doesn't have any use in the Native App domain. But in the future, Vue could have its own solution similar to React Native. Moreover, let's look at this quote from eMarketer. They said, "In 2017, retail e-commerce sales worldwide reached $2.304 trillion." And they also note that that's almost a 25% increase from the previous year. In other words, the data shows that there is, in fact, a very large amount of commerce going through the net and also through desktop applications like the kind that we make through Vue. But how does Vue interrelate to these e-commerce situations? So first of all, Vue apps can be built quickly, as we'll see, and the teams that build them don't have to be total experts. Of course, skill is good, but we'll also discuss that the skill level required to use Vue is fairly low compared to its rivals. In addition, Vue performs very quickly, and the package that Vue comes in, the library, is quite small. So when a user accesses your website on a mobile device, if it's not fast or if the library doesn't download fast enough, then it just won't work, and you won't make any money. Lastly, you can look at Vue as a toolset that contains everything you need to build the view layer for your application. So if you've built an application that sells widgets, and all the database stuff is taken care of, you're ready to go out there and sell it, Vue is everything you need to connect what the user sees to those back-end processes that makes the e-commerce happen. Finally, let's say you decide not to use a Vue. Maybe you use a different library or an ad-hoc solution of your own, maybe you just stick with good old-fashioned PHP and Java, what are the costs of that? So as we discussed, if your page is too slow or the payload too big, mobile users will navigate away before anything has even loaded. You won't even have a chance to make your pitch, and there's data that supports this trend of the low, short attention span of these mobile users. So every time your framework of choice takes too long to load, you lose a potential sale. Vue is not perfect, but it is by far the smallest of the three frameworks, and thus loads the fastest. Next, drawing lists when you're dealing the DOM, or a Document Object Model, is a very expensive, slow operation. On mobile, redrawing a list that say has 10 or 12 elements can be so slow that the page can freeze altogether. Vue, similar to React and to Angular, uses what's called a virtual DOM. So when you update your list of 12 items, the actual change that happens to the DOM is minimized and it puts the least stress on the mobile device. Finally, let's say you're still using your existing ad-hoc solution. Let's just imagine it's a PHP application that's been developed for the past 10 years. When you want to make a change to the view layer if it's not made in an organized way or using a tool that I recommend, such as Vue, it may be disorganized and developers will take a long time to fix it. They will probably fix it eventually, but if there's a lot of disjointed code, then the result is it simply takes longer to deal with. Developer hours are very expensive, so if your developers are taking a long time to fix these Vue situations, it's going to affect the bottom line of your business. So I hope I've explained all the reasons why Vue can make sense for you accomplishing your business goals, whether it's to sell a product, or to share information, or simply to make a faster, better site to show off your own skills. Vue can definitely help you do it. Now the question you may have on your mind is why Vue? Why not something else? And that's a great question. We'll discuss that in the next clip.
What Is Vue?
Why Use Vue.js?
Vue Capabilities and Limitations
Reactivity and Vue
A Simple Vue Application
Where Should You Use Vue?
As we've seen so far, Vue is a powerful framework with many interesting features, but all front-end challenges are not created equal. There are some jobs that Vue just makes more sense for than others, so let's discuss that. So what's a good scenario to use Vue in? Well, an off sided and good example is modernizing a legacy application, so taking an app that's old and works, but is slow, and maybe isn't compatible with everything you want it to be, and bringing it up to modern standards. Additionally, Vue makes it very easy to build applications as a team, which we'll discuss in a moment. Finally, Vue is perhaps the best choice out of all the major frameworks for the process of prototyping. Let's dive a bit further into these three things. First, let's talk about modernizing legacy applications. Legacy applications are extremely common as all an application needs to do to become a legacy application is to stick around for 10 or 15 years without breaking; however, these older apps tend to be very difficult to upgrade and maintain. So how could we use a Vue to fix this situation? So probably the best part is that a Vue can be included incrementally. In other words, you can just replace a small part of the application, the most critical part, with a small Vue app. In this scenario, the rest of the application will continue to function the same, and you'd go about a process of slowly, but incrementally replacing the application with Vue components. In this way, we can also preserve the structure of the existing application as we modernize it. This is good because in very old, fragile applications, even the tiniest structural change could break the whole thing. Now even if an application is not so old as if it's built with React, or Angular, or jQuery, Vue will still be helpful in these situations as it integrates nicely into applications that are built with these frameworks. At the end of the day, this is good because using Vue to update your legacy application lets you show results right away. As soon as you've fixed a particular problem area, you can push the changes, and in that particular area, performance and maintainability will be improved. Now you might wonder when is the right time to modernize your application? Well, as William Shakespeare said, "Cowards die many times before their deaths; The valiant never taste of death but once." In other words, the longer you wait to modernize your application, the more trouble you're going to have. So here's a quick checklist to see if you should modernize your application. First are simple changes, especially just cosmetic ones to what the users see. Do those changes take a long time? And are they so unusually complicated that for some reason only your most senior and experienced developers can handle them? When the boss of the company requests a new feature in the view layer, do the senior developers say that they simply cannot do it because implementing it would be too hard or it might break something else? Do you hear this a lot while working on your project? Finally, is the code of the application all ad hoc? In other words, is there no guiding principle or unifying strategy that ties the whole application together? If it is, then when you have a new developer coming in, they're going to have to relearn everything from the ground up, whereas if you use something like Vue, new recruits are usually already familiar with the conventions used in React, Angular, and Vue.
Building Applications as a Team and Prototyping with Vue
The Vue Ecosystem
The Vue Ecosystem
We'll now be talking about the Vue ecosystem. The libraries we'll be talking about here are separate from Vue. They're a sperate npm install and they have their own maintainers; however, they're designed to work with Vue and let us do things that we couldn't do if we only had Vue.js. So what is the so called Vue ecosystem? Well, Vue is a small library. It's small because it only has its core features, the features that let you quickly render your application's Vue. In a sense, this is good, especially as we'll see soon when we compare the file size to React and Angular; however, there's a caveat. To achieve the same functionality as React or Angular, and I should point out that they also have their own large, distinct, unique ecosystems, you have to use other libraries together with Vue. So what are some of these libraries that you might use? Now I want to qualify this by saying that I'm just going to do a bird's eye view of these libraries. Rest assured many of these could have and entire course written on them, the length of which far exceeds this course. Hopefully in the future, I'll have a chance to share that course with you, but for now use this as an opportunity to gain context, to understand more what you'd like to learn about next. So one complimentary library is called Nuxt, and it's used for universal rendering. In other words, you use it to speed up the rendering of your application by having the server do a lot of work. It's a complicated process to do manually, but Nuxt tries to make it simple. Next is Vuex. Vuex is like Redux, and it's used for state management. So if you have a really big app and it has a lot of state, an ad-hoc solution may get unwieldy quickly. Next is Vuetify, and, yes, almost all of Vue's complimentary libraries have funny names. Vuetify is a component framework, so it's similar to Angular Material, and you can use it for many cool things as we'll see. Last one we'll talk about is Vue CLI, or the Vue Command-line Interface, which we use to scaffold and build your application. So first of all, Nuxt.
Universal Rendering with Nuxt
So you use Nuxt to create a universal application, you might also call this application server-rendered. If you ever tried to build a universal application from scratch, you'll know there are a lot of challenges, not simple challenges, not trivial ones, really tricky ones that test your deepest knowledge of front and back-end development; however, Nuxt simplifies these challenges. So ideally, you don't even have to think about them. They just work. I won't get into details about all the specific features of a universal app, but I will say the end result is that it loads faster when you view it on your phone. Is this a big deal? Why don't you ask the people making billions of dollars every day because their applications load up faster on their customers' phones than their competitors'. Next, let's talk about Vuex.
Managing State with Vuex
So Vuex provides you a way of updating your state. The nature of your state affects the way your components are going to look, and the user's interaction may change that state by say introducing a new item to a list or changing their name. As the name suggests, it's similar to Flux or Redux. If you've used these libraries or if you've seen my excellent course on Pluralsight, Flux and Redux, then you'll already be 99% of the way to using Vuex because Vuex just basically takes these technologies and wraps them a up a little bit so it integrates nicer with Vue. Personally, I feel that Redux is so general that it makes a good option as well, but Vuex is, in a sense, more specific and more tailored to this particular job. Ultimately, the reason why you would use this is to keep applications with huge state manageable. If your application state consists of say just an array of numbers, then it's not necessary to have Vuex. It would be overkill. But if your application is a big one and has hundreds, or even thousands, of pieces of information in the state at any time, then Vuex will prevent this from becoming a maintenance nightmare.
Building Websites with Vuetify
Next is Veutify. So Veutify, it contains components that you put into your application, so normally you write the components yourself, but Veutify is a solution which comes with a basket of components for you to use. All these components have a visually pleasing material design aesthetic. They look smooth, and they give users the impression, especially on mobile, that you can just reach out and touch them. So you'd use Veutify if you were building an application from the beginning and you knew it was going to have a lot of standard components, buttons, lists, accordions, and to save money, you ask your team to use an existing solution for all these components rather than making each one yourself. As we know, building components is a lot of work because to build them properly, we not only have to build them, but we also have to make sure they're well tested, and performant, and compatible on every platform we need.
Scaffolding and Collaborating with Vue CLI
Comparison to Existing Frameworks (Angular, React)
Vue Pitfalls and Drawbacks
I'll be the first to admit that my praise of Vue has been lavish, but don't fear because I'm not looking at Vue through rose-colored glasses. I've definitely taken some time to think about why Vue might not be the best for your solution, and surely it is not right for every project. So what are some drawbacks of Vue. So first of all, Vue needs support from its ecosystem to do a lot of things. Once you get past that prototype step, you're really going to want to start using these libraries, and once you do, Vue is no longer a matter of just being a simple, tiny library. You're getting into dependencies and complexity that rivals that of an Angular or React application. Next, Vue has some tricky reactivity. This is because they try and make it quite magical in the way that the components respond to data being changed. Compare this to React, which does no such thing. You have to tell react to render every time. It's very unmagical. So there's no shortage of scenarios where your components might not update in the way you expect. You have to learn to play around these scenarios. Next, while it is true that if your developer is familiar with Vue, they'll find the Vue file type easy to use, but if you have a developer who's never heard of Vue, then the file type may be confusing. It isn't like anything else out there. Finally, while there are production applications using Vue today, compared to React and Angular, it is very new, and there are many scenarios which haven't been tested. Probably they will work, but you're taking a bit of a risk there, and I consider that a drawback. So let's say at the end of the day you've chosen not to use Vue, but to use React or Angular. Why would you have made such a choice? Well, Vue is less established. There's fewer existing resources. Maybe you find the fact that Angular and React have a huge amount of English language documentation quite comforting, and that's why you've chosen to use it. A fair decision. In addition, perhaps you're worried by the fact that many scenarios in production just haven't been tested very much, and if you're the first person ever to try this with Vue, then you'll be the one testing it and paying the cost if it doesn't work. Lastly, if you're building an application and you know from the beginning that it's going to be huge, we're talking enterprise, then you wouldn't be blamed for choosing Angular or React instead of Vue. They're both geared for projects that are a little bit larger. So that's it. At the end of the day, there's not really a lot of drawbacks, but they're there, and consider them when you try to decide if Vue is right for your project. In the last and final clip, outside of the conclusion, I'll be talking a bit more about the build step.
Executive Summary / Continue Your Education
Released31 Aug 2018