This browser is not supported

Please install an up to date browser.

Vue.js Progressive
JavaScript Framework

Vue.js is an approachable, versatile, and performant JavaScript framework. A good foundation for maintainable and testable code base.

JavaScript
HTML
Output
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component('custom-element', {
  data() {
    return {
      users: [{ username: 'Jhon' }, { username: 'Nancy' }, { username: 'Jack' }],
    };
  },
  template:
    '<div><div class="user" v-for="user in users"><p>Username: {{ user.username }}</p></div></div>',
});

window.addEventListener('load', () => {
  window.vue = new Vue({
    el: '#app',
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
    <script src="app.js"></script>
</head>
<body>
  <div id="app">
      <custom-element></custom-element>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
    <script src="app.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <div class="user"><p>Username: Jhon</p></div>
      <div class="user"><p>Username: Nancy</p></div>
      <div class="user"><p>Username: Jack</p></div>
    </div>
  </div>
</body>
</html>

Why we use Vue.js at Radity

Flexible

One of the challenges in Front-End Engineering is to develop complex single page applications that run inside the browser which itself relies on URL and resource based navigation. 

Vue core modules such as Vuex (store) and Vue Router (routing) reduces programming complexity and helps developers to develop SPA or SPA-like applications effectively. 
 

Lightweight 

Vue.js is lightweight (20KB gzipped) and can be embedded even in most performance demanding applications.
 

Easy-to-learn

Vue.js has an easy learning curve enabling development teams to scale.

Open Source Ecosystem

We at Radity love open source products with strong communities. Vue.js fits into this category perfectly with its active ecosystem.

Bonus - Vue CLI 3

Vue.js comes with a CLI and a set of developer tools that help developers prototype, debug and optimize their codes quickly.

Performance

Vue.js itself has a minimal optimization efforts with virtual DOM. Beside Vue's built in performance optimization we use “code splitting” and “lazy loading” to minimize redundant code for users. We separate modern browser code bundles from legacy browser support code. This gives an increase in performance.

You can read more about performance optimization with Vue.js in our blog article.

Case Study to show power of Vue.js

We developed an asset management pricing simulation tool for one our clients.

This simulation depends on complex base products data. First we copy all data from base product to the simuation and calculate its factors.

When the parameters of the new product are reentered, we recalculate all cost lines and profitability. All on the fly, in a responsive UI.

Lifecycle

Vue.js has lifecycle hooks and listens data change events and updates DOM elements dependent on this data whenever required.

To develop the price simulation all we have to do is to write computed properties. Vue.js takes care of the rest.

With Vue.js, there is no need to listen to any events, no need to re-render any DOM element. It's all taken care of.. What a great and performant tool for frontend engineering!

Technology Stack

Vuex

Vuex is a state management pattern + library for Vue.js applications. 

Vue Router

Vue Router is the official router for Vue.js. 

Webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser. 

Babel

Babel is a tool that helps you write code in the latest version of JavaScript. 

ES6

ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript. 

SASS/SCSS

SASS is a dynamic style language that can be compiled into CSS format.

ESLint

The pluggable linting utility for JavaScript and JSX. 

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code. 

Storybook

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. 

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Docker

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. 

Gulp

Gulp is a JavaScript task runner that lets you automate tasks. 

Vue.js is proven and used by leading names

Netflix, Adobe, Alibaba, Xiaomi, Gitlab, IBM, Behance and many more..

Contact Us

Design, Development or Operations. Let's make it happen.
Send us your no-obligation inquiry.

NEXT SERVICE

Frontend Development

To get best out of the UX, your web application should be fast-loading, convenient and reliable. It should have smooth and intutive interactions
with your audience. Our Front-end development focuses on exaclty that.

Learn more
SERVICES

All services

How many times did you work with a partner that can cover both securing a cloud solution to e-banking grade as well as designing award-winning UX?

Go to services