Key Points From This Episode:
- Learn more about the founding story of Vue and what needs it sought to fill.
- Details on the Facebook React controversy and what went down.
- Find out some of the compelling reasons to use Vue.
- How Vuex, Vue’s state management framework, has knocked it out of the park.
- Testing in Vue: What Mike’s experience of it has been like so far.
- Find out Mike’s Vue hot takes and what he thinks could be improved.
Transcript for Episode 157. Vue: New Hotness or New Hype?
[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: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: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: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.
There’s if statements, else that kind of stuff.
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: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: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.
Links and Resources:
Angular — https://angular.io/