Prologue
Taking care of your pet is a full job for you. But are you doing a good job? Can9 is an inspirational social network for responsible pet owners to share pet tips, photos and videos. The web based pet network has an integrated pet store and vet portal too. Built entirely in Vue.js as a single page application, Can9 is a demo of our expertise in AngularJS to Vue.js migration.
The Challenge
Application migrations are hard to go by no matter how similar the underlying technologies are. The client wanted us to add a few features to give the pet networking website a personal touch. A little playing around integrating personal features to Can9, we were convinced AngularJS code is growing incomprehensible and we will run into serious application maintenance constraints. We had two options either ditch AngularJS altogether and start building new features in a newer technology or rewrite the entire code base in the newer technology from scratch.
The Approach
The expectations of the business world are not always in sync with the technology world. The former wants faster results while the latter wants one more day of perfection. As a fast-moving technology company, our intention has always been to bring the two worlds on the same page. The apprehensive client barred us from making changes to the existing AngularJS code. Nevertheless, she was a little open to the technology we can integrate new features in. Vue.js looked exciting.
The Solution
Problem
In line with client’s business strategy to make the social network for pet owner a little more on the personal side, we added pet diary to Can9. It was a simple diary but client wanted to allow users to share their diary with their friends or everybody on the network. We did not want to rewrite the code to make it go public. We looked for a workaround. Sometimes you have to improvise to be the first.
Solution
CASL is an authorization Vue.js library, which contains resources a user can access. CASL allowed us to force permissions in terms of abilities and made defining user roles a cakewalk. It redefined how we approach user access by defining what a user can or cannot do versus strict roles — who is this user. While defining the abilities of a user, the user role can be composed with CASL.
Problem
The lack of real-time chat functionality in the social network for pet owners was limiting Can9 ability to allow seamless communication between the users. Can9 users were redirected to another chat platform like WhatsApp and Messenger. However, with growing user base integrated chat functionality was the need of hour.
Solution
While there are many libraries are available to integrate chat functionality in Vue.js, we wanted the chat module to be platform agnostic. Vue.js is future proof and everything but having a feature platform agnostic will keep the communication going at the time of system upgrades or downtimes. We insisted on Socket.io, a JavaScript library that enables real-time, bidirectional and event-based communication between the browser and the server.
Problem
When we started the project, we were to add new features in Vue.js. Client did not want us to touch the existing AngularJS code. This is how our approach to development was secured. However, as the client started to realize the goodness of Vue.js from the new features integrated in Vue.js, she grew more insistent towards migrating entire code base to Vue.js while adding new features.
Solution
You agree with the client and we did too. After all, both the technologies have JavaScript as the enabler. Routing, moving templates, handlers, defining methods turned out more than we expected. We might have overrun our deadline had it not for ngVue, an AngularJS module that allows painlessly integration of Vue.js components within an AngularJS application.
Problem
Pet IDs allows you to locate your pets wherever they are and increasingly pet owners are attaching them to their pets’ collars. There is no way we could read data from the tags to the applications. First, not many devices with a web browser have Bluetooth or NFC. Second, connecting the tag over Bluetooth to a device, granting necessary permissions to the browser and running scans was not exactly user friendly.
Solution
After many hits and tries, we could not come up with an approachable solution to the problem. In another day of workarounds, we created an app for Android and iOS, which will run scans of Pet IDs on users’ behalf and after gaining authorization, sync the readings to the user’s Can9 account for ready reference. Can9 saves reading for last 30 days.
Problem
A principal goal of Can9 is to educate customers about pet issues so that they can take good care of them. That means there are dedicated groups in the social network where the users can discuss their care procedures. To ensure an inexpert is not giving false or potentially hazardous care advice in the groups, Can9 employs veterinaries to overlook the conversation and mark hazardous ones.
Solution
While registering a new pet owner to Can9 is a straightforward approach, adding vet moderators is not so much. You need to check their registration, license, etc. and authorize that info to the official database, which needs human intervention. So we created a new app actor—Agent–who will register vets on the page after running necessary procedures and authorizations.
Epilogue
The new features built in Vue.js met with overwhelming success owing to their user-friendly design and performance-edge over AngularJS features. We are still adding new features in Vue.js while replacing the legacy AngularJS code. The results have been outstanding.