Why We Chose (To) React!
Chat is the most socially used interface in this day and age. It is the most convenient form of communication available. We all use at least one chat application daily, may it be on our mobile phones or desktop.
Haptik is one such chat service application available on Android and iOS which connects people to their very own digital personal assistants. As a user you can ask your assistant to book a movie ticket, make your dinner reservations, wake you up at 5 am in the morning, and much much more, on chat itself.
We have a team of dedicated in-house assistants who are available 24×7 to support and help the users complete these tasks.
This is why we built Athena!
Athena, named after the Greek goddess of Wisdom (we are all Greek mythology Geeks here), is Haptik’s web chat tool used by our assistants to resolve queries and complete user’s tasks. We power Athena with all the information and tool integrations that we think can make their job quicker and convenient.
The problem with any real-time application is that things change every second. Every time a message was received we had to:
- append the messages to the thread
- update the counter of messages
- change the state of the chat
- bind new event listeners
We ended up doing heaps of expensive DOM manipulation on our app for every incoming message. To top that, our codebase was already bloated. That was the problem of using a framework like jQuery which is amorphous and unstructured, with a tightly coupled architecture. We knew we had to decouple the frontend from the backend to make it scalable.
We evaluated a bunch of frontend frameworks, with Backbone-js, Angular-js and React-js being the front-runners and finally chose the latter.
Here are few things we loved about React:
- One way data-binding
Unlike most frameworks, React uses a one-way data flow mechanism. React does not let the HTML to update your component. You can only use triggers and events to change the component
This is our React Message Composer component. As you can see the <input> field can only be updated via the render() function and not by the HTML itself. It can only be updated using events, in this case the onChange event.
- Component Reusability
Because of the modular nature of react, it is very easy to use and reuse the same components throughout your app.
The Message Item is a react component which is re-used over iteration of the message list.
- Virtual DOM
Watch this video to learn more about React’s Virtual DOM. (source: youtube/LispCast)
Note that React is just the View part of the architecture. We use Flux by Facebook which complements React’s unidirectional flow. But, more on Flux in future posts.
Facebook announced React-Native last year, which is their framework for making hybrid native apps for iOS and Android. Since then many apps on both the stores have started converting from pure native to hybrid models. React is certainly a framework you should keep your eyes on!
If you’ve had an experience with React and would like to help us build at Haptik send in your profile at firstname.lastname@example.org and join the react team! 🙂
P.S: If you want to connect the dots on this post, simply Download Haptik & you’ll know what the hell we were talking about.