Beginner's Guide to JavaScript Frameworks Part 3: Vue

This is the third and final part of the Beginner's Guide to JavaScript Frameworks series. Feel free to review parts one and two, where we discuss React and Angular.

Vue JavaScript Framework

Finally, we have Vue. Vue is explicit that it is a framework only focused on the view layer. Its extensive reliance on templating and use of more traditional HTML/CSS/JavaScript techniques make it a good introduction for anyone still learning the basics of web development. 

That also gives Vue one of its biggest advantages over React or Angular. Vue can easily be inserted into an existing project using a simple <script> tag. Vue acts more like a library (like jQuery) that way instead of a framework which makes Vue easier to integrate into existing projects or migrate them entirely.

Overall, developers who have used Vue are very happy with it and as a result, its popularity is growing rapidly.

Vue Framework: Templates

Vue’s biggest difference from the other two frameworks is its reliance on templating. Angular and React deliver content in programmatic ways while Vue uses the power of the Template to do the same job. You can use the templating syntax with or as a replacement for your HTML files. That lets you update your content from wherever and display it on the browser without having to change anything on the front-end. The following example shows how the template can read information from the ‘{{name}}’ property and displays the name “John Smith” in the browser. 

<div id="counter">
  Counter: {{ counter }}
</div>

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter');

You can also use Vue’s directives (using “v-”) to introduce logic into HTML tags similar to Angular’s “ng-” based directives. So with “v-for” you can loop through items in an array to display them in a list on your webpage. “v-if” can be used for conditional statements inside your HTML. 

Vue Framework: Virtual DOM

Vue uses the Virtual DOM like React to improve performance. Combined with Vue’s templating that means changes to an app’s state are detected and displayed rapidly. That combines one advantage of React but without the complicated information architecture that can accompany a React App. 

Vue Framework: Composition API

The Vue 3 Composition API is a new approach that aims to improve code flexibility and reusability. At its core, there’s no wizardry - these are just pure JavaScript functions that expose various properties:

function useCounter() {
  const count = ref(0)
  
  function increment () { count.value++ }

  return {
    count,
    increment
  }
}

export default {
  setup () {
    const { count, increment } = useCounter()

    return {
      count,
      increment
    }
  }
}

As shown above, it’s simple to pull in the useCounter function with minimal fuss. 

Vue Framework Strengths

Vue is a great choice for developers who want something more React-like but with the traditional HTML/CSS file structure. But Vue is far less complex than Angular making it easy to get started right away, especially if you want to stay away from the strict typing required in TypeScript. 

Vue fits the incremental adoption use case well: it can easily be inserted into an existing project using a simple <script> tag. Vue acts more like a library that way instead of a framework which makes Vue easier to integrate into existing projects or migrate them entirely.

Vue Framework Drawbacks

Vue currently has the smallest developer community out of the three major web frameworks. That may make it difficult to find the support you need, whether hiring developers who already have experience or turning to the community to debug a complicated coding issue. It also means fewer plugins and libraries to help speed up development of common workflows. 

Another drawback is if you are already working with a complex project then Vue will not help you organize your codebase like React or Angular could. 

Ionic Vue

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their Vue skills should take a look at Ionic Vue, the native Vue version of Ionic Framework. Not only can Vue developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic Vue? It’s just Vue: standard Vue development patterns tightly integrated with standard Vue libraries, coupled with the huge ecosystem surrounding the web platform. Ionic Framework uses the built-in Vue router and CLI just as regular Vue apps do, so you’ll immediately feel comfortable building Ionic Vue apps using the same libraries and tools you know and love. You can seamlessly use TypeScript or JavaScript with Ionic Vue which adds to the flexibility of the framework and its overall simplicity.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli
ionic start myApp --type=vue
cd myApp
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line 

Strengths: 

• Easy to learn and integrate with existing web projects
• Templating makes it easy to display data with regular HTML
• Very small file size helps performance
  

Drawbacks:

• Smaller (but growing!) community
• If you’re already dealing with complexity issues, then Vue may not help solve them

Vue is good for Developers who: 

• Want to keep things as simple as possible. 
• Only want to work on the UI and leave the underlying architecture alone
  

What JavaScript Framework Should I Learn?

So, now that you’ve learned all about Angular, React, and Vue Frameworks: which one is the best? Which JavaScript framework should you learn to stay on top of the web development world in 2021 and beyond? 

The truth is, all three frameworks are great choices. Each one comes with its strengths and weaknesses and whether or not a framework is right for your project depends on you and/or your team’s background. 

All three were built with the goal to enhance a developer’s skills and make their lives easier rather than totally replace everything anyone knows about programming. All of them follow modern web development techniques too, so you can feel confident that if you start to learn one you can pick things up with another down the line. 

Ultimately, we recommend building an app prototype using each web framework, and see which one works best for you and your team. The fastest way to compare each framework is to use Ionic’s app wizard tool. Select a color theme, choose an icon, then select either Angular, React, or Vue. Your new progressive web app is generated immediately, providing you with a great foundation to build upon.

React, Angular, and Vue JavaScript frameworks will all take your web development journey to the next level. Happy coding everyone!

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.