Basic Vue Chat — lesson for today

An introduction of chat and what you can learn from quite simple Vue.js Component

First stable version of Basic Vue Chat is here.

What is this about?

So today I released minor stable version of Basic Vue Chat, which you can check out here. In general, the component provides a group chat. It contains minimalistic window with linear gradient header, messages list with messages adding animation and input field with a button. You can add messages by pressing enter too, of course.

Chat is built in way which doesn’t care about how you will implement communication with server. The component simply intakes new messages as a prop and emits current user’s (let’s name him user X) message as an event and appends this message to local feed immediately. So, in fact, the only requirement is to not send to user X his own messages from the server.

User Interface of Basic Vue Chat.

Lesson for today

First version of component included Vuex. The motivation of adding state management to such a quite small component was simple — I wanted to keep things consistent and minimize amount of props and events in order to not make the stuff verbose. But the result was slightly different.

So yes, Vuex have reduced amount of props and events, but code didn’t become simpler. Paradoxically, it have introduced more complexity and overhead related to defining mutations and importing helpers, such as mapState or mapMutations in every component which used state — so basically in almost every single component.

Another reason was intuition that when the project will grow, Vuex may be useful. And again, yes — it may. But it’s not said that it will and that the workload related to adding Vuex to existing project will be huge — mainly because even though we potentially introduce Vuex, we probably won’t move all state to the store — lots of data, such as a title and current user’s message draft still can be easily served by props + events.

Taking all of this into account, I ended up with rebuilt code to Vuexless form. The another huge advantage of not using Vuex in quite small components is not so obvious, but it became clear for me when I tried to publish to the npm the first version of my component. It turned out, that publishing Vue components with Vuex inside is harder than you think. I mean, it’s not difficult in general, because you can create plugin instead of pure component and then it’s quite easy, but when you want to have just a single component with Vuex, then it’s harder and you have to ask user to add your component’s module to his Vuex store. I was pretty sure that when I start googling about this task, I will receive complete guides immediately. How huge was my surprise when it turned out that there is almost nothing in the web about that. It confirmed me in conviction that using Vuex for single published component for most users is not necessary.

Conclusions:

  1. Don’t use Vuex when you REALLY don’t need to
  2. If you want to publish a package — ask yourself whether you really want to force users to add another dependency (Vuex)
  3. Consider finding tradeoff between complexity caused by amount of props and events in your subcomponents and complexity caused by introducing whole state management system

Usage

Installation

npm

npm i basic-vue-chat

yarn

yarn add basic-vue-chat

Directly from repository

git clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i

Using in code

Import a component to the place where you want to use it.

import BasicVueChat from 'basic-vue-chat'

Then you can push new messages into the chat using newMessage prop and receive event newOwnMessage with new user’s message and provide (or not) some handler for this event — in the example above it’s onNewOwnMessage function.

<basic-vue-chat
:new-message="message"
@newOwnMessage="onNewOwnMessage"/>

newMessage object structure:

{
id: 0,
author: 'Person'
contents: 'hi there',
date: '16:30'
}

newOwnMessage event payload structure:

{
id: 1,
contents: 'hello',
date: '16:31'
}

Detailed documentation is available on GitHub.

What’s next?

The component is open for contribution. If you have any ideas how can we improve the component, then feel free to make an issue.

Thanks for reading!

Greetings,
Jędrzej Maczan

npm

GitHub