“I recently found myself in this situation with an airline” Marina Mosti tells me. “I just couldn't get myself registered for their miles program... these problems, sometimes as developers we don’t really stop to think about the impact that they have.”
Marina Mosti is a Vue developer. She’s an important figure in the community having written an extensive and widely used range of tutorials on Vue including Hands On Vue.js for Beginners series on Dev.to. Most recently, Marina’s been spending a lot of time on forms: her first book, Building Forms with Vue.js, was published at the end of October. Forms might feel like a bit of a basic topic when it comes to front end development, but Marina is eager to encourage developers to spend much more time thinking about how they build them.
Forms are business-critical
She points out that building forms is one of the most business-critical aspects of front-end development. “At a company-level point of view, you’re losing money. You’re losing customers,” she says.
It makes sense: Marina’s story of a lousy form is one that pretty much anyone can recognise. It’s so common that we often come to just accept it and move on with our lives. From a developer perspective - and from a commercial one as well - that simply shouldn’t be acceptable. “This is our way of communicating with the user,” Marina explains. “This is where the user is going to either have a really good customer experience or they’re going to go away - and they’re going to just go to the competition.”
Inside Building Forms with Vue.js
It’s because of this tendency to underestimate the value of forms in UX that Marina’s book has such relevance for front end developers today. It isn’t long: at 108 pages its lean and lightweight like a nicely built application. But that doesn’t mean it doesn’t pack a practical and focused punch.
“The book... takes you on a journey of helping you to understand how to build forms with Vue” Marina says. So, to a certain extent, it does exactly what it says it will do. But that doesn’t mean it’s just a code manual like any other tutorial you might find online.
Although, as Marina explains, “you’re going to start very simple, getting your project set up, understanding how to create reusable components,” the book then goes on to explore more advanced topics such as form input masking (“a great UX capability for forms that is often overlooked” Marina says), implementing Vuex to manage global state, before going on to explain how to build schema-driven forms in the book’s final chapter.
Schema driven forms are particularly important as they can help developers manage significant complexity without getting stuck in endless lines of code. “As a developer you don’t even need to go into your front-end code to make changes,” Marina explains.
“I’ve seen plenty of real-life examples… I’ve seen people do API-driven forms where the API is throwing a schema at you and the front end just knows how to parse it and deliver the form to the user” Marina says, while there are also “other solutions... where they’re using Apollo (a GraphQL toolkit for managing data) and they’re actually parsing the Apollo structure in a way that vue knows and understands what kind of form they’re going to deliver.”
What makes Vue a great JavaScript framework?
The other important aspect of Marina’s book is that building forms shows off some of the things that makes Vue.js a great JavaScript framework. Although it’s still sitting in second place in terms of downloads, Marina - and, indeed, her book - makes a really clear case for using Vue.
The most important advantage is Vue’s flexibility. “Vue can work very nicely as a standalone library where you’re just using it for this little piece or component in your application, or it can grow exponentially to this huge framework where you have all these amazing tools like Vue CLI, Vuex, all the libraries that plug into it.”
More specific to form building, it’s Vue’s component structure that provides a really neat foundation for developing reliable, stylish forms that support an exemplary UX. “This is where Vue starts to shine. You can create components for your inputs that are very reusable,” Marina explains. This means, “adding fields or removing fields is going to be very lightweight for the developer.
Comparing Vue in this regard to older frameworks like Backbone or jQuery, where it “could be a… sizeable task to just remove a field because you would have to dig into so many files and… figure out how everything was connected.”
However, flexibility remains crucial. While being able to build forms in a way that is lightweight and simply more manageable is one of the advantages of Vue, it also allows you to scale things as necessary with what Marina describes as a “simple to big approach.”
Get your hands dirty and learn from experience
If you want to get started with Vue, Marina’s book is a great starting point. But Marina highlights that’s what particularly important is that you need to just get started. Knowledge accumulation is great, but you need to actually learn from experience: “[You’ve] got to start trying to build some things. Even if it’s something super simple, just start getting your hands dirty because that is the way that all of this knowledge that you’ve accumulated is going to start making sense to you.”
Marina was speaking to Richard Gall, an editor at Packt.
Follow Marina on Twitter: @MarinaMosti
Buy Building Forms with Vue.js from Packt today.
Top comments (0)