2021.04.06

VueJS là gì?

Minh Ho

Nếu là một lập trình viên hoặc hoạt động trong lĩnh vực kỹ thuật hầu như ai trong chúng ta đều biết, các framework js đang lên ngôi và gần như là “hot trend” trong xu hướng kỹ thuật tại thời điểm hiện tại. Các bạn đã từng đặt ra câu hỏi, tại sao lại có xu hướng như vậy, framework js có điểm gì đặc biệt? Chúng ta hãy cùng nhau tìm hiểu ở nội dung bài viết này nhé.

Server-side rendering và Client-side rendering:

Đầu tiên, chúng ta hãy nói qua về 2 khái niệm là “server-side rendering” và “client-side rendering”.

Server-side rendering:

Là cơ chế đã tồn tại và được sử dụng từ rất rất lâu trước đây. Khi gọi “server-side” có nghĩa là phần lớn logic sẽ được xử lý ở server. Ta sẽ nói sơ về cơ chế hoạt động của server-side render như sau:

Khi người dùng truy cập vào trang web trên trình duyệt, nó sẽ gửi một yêu cầu (request) đến server để yêu cầu xử lý tác vụ của người dùng (hiển thị một trang nào đó, khởi tạo một cái gì đó…).
Tiếp theo, server sau khi nhận được yêu cầu sẽ thực hiện một chuỗi các xử lý logic và lấy dữ liệu.
Cuối cùng, server sẽ thực hiện render ra thành HTML để trả về cho trình duyệt hiển thị kết quả cho người dùng.

server-site rendering - Marketenterprise VN

Vậy vấn đề của cơ chế này là gì? Khi server phải xử lý quá nhiều logic cho nhiều người dùng khác nhau thì sự quá tải là việc không thể tránh khỏi. Ngoài ra, việc refesh và load lại nhiều lần khi thực hiện các tác vụ như chuyển trang, submit một form nào đó sẽ tạo ra sự khó chịu cho người sử dụng. Băng thông sử dụng khi trả về mã HTML sẽ rất lớn.

Client-side rendering:

Khi kỹ thuật chế tạo phần cứng phát triển, người dùng có thể sở hữu được những chiếc máy tính rất mạnh mẽ, cùng với việc giải quyết các vấn đề của cơ chế server-side rendering. Người ta đặt ra câu hỏi “tại sao không tận dụng sức mạnh phần cứng của người dùng thực hiện việc xử lý logic và render mã HTML dùng để hiển thị”.

Từ đó, cơ chế client-side rendering ra đời để có thể tận dụng được sức mạnh phần cứng từ phía client để giảm tải cho máy chủ server. Ngoài ra, kết hợp với việc giao tiếp thông qua cơ chế API (Application Programming Interface) người ta lại phát triển thành một khái niệm mới là SPA (Single Page Application).

Client-side render - Marketenterprise VN

Việc ra đời của cơ chế client-side rendering và SPA (Single Page Application) đã giải quyết được vấn đề giảm tải cho máy chủ server, giảm lượng băng thông sử dụng vì server chỉ trả về kiểu dữ liệu json hoặc xml. Ngoài ra, vì không cần phải load lại trang khi thực hiện các tác vụ sẽ đem lại một trải nghiệm tốt hơn cho người dùng.

VueJs

Sau khi đã biết về server-side rendering và client-side rendering, ta đã hiểu được vì sao các Framework Js lại trở thành “hot trend” rồi phải không. Và hôm nay, mình muốn nhắc đến một trong những Framework Js khá thông dụng và ưu chuộng hiện nay là VueJS.

Tích hợp vào dự án

VueJs được thiết kế theo hướng tiếp cận tích hợp dần dần. Vì vậy ta có thể tích hợp VueJs vào dự án theo nhiều cách khác nhau tuỳ thuộc vào nhu cầu sử dụng. Hiện tại có 4 cách chính để ta có thể tích hợp VueJs vào dự án:

Ta chỉ cần thêm một đoạn mã nhúng một gói CDN (Content Delivery Network – mạng phân phối nội dung) vào source code của mình.

<script src="https://unpkg.com/vue@next"></script>

2. Nếu bạn không muốn sử dụng CDN vì một số lý do nào đó (đường truyền không ổn định, …) bạn có thể download các file có extension .js về trên máy chủ và thêm nó vào bằng thẻ “script” tương tự với CDN.

<script src="link-to-js-file"></script>

