For a few years now, the Framework Infinity War has revolved around three choices, each with their own strengths and weaknesses. React, with Facebook behind it, seems to be the shiny darling embraced by a good chunk of the thought leadership in the front-end world. Vue is the scrappy upstart, usage of which is trending up, but in 2019 still lacks the community and documentation that React does. And finally, AngularJS, the old hand at the framework game, developers for which are still in demand for a multitude of enterprises and projects. (There are other contenders in this battle royale, but for the sake of brevity, I'll stick to these three.)
Now, this is not one of those my framework is better and let me tell you why posts. There are plenty of those out there, the extant developer literature surely overflowing with arguments for and against. This is a tale of one company's decision to adopt, one developer's reaction to that decision, and the benefits and weaknesses you may discover should you do the same.
Vue.js is an MIT-licensed project, and as its Github page will attest, funded by sponsors. As of this writing, the latest release is version 2.5.22 and the community maintaining the project is active and robust.
In 2017, the company I work for (Twisted Rope), made a decision to adopt a Vue/Laravel stack for a handful of small to mid-sized projects. There are many reasons why this was the best choice for us; I won't dive into those deets here. However, as a dev on the team, I was a little disappointed. I, like many others at the time, had been hearing the trumpets blaring from on high about React. How it was destined to be the greatest. How demand for React developers would skyrocket in the next five minutes. How if I didn't learn it I would be left behind. And in my framework-FOMO that I'm sure you can relate to, I thought "why not React?". (Especially since I'd been spending quite a bit of my free time learning it, to be prepared when the inevitable React project came down the pipe.)
However, I drank a cup of coffee, rolled up my sleeves, and said, "Meh". And got ready to dive into Vue with wild abandon. And herein lies my first point:
1) You can adopt Vue incrementally, and learn it incrementally as well.
This was an absolute boon to devs like me, who in any given week is working on maybe ten different projects for deadline, and needs to do his investigation of new tech on his own time. The core library is literally just the view layer, and that's it. You can take any JavaScript project, install Vue, and spin up an instance in a few lines of code that can handle one single bit of logic for your project. You just want a little Vue, to mirror some text input to another element? Vue will do that, happily.
On the flip side, Vue will also gladly handle your whole project. Easily. In addition to the core, there are other supporting libraries that you can learn and install at your leisure. Vue Router, as the name suggests, provides the routing for your Single Page Application. Vuex will handle your project state (similar to Redux). And you don't even have to care about them until you need them. Scalability as your project grows? Awesome.
2) Vue can live in your current JS code, or you can use Vue components.
The core Vue instance for your project is just a constructor function with an options object. What does this mean? It means that you can pop a Vue instance into your current source code unobtrusively. Or, the instance can live in its own main.js file. Either way, it means that if your project uses JavaScript, then you can use Vue.
Vue's implementation of components, however, is for me the reason I pay homage to its gods. With small modifications to the main Vue instance, you can make your project component-based. These are files with a .vue extension, each one contains a template tag for your HTML, a script tag for your logic, and a style tag for your CSS. Every component is a modular piece of your application, and everything is organized in a coherent way. No JSX. No CSS-in-JS. No diabolical mixing of concerns. Your styles can be scoped to the current component, or global to the application. You can use sass instead. Parent components communicate with child components by way of props and children talk to parent components through events. Components provide a simple, easy-to-reason-about way to approach your project. (And, as a bonus, if you only use components, you can use a runtime-only version of Vue that eschews the compiler and decreases the size of your dependencies.)
3) The vue-cli is so chill it might as well serve you margaritas
The vue-cli is an amazing thing. Install it globally, and with one command you can create a custom project, complete with everything you need now (and you can always add what you might need later). There are a variety of templates to choose from, but the one I use most often is a simple vue + webpack setup. It gives you an SPA-setup with Webpack already configured, and a dev server that does hot-reload out of the box. All you have to do is start adding your code.
Not only that, but the new project process asks you a few questions: would you like to add Vue Router? Do you need a Vuex store? Would you like to add unit testing with Mocha? Inputting yes gets you set up with these libraries in a flash. I can't over-state how easy it is to use, or how much time it can save. Are you creating your own Vue tutorial? You can make a custom template, specific to your project, and hand that out to users to get them learning immediately. So, how about those margaritas? More tequila you say?
4) The documentation is out of this world
The basic documentation and the API docs are so good, you almost don't need any other resources. I have not run into many libraries where I wasn't scrounging through StackOverflow at the first sign of an issue, or picking my way around devdocs.io because the README in the repo wasn't enough. Vue spares you the difficulty, presenting a cursory look at topics but offering deep-dives for when you need them.
That being said, there were a couple instances where I ran into hard-to-debug issues or edge cases that the docs didn't address. This is where the hugely-popular React has a distinct advantage: the forums have proliferated exponentially, and you can probably find an answer to your questions in one of them. Vue hasn't gotten there yet -- while there most definitely are topics on SO and other sites, sometimes the information isn't as new as you'd want (Vue 2 has breaking changes that make Vue 1 docs different enough to disregard), or there just isn't a good answer to the question you have. Before you jump off the roof in despair, yes, you might not find copy-and-pastable example code, but with a little digging you will usually arrive at a solution. If you can spare the little extra time, I think this is almost better: it forces you to understand your solutions, rather than paste now, contemplate later.
5) It's really effing fast, and plays well with others
Vue 2.5 has seen some big improvements in the speed department, including upgrades and simplifications to its virtual DOM and its reactivity engine. If you're the type that loves to read the technical details, don't take my word for it -- read the change logs and see for yourself.
Already have a back end and thinking about adding a JS framework to it? Vue's got you covered. Laravel can include a Vue front end by default (one of the reasons we picked that stack). But since we adopted it, I've also used Vue with Django, Node, and Serverless, with no significant issues to speak of.
Conclusion
Well kids, there is it. As you might be able to tell, I think Vue is pretty cool. While it's true that it was forced on me in the beginning, the journey from Vue-noob to experienced Vuester has always left me enjoying my coding more, never less. And no, I have not spent anywhere the same hours in React- or Angular-based projects. So while I might sound slightly biased, I honestly cannot see a reason why Vue cannot compete head-to-head with the other top frameworks in its weight class. The arguments of yesteryear (Vue is slower, Vue isn't as popular, Vue might not be around next year) no longer apply. If you already have a firm grasp of HTML/CSS/JS, then you have the tools you need to get started, no JSX to contend with (although Vue components can be rendered with JSX if that's your thing).
Now, if I can just get @wesbos to do a Vue episode... ;)
Cheers fam, stay learning!
Top comments (0)