There are a lot of frameworks right now. You will see a lot of articles on how one framework is better than the other. This is about why Vue is better. This story is about lessons learned and the practices we followed while building Chatwoot. JavaScript NOT The Product is a customer support tool for instant messaging channels which can help businesses provide exceptional customer support. Chatwoot 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. 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. Chatwoot 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 in the repository. The basic setup has following components: boilerplates awesome-vue Vue 2.0 — We ditched Bootstrap. Foundation — We were comfortable with Sass language. We used along with Sass. It has sufficient enough mixins to get started. Sass Bourbon — This plugin helped to write clean code. We used to lint our files. ESLint AirbnbEng Style Guide — This one was hard to start with. It took a little bit to get used to it. Webpack 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. — The state management is an arduous task. Vuex made it simpler. Their documentation is also good. Vuex — This one is easier to manage and was easier to setup role-based access to the routes. Vue Router — As your app progress, your requirement changes. You might need to support multiple languages. Why don’t you start at the beginning itself? Vue-i18n — This is good tool to manage your API request and response. We used the 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. Axios interceptor pattern Response Interceptor — A light weight validation plugin. Vuelidate 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. for API backend. Rails for storage. S3 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. CloudFront — 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 . The following script uploads the build files to S3 and invalidate corresponding CloudFront cache. Travis CloudFront Set environment variables in your travis project settings console. travis.com — Project Settings — Environment Variables — For product analytics. Mixpanel — For error tracking and management. This is recommended tool, this one made our life simpler. Sentry — 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 and . For icons, we are using . TypeKit brandon-grotesque proxima-nova Ionicons — For unit testing. Karma 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. Aws Opsworks for background jobs Sidekiq for mockups Balsamiq to manage project issues and bugs. Github We had credits from program which helped to launch the product with almost zero cost. with helped us in setting up billing and subscriptions with very minimal effort. FBStart Stripe Atlas Chargebee Endnote It has been a year with Vue. The good parts I found in Vue are as follows Simple and well documented APIs — curve is lesser compared to other frameworks Learning 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 and let us know your feedbacks. Chatwoot

AirBnB

Amazon

Facebook

Sentry

Stripe

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Zero to live with Vue — How we built Chatwoot

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Pranav Raj S

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Zero to live with Vue — How we built Chatwoot

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Pranav Raj S

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES