Friday March 1st, 2019 root

VUE.JS

In our last meetup, we covered Vue.js, a powerful progressive JavaScript framework. Next, we demoed a simple polling app to illustrate how to use the framework for building user interfaces quickly.

download

 

Building user interfaces with Vue.js

Vue.js (Vue) is a progressive JavaScript framework for building mobile and web user interfaces. The term “progressive” means that it is possible to use the Vue.js framework together with other libraries such as Vuex and Vue Router, to “progressively” add development features to a Vue app. Vuex is a state management pattern and library, that serves as a centralized store for all the components in a more data-driven application. Vue Router is a router library that routes a browser url to the application’s code logic. If you decide to use just Vue’s core framework, you can also use it inside existing Javascript projects, allowing a progressive migration from an old codebase to a Vue.js application.

Vue.js is often compared with Angular and React. React is not a framework, but a JavaScript library meant for building user interfaces. Both Vue and Angular are frameworks, however there are differences: Angular is a framework which is primarily oriented towards web application development. Mobile is also covered, but it’s a heavy framework for this. Vue is oriented towards both mobile and web application building. Github repo stats show that Vue is a popular framework, having received over 126.000 stars. Nintendo, Grammarly and Alibaba.com are three large users.

Creating a project with Vue

Creating a Vue project starts with installing the framework itself using the NodeJS package manager. Vue offers developers flexibility with regards to language: they can use JavaScript only, TypeScript only or use TypeScript with an additional component class and decorators. Vue components are reusable Vue instances with a name: these can be single component files, with or without external sources or separate files such as Angular. TypeScript has become an indispensable tool for coding in JavaScript. It is both a language and a toolset that compiles to vanilla JavaScript. Typescript’s types enable better error detecting at compile time, reducing runtime failures and debugging time in general.

After installing Vue.js, we can create a project using the “vue create <project>” command in the console, after which you can configure a project by choosing between a number of preset features. Vue also offers a browser extension for development purposes that filters and displays all components and variables of an application.

Vue components and plugins

The lifecycle of a component in Vue is similar to that of React: first, a component is created, then mounted, updated and finally destroyed. Only when a component is mounted it has access to HTML. Components can have props that pass data from a parent to child component, events that pass data from a child to parent component and models: for two-way data binding. Mixins are a flexible way to distribute reusable functionalities for Vue components. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Plugins usually add global-level functionality to Vue. Vue plugins are designed to be installed and set up as quick as possible. For example, the Vue router plugin requires only a couple of lines to be imported and configured. Lazy loading a route is a matter of wrapping up the component inside a function. This generates a separate chunk of code for a route that is loaded when it’s going to be used, reducing the time to load the app.

Vue demo app

Bi4 Group demoed a simple polling demo app using Vue. Participants could access the app on their mobile phones and fill in multiple polls. The polling app’s architecture consists of Redbird, a modern reverse proxy for node, a user interface built with Vue using TypeScript and polls.com/api built with Node.js.

Vue: a powerful and promising framework

It is easy to see why Vue has become a popular framework among Angular and React. Vue’s documentation is excellent, which makes it relatively easy to learn. Because Vue is a progressive framework, it can be extended with extra libraries and components for additional functionality.

There are also disadvantages to using Vue. For example, its single-file components are nice, but a bit young. However, it is a very powerful and promising framework that definitely deserves serious consideration when choosing a JavaScript framework for building mobile and web user interfaces. Time will tell if Vue becomes the selection of choice for developers and companies to build the web interfaces and mobile apps of the future.