The popularity of Vue.js has been skyrocketing, with a recent survey from bestof.js.org showing it as the most popular open source project on GitHub in 2017. According to Gregg Pollack, founder of VueMastery.com and one of the presenters at VueConf.us this year, one of the main reasons for Vue's success is the way the core team has focused on making Vue incrementally adoptable.
InfoQ took the chance to ask Pollack about Vue.js internals, his view of the Vue.js community, the best ways to learn Vue, and more of the reasons for Vue's success.
InfoQ: After previously founding more generalist training companies like CodeSchool and StarterStudio, you've recently started VueMastery. What led you to found a company focused specifically on Vue?
Gregg Pollack: The company I founded is called Code Pop and I realized the best way for me to make an impact on this world, whether it's helping find a cure for cancer or get the next person to Mars, is to accelerate the adoption of the most innovative Open Source technology, and the way that I can accelerate adoption is through media, and content - teaching people the tech. We started out a few months ago looking at a bunch of different criteria to identify a technology that was in the sweet spot: hadn't yet made it into the mainstream, still in the early adopter phase, and really needed a boost in content and media in order to really make it into the mainstream.
So after looking at all the different criteria we picked Vue just because it had a really healthy-looking ecosystem, it had building momentum, and I think you know based on the State of JavaScript survey was something like 43% of JavaScript developers are interested in learning Vue. It was the one most, and we thought, OK, that's the reason why I want to pick that. And also with Code School, because we we only kept things on the surface of everything is very introductory, which was great, there's always people wanting to start learning but the disadvantage of that is a lot of customers would fall off after they got through that initial course, they would show up, subscribe for just what they wanted to learn, and go away.
This was one of the reasons why the acquisition by Pluralsight made so much sense at Code School because Pluralsight had this huge library then we lacked. But I was always really curious of what it would be like if we picked one particular tech and went really deep on it - could we create a community around it, could we create a following, could we create this reference library? Because that's also one of the reasons why Pluralsight had an amazing customer lifetime value.
Customers would stick around for a long time at Pluralsight because people used it as a reference library. So when they had a problem they were just, you know, Google it and go into Pluralsight ‘is there a course, is there a lesson on this?' and they would find it 'cause it has so much more content than we did. So what I'm aiming to do with Vue Mastery is become the ultimate learning resource for Vue developers. So I'm hoping we'll be that reference library.
InfoQ: What are the main reasons you see people adopting and using Vue?
Pollack: There's a couple reasons. Vue I think did a wonderful job taking all the best practices from Angular, from React, and making it super easy for somebody to adopt. And not only because it has all the same patterns, but they really paid attention to what it feels like when you first start learning it, when you first start adopting it. The documentation is amazing and that's mostly thanks to Chris Fritz that runs the documentation project, and he really cared about making it feel accessible.
So the documentation's great, especially when you're getting started, plus Vue is incrementally adoptable which means you can start out by using it just one small piece of your project or you can use vue-cli and use it in a big way from the get go and do everything the Vue.js way. Which is great but for bigger companies if you want to make it to the mainstream you have to make it really easy to be incrementally it optimal so you can have it in small pieces in your app before you subscribe to the entire framework and way of doing things. I think that's really why Vue has gotten so popular.
When you look at React and Angular, I heard somebody say something the other day that kind of resonates. Because they have so many developers working on it full-time, that maybe one of the reasons why as both of these technologies evolved it feels like it's harder and harder to get started on it as a beginner. Because it's almost been over engineered and they don't pay enough attention to onboarding. To things like, can somebody use this in 5% their app, 10% of their app, 60% of it as a beginner and I think that's when the reasons why Vue has been so well adopted over the last few years.
InfoQ: In your talk, you focused on reactivity as one of the core features of Vue. Can you elaborate on that?
Pollack: Reactivity is found in a lot of these frameworks, and it just refers to the way you have data in your JavaScript somewhere, and when that data gets changed the framework knows all the different places in your webpages that it needs to get updated, it needs to get changed. Which is great when you can abstract that away and you just have like a JavaScript array and it gets changed and it knows that it's affected these parts of the webpage.And it seems to be just key to be using a framework that does that for you so you don't have to worry about updating the DOM, running jQuery in the callback hooks, no you're just going to have a template and leave it to your framework to figure out when I need to get updated and how. And really that's where the virtual DOM starts to come in, and all these frameworks have this virtual DOM, which makes it so that differences in your templates, as data gets updated, get updated in the most effective and efficient way possible.
In my talk I went behind the scenes and showed how to create a reactivity engine, and then I showed where that lives inside the Vue source code, demystifying the magic that is reactivity for everyone because it truly does the magic.
InfoQ: You mentioned in your talk that very few people understand all of the source code of the core framework. Which features do you find people struggle with most?
Pollack: Well we just launched our free beginner material over at VueMastery.com so we don't have the data on that yet, but where do people struggle the most… I think when you're a beginner, because Vue is so easily adoptable as a beginner and you can either use it a little or you can use it a lot. I found myself in the beginning really wanting to know, all right, how do the professionals use this thing really? So takes a little bit of discovery and a little bit of asking around right now to figure out what is the golden path. if I want to subscribe to Vue and use all the Vue best practices from the ground up, what exactly are those?
And I think honestly in the last year it's been evolving so I think that's probably one of the reasons why it's been a little cloudy is that those best practices have been taking shape. Projects like Nuxt.js have only in the last few months hit 1.0. And Nuxt is doing exactly that, it's trying to show you here are the best practices with all the key libraries to create an enterprise level, production Vue application. And here's where all the files are, and here's all the folders, and we're just gonna show you how to do this in a best practice sort of way and now that that those have evolved it's starting to become more clear what an enterprise Vue stack looks like.
InfoQ: In your opinion, what are some of the most underutilized features in Vue?
Pollack: The first would be the animations and transitions. I think, animations and transitions in general in web applications, there's not many companies take full of advantage of using them to create beautiful user interfaces. So I love how easy it is to create animations and transitions, and I think some of that comes down from the fact that Evan You, the guy who created vue, his background is that he's a designer! So I think that's partially his influence that he wanted from the get go for Vue to be very accessible to designers who have perhaps less code experience to still jump in and use a framework, which is great. That's one of them.
Underutilized… I would say server-side rendering. There's probably a lot of Vue apps out there that if they took full of advantage of how you can render out your templates before they get back out to the server. It's even not clear to me like all the different stages of that, I need to figure out… if you really want to scale your app, there's ways to not just render templates out but render your webpages so they have actual files that are getting loaded by the browser so that only the most dynamic parts of your application are getting loaded inside the browser.
The different levels of that and scalability and that has really gotten solidified over the last few months. You can use Nuxt or you can even just do it yourself with some of the server-side rendering - I think that's in vue-loader. There's some stuff in there that allows you to play around with that and makes things really scalable and really quick.
InfoQ: You have a ton of experience teaching people how to code. How would you recommend developers who are coming to Vue for the first time get started?
Pollack: Go straight to VueMastery.com! I believe the beginner content should always be free, so our beginner content at VueMastery.com will always be free. And we spent a lot of time and energy creating that. You don't even have to create an account and you can watch all of our videos and start learning. So I think that's a really great resource, as well as of course the Vue documentation, and the guide there for getting started. It's brilliant.
When you get started with a technology you're not gonna use just one resource, I can't hand you one book and say ‘here's everything that you're ever going to need to know', so you going to learn from multiple resources and there's lots of great free resources. There's the documentation, there is Vue Mastery, there's laracasts that has a free Vue Course that's also really amazing.
Also for free over on Vue Mastery, we have the Vue essentials cheat sheet. I know when I get started on a technology, it's so nice to have all the syntax in front of me. So we spent a few weeks creating a two-sided cheat sheet that gives you all the essential syntax at your fingertips. So when you start building stuff, you don't have to always be looking at the docs - you can have it on your desktop, your second screen, or just print it out and look up the syntax you need.