Build an app from scratch with Vue.js
It’s hard to keep up with all the new JavaScript libraries and frameworks out there. React, Angular, Ember, Aurelia, Glimmer…where do you start?
Ideally, JavaScript developers would want to learn them all. But each option has its own prerequisites for jumping in and using them immediately. And some frameworks are appropriate for specified types of work. Our time is valuable!
What’s an option that requires no sharp learning curve, and can be picked up within a few hours?
Here’s what we’ll cover today:
Jump right into Vue fundamentals
Learn Vue with hands-on lessons and practice projects.
Vue is the brainchild of Evan You, a former engineer at Google Creative Labs. Evan’s job entailed a lot of UI prototypes, and he soon realized a need for a framework with 2-way data binding (seen in Angular) — but with a more approachable API and interface.
In February 2016, Evan began working on Vue full-time after his Patreon campaign caught a lot of traction in the developer community. The Vue team has since grown to 25, with a growing community of contributors.
Vue is not supported or backed financially by any major tech company like Google or Facebook (unlike React and Angular). If Github stars are any measure, Vue.js is at the top of the heap in popularity:
Vue is quickly becoming a preferred option for entry-level devs, small teams, and those dealing with tight budgets or deadlines. Currently very popular in China, Vue is moving its way to the west. Companies that use Vue in whole or in part include Alibaba, Behance, Grammarly, and Adobe.
What’s behind Vue’s continued popularity?
Benefits of Vue: Beginner-friendly#
React is currently the most widely used JavaScript framework in the world, but its learning curve is severely steep. While React enjoys a huge developer community, support and libraries, the cost of admission (your time) is high.
But for those of us getting started in the world of web development, or constrained by a small team or low budget, who has that time?
Vue is tailor-made for beginners. The guide, property names, and setup process will feel very familiar to those who have seen HTML, CSS, and JavaScript. Templates are written in HTML, which means you don’t need to know any other programming languages to read them.
Vue.js is progressive. You don’t need to jump into the deep end with Vue, you can adopt it incrementally. The core library is focused on the view layer only, making it easy to integrate with existing libraries and projects. Plus, the Vue API is simple enough to allow for very quick development.
Vue is a nice compromise between React and Angular — it features a virtual DOM (a popular feature of React), but offers custom directives and two-way data binding, like Angular.
While libraries like React require a knowledge of JSX, ES2016 or more specific forms of JavaScript, Vue just uses pure JavaScript. You can write an app and run it straight from your browser in very little time. Vue allows for JSX (practically a requirement for learning React), so React veterans can easily hop over to Vue.
Vue uses a declarative syntax that is easy to comprehend and remember for creating and handling events. As opposed to React’s component-based view engine, Vue is implemented as additional markup to HTML — basically a template model bound to a data model.
Benefits of Vue: Lightweight and fast#
All web developers are working with limited network bandwidth. In today’s world of mobile browsing, all web pages need to be small and fast.
The latest version of Vue (2.0) is proven to take less memory and run faster than the latest versions of React and Angular.
With a faster rendering pipeline, Vue allows you to build more complex web apps. Instead of spending valuable time optimizing code, you can spend more time working on the features and functionalities your users want.
Benefits of Vue: Simple documentation#
A lot of documentation sucks — partly because developers hate doing it, and partly because many developers are too close to the product, and can’t write about it objectively.
Thankfully, Vue boasts documentation that is easy to understand, and features multiple use cases. The Vue team has continually done a great job writing about technical concepts in an accessible, easy-to-digest way.
What’s next?#
Overall, Vue.js is an excellent solution for beginners, to small development teams short on time or money. Now that you know why Vue is so popular, it’s time for you to jump into practice.
Our interactive course Hands-on Vue.js: Build a fully functional SPA, is the perfect primer to Vue. It’ll walk you through the fundamentals like data binding, directives, components and event handling, all with practical examples.
By the end, you’ll have the hands-on experience you need to build your own apps using Vue.
Free Resources
