Beginner's Guide to Vue and Vuex

At Share IT, we are great believers in knowledge sharing. As you can see from our blog, we tend to cover various topics in the form of how-to articles and guides to help you better understand both the world of development and how we work. From SharePoint, Nintex, Office 365, and Azure, to many different frameworks used for mobile and web development, as well as enterprise software development. When it comes to creating user interfaces and single-page applications, there are a lot of available frameworks and technologies that can be used. Today, we’ll be explaining the basics of Vue and Vuex, a JavaScript framework and its Flux-inspired centralized state management.

Vue (or Vue.js) was initially released in 2014. It was created by Evan You, a former employee of Google and Meteor. The way Vue’s core team assembled and how it became what it is today is quite inspiring.

But, let’s start from the beginning.

What is Vue, Exactly?

vue

Vue is a progressive JavaScript framework used primarily for building user interfaces. ‘Progresive’ means that, if you have an existing server side application, you can choose to work on just one specific part of your application and create a richer or more interactive experience. Also, if you want to build in more business logic from the get-go, you have all the core libraries and resources at your disposal to make the system scalable.

Vue is considered to be approachable, versatile, and performant framework that helps developers create a more maintainable and testable code base. It allows you to take a web page and split it up into reusable components. It also has a command line interface which makes it simple to jumpstart projects fast, as well as single file components, but that’s just the tip of the iceberg.

How Was Vue Created?

Evan You got the idea for building a progressive JavaScript framework while working at Google. He was recruited by Google Creative Lab as a fresh graduate. His job position implied a lot of prototyping in the browser. For most of the projects, the team relied on Angular.

For You, Angular had some great advantages (e.g. data binding), but it also felt ‘too heavy’ for his current project. That’s when he started experimenting:

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started.”

Initially, Vue was financed through Patreon. At the very beginning, it experienced strong organic growth and its value was recognized by both the developers and companies. Individual donations started to fly in, as well as long-term sponsorships. Thanks to this, You is working full-time on maintaining and further developing Vue, side by side with its core team which contains members from companies such as Netlify and Netguru.

What Are the Benefits of Vue?

We already touched upon the benefits of Vue, but it’s time to take a closer look. When you’re working in software development, your goal is to decrease time to market, make beautiful and functional applications that are also user-friendly. Because of the way Vue is designed, it can be a worthy ally and provide a great coding experience.

Here’s an overview of benefits of Vue:

Small size
Easy to understand and use
Well organized and thorough documentation
Flexibility
Simple integration
Two-way communication

Did you know that Vue’s size is between 18KB and 24KB? This means it’s very easy to download and use instantly. Mind you, this doesn’t have anything to do with the framework’s speed.

In addition, Vue has a pretty straightforward structure which makes it easy to use. There are also some precious time-saving features available, such as templates of different scales.

Vue has extensive documentation, which is definitely a plus. However, bear in mind that the official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. This means that, if you are just getting started with these languages, you should first master them before moving to learning Vue.

Vue also provides great flexibility: it allows users to use virtual nodes in order to draft templates in HTML or JavaScript. In addition, it seamlessly integrates with other apps created on JavaScript, meaning you can both create new apps and modify existing ones.

Last but not least, Vue enables two-way communication thanks to its MVVM architecture. Similar to Angular, it makes the handling of HTML blocks rather fast.

What is Vuex?

vuex

In single-page applications, handling state (i.e. a JavaScript object that contains a tree of data or any piece of data that can change such as details of a logged-in user) can be a bit difficult. As the app you’re building gets bigger and more complex, it becomes increasingly challenging to manage states - especially when you need to use them in multiple components.

Vuex is the official state management solution for Vue. It has a central store for shared state and then it allows different components to access that state. The application data remains in a transparent state regardless of the number of components with which this data is shared.

In a nutshell, Vuex is a state management tool and a library for Vue.

What Are the Benefits of Vuex?

Vuex serves as a single source of truth. Components do not have their own local states. Instead, they are consolidated into one place, i.e. one global location. As a centralized library, Vuex helps developers maintain a cleaner state and they have a clean top overview of every segment.

Vuex state is reactive, just like Vue itself. This means that when one component updates the Vuex state, other will react and respond accordingly as they receive the new state value.

To make the state predictable and traceable, Vuex introduced standardization. It provides a full state management pattern and relies on the following:

Actions: they help with the proper updating of the state
Mutations: they allow developers to track changes and they also get called up to actually update the state
Getters: they enable developers to access filtered, derived or computed state

Arguably the most notable benefit of Vuex is that it provides a perfect way to optimize the simultaneous front-end and back-end development. Thanks to Vuex, the front-end team can implement a unique API login even before the API is available.

Why is Vue Called ‘The Future of Front-End’?

Vue currently has around 162K starts on GitHub and it keeps getting popular. According to the JavaScript 2019 survey, 40.5% of the respondents said they used Vue and would use it again. Mind you, this is a jump from 28.8% in 2018. Some predict that in 2020, Vue will climb to the top when it comes to front-end development trends.

Now let’s look at the reasons why Vue is gaining momentum:

Thanks to Vuex, users can manage states in a simpler way
Vue is approachable and less restrictive compared to some other frameworks
Vue can save developers time and provide a pleasant coding experience thanks to its excellent workflows
The learning curve is mild (developers just need to know JavaScript)
It offers many conveniences for complex projects such as the development of enterprise software

Also, if you’re tired of frameworks making your life more complicated instead of simplifying it - Vue is the way to go. That’s one of the main reasons why the adoption rates are increasing.

Thinking of Developing Your App in Vue?

Depending on the project, Vue can be an excellent framework choice. Thanks to its high performance, Vue has been used for app development by many prominent companies and brands such as Grammarly, 9GAG, Nintendo, WizzAir, Buzzfeed, and more.

At Share IT, we always do a thorough analysis with the client to build a business case and decide which program language and frameworks could be optimal to use. If you’re interested in what we can do for your business, reach out to us today. Let’s build something beautiful together.