Why we chose Vue in Zoomcar

Background

Initially, our wesbite was written with ruby on rails. The frontend code was intertwined with rails code and there was a backend logic in HAML files. Deployment was harder and tied to other dev deployments because of this coupling.

There was code repeatition and several times, code needed to be written from scratch as things were not componentised. The app was also monolithic which made life harder as development had to be sequentilaised and managing code was becoming harder. Also the build system did not exist. Gulp was used to minify and bundle files but It was minimalistic. We we not able to take able to take advantage of newer ES6 features.

Deployment So we decided to change the development flow and deployment flow. We broke down the app in 20-odd components and hosted them on npm. Deployment became easier since we could just push to S3. Because of single page application structure we can deploy multiple times a day.

Ownership and dev happiness Onboarding became easier and people could build and own specific components. Also people can work independently. Development was easy as doing git clone and start editing code. Reactivity made updation of UI very easy as the view gets updated easily just by changing underlying structure

Vue in Zoomcar

From last few months we are migrating our Front-end from RoR (HAML)/jQuery to single page application. For this we are using Vue/Vuex.

Why we chose Vue

Learning curve

Vue’s leaning curve is small, quick to start with Vue/Vux

Simplicity and ease of use

Vue is very easy to get started with, its templating is pretty similar with HTML structure and very easy to understand.

Fast Framework

Vue is pretty fast compare to other popular UI framework available.

Vue Project structure

Our projects mainly consists of pages, components, stores, routes, directives, mixins, helpers and styles directories.

  • app/
  • components/
  • directives/
  • filters/
  • helpers/
  • layouts/
  • mixins/
  • pages/
  • routes/
  • store/
  • styles/

and each pages and components directories contains relevant components with template, javascript and style files. pages can have subcomponents (1 level only), which are just to make big pages spilt into small components.

  • pages/
    • address/
      • new/ subcomponents
      • edit/
      • list/
      • index.js
      • address.vue
      • address.js
      • address.scss
      • address.spec.js
  • components/
    • zc-calendar/
      • index.js
      • zc-calendar.vue
      • zc-calendar.js
      • zc-calendar.scss
      • zc-calendar.spec.js

Our all components are pure components, they don’t access vuex store, they take parameters via props and $emits back data as events. Pages can access data from vuex and send the data required to the components the page is using. subcomponents inside pages are not allowed to access vuex.

Sample vue file

<template>
    <div class="container">
        <h1>Sample Component</h1>
    </div>
</template>

<script>
import './component.scss';

import Component from './component.js';
export default Component;
</script>

relevant JS file

export default {
    name: 'component',
    components: {
        // all component imports
    },
    props: {
        title: {
            type: String,
        },
        message: {
            type: String,
        },
    },
    data() {
        return {
            foo: 'bar',
        }
    }
}

index.js

import Component from './component.vue';
export default Component

and other directories like directives, mixins and styles have the the files as the name suggests. our store directory consists of vuex Modules. Some sample modules we use are user, car, cart etc.

Build configuration

We use webpack and babel for our builds.

Webpack has four enties

  • app ~/app/entry
  • lib ['date-fns']
  • vendor ['vue', 'vuex', 'vue-router']
  • common ['~/components/zc-dialog', '~/components/zc-calendar']

~ here is alias to ./src directory.

we create chunks for each routes
sample route for home

{
    path      : '/',
    component : () => import(/* webpackChunkName: "page-home" */ '~/pages/home'),
    name      : 'HomePage',
}

Screenshots

Few screenshots of our current in progress web app.

Sidebar HomePage HomePage HomePage


Hello world

Hello, World!

Hello world! of our tech stack

Performance Testing at Zoomcar

What is Performance Testing?

At a very high level, the objective of Performance testing is to assess how a system behaves under a given situation i.e. how various components of system performs under the specified load.