Monday, January 28, 2019

A simple chat room in Vue.Js

Vue.Js is awesome, seriously.

I've used other JavaScript libs throughout the years on many and different types of projects. As a long time Scrum master and developer, I got used to do a retrospective after each project completed and that includes a technical review. In my experience, when compared to Vue.Js, other libs are over-complicated, slow or verbose.

But i will try not to convince you. Just Google DDG why people love it. I just want to provide a small example to demo how elegant and simple Vue is so I built a very simple chat room frontend using it.

Oh yes, the example uses Bootstrap and a few CDNs. You can find the source code here. It's one simple html page. Just download and open in your browser.

The source code

It took me a little more then 30 lines of code to build this frontend. Wow, that's simplicity.

Sending Messages

Of course, we would like to send messages to the chat room. It's as simple as running the code below on your Chrome Firefox Developer Tools (F12) console:
app.messages.push({name: 'Some Name', msg: 'Test123', tm: (new Date()).toLocaleTimeString(), color: 'red'});
See that new messages are auto-added to the room on the bottom with very little effort. Simple, clean, elegant. That's Vue.

Future Enhancements

Out of the box, the code above simulates a chat room frontend for just one user. Yes you can still hack it trough the console to add other users (by pushing to the participants array) but it's not usable yet. One interesting exercise would be enhancing the above code with WebSockets so that multiple users can connect at the same room and chat trough it.

I already have that code written in SignalR Core and a ASP.NET Core web app as the backend but I am currently refactoring and will soon open source it. Stay tuned.


Source Code

Vue did all the work.
All the rest is here:

See Also

Building a dynamic table with Vue.Js and Bootstrap 4
Copying data to memory with Javascript and jQuery