From the Desk of the Developer: One Year After Using Vue.js – Was It Worth It?

综合技术 2018-03-13

Cześć!

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?

Why Vue.js?

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.

Smooth transition

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
.

I went for butter, came back with the new TV

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.

Huston, we have a problem

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:

  1. ask on the official Vue.js forum (in my experience I can say that there is always someone to help)
  2. dig into GitHub Vue.js repo, to understand why something works so, and not otherwise) (no, it does not bite – I know, because I tried)

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!

Milestones

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.

How far still?

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.

So was it worth it?

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!

您可能感兴趣的

30 多年的软件经验,总结出 10 个编写出更好代码的技巧... 30 多年的软件经验,总结 10 个最佳妙招。 那么,何以敲出一手好代码? 好代码可以定义为易读、易懂、易调试、易改,最重要的还要少缺陷。显然,要想敲出一手好代码,是要花不少时间,但这在长久来看是有意义的,因为你可以花更少时间及精力去维护和复用你的代码。 事实上,我们可以将好代...
10 Non-C++ Book Recommendations for C++ Programmer... So you’ve learned enough C++ to function. You’ve read a bunch of the usual recommendations: Meyers , Stroustrup , maybe even Alexandrescu an...
Vue CLI 3: A Game Changer for Front-End Developmen... Vue creator Evan You's recent conference keynote didn't mention much about new features for Vue, instead focusing almost entirely on Vue CLI 3. ...
程序员:感觉技术停滞时,该怎么办?... 在旧文《技术方向的选择》的末尾,我写道:“停留在原地纠结,什么也不会改变。”。当做出了选择就该出发了。为了习得一门技术或技能,我们需要不断地练习,但如果一直在练习,却感觉不到进步,那么再努力的人生,也是枉然。 理论 关于习得甚或精通一门技能,最著名的理论如今恐怕是「刻意练习」...
各编程语言对应薪资多少?美国编程语言薪资排行一览... 根据你熟悉的编程语言找到工作的可能性有多大?以下是来自 美国机构 的工作趋势: 可以看到,C,SQL,Java 和 JavaScript 在招聘启事中经常被提到,而 C#,C++ 和 Python 也是表现不错的语言。 另一方面,如果你的目标是在创业公司工作,那么可能 美国机构 的...
0
JSFeeds

责编内容来自:JSFeeds (本文源链)
阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。