Last night I released version 3.3.0 of Converse.js, and as often happens with big releases, I made a quick bugfix release (3.3.1) today. The bugfix release turns off some CSS3 animations for new messages which caused degraded performance on Firefox. On Chrome the animations render smoothly, so if you’d like you can still turn them on with the show_message_load_animation config option.
What’s in the release?
Maintaining a long-term open source front-end JavaScript library almost feels like a Sisyphean task sometimes. As soon as you’ve rolled the big stone up the hill, the whole JS ecosystem, best practices and tooling changes and you find yourself at the bottom of the hill again.
This release is therefore heavy on changes under the hood, with the aim of modernizing and improving the quality of the code.
Besides that, I also spent time squashing lots of small usability bugs and on improving performance.
Converse.js now uses a Virtual DOM
Various views, such as the registration form, are now rendered by means of a Virtual DOM. I wrote a new Backbone view called Backbone.VDOMView for this, and blogged about it here.
No more jQuery
Looking at the git log, I started rewriting code to not use jQuery in January 2017.
So this change has been a year in the works. I often asked myself whether I should spend time on this and not rather do something else, like adding new features, especially since removing jQuery has taken a lot of time.
However, there were some good reasons, or perhaps motivations, for me to remove jQuery.
Before ES6 promises were available, I used $.Deferred
. However,
jQuery’s deferreds weren’t compatible with Promises, so when ES6
Promises came around, I had to rewrite lots of code to use Promises.
I used $.show
and $.hide
quite a bit, and then it turned out that
the way jQuery was doing it (by adding/removing display: none
to the
DOM element) is not good practice and also
very slow.
So I started writing my own utility functions to replace jQuery’s.
The last straw for me was when jQuery 3 came out, and half of Converse.js’s ~240 tests failed once I plugged it in.
After spending some time trying to figure out what backward incompatible changes they made and how I should update the code, I decided to instead rip jQuery out entirely.
It’s still used in the tests, but it’s no longer included in any build.
Since removing it, I’ve noticed a remarkable reduction in time to run the tests.
By looking at how quickly the tests run now, the code seems to run much faster without jQuery.
Less weight
Besides removing jQuery, I also updated Converse.js to load translations at runtime, and only the exact translation JSON file that’s needed.
Due to these changes, the unminified built has shrunk from 3.38MB to 2.8MB, and the minified build from 1.66MB to 1.2MB.
And this is while adding the virtual DOM code.
Route to a specific chat room via the URL
It’s now possible to directly link to a specific chat room, or to the registration page (instead of the login page) via the URL.
For example, the URL https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org will take you immediately to the Converse.js “Discuss” chat room, once you’ve logged in.
What else?
Lots of other bugfixes and improvements have been added in this release. For more details, check the changelog.
Notable absent from this release are some desired features, such as file sharing, message corrections, message receipts and the like.
I would love to add some of these often requested features, however I had to get the house in order so to speak, by modernizing the code and squashing lots and lots of little usability and performance bugs.
That said, Converse.js takes up a LOT of my free time and not a single line of code in this release was paid for.
If you or your company make use of converse.js, please consider sponsoring it on Patreon or Liberapay.
Thanks
Thanks goes out to everyone who’s made pull requests and bug reports over the last months.
And thanks also to the folks who hang out in the Converse.js Discusss chat room and who have there provided valuable feedback.