[P1] VueJS – Framework comes from minimalism

1. Single-page application (SPA) and Multiple-page application (MPA)

With Multiple-page application (MPA) websites will be rendered with server-side rendering, which means when the client makes a request. The server will receive this request, process the business logic, finally render a complete html page and then return it to the client side. At this time, the client side (usually web browser) will read these html files and display them in the browser.

With the MPA model, it can be seen that the main processing is taking place on the server side and the client only plays the role of displaying the data. Moreover, every time a response is received, the entire page must be reloaded with js, css, image files, … Also, almost the front-end and the back-end are almost on the same side, love There must be a close link between these two sides. The SPA model was born in part to overcome these shortcomings of the MPA model.

Single-page application (SPA) is the mechanism when the client sends the request for the first time, the server will send us a single index.html page, for the next request, we will call the api from the web server by AJAX , then based on the returned results, we will render a part or the whole page with JS. At this point, the web server will only play the role of processing logic, business or getting data from the database side.

The SPA model has almost separated the front-end and the back-end, each side can handle their work separately, the browser instead of just displaying the view as before, now plays an additional role in processing response from the server and re-render the page if necessary. Most of the resources that are downloaded on the first request do not need to be reloaded many times, so it basically increases the performance of the whole app. However, the SPA model requires quite a lot of client-side processing, js, callback, ajax, …. From here, JS frameworks were born to assist developers in front-end processing. -end.

2. Introducing VueJS

In 2014, Even You – an engineer who worked at Google – released the first version of VueJS. At the moment, VueJS along with Angular and React are the 3 frameworks used the most by the community. According to wikipedia:

Vue.js, referred to as Vue (pronounced / vju /, like view in English), is a flexible framework used to build user interfaces (UI). Unlike monolithic frameworks, Vue is designed from the ground up in a way that allows and encourages step-by-step application development. When developing interface classes, users only need to use Vue’s core library, which is easy to learn and integrates with existing libraries or projects. At the same time, if combined with modern technologies such as SFC (single file components) and support libraries, Vue can also easily meet the need to build single page applications (SPA – Single Page Applications). with high complexity.

In MVC model, View and Model communicate with each other via Controller. From the View will not know who the Model is and the Model does not know who the View is. When needing any data, the View will call the Controller and from the Controller will find and manipulate the appropriate Model to handle the business and return the View through the Controller.

VueJS is a framework born for user interface development, playing the role of View in MVC model according to SPA concept. Vue is quite light and the performance is also quite good compared to the common ground of the frameworks and also easily integrates with projects via CDN or NodeJS. Vue supports building virtual DOMs, helping to interact with html objects using JS via <template> , routing through vue-router or managing state in vuex .

Right at the time of writing, VueJS has released alpha version of Vue 3 with a lot of new features and significantly improved performance. However, Vue 3 is still not stable, so in this series I will mainly talk about Vue 2. But don’t worry, basically, the syntax of Vue 3 and Vue 2 versions is not too different. If you are familiar with Vue 2, you will also easily learn about Vue 3. You can learn more about the documentation of the two versions of Vue here: Vue2 and Vue 3

3. Installation

First, with any JS framework, we should also install NodeJS, you can install NodeJS here . NodeJS is a platform that supports running JS directly on the machine instead of just running in the browser. The installation is quite simple, just next next is okay. We run the following cmd command to test NodeJS on the machine:

To support creating Vue projects, we will install Vue-CLI. Learn more about Vue-CLI here

4. Create a Vue project

To create a new project we type the command vue create <project name>. Example vue create demo-vue . In the options we will choose Default Vue 2

We just go to the project we just created as shown in the picture, execute the following command yarn serve or npm run serve to run the project. Open http://localhost:8080 to check.

Done, we have successfully created and run a VueJS project !!!