It’s been a while since the last Bitbar UI Update blog. For the first time in a few years, I got the flu and spread me completely on the shoulders. Fortunately, I’m on my feet and decided to write a different post today. I looked at our repository and realized that it’s been a year since the introduction of Vue.js to our Bitbar Cloud UI design. This is definitely a great opportunity to look at what we have achieved with the new UI framework in the past year, what lessons we have learned and ask ourselves: Was it worth it?

I have probably answered that question, but it would not hurt to write again. We were looking for a tool that would help us replace our proprietary two-way binding system, but on the other hand it will be light and will not put a heavy technological burden. Angular.js was eliminated at the beginning. We did not like the HTML code, which Angular left visible to the client and above all the huge overhead of the structure’s requirements. It was not for us. We were looking for something fast that would allow us to iterate and smoothly move from one technology to another. We also looked at other frameworks – e.g. Ember, React or Meteor. But we fell in love in Vue.js 2.x. It was small, the guide was clear and rich, and in addition was devilishly fast.

Do not kid yourself – Vue.js was not and is not a magic wand. We knew that some of the code would have to be rewritten, but mainly the part responsible for the presentation – the logic layer in most cases was unchanged (although of course it was an opportunity to review the code and see if we can improve anything). However, after writing the appropriate wrapper, we were ready to start our main assumption – a smooth transition from the old technology to the new one, in such a way, so that it’s as transparent as possible for our customers. And I want to say that in my opinion Vue.js proved better than we expected. Yes, there were more changes than expected – e.g. because the very foundation of Vue.js is based on working on a virtual DOM – and this forces the change of thinking and approaching to a given topic.

But these changes only came to us for good! We came mainly after two-way binding, and in fact it turned out that Vue.js helped us solve a completely different problem that we did not think about at all: the unification of components.

You know the situation when you go to the store for butter, and it turns out that you’ve come across such a promotion in the store that you cannot pass by it indifferently? That’s how it was with us. As I initially wrote – we mainly wanted to replace our proprietary rendering system and, among others, binding data. And with this in mind, we chose Vue.js. In retrospect, binding data is currently in second place for us. The real ace in the sleeve are custom components. It is such an incredibly powerful tool that I would like to detail more in the coming blog posts. Components not only provide data encapsulation, but above all, unification. No more copying the code. With searching for places, where the same logic occurs. Fixing bugs in 10 different places. Vue.js has contributed to the fact that after a year of work, our UI is more unified and standardized. Because we know that if we will use this component, then it will work like that, look like that, behave like this, etc. Yes, definitely custom components is what I love most in Vue.js.

For a year of use, there were many places where I stopped and pulled my hair out, because I didn’t know why it works like this and not otherwise. In 95%, the Vue API documentation came with help. I should really write 100%, but I could not find all the things for the first time. I was looking for answers to the questions in the section in which I thought I would find the answer, but it turned out that some really important hints were in a completely different place, or as an example code somewhere else. But these were probably two such cases. After all, the documentation is really great. And if you still have problems, you can always:

I have been registered as a Vue.js forum user for a year, but I will come to that later. Therefore, I received a regular email with a summary and statistics. Conclusion? The community and interest in Vue.js is still growing! Hurray for them!

Initially, we used Vue.js exclusively in the Admin Panel. We were not sure how the new framework will work in the field. We were apprehensive at the beginning. Therefore, we preferred to start with small elements first and gradually – step by step – do more and more things. The first important event was to write a new method of generating a widgets frame – i.e. this element, where the title of the element appears, buttons on stripes, etc. It was fascinating to see how it all comes so … naturally, gradually. There was no sudden revolution. It was just time to show that before we do it, we have to move this and that. So we did it gradually. Transparently for users and probably even for us. Our fears began to decrease. The problems we had with our system disappeared as we inculcated Vue.js. These were signals for us that we are on the right track, that this is a good course, that it was a good choice.

Another important milestone of introducing Vue.js was also on the end-user side. Let me be honest, that I had some fear, but as before – unnecessarily. Vue.js has been always behaving very stably. An interesting fact is that the production version of this framework “forgives” more than the developer version, for instance, that it could forgive us mistakes we did not notice – it did not display errors in the console or did not stop the rendering process. However, after running the same code in the developer mode, it turned out to be where the error is. The nice thing is that Vue.js also suggests changes (aka Hints). For example, assigning a variable in the way is not correct and providing a link to the documentation to understand what exactly it is about.

The last important breakthrough was rewriting the layout of the site. Probably everyone noticed not only changes in appearance, but above all speed. From my perspective, once again I was amazed at the amount of work I had to put into it. I do not want to lie, but it seems to me that we removed about 10 files in this process. Those turned out to be completely unnecessary, because Vue.js repaired us or “forced” (but in a positive sense) a different approach. In any case, this has unlocked new possibilities and allowed us to overcome the problems with which we would have to fight the old way.

I can proudly announce that we are already half way through! We have rewritten over 60% of the system. Looking at the fact that it’s only been a year and looking at our resources, I must say that I am really pleasantly surprised. If someone told me a year ago “Marek, in the next year the majority of the system will be in Vue.js” I would not believe it. And yet! I think, that this is another proof of how this framework is flexible and can adapt to the needs of the user. This is the way how the framework should be  – it is a tool that should adapt to the conditions. If the developer must first demolish the house to use the new tool … well, then in my opinion something is wrong.

Shortly: Yes, yes and again yes. After a year of using Vue.js not only professionally, but also privately, I see how my productivity has increased. I do not have to worry about many things anymore because I know I have a tool that will do it for me. And I can focus on really important things – a good design of the system and logic that will drive it. I think, that many people still do not realize that Frontend Development is not just “HTML and CSS”. JavaScript is not the same language as it was 10 years ago. That is why it is very important to optimize time – to have more time resource for more important stuff. And one of the components is the selection of the right tool. From my perspective, I can safely recommend Vue.js. In my opinion, in good hands it will be perfect both in a smaller house design and in a bigger project – like our UI. Give him a chance, and I’ll bet you pleasantly surprise!

Hey! Do not forget to check our mobile device cloud in the same way – I think that it will also surprise you with its power! 🙂

See you later!