# Embedding Teamwork Chat

DevFeed: [Embedding Teamwork Chat](<https://devfeed.tech/articles/embedding-teamwork-chat-35097.md>)

Original publisher: [Read original article](<https://engineroom.teamwork.com/embedding-teamwork-chat-7a6910a3d535?source=rss----cea4eecd5960---4>)

Author: Dawid Myslak

Published: 2017-10-23T15:52:56Z

Content type: article

Language: en

Sources: [Teamwork](<https://devfeed.tech/sources/teamwork.md>)

Topics: [Vue.js](<https://devfeed.tech/topics/vue.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [Development](<https://devfeed.tech/topics/development.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [Library](<https://devfeed.tech/topics/library.md>), [flux](<https://devfeed.tech/topics/flux.md>), [ESLint](<https://devfeed.tech/topics/eslint.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>)

Tags: [chat](<https://devfeed.tech/tags/chat.md>), [development](<https://devfeed.tech/tags/development.md>), [eslint](<https://devfeed.tech/tags/eslint.md>), [flux](<https://devfeed.tech/tags/flux.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [vuejs](<https://devfeed.tech/tags/vuejs.md>), [vuex](<https://devfeed.tech/tags/vuex.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

The article describes how Teamwork.com embedded Teamwork Chat Project Rooms directly in Teamwork Projects. The team chose a new component-based implementation and used Vue.js, Vuex, Webpack, modern JavaScript, ESLint, and reusable Node.js modules while considering performance.

## Source excerpt

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. Project Rooms in Teamwork Chat.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. New technology stack for embedded Teamwork Chat. Luckily, during the development of an ex