How I started using Vue
My Story with Vue started about two years ago, I was a noob at the company and in need to show some progress and take some space with my new coworkers.
Background
The System that we were working was built in Flash on the front and PHP at the back, and we all knew that at some point we would need to change our stack to something more modern. We started to look for a technology that fits on our need with a small learning process, the first choice was Angular 1, it was free, almost all the team knew and it would be pretty fast to start, but we all read that the Angular 2 was coming and if we took we will need to rewrite the App to Angular 2 or assume that we will start a new app with an old tech. We searched for backbone, React, jQuery and other libs we could work with, but every time we chose a co-worker complained.
After some “battles”, we took Ext.js as our Framework and started rewriting our legacy system. With 3 months after we started, I read about Vue on a Blog Post on Laracast, and at that time I really enjoyed the Library and the way it faces the web component stuff. So, how we say it was “Too little too late” for me, I’ve put the Vue on to my “knowledge box” and keep on going with our choice.
The Vue Rise
One Year Later, I really abandon the ideia of changing our frontend tech to Vue and I was very unhappy (even that I was just working with PHP) with the decision we took one year before. that’s the point that things start changing. After a long day of work on a cold night of August I was closing the company and going home, and I realized that someone were still working on another room, so I went there and start talking with this strange developer that I almost never had a conversation with. He told me that he already built a App with Vue.js for another company and said that it was great to use it, and he had some trouble to start using in our company too. After that night we started talking almost every day about Technology and mostly about Vue and its ecosystem, it didn’t take too long and I was studying every day Vue and all the new stuff coming to the frontend stack like webpack, browserify etc etc etc.
A couple of months later, I was pretty confident for starting a new Real App using my brand new frontend stack. Sadly it had no space on my company to start it, but there was a light at the end of the tunnel, some coworkers weren’t ok with ExtJS too, and after some discussions, we all decided that we could take another technology and restart the software from scratch (We could slice our monolith in various apps and services so we won’t lose the progress with the other Framework), that was the best chance to prove that Vue will be the best choice for our future apps. (I’m not comparing Ext and Vue, they have different approaches as Ext is an RIA framework with lots of components already built and Vue is a Library to build web-components easily).Choosing the Right one
We Started a Group that will look at the main frontend choices, and we’ve decided to study deeply three of then React, Vue and jQuery (We had a team that started a new app using it and we could use their knowledge). Here is a little resume that we made for each one:
React
It was awesome to see a library that has basically the same motivation that Vue has, and it’s very robust and came with lots of things like Flux /Redux, React-Router, and other stuff to start using, what we didn’t like was the fact that it does not use pure HTML and it was almost mandatory to use it with a state management (this is what we read at the time), the fact that we would be mixing JavaScript and Jsx is very confusing. and at least, the learning curve would be higher than the others.
JQuery
As I said before we already had a team working on a different project and using jQuery basically because all team had experience using jQuery and the project needed velocity. the learning curve was very small to start with as everybody knows a little bit of jQuery, but we didn’t know if it would be maintainable as a project grows. The benefit was that we had lots and lots of plugins that would be very useful, but we still didn’t found a middle-man, actually, I had one, and we’ll see it!
Vue
Vue was the one that I already knew, worked on personal projects and it would be a natural choice for me! So I needed to show to my coworkers that I was not wrong. We all know that there is not a silver bullet but we also know that things can’t be radical, and Vue is very balanced, because it has the robust of React and the small curve of jQuery, as it works directly with Javascript, HTML and CSS, not mentioning its nice documentation! But, at the time Vue was at version 1 and its performance wasn’t as good as React (React uses Virtual DOM and Vue 1 don’t), my coworkers got a little bit nervous because we already had trouble due to the others systems.
Vue is the Chosen One
I took the performance issue in Vue 1 with very important and started to make some tests with lots of data binding to see if it will be a problem for us, but I had a great lucky at that time, because Vue 2 was recently released and one of the big changes is the performance problem, as Vue 2 uses Virtual Dom too. I remember that this chart became very famous :
Great news! Vue is the one we’ve got! After a reunion with the team’s leaders each one sad their opinion and after we all talked we decided to move on to Vue in a small project to see how it feels. I was so happy at the time that couldn’t imagine how big this choice was for my career, we were changing our Framework with a big learning curve for a library
Now we need to evangelize
The first step was given, now we need to spread our knowledge to all devs and start to make Vue a part of our tools. We start searching on the web for courses, podcasts and talks that could help us on this new challenge, so we’ve found this links and below :
Even with all these resources (and I have much more than this lol), we started a Dojo with this objective and as almost anybody knew Vue on the company I made a start presentation to show the main features of Vue and give the first step. After some Dojo Sessions, everybody was on the same page with the proposes of Vue and how much work was waiting for us. So it’s time to start a small project and see how it will work on a real project.Our First Experience as a Team
Our first project with Vue started with a team of 4 developers, but only three of them used Vue, the other one was on the server side. The project started at the end of November 2016. For my luck thing got well and all members loved Vue, the project took 2 months to be completed and while we were working, the others coworkers became very curious about how it was going. The team was sure that Vue would take a big space inside the company.
The Expansion
The first project was completed, and now we have to spread our will and motivate other teams to start using it and consolidate Vue on our company.
On this Expansion, we didn’t need too much work, because other teams members were already studying Vue and using on personal projects, so it was a matter of time. And so it was, another big project accepted the challenge and started refactoring their project in jQuery to Vue gradually, and other products of their team would be using Vue.
Now we have two teams using Vue and a lot of coworkers interested in and it doesn’t stop here, other employers that now are in other companies in the region, took Vue with them, and other 2 companies are using it too (I’m not sure about it, but the rumors say yes)! and in my opinion, everything came with our group studying the best option to work within the last year.
We need to Test
Of course, that use Vue wasn’t the silver bullet of our problems, as the teams in our company hadn’t a practice to test their projects using unit tests, this is a mistake that we’ve taken for years. So as we started the next product, we’ve put in our minds that any product should be delivered without unit tests, Testing Vue would be a challenge because it doesn’t have any big tutorial to test it or a best practice guide to test components, but we knew that using the vue init template with webpack, the project already came with all testing tools that we needed to start.
The first iterations he had lots of problems to test our components:
- Testing the DOM
- Mocking the communication with the server side
- Spying the events
That was the opportunity that we have to see inside Vue, and start taking a big sight of the whole thing. All these testing problems deserve an exclusive article in the future. Now we test all our components and everything fits pretty well as we build our product.
My opinion is that you should focus on testing your apps because it gives you a good idea of the responsibility of each component you build. When you start testing it might look an extra work, but listen to me, after you take the practice, it will look a part of the job and it won’t take too much time to test, it will look normal, so start testing today!
It’s Still rising
My conclusion is that Vue is taking the JavaScript community by its simplicity and the community itself is very active and helpful, you can find without any difficulty answers about how to build a component on your own, and a big list of components built for free. We have a repository of all awesome things built with Vue: https://github.com/vuejs/awesome-vue . The documentation of Vue has a very easy reading and it’s worth to start with it!
We are using Vue about one year, and I do not regret! Everything is going well with our projects and products. Give a chance to Vue and you will not be regret too! Thanks to my coworker that helped me in this journey, to everybody on the company that gives us the strength to keep going and of course to this amazing community that builds Vue with so much love! Thank you all!
Post scriptum
I’m sorry for my poor english, I’m not usually writing in english and I hope that this article helps people to think twice on choosing a Technology and take Vue as another option.
