Vue has a reputation of being the most beginner-friendly framework, but that didn't just happen by accident. The Vue CLI is an excellent example. New developers often struggle with using the terminal and remembering all the commands. The Vue CLI provides a visual interface for the developer to generate a project. By making it easier for newcomers to make Vue projects, they've reduced the barriers to entry. Beginner-friendly doesn't mean basic. Many large-scale projects use Vue.
The Vue Vixens are using free and accessible education as the primary means of getting more women into tech. Natalia Tepluhina goes on to share her two main ideas when it comes to designing a good workshop. Stay accessible to people of all skill levels; don't assume what people know. Stick to one stack and one concept. People have a finite amount of mental resources; trying to do too much can end up just overwhelming people.
Joel: Hi Natalia.
Joel: So, I'm really interested to talk to you. One, about your involvement in the Vue community, as well as RxJS, two technologies that I think are really, really great. But I kind of want to start, maybe get to know you a little better, and find out how you got into this career as a web developer in the first place.
Natalia: It's a really interesting question because I'm not a well-established web developer, considering my experience in years. I had only three and a half years experience inin web development, and previously I worked as a database administrator. I decided to switch my career, I think, after I had a maternity leave, because I was always interested in web development. I was playing with HTML in Notepad when I was in high school, and I decided to give it a try. And it went surprisingly good, because from my experience, frontend development is one of the most exciting, because you can almost immediately see the result of your work without even compiling step, usually.
Joel: Yeah, nice. It's visual, right?
Natalia: Why, exactly. That's why I really liked it and switched to it.
Joel: Is there anything that you're nostalgic for, from your time as a DBA? Or anything that maybe carried over that you learned at that time of your career, that you're still using and is kind of fundamental to your work today?
Joel: Yeah, I agree with that. So what's your current stack? What are the tools that you prefer to use today?
Natalia: My favorite framework is, I think it's very obvious, it's Vue.js, because I'm a part of the Vue.js core team. And it goes a long way, because I really like this framework. And I also like to use tools as RxJS and GraphQL, I'm a big fan of GraphQL as well.
Joel: It's awesome, isn't it?
Joel: GraphQL blows my mind, out of anything. I mean, I love technology in general, but GraphQL has absolutely blown my mind.
Natalia: Yeah, absolutely. I really like it, and I think it's one of the future things, even though it's considered sometimes today as a very hyped thing.
Natalia: You know, like you're jumping on the hype train if you're trying to speak about GraphQL, but in fact it's just great.
Joel: I mean, the hype is because it's awesome. To me that's why there's so much hype, it's not like there's big marketing arm behind it. I know it's a Facebook project, but still it feels like it's more of, this is just cool, and that's why people love it.
Natalia: It's more like a community project than Facebook, to be honest.
Joel: Yeah, I mean, you have Apollo, too. You know, people are building really great tools behind it, and building businesses around it too, which is also awesome. It kind of proves its vitality, and gives it a future too, in my opinion.
Joel: I'm really interested in what drew you to Vue in the first place? But then also how you go from just being interested in this tool, to becoming part of the Vue core team? Which I think is an awesome journey, and I'm curious in how did you go from being an enthusiast and enjoying a framework, to the point where you are actually a core contributor?
Natalia: For me, my Vue journey started in 2016. Previously I was mostly Angular. Not even Angular, but AngularJS developer. Because there was no such thing as Angular as we know it, until September of 2016, when it was released. And I was actually building the switch to Angular 2, but the thing was Angular 2 was released in September of 2016, just two weeks later Vue 2 was released as well. And I decided to give it a try, just so to compare it to Angular, because switching to Angular was kind of scary. You know what I mean, it wasn't AngularJS anymore.
Joel: Totally different.
Natalia: I know. I have no idea why they named it Angular, it's still very confusing for newcomers. When you are trying to search something related to Angular, you always find something related to AngularJS.
Joel: Yeah, because we would call it Angular before the switch, and then we had to call it AngularJS if we're referring to it now.
Natalia: Because nobody was saying AngularJS, right? It was just angular. And I decided to give it a try, and it was very nice. And in Vue 2 was very familiar to anyone who used AngularJS previously, because of directives, because of templates. But it was like more advanced, and probably it was just the thing, what I wanted to be Angular.
Joel: Yeah, to me it feels like Angular, kind of the good parts, to use that phrase.
Natalia: What, the right form of Angular?
Joel: Because we got virtual DOM and all that other fun stuff with it.
Natalia: Absolutely. And also, it didn't require a TypeScript. I mean, I like TypeScript, but I liked it already after I used Angular. It was a way to types for me. And at the moment of 2016 it was like, oh, no additional step to learn, this is nice. Also, it had a great documentation, it still has a great documentation. But even in 2016 it was a very nicely documented framework.
Joel: It's friendly, I think, and not in a negative way, it isn't cute. It's just friendly.
Joel: I totally agree with that. Although I think I read something, you use TypeScript with Vue, isn't that true these days?
Natalia: Great and funny question, because I think it's kind of Stockholm Syndrome. When you're into work with Angular, you get used to TypeScript, and then you just try to use TypeScript anywhere, because you're like, how can you live without types after this?
Joel: Yeah, I think because Angular 2 and just Angular now, because from 2 to 7, or whatever we're on right now, it hasn't changed a whole lot, fundamentally. And what they did was they kind of forced you into TypeScript, and I think really pushed TypeScript forward as the language, and contributed to the overall popularity. Because now it's everywhere, I feel like TypeScript is all over the place. Anybody writing a library is definitely going to use TypeScript.
Natalia: Yeah, absolutely. I think libraries are the mostly typed. And even with Vue, people consider TypeScript not being that integrated into Vue ecosystem, right now, but you know, Vue 3 is written on TypeScript internally.
Joel: Oh wow, that's big.
Joel: So, one of the interesting things, and I haven't seen this on any other framework that I know of, correct me if I'm wrong, the Vue CLI feels pretty unique, and really cool. I was wondering what do you think about that? And why does Vue have this tool, and these other tools that we've used aren't presenting this kind of... Because it's both a visual command... There's a command line interface and then there's a visual UI, where you can get a really nice, friendly UI.
Natalia: Yeah, UI is a great part, exactly. And the CLI in fact, if you think about uniqueness, it's not that unique because we also have Angular CLI.
Natalia: And from some points of view, Angular's CLI is may be even more powerful, because it can generate components, it's one of the ways. But the thing is, why VUE's CLI is unique? Flirts of all, it's because of the plugin system, so it's very modular. You don't need to install the whole tool, the whole boilerplate, you can always select what you need, and install it like different parts, different modules. And I really liked that Angular's CLI followed this path after we implemented it with Vue's CLI. So they started to have the schematics, and you can use them with Angular CLI right now, so it's modular as well.
Natalia: But we also have a UI part, and the UI part is very unique. And I'm really proud of Guillaume Chau, who is the main developer of Vue UI, because it's really great for people who are new to the ecosystem. I mean, if we now, old school developers, who used to use terminals, consoles, and other stuff, for them the CLI tool, a command line interface, is really natural. They're happy to use terminals. But if we take someone who is really new, who has one, two years of experience in web development, maybe even less, for them visual instruments are natural, not terminals. And in fact, terminals are kind of outdated. That's why I really like they can start a project with Vue UI, and it really helps.
Natalia: I think right now Guillaume is also developing even more wide instrument. It will include also installing the node and NPM to the system, so we can install all the boilerplate from scratch.
Joel: That's beginner friendly in so many ways, because I've watched people, new web developers who are trying to learn this. And it's like, open up the terminal, and now you're there, you're staring at this terminal, you have all these things to install, all these new commands to learn.
Natalia: Yeah, and no idea of what to do.
Joel: And it's not to say you won't eventually get there. There's even an argument that a UI like that it will help you when you switch, if you want to switch to the command line, now you have this relationship between this visual UI and the terminal commands that you'll need to run down the road, perhaps.
Natalia: Yeah, exactly.
Joel: I've heard it said a lot that Vue is probably the most friendly framework tool that we have right now for beginners. Is that something that you've noticed, and why do you think that might be?
Natalia: Yes, Vue is indeed the most friendly frame. It has a very nice learning curve, and it's easy to start with, because you can use CLI, but you can also start without any kind of CLI. You can just add a script from CDN and start with it. And the reason for this are, first, we have great documentation, thanks to Chris Fritz and Sarah Drasner mostly. It's very nicely structured, and it feels like a tutorial. You can just follow it, you can read it as a book, and it has great examples, as well.
Joel: Yeah, that's another thing, right? When we say it's beginner friendly we're absolutely not saying you can't do advanced projects, because there's lots of production Vue going on for major scale projects.
Natalia: Yeah, exactly.
Joel: So being friendly doesn't mean this is a basic tool. It just means that getting into it is easier and a nice ramp up, instead of a smack you in the face situation.
Natalia: Yes, absolutely. I'm working in a major scale project using Vue.js, it's GitLab.
Joel: Oh, yeah, so there you go. And the community is interesting to me, because I think that's so important. I don't think you really discount it, but building a community is really actually quite difficult. Building a real, genuine community. With your experience, both with Vue Vixens, which we'll talk about in a minute, and with web communities in general, what is the secret? How do we work towards building better communities across the board?
Natalia: First of all, what I've noticed for the Vue community is that it's very inclusive and diverse, thanks to both Vue Vixens and both efforts from the core team. As a great example of inclusivity, I can say about our Vue bot. Previously we had a bot just closing issues, and working on VRs on the repositories. And recently we've changed bot messages, and we changed settings for them, so right now we have a nice, really customized message for everyone who contributed to Vue repository, even if it was just a small fix. I don't know, like fixing a typo. Even if your reviewer forgot to say thanks to you, the bot will care about it, and it says thanks.
Natalia: Previously, there was a proposal to add a Tweet link to Twitter, so you can tweet about your contribution, because it's nice. We really try to support first-time contributors to our repositories, and to treat them nicely, as well. And also, it's my personal opinion, I think we don't have any major company making the framework. For Angular, yeah, they have Google to back Angular, and they have Facebook to back React. But it means we're working on our enthusiasm, we're not paid for our job. Of course, we have Patreon and open collectives, but mostly we are just working because we are enthusiasts of this framework, and it helps to form really nice and enthusiastic community.
Joel: I think it's amazing, because you mentioned the two major ad networks that fund these other great tools. But Vue, from the beginning when Evan started this, it's been essentially an independent operation, community built, driven by a very benevolent dictator, which carries a negative connotation but I don't mean it that way. The person in charge, the person who runs and owns this project, he's amazing, right? And he's been just an absolutely wonderful steward of a really great tool and community.
Natalia: Yeah, that's true.
Joel: So, speaking of communities, you are a part of Vue Vixens. You are the CTO of Vue Vixens, and work on the website and all the related technologies. It's a community initiative for women and folks that identify as women. How do you explain Vue Vixens to folks when they're curious about it?
Joel: There's a lot of dudes.
Natalia: We also had examples, it wasn't just an original community idea, because we have communities like Rails Girls, like Django Girls, for frontend development it's ng-Girls, like teaching Angular to women. And it was Jen Looper, our founder, who decided to start an initiative named Vue Vixens. And I really like that we kind of differ with the name. We didn't include the part Girls, because quoting Jen, we're not girls anymore, we are women. Also, it's a nice alliteration, like Vue Vixens, and for those who don't know what a vixen is, it's a female fox. So it led to a really nice logo, so we have a Vue logo with a fox.
Natalia: So what do we do? We are running workshops. It's free workshops for anyone who identifies as a woman. They are basic workshops teaching people to Vue.js. For our full day workshop we include some basics, as well as VueRouter, Vuex, major parts of the ecosystem. For shorter workshops it's usually just building a web application with some API calls.
Joel: Part of your job at Vue Vixens, part of your position, is developing the workshops, is that correct?
Natalia: Yes, I'm actually an author for all the web part of our workshops. Because we also have workshops for native mobile development, with NativeScript Vue, authored by Jen Looper. And I'm an author for all of our workshops.
Joel: How do you approach creating a really good workshop? What's your process when you sit down to work on something like this? Because it's non-trivial, it's not an easy process to teach. So what goes into it, and what do you think about when you're building something like this?
Natalia: And the second idea was I didn't want to build another tutorial application. I wanted people to create something really entertaining and nice, something they can show to their families and friends, and share it with being proud of what they built. So it should be something really nice, simple. It should have images, obviously, because something that has images is always more entertaining than just plain text. And it's why we started with a Dog API.
Joel: I love it.
Natalia: Yeah, I know. Of course, people are divided with dogs and cats, so probably we need to introduce Cat API as well, for those who don't like dogs. But even so, when you have lots of cards with dogs, and you can play with them, it creates a nice possibility to make a simple CRUD application, while also being really entertaining.
Natalia: I've edited these workshops later, thanks to Chris Fritz, and his great advices about how good docs should look like. Because there are some core principles for building documentation in a workshop. You need to try to explain one concept at a time, it was really hard for me, because I was trying to pack the workshop with a lot of things. And I was introducing a few things at a single step, and it could be really confusing to new people. So one step, one concept. Don't try to feed them with all knowledge immediately.
Joel: With Egghead, that's like one of our core principles too, the idea of single concept. A section is a single concept. And I agree with that, people are so overwhelmed anyway when they're trying to learn something new. Part of the job as educators is how do we ease them into it, and make it comfortable, so they'll finish. It's actually hard to get people to actually finish, and I think that's important too.
Natalia: Yes, exactly. Because as a course author, asa workshop author, a documentation author, you operate with a thing called cognitive load, exactly. People have limited resources to actually digest something you try to give them. And you need to always count on this level of cognitive load for anyone using your materials.
Joel: There's a great book that Sarah Drasner recommended to me, called Cognitive Load Theory, that I would recommend to anyone that wants to kind of dig into that. Honestly, at some point in our careers we all have to be teachers, so the more we know and understand how to relay information, and help educate our peers and community members, the better the overall community is going to be.
Natalia: Yes, absolutely, I agree with this.
Joel: One of the things I think is really super interesting with the Vue Vixens model is you do these workshops, and they are for folks that identify as women, but anybody can use this material. If you go to vuvevixens.org, all of the workshop is free to access, it's really, really accessible as you mentioned, it's wonderful, it's linear. And you can work through this in a day or a weekend by yourself, or with a group of friends, or at a local meetup. So this is really presented and delivered so everybody can use it. So while your groups are a place for women, anybody on the planet can go and use this material, and learn from it.
Natalia: Absolutely. We have limited resources to run workshops offline, because you know, it's about place, about venue, about catering. So you can't hold everyone, it's like limited resource, and we try to focus on women, when we're running them offline. But when these materials are online, there's no additional load on us, for anyone who can use these materials. So that's why they are open, so feel free to use them and learn Vue.
Joel: And I also really love the mini workshops and the nano activities, I think that's a really great idea. And honestly I'd ever seen that before in a workshop format. But I think that's just great, because a lot of times full day is daunting, but maybe we can sit down as a group, or over Zoom, or whatever, and do one of these mini workshops, and learn together. I think that's a fun and interesting tactic, as well.
Joel: So, I'm going to switch it up a little bit, because this is something I've long been interested in, and I'm by no means an expert, and I think this is another area that Angular 2 and beyond really are pushing the envelope on, alongside of TypeScript, and that's RxJS. I was curious what do you find compelling about RxJS, and why you think it's a great tool?
Natalia: Yeah, I actually I fell in love with RxJS while using Angular as well. I think it's the most obvious way to reach out RxJS, but even when I stopped using Angular, RxJS was still with me. It's like an eternal love. And I think there are two great things, even three great things about RxJS.
Natalia: First of it, it's an absolutely amazing tool for dealing with asynchronous behavior. I mean, yeah, we have promises, but promises are really limited. It's just a single thing, right? You have a promise, it's resolved or rejected, and that's it. And RxJS really solved that problem with asynchronous really nicely, and in a great way.
Natalia: Another thing I really like is data flow is a first class citizen. You need to follow the stream, and when you start thinking in streams it's really easy to identify what's going on here, and really easy to follow these streams with RxJS operators. Which means, you have a third reason, you have a really nice and clean structure, a clear logic in the application. It's very easy to follow what's going on here, what steps are transforming the data, what's happening.
Joel: I think one of the criticisms is that it can be incredibly daunting to newcomers, because of the paradigm. Everything is a stream, right? When you start using RxJS it feels like you kind of have to go all in. And I'm wondering how do you recommend folks approach RxJS and maybe start learning it? What's the path?
Natalia: Yeah, while I partly agree, sometimes it's really hard to switch your mind from imperative to reactive programming, and to streams. I think the best way is to start with really simple and practical examples. I really like to give an example with live search. When you just type in something in the input field, and then this enables an API call.
Natalia: When you try to play with this simple example, you can have the most useful RxJS operators. You can play with map, you can play with debounceTime, you can play with distinctUntilChanged, and it's really understandable what's going on. So just try to take an example, a really simple one, and convert it to RxJS, using RxJS operators. I think we have a great course from John Lindquist on RxJS. I followed it once and I think it's one of the best materials on RxJS available, I really liked it.
Joel: We're big fans, in general, at Egghead. Jafar Husain has an End of the Loop series that I absolutely love. And then there is Andre Staltze's work, and then John. The three of those really combine, and it kind of makes it clear. It's daunting at first, just because of the paradigm shift, but once it starts to sink in, you start to see problems differently. It gives you another way to solve these hard problems of async in the browser. Maybe it's not your (inaudible), but it's definitely worth time to learn and understand. I think it's a great tool.
Natalia: Yes, absolutely. And I can also add, RxJS community is almost as nice as the Vue community from what I've seen. I've recently had my talk published about RxJS, and I had john Lindquist reaching out to me almost immediately with feedback, and some fixes to the talk. I have to admit I didn't know... I think nobody knows all RxJS operators by heart.
Natalia: Yeah, it's like a lot of them. But he mentioned pairwise, and you should have used pairwise instead of scan. And I was like, oh my God, I don't know about pairwise. It was really nice, because you know how John is kind of celebrity, right? But he's reaching out to you to give you feedback and to teach you something new about RxJS in his spare time. I think it's really great that people are so enthusiastic about RxJS.
Joel: Yeah, it really is. The operators, as something you mentioned, there's always a different operator. But then there's also this core set of operators, it's almost like, to me, I've used the analogy of being like Lodash for async.
Natalia: Exactly like Lodash.
Joel: It falls apart after a while, but just in terms of a beginner mental model to jump into it, like you can reach for it as a tool for that. It's pretty awesome. So you use TypeScript with Vue, and do you also add RxJS to your Vue applications these days?
Natalia: Yes, I'm trying to use it. We have an integration, it's named VueRx, and it's written by Evan You. The problem is, using RxJS with Vue is kind of limited, due to the nature of Vue reactivity. It couldn't be integrated as nicely as with Angular, but you can still use Rx in the scope of the component, and if you want to reach out to your state and change your state, you can always use side effects. I know it's not the best way to use RxJS, but still you can use tap operator to change your state. And I'm really using it within components with complicated UI and UX behavior, like a drag and drop, like searches, like all this stuff, and I really like it. And also, it's great in the scope of any framework to build a game.
Joel: Yeah. And so have you built RxJS Vue games?
Natalia: Not Vue, I've built an RxJS game, it's RxJS Breakout. And I was building it right on stage, it was in the scope of my talk.
Natalia: It was a great plunge but it's nice.
Joel: Yeah, that's pretty bold, building that live. So, when there's a new idea, or something new that you need to learn, whether it's a new framework, or a tool, or a new paradigm in web development, how do you approach your own personal learning?
Natalia: First of all, I'm trying to find out why this idea is useful for me and how can I use it in my applications. Because I think learning a new paradigm when it's still really abstract to you and it can't be used immediately, is really hard. Even if you start to learn it, you will probably forget everything if you don't use it on practice. It's a first step.
Natalia: Second is, so previously I tried to learn it all by myself, but I found out that actually taking a course is a great investment. It's like you're outsourcing your learning, sometimes you pay with your money, but in fact you save your time. And you have it well structured in your mind. So I'm trying to find a good course on this topic, and take it, and then obviously I build something with it. Because without practice it doesn't work.
Joel: Yeah, you have to cement it. And you don't do that by typing along with the course. I'm a big fan of courses in general, and I think I'm with you. You type it out, and you type along, don't cut and paste, and work to the course. But until you build something... And this is why I love your pet shop idea. And whether a bland To-Do list is your thing, or you just want to build a pet store, build something fun, use the Star Wars API, do something kind of zany and silly, it doesn't have to be useful, it just has to make you think about the techniques and the tools that you've been learning.
Natalia: Yes, absolutely.
Joel: This is my last question, and I would like to know what you are most excited about? What's coming up and what do you see that's really, really interesting, beyond what we talked about, your favorite stack right now. What's next for you to learn?
Natalia: I think I'm biased about it, because right now I'm excited about the next release of Vue framework.
Natalia: Yeah, because I'm a part of the core team, and I can say it will be very nice, and it will be a lot faster. It's so great to see how it's developed, how it works inside. It's not public right now, but I believe it will be a great surprise. And also, aside from Vue, I was really happy with Svelte 3 release, because it's kind of different from all the frameworks we have. It introduced new things, and it was really interesting to look at it. And I can say we will reuse some ideas from Svelte, as well.
Joel: I love it anyway, we talk about the churn or whatever, which I feel maybe has slowed down or isn't even actually a thing, but I absolutely love the idea that developers aren't happy with the status quo, and want to try something new and put it out into the world. That's amazing to me. And those ideas spread, there's not a competition between all these frameworks. If you pay close attention, I feel like the developers across the board are just collaborating, in a meta sort of way. There's broad collaboration to give us better tools overall.
Natalia: Yes, absolutely. I think all the framework wars are just in the mind of some people. If you have a look at the market, we don't have 100% developers using at least one framework. I mean, there is a huge amount of developers using JQuery, or even not using JQuery. And it's a lot of space for new frameworks and for old frameworks to develop.
Joel: Yeah, there's so much space for new ideas, and people to explore them.
Joel: And I feel like anything to the contrary, any non-welcoming, is not the approach. We should embrace that, and allow people to explore, because that's how we advance the state of the art.
Natalia: Yeah, exactly.
Joel: Natalia, it was really great talking to you today, I really appreciate it. Thank you very much. Where can people find you on the internet?
Natalia: Thank you for inviting me. I'm a very obvious person, so I have my name and surname everywhere on the Internet. It's like, on Twitter, it's just N_Tepluhina, and I had my NataliaTepluhina on GitHub as well. It's the two most popular places I'm actually paying attention to.
Joel: That's the way to do it. It makes SEO really easy, if you have a unique name. I'm lucky to, I dominate my SEO from my name, and yours was easy to Google as well.
Joel: Well, thank you very much, and have a great evening.
Natalia: Thank you, bye.