Build an app from scratch with Vue.js
Why use Vue and how to get started with it to build your first app for FREE
Originally published on Educative.io
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!
Skip the reading and get right to building a movie search app with Vue.js with this FREE course. It will be a nice addition to your portfolio.
What’s an option that requires no sharp learning curve, and can be picked up within a few hours?
Enter… Vue.js
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 at 128,158 stars.
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?
Vue is a great framework for beginners and junior developers
React is currently the most widely used JavaScript framework in the world, but its learning curve is 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.
Vue is 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.
The documentation is easy to follow
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.
Start building an app with Vue right now.
This FREE interactive course Learn Vue.js from Scratch: Building & Testing a Movie App, is the perfect primer to Vue. The course was created by Thomas Lombart, an experienced software developer skilled in the creation of user-focused apps.
In the beginning lessons, you’ll use the basics (data binding, directives, components) to build a small to-do list app. From there, apply your skills in HTML and JavaScript to Vue.js and learn to build an awesome movie searching app.
You’ll learn to use VueCli, a nifty Vue tool that helps you manage your Vue projects using a GUI. You’ll explore the process of unit testing while building your app — something a lot of developers don’t particularly enjoy, but this course makes it super simple and easy to understand. You can also check out this post on how to write your first Vue.js component unit test in Jest — one of the most popular frameworks for testing JavaScript frameworks.
By the end of the course, you’ll have a movie search app, built completely with Vue and connected to the OMDb API.
By the way, this movie search app is a perfect addition to your portfolio. Student and beginner programmers, portfolio pieces are a must if you want a great job! We recommend customizing the app, adding new features, and totally making it your own.
By the end of this course, you’ll understand how Vue.js is an excellent solution for beginners, to small development teams short on time or money.
Learn Vue.js from Scratch: Building & Testing a Movie App today on Educative. Master one of today’s popular JavaScript frameworks, put your first app together, and put your skills to work today!
