I’ve been working with AngularJS for the better half of three years now. I was attracted to it’s opinionated form and how easy it was to setup a simple MV*, even though there was a pretty steep learning curve. I’ve also worked in BackboneJS and of course everyone’s favorite go to library, yet non-mvc, jQuery.
Even with dabbling some in Angular 2/4 and eye opening Typescript, not to mention Ionic Framework which is based on Angular 4, I wanted to see what else is out there. Over the years there have been many “battle of the frame works” in which everyone was vying for a spot to attract the eager developer. I still remember attending the inaugural Fluent Conference in which there were at least five different frameworks in multiple different talks.
I’ve read up on React and like how it has pushed Angular to get more component like, but have never actually used it. I could have easily jumped into researching it more, but I wanted to take a step further and try something else that I have heard a lot about — Vue.js
Skimming the surface through examples
The way I learn technology is by reverse engineering. I like to take someone elses code and figure out the how the whole was put together by the parts. I took a similar approach to look into the surface of how Vue.js is used.
Todo MVC is a great go to spot to learn a new framework. It showcases multiple frameworks to achieve the same outcome, a todo app. I started here to look at Vue.js and how it was put together. While the approach was very simplistic, I felt that there was a lot more that I could learn. So I looked elsewhere, outside the docs of course, and found another Todo App tutorial on Scotch.io.
Note: I found this tutorial to be riddled with syntax errors and gaps in transferred knowledge, but was able to get through it as I’ve had experience with other frameworks that have a similar syntax and setup. Luckily, the author was open to comments left and subsequent edits were made.
Tools of the trade
Every framework has nice items or nuances that come packaged with it, these are a few of the things that stood out to me, other than it being super light weight.
CLI Tool
I am a huge fan when a framework or language comes with a Command Line Interface (CLI) tool. I’ve used the Angular CLI for projects and glad to see that Vue.js also has a CLI. While the Angular version of the CLI allows you to generate the different types of items that Angular needs outside of base setup, Vue.js CLI only does a base setup. I think this choice fits Vue.js perfectly in that the framework is pretty simplistic in use compared to the overhead that comes with Angular.
Its own file setup
One item that I really enjoyed seeing was what a .vue file allowed you to do. It’s markup for separation of concerns made perfect sense and helped organize an individual file. It also helps solidify the importance of making small components.
It allows you to include all three parts that make up a Vue component. The Vue runtime takes the code you create in the file and converts it to a ES2015 setup.
1 | <template> |
2 | <!-- HTML goes here --> |
3 | </template> |
4 | <script> |
5 | // JavaScript goes here |
6 | </script> |
7 | <style> |
8 | /* CSS goes here */ |
9 | </style> |
I use VSCode also, so having snippet builders via the extensions helps explore the options very easy. Each code block allows you to write in some other pre-processor as needed too!
It’s only about the “views”
With Angular, you get everything. This means you get a very opinionated, highly organized full-on framework. With Vue.js, it is very light weight as it only deals with components, or the views.
Need to talk to a back-end server? Sorry, you need to add another library such as Axios or even cringe jQuery’s ajax setup.
Don’t get me wrong, this doesn’t downgrade Vue.js in my mind. It is just a whole new paradigm that reminds me of when I used Backbone to tackle things. Sometimes it is refreshing to have a clean slate and make my own decisions on what I need.
So will I stick with it?
I ended up pushing my trial Todo App up to a GitLab repository. As you can see its named aptly pluralized tutorials. My plan is to take a look at other frameworks in the near future to see how they work.
I will say though that Vue.js has intrigued me enough to continue to work with it. Possibly investigating the use of Typescript with it and of course testing.