3. VueJs đề nghị rằng, bạn nên sử dụng [npm](https://www.npmjs.com/) để xây dựng các ứng dụng có quy mô lớn. Nếu sử dụng cách này, ta có thể sử dụng các chức năng kết hợp với các module bundlers (các tool dùng để quản lý các gói cài đặt JS) như [webpack](https://webpack.js.org/).

npm install vue@next

4. Cuối cùng, Vue cung cấp một công cụ chính thức vue-cli để tạo mới một cách nhanh chóng một ứng dụng SPA(Single Page Application). vue-cli cung cấp cho chúng ta rất nhiều tiện dụng trong việc lập trình như tự động reload khi có sự thay đổi mã, và cả tiện dụng trong việc triển khai sản phẩm.

yarn global add @vue/cli
# OR
npm install -g @vue/cli

Cấu trúc thư mục

Trong bài viết này mình sẽ tập trung vào phương pháp để build 1 SPA (Single Page Application) sử dụng vue-cli.

Một SPA gồm có các thư mục chính sau:

public: là thư mục chứa file index.html của chúng ta, đây là file chính để webserver có thể truy cập vào source code.
src: là thư mục chứa các phần liên quan đến xử lý logic, các resources.
– components: đây là thư mục mà ta sẽ chứa các component (thành phần) trên ứng dụng của chúng ta.
– assets: là thư mục chứa các file tĩnh (static) như các file hình ảnh.
– App.vue: đây là Component chính của chúng ta (hay còn được gọi là main component), có thể xem là component được truy cập đầu tiên khi ta vào một SPA.
– main.js: đây là file js mà Vue dùng để load đầu tiên nhất. Trong file này sẽ có phần khởi tạo một Vue Application và config cho Vue Application. Ngoài ra, ta có thể viết các đoạn mã mà ta muốn load đầu tiên, thậm chí là trước khi Vue Application được khởi tạo. Ví dụ như load các thư viện của bên thứ 3, kiểm tra trạng thái nào đó để xử lý.

dist: đây là thư mục chứa source code sau khi thực hiện build các đoạn mã VueJS thành Javascript thuần, tắt đi các cảnh báo (warning) hay bất cứ chế độ debug để phục vụ cho việc triển khai sản phẩm một cách chỉn chu nhất.
vue.config.js: đây là file dùng để config một số option tuỳ chọn trong quá trình phát triển ứng dụng. Các bạn có thể tham khảo thêm ở [đây]

Khởi tạo một Component

Mình sẽ khởi tạo một component có chức năng in ra tên và định dạng khi ta nhập tên đó vào một ô input.

Trong thư mục /src/components ta tạo file PrintName.vue.

<template>
  <div>Your Name is: {{ display }}</div>
</template>

<script>
export default {
  name: "PrintName",
  props: ['name'],
  computed: {
    display: function () {
      let name = this.name.toLowerCase();
      return name.charAt(0).toUpperCase() + name.slice(1);
    }
  }
}
</script>

<style scoped>

</style>

Ở đây ta sẽ sử dụng một khái niệm là props (có thể hiểu nôm na là truyền 1 biến từ component cha vào component con). Ở đây mình truyền 1 biến tên là “name” từ ngoài vào component PrintName.

Trong template, ta có thể sử dụng các biểu thức một cách tiện lợi và nhanh chóng, nhưng đó là với những biểu thức đơn giản và ngắn. Với các biểu thức cực kỳ phức tạp, vue cung cấp cho ta một thuộc tính “computed” để ta có thể thực hiện các biểu thức logic phức tạp một cách dễ dàng. Như trên đoạn code trên, mình thực hiện việc biến giá trị của biến “name” thành tất cả chữ thường, sau đó thực hiện viết hoa chữ cái đầu tiên.

Vì vậy, bất kỳ giá trị nào được truyền vào đều sẽ được format lại với chữ cái đầu viết hoa và các chữ cái tiếp theo viết thường.

Ta sửa lại file /src/App.vue

<template>
<div id="app">
<div class="form">
<input type="text" v-model="name">
</div>
<div class="display">
<!-- sử dụng component-->
<PrintName :name="name" />
</div>
</div>
</template>
<script>
import PrintName from "@/components/PrintName";
export default {
name: 'App',
data: function() {
return {
// khai báo biến name
name: '',
}
},
components: {
// khai báo component
PrintName
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Ở đây ta sẽ thực hiện import component “PrintName” mà ta mới viết vào và khai báo ở thuộc tính components.

Ta sẽ sử dụng [v-model] để gán giá trị được nhập vào từ input vào biến name đã khai báo ở trên v-model=”name”.

Kết quả ta sẽ được:

Tổng kết

Qua bài viết này, mình đã giới thiệu với các bạn về VueJs, cách để tích hợp VueJs vào dự án của mình cũng như cấu trúc và cách viết một component đơn giản. Ngoài ra mình đã nhắc lại về các khái niệm server-side rendering và client-side rendering. Nhưng đây chỉ là phần giới thiệu sơ lược nhất về VueJs, vì vậy nếu có hứng thú với Framework Js này, các bạn hãy tham khảo thêm trên trang [tài liệu] của nó để hiểu thêm một cách chi tiết về nó nhé. xin cảm ơn các bạn.