We know with JavaScript, there’s a new framework basically every week, so it can be hard to separate the hotness from the hype. If you're ready to move on from jQuery, then Vue is a worthy candidate. Since its inception in 2013, Vue has steadily been gaining popularity, and today we dive in to see what all the fuss is about. We kick the episode off by learning more about the origins of Vue and how it took all the best parts of Angular but made it more lightweight. We then talk about some of the best reasons to use Vue, like not having to learn JSX and some sublime state management features it offers. After this, Mike shares what testing in Vue has been like so far. Up until now, he has found it to be everything he needs, with some pretty neat built-in testing features. We round the show off with some hot takes from Mike, and what he thinks they could work on going forward. Vue definitely seems worth the fuss, so be sure to check it out. Tune in today!
Key Points From This Episode:
Transcript for Episode 157. Vue: New Hotness or New Hype?
[INTRODUCTION]
[0:00:01.9] MN: Hello and welcome to The Rabbit Hole, the definitive developer’s podcast. Live from the boogie down Bronx. I’m your host, Michael Nunez. Our co-host today.
[0:00:09.3] DA: Dave Anderson in sunny Jersey City.
[0:00:12.6] MN: There you go. Today, we’re talking about Vue, is it the new hotness or is it just all hype? That is my question.
[0:00:20.8] DA: I mean, it’s JavaScript. It’s all hype.
[0:00:22.3] MN: It’s all hype. There’s a new framework that’s out every other week. And today, we’re just having a talk about Vue. That’s kind of what’s happening.
[0:00:29.5] DA: I mean like, I had never moved on from jQuery, you know? That’s where it’s at.
[0:00:34.8] MN: No, stop. Don’t push that to the internet.
[0:00:38.0] DA: I saw a Stack Overflow survey, 50% of the world agrees with me. jQuery is where it’s at.
[0:00:43.0] DA: Gosh no, please.
[0:00:45.3] MN: Yeah, while Vue is definitely gaining traction, gaining popularity, the fun fact that Dave just mentioned on the Stack Overflow survey of 2019, around 50% of the peoples who used the JavaScripts are using jQuery. That is nuts.
[0:01:02.6] DA: I mean, you can’t get away from it. But like, eventually, you’re going to have to rewrite in jQuery app and you have to choose. Like is it going to be React, that’s a very popular one, one I’ve used quite frequently and enjoy.
But there’s always the new hotness and so, I’ve never used Vue so I’m pretty curious like you know, you got to convince me, the onus is on you to convince me. If I’m going to rewrite my jQuery app, is it going to be Vue or React?
[0:01:32.4] MN: Hold on. That’s a lot of pressure here. I’ve been using Vue for a project right now and I have some opinions. But let’s see if I get you to use Vue or to run away from it. Let’s talk about why did it start. The creator –
[0:01:47.4] DA: That’s a good place to start. At the beginning.
[0:01:49.5] MN: At the beginning. Evan You created Vue in 2013 and Evan You was a developer over at Google and worked on the Angular framework, which is Google’s framework of choice for JavaScript, that flavor that happens some time ago. One of the many frameworks that come out of JavaScript.
[0:02:08.6] DA: Interesting, I didn’t realize that he worked on Angular. That’s awesome.
[0:02:11.3] MN: Yeah. The quote, when creating Vue was, “I figured, what if I could just extract the part that I really like about Angular and build something really lightweight?” That’s like wow, okay, yeah. I mean, Angular, I haven’t used Angular like professionally more than a week and I did not like it at all. It’s crazy.
[0:02:32.9] DA: There’s a lot in Angular. It’s not lightweight.
[0:02:37.3] MN: Yeah and Vue, he’s right. He definitely took all the good parts I guess because if you use Vue, it’s pleasant. It’s a good experience. It didn’t feel like Angular if you asked me. He creates Vue with this idea in mind and it’s been growing since 2013.
[0:02:56.1] DA: Cool, yeah. I mean, I’ve heard about it a lot very recently. I feel like in the past like two or three years it’s kind of caught a lot more attention. It’s gotten more excitement from people.
[0:03:10.6] MN: Yeah, I think one of the big pushes of that was the whole Facebook React licensing controversy, where I can’t remember exactly, but I know that had to do with React being a particular license and all the engineers flipped their tables at the time.
[0:03:28.7] DA: Yeah, I remember that. It was like, really intense, it was like kind of like wait, there’s a really subtle thing that they’re doing here and I had to double check for this but – there’s like BSD license which is open source. But then Facebook was like, “Well, let’s just do a little BSD with a little variation so they call it BSD+Patent,” where if anyone using the software like React, they could like lose the license if they sue Facebook for patent infringement.
Basically, like Facebook gets the ability to steal IP from other people when like, people use React.
[0:04:09.8] MN: That’s nuts. I build this thing using React and now you own it? How? What? That must be crazy.
[0:04:17.0] DA: Or it’s like not that they would like own it but they would just like be able to steal it and I don’t know, it’s like all those things are licensed are like swords and shields. They have them there to potentially attack somebody. But it’s a risky, right?
[0:04:35.3] MN: Right, I mean, unless an engineer, you want to use the thing that is more favored in the community. But to have this like underlying thing that we – you know, when lawyers are involved like makes it –
[0:04:48.0] DA: Your boss is going to be like, “No. You’re going to use Angular.”
[0:04:51.1] MN: Yeah, and then everyone’s like, “No, I’m not doing that.”
[0:04:55.0] DA: I’ll just keep jQuery.
[0:04:58.3] MN: That’s probably what happened and it’s been growing since. I think we mentioned before. If you go to GitHub.
[0:05:03.2] DA: Facebook is like since fixed their license but that definitely made a lot of people think like, “What else is out there?”
[0:05:12.6] MN: Exactly. I think right now, if you go to GitHub and you see the amount of like stars that Vue has, it actually a lot more than the amount of stars that React has. Even though React has more usage.
[0:05:27.6] DA: People who use it are just in love with it. They’re just starring it left and right.
[0:05:33.1] MN: Yeah, people love that stuff. They are eating it up. They definitely enjoy Vue.
[0:05:37.9] DA: What’s good? Why should I go over and start Vue? Actually, I’m wondering it right now if I actually have started Vue and check my GitHub account.
[0:05:48.2] MN: There’s definitely separation of the Vue and Logic, very similar to React but one of the things that you don’t have to learn is JSX because Vue uses the HTML template pattern that everyone loves and learns when they first pick up programming. You are going and learning all these different terminologies on HTML. You don’t have to learn this new syntax called JSX to write your component.
You can use HTML tags to do that. And then you would, very similar to JSX, you would use the curly brace two times to call a JavaScript component or anything of that nature.
[0:06:27.2] DA: So, like you kind of in line some kind of method call in there? Do you actually write JavaScript in those curly braces or is it like more of a specific language? like I don’t know if you’re familiar with the Jinja template language or I mean, I guess. There’s also the template language in Ruby like ERB like I think you actually write Ruby in the template. It’s like kind of like Ruby or the Jinja one is like kind of like Python but it’s like a little special?
[0:07:01.4] MN: Yeah, I think Vue has like these special cases, not cases but like keywords rather. You can do like V-if to make an if statement whether you want to render that like div or not depending on a boolean variable that you pass in, for example. You could do a lot of that. But then you can also like, have JavaScript functions return in the double curly brace as well. There’s very different ways to render blocks of code and you can use the HTML template pattern that is provided by Vue to do that. There’s like, you could do four loops in an HTML template kind of like syntax.
There’s if statements, else that kind of stuff.
[0:07:45.9] DA: Okay. Kind of has its own template language that you can mix and match with like JavaScript stuff?
[0:07:53.2] MN: Yeah, you can do either or, right? If you’re comfortable with using the Vue template pattern, then you can and then if not, you can continue to do, have your double curly brace to render special things in JavaScript, if necessary, which is like also pretty dope.
The next thing everyone is familiar with, state management, using React and everyone has their personal favorite.
[0:08:14.3] DA: There’s so many different ways to do it, right? Like set state, I got my Hooks, like Redux, I got –
[0:08:23.4] MN: My back, that’s another one. I mean, I haven’t used my back in a long time but like that’s a thing and I haven’t used Hooks, I know you have some opinion on React Hooks. A lot of people like them, a lot of people don’t.
[0:08:34.9] DA: Yeah, I hated them until I liked them. Which I think is like kind of a trend with different things.
[0:08:41.3] MN: That’s called Stockholm syndrome, Dave. The thing, the argument with that is you have to learn, depending on the code base that you’re on and whoever is the lead of the team chose whatever state management framework to use. No.
Vue knocked it out of the park with Vuex and it’s baked into the framework and that’s what you use, that’s it. No argument, you just use Vuex. Just learn this thing and it’s great and let’s not introduce another third-party library to handle our state when Vuex can do it. I thought that was like pretty cool.
The documentation, very good to learn and pick up a new language, a new framework. Vue has very extensive documents and the community’s actually really nice to learn how to build new components which is like pretty dope. I’ve been having a really good time learning Vue on the project that I’m on. And just reading like the standard docs to get anything I need to understand what’s going on.
[0:09:43.2] DA: Oh yeah, I love that when like you are learning a new framework or language or library or whatever and you’re wondering to yourself, “Okay what books do I have to buy in order to understand this? What blog posts do I have to cobble together or Stack Overflow posts?” And they’re like, “No, just read the documentation and it is accessible and helpful.” Then, it is always a relief.
[0:10:08.2] MN: I mean that is definitely something that newer languages and frameworks are like doing. I can’t say the same for Java, right? There is no Java docs that I can go and read. I have to go read a book to learn Java, I guess. But stuff like Vue has been really, really helpful. I think we had an episode to talk about Go. And Go is also another language that had some really, really extensive documentation. And that’s been really great for me to learn the framework just reading the docs.
[0:10:39.7] DA: Yeah, you know I am really into? Like I saw that all the releases are named after animes.
[0:10:45.4] MN: Yes, I thought that was pretty dope.
[0:10:47.3] DA: Yeah like I’m – it is like a big flashback you know? You got Evangelion, Macross. Like Dragon Ball Z and whatever.
[0:10:58.9] MN: Yeah, let’s go down the list right now. It’s Animatrix, Blade Runner, Cowboy Beop, classic, Dragon Ball, Evangelion, Ghost in the Shell, Hunter X Hunter and this should be JoJo Bizarre Adventure, Kill la Kill, Level E and Macross.
Wow, and then we got N coming up. I imagine that is a 3.0. I am hoping it will be Naruto because that is the only ‘n’ anime that I could think of right now at the moment.
[0:11:27.6] DA: I mean I don’t know any others either. But maybe they’ll try to pull some indie stuff. Like, “Nah, too cool.”
[0:11:34.1] MN: Too cool. Yeah Naruto is too cool. And they pulled Dragon Ball but not Dragon Ball Z. I can see they could go for some little indie so we’ll see.
[0:11:41.5] DA: Yeah, I mean I saw that too like V3 is coming out soon. So, I guess we will find out what the true form, the final form.
[0:11:50.2] MN: What is N? We’ll find out what is N.
[0:11:55.9] DA: Yeah, like I don’t know too much about Vue myself. But I was looking through some of the feature performance and it sounds like they are coming up with something composition API, which is like sounds kind of Hooks-like. So, you know even if you’re skeptical about Hooks, Mike, if you haven’t come around you know, they are coming for you. Wherever you are, they’re going to find you.
[0:12:19.3] MN: One way or another. And they’re going to hook me, yes. By the throat they will get me sooner or later.
I found using Vue, testing has been relatively easy so far. I don’t think I have gotten – I haven’t dived deep enough to find any annoyances when it comes to testing Vue components. We are even using Jest. Jest is just a solid testing framework I think. It has come a long way and I think I really like it now.
[0:12:47.9] DA: So, when you test a component in Vue, do you tend to test it in isolation like a shallow render enzyme, where it is more like a unit test?
[0:13:01.5] MN: That’s the idea. I think we have been trying to do a lot of shallow renders to render the HTML elements, expecting certain things to exist when you click on a button that whatever change you expect should be there and Vue can definitely facilitate all of that. And there is a ton of like Vue test utilities that you can use. Like the virtual DOM that will allow you to render the component when you mount it and that kind of stuff.
It is a little – Even the testing utilities and tools also exists in Vue, which is amazing. It’s not like there’s comparable things like Enzyme but Enzyme is a third-party library that you use with testing framework for React. But like that’s already baked into the Vue testing tool, which is really cool.
[0:13:47.5] DA: I see, so there is less cobbling together. It’s like there is more of like an accepted path forward. That is like one of the challenges with React. Because like it’s not – it is a framework. But it is not like Rails or something like that. It’s not so opinionated about every aspect of things. It just gives you the view and then you’re just on your own.
[0:14:12.3] MN: Yeah. But testing has been great and I am enjoying the Vue so far. Yeah, I think if – I don’t know if I sold Vue to you, Dave. I may not have done a good job because I am still jumping into it. But it is definitely refreshing to try something else.
[0:14:28.5] DA: Yeah, I mean like I am pretty sure that I am willing to give it a go to replace my jQuery application.
[0:14:36.8] MN: Yeah, I think what me personally, what’s not cool is that I have used React so much that I really love React that I am sad that it is not React that I am working with. It is kind of a weird thing.
[0:14:48.1] DA: Do you have any hot takes about, Vue? Are things you think are a little overrated?
[0:14:55.3] MN: One thing that drives me nuts is the idea that everything belongs in the same file. And when I say everything, I mean like you have your HTML templating at the top and then you have a script tag where you write all the JavaScript and the Vue-like methods inside of it and then you have the CSS at the bottom, where you write the CSS for the template at the top. If you’re using React, normally, you would see your component would be in a folder and then you will have the JavaScript and JSX file and then a CSS file that’s separate. But I find it really difficult to have it all in one file including the CSS. It drives me nuts just like – and then when I first saw them like, “Um, can we refactor this? Can we move this out into an SCSS file?” But like no. That is how Vue works, this is where you would leave it and I’m like, “No.”
[0:15:44.7] DA: Just accept it.
[0:15:46.2] MN: Yeah and I have a hard time accepting it right now. It is really, really hard. I haven’t found any IDE support that has been very, very helpful. So that is something that I might be looking into in the foreseeable future because I just haven’t really pulled the tools for us to do that.
[0:16:04.2] DA: Okay, well maybe other people are Vue experts they can holler at you and let you know what IDE stuff is the hotness with Vue. But you are talking about like how everything is all in one file and it violates your sensibility to some level of having CSS and JavaScript?
[0:16:26.0] MN: Yeah, it’s just like I don’t know, it needs to be separate. I understand when in React you have your life cycle Hooks at the top and you have any of methods that you want and then at the bottom you have the component, which is great. It’s just that is flipped in Vue where the HTML template is at top and then you have your JavaScript stuff in the middle. And that’s the thing, there is a middle because at the bottom is the CSS and it’s like, “Ah what are you doing?” So that your files are longer.
[0:16:55.6] DA: But I remember feeling the same way about React with JSX. Like I remember seeing a presentation where someone is like, “Oh my God, you have to try this, look at this it is JavaScript with like brackets everywhere.” And it’s like, “What is happening?”
[0:17:11.8] MN: Yeah, I mean it just makes the file longer. I think that is what my issue is, is that it makes it X times more longer because you also have another thing that you are fitting into the file. That is my beef right now. That is the only beef I got right now and I think I might have more hot takes develop the more I use Vue. But it’s just – I personally enjoy JSX over HTML and there is a lot of things that I am learning that I don’t like but I guess I am learning then.
Like as you mentioned Dave with the React Hooks, I will start learning and start loving them. Let me start with start liking them because loving them is a bit much. But I will start liking them.
[0:17:53.4] DA: I mean I hope I can check out this project and give it a shot. I’d love to take a look at Vue.
[0:18:01.8] MN: Yeah, I mean like we mentioned before the people who use Vue, love Vue. I think I am on my way there though. That’s all.
[0:18:10.4] DA: Okay, you are not quite here yet where you put your star up on that wall but it is getting there.
[0:18:15.0] MN: Yeah, I am almost there, though. Don’t worry about it.
[0:18:17.3] DA: Cool.
[END OF INTERVIEW]
[0:18:17.8] MN: Follow us now on Twitter @radiofreerabbit so we can keep the conversation going. Like what you hear? Give us a five-star review and help developers like you find their way into The Rabbit Hole and never miss an episode, subscribe now however you listen to your favorite podcast. On behalf of our producer extraordinaire, William Jeffries and my amazing co-host, Dave Anderson and me, your host, Michael Nunez, thanks for listening to The Rabbit Hole.
[END]
Links and Resources:
Angular — https://angular.io/
