After spending some time exploring Angular, I immediately realized that the learning curve will be steep for me. I found that although the tutorial on Angular website makes sense to me and seems approachable, I was intimidated to write my own code for my side project. Plus I felt too much work to learn TypeScript from scratch for a side project, after all using Angular without learning Typescript does not make much sense and could make things more challenging. A friend who has used both frameworks at work suggested that I should probably start with Vue.js as it’s more friendly to beginners and it would make more sense to me. So I listened and switched to Vue.js. If you look at the code below, you will see the differences immediately and you will probably find which one is more preferable at your skill level. Additionally, my web development experience is pretty limited as all I learned about it came from CS 290, and Vue.js uses JavaScript and templates were written in HTML which are something I’m already familiar with, so I was happy that I can read and understand the code that written in Vue.js and take what I learnt from tutorial and expand it. Similar to building templates using bootstrap, I found I can build templates using Element UI. Element – “a Vue 2.0 based component library for developers, designers and product managers”(source). I can build a table, a form, or change a color, style in about a second. So I think what matters to me when it comes to learning a new framework is that first I can pretty much understand the logic behind the code. I can read the code and know why it’s written this way. So right now my goal is to build a simple user interface, an e-commerce website. I’m excited to dive into it and I’m sure I will have a much deeper understanding of the framework while I’m using it.
Vue:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Output: Hello Vue!
Angular:
<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});
Reference: https://v2.vuejs.org/v2/guide/?redirect=true
