Recently, during a hackathon organized by my company, I implemented a prototype application with a framework by the name of Vue.js.
Going into the hackathon, I was basically a complete Vue newbie. The entirety of my Vue experience was obtained from tutorials. This meant I had learn on the run. Amazingly, and much to the credit of Vue, I achieved a lot more than I expected. I learned how to implement components, how to properly handle events, as well as how to create some fascinating animations.
What really surprised me about Vue was just how easily it was learned by multiple types of developers. For example, I ran into my ex-roomate — an Erlang programmer with very little front-end experience — who was able to create an application utilizing Vue in as little as a week. After witnessing my previous room mate’s expedited learning process I came to the conclusion and belief that Vue can be easily learned by backend and front-end developers a-like.
My experiences with Vue obtained from my company’s hackathon definitely shed some light on the potential for utilizing Vue for your own prototyping and your own applications.
1. You don’t need to learn any new technologies
For example, Angular utilizes TypeScript and React utilizes JSX. In the previous examples you can obviously write your application without the extensions, but it definitely make your code a lot longer and much messier when you leave out TypeScript or JSX respectively.
Now don’t get me wrong. I’m not saying you shouldn’t use TypeScript or JSX. They definitely go a long ways to clean up your code — especially for bigger applications. I believe strict type systems are always good and that JSX has a great syntax to create elements.
2. Vue CLI and Vue Hot Reload Tools to Improve Your Productivity
As stated in previous sections of this article — using Vue without npm, node, or any other tools is simple enough. That being said, however, I highly recommend vue-cli.
Vue-cli is a terminal/command scaffolding tool usable in Vue projects. It provides a dev server as well as an extremely simple setup for you.
The development server also provides hot reloading, an extremely useful feature that allows your webpage to update without you having to reload your browser. All you have to do is save your code in your text-editor and bam!
Your browser automatically reloads allowing you to immediately see your changes live. Let’s say you’re trying to update CSS to change the font-size of an element. Normally, you’ll go to Chrome’s Inspector and change the font-size on the debugger, right? Not anymore. Update the styles in your .vue file, and it immediately reflects the updates in the browser without breaking the application state.
Vue’s hot reload feature is quite useful in instances similar to when you need to change a font-size in a vue modal. Normally, updating any file takes multiple steps and then you have to completely reload the file in your browser.
3. Simple Component Structure
That being said, if I’m being honest I did not like the code structure at first because I was so used to managing component parts throughout multiple files. I wanted to run a linter script for each .js and .css file — but how it it possible to run a linter if everything is in a single file?
It turns out that I never had to, and you don’t need to, worry about simple inconveniences like this. Vue has an option to run eslint for .vue files. On top of that, vue-cli sets all of this up for you! The only other concern I had was that my text editor(Visual Studio Code) didn’t look very good on .vue files at all. To fix this problem, all I had to do was install a plugin so that my text editor recognized .vue files and was able to highlight/syntax them just like any other file! Almost all text editors will have a Vue plugin.
Since linting and file syntax are no longer an issue, why not put all of the code into the same file? It makes everything simpler. So far, I have not had any problems with this layout. In fact, it makes things much quicker. You don’t have to open extra files to see styles or scripts. Everything for the given Vue template is in the same file.
If your .vue file becomes bloated, then it’s time to think about splitting the code into another Vue component. This is in comparison to adding 3 extra files(HTML, JS, CSS) for a new component of your application. When using the amazing framework of Vue, the cost to create a new component is extremely low and simple — making your job much more easier!