Fast Build Your App with Vue.Js

Tue 03 July 2018

vuejs

I used to refuse front end development. I knew HTML, I knew CSS, I knew Javascript, but I didn’t know how they work together. Even later I had the knowledge of jQuery, of CoffeeScript, of AngularJS, I still didn’t know how to build an app from scratch before long.

Recently I had a look into VueJS. I tried to use it to build up a simple web application. It did a good job and then I became a fan of it. In the whole development process, I took 99% of my time on the business logic, other than maintaining the framework NPM dependencies.

What is VueJS?

Vue is another modern web front-end framework which has the similar concept of MVVM with Angular or React. Vue is targeting lightweight and progressive and it made it. You can build modern single page application without having too many libraries or build scripts or other overheads.

Comparing to Angular 1 & 2, I have to say Vue.Js is far more friendly and easy to individual developers. It would be the best framework to start a small project or prototype an idea.

When I started the learning guide, I spent less than 1 hour to have an idea of how it makes the view model works. Then I started building an app. Vue simplifies the communications between HTML and JS. It fixed the biggest pain point of web development.

Hello World

As one line of code is worth a thousand words, let’s have a look at the Vue’s Hello World:

<html>
<head>
    <script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="app">
  {{ message }}
    </div>
</body>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }}) 
</script>
</html>

The div in Html defines the container of the Vue app. The instance of Vue declares the view-model of the app. By giving value to the view-model, the UI (html) gets updated accordingly.

Pretty simple, right? If you like, you can open Chrome DevTools and update the view-model’s value in the console. app.message = "Hey Vue"

Highlights

I’ll skip copying the simple guide from its website. But I’ll give some highlights here.

  • Single File Component. Single File Component means to compose HTML (template), Javascript (code) and CSS (styling) for one component into one file (.vue file). Each .vue file is a highly cohesive component. In addition, you won’t have to mess your project folder with a huge amount of files.

Single File Component

  • Instant Prototyping. With a .vue file, you can start your new app in no time by using the vue-cli tools. It auto downloads required references, build and trim, then output as a minified html and js files. You can choose either integrate the outputs with your existing project or put them on a web server as a static website. No pains about configurations.

  • Vue DevTools. Install the dev tools extension in your Chrome. Then every time you load a Vue app, you would be able to view the virtual structure of the app.

devtools

For those of you who are interested in the differences between Vue and Angular and React. Take a look at the full list here. It is highly recommended to read this. Not only for the difference but also for the key features of each framework.

PS

I still remember how frustrated I was last year when I first time learned Angular 2.

Initially, I struggled from the bunch of ng commands from its own ng-cli. I had to carefully call the methods without knowing much what actually happened behind the scenes. Once a very trivial error happened I need to either started over again or spent heaps of time to google the solution.

Angular is using Typescript by default. So it became another overhead to get used to the syntax, as well we figure out how to transcompile to javascript.

On the other side, if you develop with Vue, you don’t need to worry about them at all. Write a .vue file, and run with vue-cli. That’s it! Starting a web app has never been so easy!

Category: Web

Tagged: ef

Comments