An Introduction to the Vue.js JavaScript Framework

Image for An Introduction to the Vue.js JavaScript Framework

Vue.js is a “progressive JavaScript framework” for building the user interfaces (UIs) of single-page applications (SPAs)—so what does that mean compared with the plethora of other JS frameworks out there, and what is it best suited for?

Many front-end JavaScript frameworks provide you with all the bells and whistles right out of the box, letting developers pick and choose the modules they need. But with all of that functionality at your fingertips comes a lot of code overhead—something that can potentially slow performance. To answer the needs of developers who don’t need quite as much under the hood but would prefer to pick and choose the modules they need, Vue.js offers a buildable framework—layered components that let you add as much as you need, where you need. With that comes a great deal of flexibility and performance that’s right on par with mature, road-tested frameworks like React, Riot and Polymer.

We won’t go too far into framework-by-framework comparisons here—that’s something the folks at Vue pulled together beautifully (and fairly) on their site, laying out what problems Vue is really good at solving and comparative pros and cons. However, we will talk about the things it does well on its own

Here’s a quick, high-level look at what you need to know about Vue.js so you can decide if it’s right for your front-end UI build.

Developers who know front-end programming languages like HTML, CSS and JavaScript can get started with little to no learning curve.

“Vue embraces classic web technologies and builds on top of them.” Compared with React’s steeper JSX (JavaScript + HTML files) learning curve, Vue uses HTML-based templates and single-file components that let developers author actual CSS (with support for CSS Modules and pre-processors, too). The benefit of doing this outside of JavaScript libraries is less complexity and, again, a smaller build size.

Frameworks with more “scaffolding” can be more opinionated and often require more time to learn your way around. It’s a definite trade-off, because those full-featured frameworks can really boost productivity if you’re experienced with them. Vue has a lot smaller learning curve. It’s billed as being “approachable,” so if you’re already comfortable writing front-end code, all it’s going to do is make what you’re doing easier—not more complicated.

Think of a feature-packed framework like Ember. Vue is more easily compared with Ember’s specific object model and templating components than the entire framework itself. It’s specific to its core, giving developers more flexibility and control over the architecture as a whole.

IT’S BUILT SMALL, BUT WITH COMPONENTS THAT GIVE YOU ROOM TO GROW AS YOU NEED.

Vue.js is built on a minimal core—a bonus when you want a lightweight framework that’s not going to add a lot of bulk to your codebase—but has an “incrementally adoptable stack” that lets you build on it to scale up as much as you need, or only use the parts you need and integrate those parts right in with an existing application. Its components are a bit like the elements you’d find in the Web Components-based Polymer framework.

That core library is all about the “View”—the “V” in the MVC paradigm that focuses solely on what the users of an app or site sees and interacts with.

Excellent performance thanks to a lightweight virtual DOM.

These days, every hot new framework (React.js, Ember.js, and now Vue.js) seems to be incorporating a Virtual DOM. So what is a Virtual DOM and why is Vue’s typically faster?

Put simply, while everyone tends to talk about the DOM as the HTML document itself, it is actually the data structure created when the browser parses that HTML document. Making changes to the DOM with JavaScript is expensive because the browser must allocate resources to find the required DOM nodes to make a change. A modern, dynamic, single page web application (SPA) can have thousands of nodes, so frequent updates will inevitably slow a page down.

The Virtual DOM solves this problem by providing a complete representation of the DOM in JavaScript, that can be updated as required, when the real DOM needs to change. Making changes to JavaScript objects is cheaper than changing the DOM itself. When the real DOM syncs with the Virtual DOM, it can use a more efficient updating function to make those changes without having to repaint the entire DOM with every change. Only the objects that actually were affected by a user interaction get updated.

As for what makes the Vue.js Virtual DOM “blazingly fast”—weighing in at 20 kb minified and compressed using a gzip algorithm at runtime, Vue.js is simply significantly lighter than its competitors (Ember 2.2.0 and Angular 2 are roughly 111 kb). As an added bonus, less out of the box code to worry about means optimization effort is significantly reduced.

Vue’s not just for client-side SPAs—it can be rendered on the server, too.

Out of the box, Vue is like most JavaScript frameworks in that it uses client-side rendering (CSR) where the browser does the heavy lifting when it comes time to render a webpage. However, Vue also takes a page from React, supporting server-side rendering (SSR), which allows an app to pre-render its pages on the server before serving them to user.

So why use SSR? One chief advantage is that content rendered on the server doesn’t need to wait until all JavaScript has been downloaded and executed to be displayed, greatly reducing page load times. The other major advantage is that fully rendered pages are easier for search engine crawlers to read—leading to better SEO (search engine optimization).

If you’re building an app where time-to-content is a priority and shaving a few hundred milliseconds off of an initial page load is a must, it can be worth the extra development time to implement SSR in a Vue app with Nuxt. On the other hand, if you’re only interested in the SEO boost, prerendering static HTML files for specific routes at build time is a much simpler solution, made available courtesy of the prerender-spa-plugin.

Vue lets you manage state as you scale with Vuex, Vue’s answer to React’s Flux/Redux.

State management becomes more important as you begin to scale an application. This is especially true for component based frameworks like Vue or React, where multiple components in an application are sharing data and interacting with one another. As the complexity of those interactions scale with the app, it becomes harder to understand or predict data state, and bugs are likely to follow.

Enter Vuex, an application design pattern and library that draws inspiration from Flux, Redux, and the Elm Architecture. In Vuex, shared state is managed in one central location—a global singleton that is synonymous with Flux’s “store.” This allows the component tree to act as a large “view” that any component can interact with to access state or trigger actions regardless of their location within the tree. Components can freely read data from the store, but can’t change it directly. Instead they inform the store which in turn updates state using Vuex functions called mutations. Put it all together and you have a scalable front-end that’s easier to manage.

awesome job post

IT SUPPORTS TYPESCRIPT FOR EVEN MORE PRODUCTIVITY.

While we’re on the subject of scalability, many developers might be happy to learn that Vue supports Typescript, a statically typed superset of JavaScript that compiles to vanilla JavaScript. In contrast with dynamically typed JavaScript which gets type checked at runtime, TypeScript variables are type checked at compile time, catching errors earlier and ensuring bug-free code at runtime. When you use an IDE that supports TypeScript, it’s possible to catch errors as you type your code. By design TypeScript encourages cleaner code that’s less prone to bugs, which can improve programmer productivity over the lifetime of a large product.

Get cross-platform app development on par with React Native using Vue’s Weex collaboration.

Vue has collaborated with Weex to offer cross-platform UI framework development, which allows developers to use the same Vue component syntax to author components that are compatible both in the browser and natively on iOS and Android operating systems.

At the time of this article, Vue’s Weex collaboration is still maturing.

Vue supports unit testing with Karma.

Karma is an excellent test runner that has community plugins that can be configured in a number of ways to support your app’s needs.

This is just a brief introduction to Vue.js. You can learn more about the ins and outs of this framework here and consult a JavaScript developer on Upwork to see about implementing Vue.js for the front-end UI of your application.

Upwork is a freelancing marketplace where businesses of all sizes can find talented professionals across multiple disciplines and categories. If you are a business and are looking to get projects done, consider signing up!

Join Upwork

Carey Wodehouse

by - Freelance Content Marketer and Writer

Carey Wodehouse is a freelance content marketer and writer based in Richmond, VA who’s worked for clients ranging from online retailers and global market research… more