Why Vue Is So Awesome đ
06 Apr 2018âŚand Angular is not.
Disclaimer - These are my personal thoughts AFTER using both of them to solve real world use cases. Nothing too fancy but nothing too simple.
I have been using Angular 2( or 4, 5 âŚ), now called just Angular, for more than a year now. I donât hate it but I donât like it at all. Not my thing. At work, I am still required to use it but thatâs about it. If I am asked to choose a framework to build something new, it wonât be my choice.
I liked Angular JS( Angular 1.x ) a lot. I know the performance problems it had( has ). I was THE person in my company who was excited about the next iteration(âŚturned out to be an incarnation) of Angular to see what the team comes up with. Alas, I am disappointed.
If you are from India and have heard about the book, The Rozabal Line you would know that itâs particularly not a good read. In fact, I could never finish it up and a piece from the comments for the book kind of sums up my feelings about it.
âŚthis has been a novel which made me resolve never to buy a novel just because u liked another one from the author - âŚread more;
Thatâs how I feel about Angular.
But this post is not about Angular. Itâs about Vue. And itâs AWESOME. In my front end life, I have tried many other frameworks, libraries and I am confident that I never liked anything as much. Itâs one of those tools you always wanna have and it makes you feel super confident.
Why?
No Terminology Bloat
I never told why I never liked that book. I didnât because it was too hard to follow. Every second page a new character would pop into existence out of nowhere. Itâs hard to stich the story together. Itâs impossible to understand whatâs important.
This is one of the biggest areas where Angular sets me off and Vue shines. You know JavaScript? A little bit of HTML? Great! You can get started right now.
In Angular, the eco system is built around( primarily ) TypeScript. The API surface is just too big for anyone who wants to start. You gotta know what an NgModule
is. Oh itâs different from the ES Modules. You gotta know Decorators. Classes etc. Even before you get to that Hello World, thereâs lot you need to understand, even if at a surface level. It has steep learning curve which I am going to discuss in a minute.
In Vue, a plain olâ <script>
tag, a function and an object can get you to that Hello World. Unlike Angular it doesnât ask you to already know a ton of stuff. The barrier to entry is negligible.
Example -
<!-- From the official Vue Guide -->
<div id="app">
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
On Point Documentation
I think we all agree on one thing. A great documentation makes the developers feel right at home. Whatâs better than a great documentation is a documentation that focuses on examples, on point, with code and thatâs it. It knows when to move to the next topic. Your examples shouldnât need to depend on metaphors.
If you have ever watched Lynda.com tutorials and Laracasts or Egghead videos you would know that the latter two are great choices. Why? Their videos are short, on point and less demanding.
The Beautiful, Elegant API
Have you looked at Vueâs API? I think itâs easily one of the best APIs out there. Hereâs something I totally agree with.
Good API design = making the simple case easy and the complex one possible.
— Lea Verou (@LeaVerou) May 13, 2015
Just like good UIs. After all, an API *is* a UI, just not a GUI.
Vue totally nails it. Itâs intuitive. It describes what it does easily and has delightful tiny things that make you love it. Here are some examples.
Creating A Vue Instance
new Vue({
data: {
// Data goes here.
},
methods: {
// Methods go here.
},
// Need some computed properties? Yeah you guessed it right.
computed: {},
// What about filters?
filters: {},
// You want to watch a property?
watch: {}
});
// you see where I am going with this?
Now that you know this, you already know most of the components API. Hereâs an example
let MyComponent = Vue.component({
name: 'my-component',
template: `<h1> Hello World! </h1>`,
data() {
return {};
},
methods: {},
computed: {},
filters: {}
});
The only things that you need to know areâŚ
- A component requires a
name
so you can use the component like<my-component></my-component>
- A template so your component can render a piece of DOM.
data
becomes a function that returns an object. So each instance ofMyComponent
can have separate data.
Thatâs it. Rest of the things work exactly how we have seen while creating a Vue instance.
I also like how Vue team has gone ahead and added little things that may seem unimportant at first but over time, help you to be productive. Here are some examples.
<!-- Delightful event modifiers. -->
<!-- Wanna prevent default when the event fires? -->
<form @submit.prevent="onSubmit"></form>
<!-- How about stopping the propagation? -->
<button @click.stop="onButtonClick"></button>
<!-- Binding an event just once? -->
<a @click.once="doThis"></a>
<!-- How about something should happen when you press Enter? -->
<input @keyup.enter="submit">
<!-- Want the number input to give you a real number? -->
<input type="number" v-model.number="age" placeholder="Your Age">
<!-- The `age` property in `data` will be a number instead of the default string -->
Read throughout the template syntax and youâll see that the API is written to be extremely intuitive and readable.
I personally feel that any APIs should be made so simple that they stop you from your recurring visit to the documentation. You shouldnât need to think too hard to figure this out. Vue checks the right boxes there.
Progressive Nature
One of the biggest reasons that I donât find myself to be liking Angular a whole lot is beacuse itâs built primarily for enterprise apps / large apps in mind. The point they miss is that most developers start small. They fail at things and they require help.
Hereâs a quick challenge. How fast can you create a reduced test case demo for a problem in Angular and share it via JSBin or JSFiddle or CodePen? Try that!
Error Messages
Say, in your template, you used a property that doesnât exist on the data
section of your VM. If you are using Vue in development mode, youâll see great error message along with a link to the documentation to read more about that.
Vue is full of examples like that and except for a few, I havenât found an error message that adds to my confusion.
If you remember Angular JS(1.x), it used to include link to docs too. In Vue, itâs just way better.
Try finding your way though the shiny new Angular with the entire stack trace and 30 of them being traced at zone.js
.
Extra Help When Needed
So you are working on an app and now you have made a deployable version of it. You have used it with the local server and it now has to work with nginx.
Youâll suddenly realize that the HTML5 History mode you used during routing doesnât play well anymore. nginx needs to know how to do handle that so vue-router can work as expected.
This is a pretty scenario and folks who make Vue know it. This is exactly why they just didnât end up at saying something like
âHey! If you wanna use the HTML5 History mode with these kind of servers, you have to know how to configure them. Go Google!â.
Instead, they made a specific section in the documentaiton showcasing configurations for commonly used servers so you donât have to run around.
Neat right?
First Class Support
Vue team knows that frontend development is more than just the view layer. Just like the core library, there are supporting libraries, all made by the Vue core members, to help developers accomplish most real world use cases. If you love the Vue documentation, you can expect the same level of thoughts gone into API design and documentation.
- vue-router - For all the routing needs
- vuex - Vueâs Flux like implementaiton for state management.
- vue-rx - For RxJS integration with Vue.
- vue-cli - Your one stop shop for scaffolding and developing apps from tiny to large enterprise ones.
- TypeScript Support - Vue has official typescript support if you are comfortable with it.
- vue-loader - So YOU can use Single File Components and WEBPACK can do itâs magic to figure out different parts of
.vue
files.
Try It
All in all, Vue really is a piece of software for people to understand, get up and running faster and build scalable frontend focused applications.
To me, itâs the API and the documentation that stands out than anything else. As Lea Verou have said and emphasized on a million times.
APIs should make simple easy and complex possible.
Vue delivers on this and probably thatâs why it has been able to pass the Early Adopters phaze in the lifecycle of a product.
Give it a try and I am sure you wonât be let down. đ
comments powered by Disqus