Embedding Teamwork Chat
A couple of weeks ago we introduced a new feature in Teamwork Chat called Project Rooms.
Project Rooms are a great way to create dedicated real-time communication channels for specific projects. Our next priority was to take this feature even further.
Embedded Teamwork Chat
Currently Project Rooms can be used inside Teamwork Chat, but our goal was to make them accessible directly in Teamwork Projects. To achieve this, we considered the following two options:
- Decouple only the important bits and pieces from the existing codebase of Teamwork Chat and deliver them as a standalone module.
- Create a brand new solution that follows component based architecture which could potentially be the future core codebase for the next generation of Teamwork Chat.
After looking into this for a while, we decided that the second option will let us deliver a better quality solution. Our main concern with decoupling the existing codebase was the fact that we didn’t use a component based architecture in the existing client. Unfortunately at the time of the initial implementation of the app, Knockout.js components weren’t a common choice.
New tech stack
Earlier this year at Teamwork.com we made the decision that all our development teams will start using Vue.js as the main front-end framework. We also started working on creating a new internal build system based on Webpack, which allows us to use the latest front-end tools and makes the development process significantly more productive.
Together with Vue.js we started using Vuex, which is a state management library inspired by Flux architecture. Another big change for us was dropping CoffeeScript and replacing it with the next generation of JavaScript. JavaScript ES2015+ comes with great new features and syntax, but also offers incredible editor support and great ESLint that makes our code more consistent across the team.
Luckily, during the development of an existing Teamwork Chat client we split some parts of the code into Node.js modules and we were able to use them with our new codebase.
Sneak peek
As a result of a few weeks of intensive development, we’ve been able to implement the core functionality of the Teamwork Chat conversation component.
Taking care of performance
Embedded Teamwork Chat will be an addition for Teamwork Projects. We spent a lot of time making sure that we won’t impact its performance.
Starting with a brand new codebase allowed us to improve the implementation of particular parts of Teamwork Chat. We were also able to use latest Web APIs which resulting is a significant improvement in app performance, for example thanks to Intersection Observer API our infinite scroll feature is now much better!
Putting all pieces together
Currently, the Teamwork Projects front-end is built with Knockout.js, so we had to find a way to integrate our new code with the existing product.
We decided to make it available as a private Node.js module and we wrapped the entire Vue.js app with the Knockout.js component, so it can be easily included and used inside Teamwork Projects.
Show me the code!
Including embedded Teamwork Chat is just as easy as that:
<chat-project-room params="projectId: 12345"></chat-project-room>As you can see, we simply follow the Knockout.js components syntax and pass the project ID value, that’s it! Our module will do all the hard work: it will check if the given project has a dedicated Project Room enabled, and if it does, it will bootstrap our Vue.js app inside — voilà!
Combining Vue.js and Knockout.js together
Here you can find the code snippet (simplified version) of our solution for integrating Vue.js and Knockout.js together:
We‘re very excited about Embedded Teamwork Chat and we aim to deliver it by the end of this year!
If you have any questions, leave a comment below.
If you like the sound of working at Teamwork, get in touch — we’re hiring!
