Zero to live with Vue — How we built Chatwoot

There are a lot of JavaScript frameworks right now. You will see a lot of articles on how one framework is better than the other. This is NOT about why Vue is better. This story is about lessons learned and the practices we followed while building Chatwoot.

The Product

Chatwoot is a customer support tool for instant messaging channels which can help businesses provide exceptional customer support.

We are witnessing a paradigm shift in customer support — we can call it Customer Support 2.0. Most businesses are still stuck in the email era while their customers are on Instant Messengers. They now demand instant replies from businesses.

Chatwoot is aimed at bridging this gap. We are help businesses to be present where their customers are — a one-stop solution for businesses to manage all their customer support actions over Instant Messengers from one place. No more dabbling with multiple websites.

Getting Started

We started the discussion on building Chatwoot a year back. Like most of the developers, we also had a doubt on what framework to use. We were able to cut short the discussions on frontend frameworks to either React or Vue. We decided to move with Vue seeing the simpler syntax and rich documentation and we never regret it.

Started with the boilerplates in the awesome-vue repository. The basic setup has following components:

1. Vue 2.0
2. Foundation — We ditched Bootstrap.
3. Sass — We were comfortable with Sass language. We used Bourbon along with Sass. It has sufficient enough mixins to get started.
4. ESLint — This plugin helped to write clean code. We used AirbnbEng Style Guide to lint our files.
5. Webpack — This one was hard to start with. It took a little bit to get used to it.

Challenges

Getting started was easier. The real challenge started when we trying to implement features. We had to build all components from scratch as no-one was using Vue-Foundation combo on a large scale. We decided to build the components by ourselves.

Vue — Emoji Picker

Emoji Picker

One of the major takeaways of this decision was this emoji-picker. Emojis are rendered as unicodes by default. It supports both SVG and unicode. We are planning to open-source it soon.

The Packages used

One of the good things I have seen in Vue compared to React is the Vue Ecosystem which consists of Vuex and Vue router. Following are the list of packages we have used.

• Vuex — The state management is an arduous task. Vuex made it simpler. Their documentation is also good.
• Vue Router — This one is easier to manage and was easier to setup role-based access to the routes.
• Vue-i18n — As your app progress, your requirement changes. You might need to support multiple languages. Why don’t you start at the beginning itself?
• Axios — This is good tool to manage your API request and response. We used the interceptor pattern to manage our requests and response. We had response interceptor similar to the one below. This helped us to show Error messages and do common operations at a single point.

Response Interceptor

• Vuelidate — A light weight validation plugin.

Tech Stack and Tools used

We have separated Frontend and Backend apps as standalone services, which helped both teams to work in isolation. All the communications were made through REST API Calls. Updates were easier to handle.

• Rails for API backend.
• S3 for storage.
• CloudFront as CDN. Earlier, during development, we were using Firebase as our CDN. We later switched to Cloudfront since Firebase didn’t support custom SSL certificates.
• Travis — This build tool made it simpler to deploy our frontend updates easily. We have a staging and production branch. We are uploading the build files to S3 and it is delivered via CloudFront. The following script uploads the build files to S3 and invalidate corresponding CloudFront cache.

Set environment variables in your travis project settings console.

travis.com — Project Settings — Environment Variables

• Mixpanel — For product analytics.
• Sentry — For error tracking and management. This is recommended tool, this one made our life simpler.
• TypeKit — We were fed up with the fonts which you see in most of the websites. We wanted a fresh feel. TypeKit provides premium fonts at an affordable rate. We use brandon-grotesque and proxima-nova. For icons, we are using Ionicons.
• Karma — For unit testing.
• Aws Opsworks for hosting our rails app — Opsworks helped us to get up and running in a very short time and since the entire infrastructure is coded in chef, it is easy to scale.
• Sidekiq for background jobs
• Balsamiq for mockups
• Github to manage project issues and bugs.

We had credits from FBStart program which helped to launch the product with almost zero cost. Stripe Atlas with Chargebee helped us in setting up billing and subscriptions with very minimal effort.

Endnote

It has been a year with Vue. The good parts I found in Vue are as follows

• Simple and well documented APIs — Learning curve is lesser compared to other frameworks
• Better templating option — Compared to JSX, Vue templates has better syntax in terms of templating. You need not write another function to handle an if case, v-if does the job elegantly.

Don’t forget to try Chatwoot and let us know your feedbacks.