Vue occupies an interesting position in the triumvirate of frontend JavaScript frameworks. Not hyped to the extent that React is, and not as established as Angular, it’s spent the last couple of years quietly minding its business and building an engaged and enthusiastic community of developers.
One of these developers is Marina Mosti: her book Building Forms with Vue.js is just the latest step in her career journey from a backend developer getting frustrated with Java to Vue.js evangelist and educator. She’s a great person to explain the attraction of Vue.js, and to provide an insight into how she first entered the community – luckily, I was able to chat with her.
Buy Building Forms with Vue.js on the Packt store.
Her background is interesting: “I actually started out as a PHP developer and found myself in a position where I forced myself into learning front end. It’s not until very recently that I started doing front end in terms of it being my main focus” she says. Rather than moving deeper down into the stack, she has gone the other way, gravitating towards the front end. That might not be completely conventional, but it’s also indicative of the evolution of both JavaScript and frontend development in general.
Read the first chapter of the book for free on the Packt platform.
Rethinking JavaScript
Things today, Marina suggests, are quite different. She’s quick to tell me, for example, that “the current state of JavaScript is just so much better than what it used to be,” and recalls a general antipathy towards JavaScript in the early years of her career that she “dragged… around for many years.”
“I went to this very small school where they taught us the basics of front end development” she explains. “And for good or for bad the teachers were always very adamant about saying ‘oh don’t bother learning vanilla JavaScript because we have jQuery and vanilla JavaScript is so bad that you’re not gonna use it.’”
However, the framework boom changed this. “I got to a point where all these cool frameworks were coming out and you just realise ‘hey I don’t know javascript; I know jquery so how do I make this jump?’”
This ‘jump’ wasn’t without challenges. “Just having to go back and learn the basics – that has been the most ‘challenging’ part of going onto front end – because the front end that I knew [at the time] was php side-generated HTML code with maybe a little bit of javascript, maybe some CSS.”
Read next: Vue maintainers proposed, listened, and revised the RFC for hooks in Vue API
Laravel and Vue.js
Marina explains that she first encountered Vue while using Laravel. “We… wanted to take advantage of this built-in connection that Vue had with Laravel. Obviously this didn’t involve any fancy set up, there was no vue CLI, nothing of this good pre-compiling or anything, it was just injecting vue into the html and creating the components there on the fly”
However, discovering Vue in this way proved to be revelatory: it actually underlined what makes it, in Marina’s view, a great front end framework. “You don’t really have to commit to the whole framework,” she says; “it just got the job done for what I needed at that moment.”
What problems can Vue.js solve?
Marina has a pretty clear perspective on the challenges in front end development. “The problems we’re currently facing in front end development… is that people don’t want the old browsing experience where you’re clicking around and having to wait for reloads” she says. “We want to make applications… that are very performant, they have a great user experience, you are not waiting for page refreshes – it flows. What we are looking for is having your applications flow in a way that makes sense, like if you were using a desktop application.”
Vue is particularly good for this, Marina explains, because of its “reusable component structure.” To a certain extent, this way of working is just another example of the wider trend across engineering towards breaking things apart. “You are trying to make these small units of code, that do this specific thing… a very common way to describe it is like this lego system where you’re just putting pieces on top of each other and it just starts making sense.” I’ve heard that analogy before in relation to containers – there’s clearly a recurring theme that’s evolving out of core principles of design.
If Vue is well-suited to building lightweight but highly performant front ends, another important element is that it makes development relatively easy.
Again, Marina contrasts working with Vue today with what JavaScript development looked like in the past. “You used to have… these massive massive amounts of code, and code separation of concerns was just very complicated to manage. You had to [do] a lot of overhead and work… trying to figure out how are we going to structure these files so that it makes sense.”
The Vue CLI
Tooling was also more complicated; something that the Vue CLI has helped to solve.“You had to deal with – at a very intricate level – how tools like Grunt worked, for example. And now you have like these pre-build tools like the Vue CLI which allow you to not have to really think about things,” she says. “You don’t have to think like ‘hey, how is this going to get compiled? How is webpack going to figure things out?’ At least not at an entry level because you have it all neatly packed in this box for you with the Vue CLI.”
Comparing Vue.js to React and Angular
Although it’s clear that Marina is incredibly passionate and enthusiastic about Vue, she’s also circumspect about ranking JavaScript frameworks against each other. “All 3 frameworks are fantastic. All 3 get the job done. This is like asking someone why is this your favorite flavor of ice cream?!”
Vue.js v. React
She notes that React and Vue have a lot in common. “They share a lot of similarities – both of them use a virtual DOM… they both have this reactive component structure.” However, the key difference, from Marina’s perspective, is JSX.
“If you’re talking about React, you’re talking about JSX, this approach where everything is javascript. You’re writing HTML inside the JavaScript, you’re writing CSS inside the JavaScript.”
It’s JSX that puts Marina off React, saying that the way it requires you to work “doesn’t really click. I know how to do it, but just in the way I like to code things I prefer just having the separation where HTML is HTML, and where CSS is CSS.”
Want to learn React.js? Search the latest React eBooks and videos.
Read next: Ionic React released; Ionic Framework pivots from Angular to a native React version
Vue.js v. Angular
Angular, meanwhile, is “great for enterprise projects where you need this huge huge framework” says Marina. “But that also comes at a cost of having to know all the framework. All the libraries, everything that Angular brings to the table, you have to know TypeScript – it’s just very opinionated at what it does and sometimes the shoe is going to be very big for the project.”
So, for Marina, Vue has a degree of flexibility. It’s not as opinionated as Angular, and it doesn’t require you to write using JSX. “It can grow up until the point you need it to… From the smallest component in your application to powering full enterprise solutions.”
And related to this, it means Vue is accessible – the learning curve isn’t that steep. “Vue is just very gentle in that you can start using it; you can start building things right away.”
“There’s a very good pay off in making yourself an expert in it… once you start getting into the core of Vue, and understanding all the little tools that are at your disposal… you can start building upon this knowledge… the framework can grow and adjust to what you’re needing.”
Search the latest Angular eBooks and videos.
The Vue.js community
There are undoubtedly many technical reasons to consider using Vue. However, another aspect that Marina emphasises throughout our conversation is how welcoming and supportive the Vue community is. “The Vue community is one of the biggest selling points of why you should pick Vue and why Vue is so amazing.”
The Vue community was, Marina says, integral in getting her to where she is now. “I was, at one point, not very into vue… and I just found a very welcoming community and a very inclusive community… People in the community care about other developers that are getting into Vue. We try our best to make this feel like a very safe, inclusive community to just get people in here and get them developing vue and help them out with the problems they’re having.”
Marina deserves credit for playing a part in fostering a welcoming and supportive culture. Not only has she created a wealth of learning materials (such as a great free introductory tutorial series), she also works closely with Vue Vixens, and provides mentoring and support for other women finding their way in the industry.
“This focus on education just basically became my goal… Hey, let’s do things to teach people, to get more people involved with vue,” she says. In an industry that’s sometimes defined by hyper-competitiveness, and marred by toxicity, it’s certainly a worthwhile and important goal. It’s something we can all work at.
Follow Marina Mosti on Twitter: @MarinaMosti
Follow Vue Vixens on Twitter: @VueVixens
