Trong lập trình, developer thường nhầm lẫn giữa “library” và “framework.” Tuy chúng đều là các đoạn mã được viết sẵn để hỗ trợ giải quyết những vấn đề phổ biến, nhưng hai khái niệm này thực ra có sự khác biệt.

Hãy thử tưởng tượng bạn đang viết một chương trình cần xử lý chuỗi ký tự (strings). Để tránh lặp lại code (theo nguyên tắc DRY – Don’t Repeat Yourself), bạn quyết định viết một vài hàm tái sử dụng như sau:

function getWords(str) {
   const words = str.split(' ');
   return words;
}
function createSentence(words) {
   const sentence = words.join(' ');
   return sentence;
}

Chúc mừng, bạn vừa tạo ra một library.

Thực tế, không có gì quá thần kỳ về frameworks hay libraries. Cả hai đều là những đoạn mã tái sử dụng được viết bởi người khác, nhằm giúp bạn giải quyết các vấn đề phổ biến một cách dễ dàng hơn.

Thông thường mọi người sẽ sử dụng phép ẩn dụ ngôi nhà để giải thích các khái niệm trong phát triển web.

Library giống như việc bạn đi mua đồ ở cửa hàng nội thất. Bạn đã có ngôi nhà của mình, nhưng cần thêm một số đồ dùng. Bạn không muốn tự làm một chiếc bàn từ đầu. Cửa hàng đó cho phép bạn chọn và kết hợp các món đồ phù hợp với ngôi nhà của mình. Bạn là người kiểm soát mọi thứ.

Framework, ngược lại, giống như việc xây một ngôi nhà mẫu. Bạn có một bản thiết kế và chỉ được chọn vài phương án giới hạn về kiến trúc và thiết kế. Cuối cùng, nhà thầu và bản thiết kế sẽ quyết định. Họ sẽ chỉ cho bạn biết khi nào và ở đâu bạn có thể đóng góp ý kiến.

Sự khác biệt về kỹ thuật

Sự khác biệt kỹ thuật giữa framework và library nằm ở khái niệm inversion of control (đảo ngược quyền kiểm soát).

  • Khi sử dụng library, bạn kiểm soát luồng của ứng dụng. Bạn quyết định khi nào và ở đâu sẽ gọi đến library.

  • Khi sử dụng framework, framework kiểm soát luồng của ứng dụng. Framework cung cấp một số điểm để bạn "cắm" code của mình vào, và sẽ tự gọi code đó khi cần thiết.

Ví dụ minh họa

Hãy cùng xem một ví dụ với jQuery (một library) và Vue.js (một framework).

Giả sử chúng ta muốn hiển thị một thông báo lỗi khi có lỗi xảy ra. Trong ví dụ này, chúng ta sẽ nhấp vào một nút và giả định rằng có lỗi phát sinh.

Với jQuery:

// index.html
<html>
   <head>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"
      </script>
      <script src="./app.js"></script>
   </head>
   <body>
      <div id="app">
         <button id="myButton">Submit</button>
       </div>
   </body>
</html>
// app.js
// A bunch of our own code, 
// followed by calling the jQuery library
let error = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
  error = true; // pretend some error occurs and set error = true
  if (error) {
    $('#app')
       .append(`<p id="error">${errorMessage}</p>`);
  } else {
    $('#error').remove();
  }
});

Hãy chú ý cách chúng ta sử dụng jQuery. Chúng ta nói cho chương trình biết chính xác vị trí cần gọi đến nó. Điều này giống như việc bạn đến một thư viện và chọn những cuốn sách mình cần từ kệ.

Điều này không có nghĩa là các hàm của jQuery không yêu cầu các tham số đầu vào khi được gọi, nhưng bản thân jQuery chỉ đơn giản là một thư viện chứa các hàm đó. Chúng ta là người kiểm soát.

Với Vue.js:

//index.html
<html>
   <head>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <script src="./app.js"></script>
   </head>
   <body>
      <div id="app"></div>
   </body>
</html>
const vm = new Vue({
  template: `<div id="vue-example">
               <button @click="checkForErrors">Submit</button>
               <p v-if="error">{{ errorMessage }}</p>
             </div>`,
  el: '#vue-example',
  data: {
    error: null,
    errorMessage: 'An Error Occurred',
  },
  methods: {
    checkForErrors()  {
      this.error = !this.error;
    },
  },
});

Với Vue, chúng ta cần điền vào các chỗ trống mà nó yêu cầu. Constructor của Vue là một object chứa các thuộc tính nhất định. Nó chỉ cho chúng ta biết cần cung cấp gì, và đằng sau hậu trường, Vue sẽ quyết định khi nào cần sử dụng những thông tin đó. Vue thực hiện đảo ngược quyền kiểm soát (inversion of control) của chương trình. Chúng ta "cắm" mã của mình vào Vue, và Vue sẽ chịu trách nhiệm quản lý.

Ghi chú về tính “opinionated”

Bạn sẽ thường nghe các framework và library được mô tả là “opinionated” (có tính định hướng) hoặc “un-opinionated” (không định hướng). Những thuật ngữ này mang tính chủ quan, dùng để chỉ mức độ tự do mà developer có khi tổ chức code.

  • Frameworks thường mang tính định hướng cao hơn vì bản chất của đảo ngược quyền kiểm soát đòi hỏi sự hy sinh một phần quyền tự do thiết kế ứng dụng.

  • Library thì ngược lại, ít ràng buộc hơn.

Ví dụ, theo cá nhân tôi, Angular là một framework có tính định hướng cao, trong khi Vue.js thì ít định hướng hơn.

Tóm lại

  • Frameworks và libraries đều là các đoạn code được viết sẵn để giúp bạn thực hiện các tác vụ phổ biến một cách ngắn gọn hơn.

  • Framework đảo ngược quyền kiểm soát chương trình và đưa ra yêu cầu cho developer.

  • Library thì không, bạn toàn quyền quyết định khi nào và ở đâu sử dụng nó.

  • Mức độ tự do mà library hoặc framework cung cấp sẽ quyết định mức độ "opinionated" của chúng.

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K