Các developers thường sử dụng các thuật ngữ “library” và “framework”. Nhưng có một sự khác biệt.

Cả frameworks và libraries đều là code được viết bởi người khác được sử dụng để giải quyết các vấn đề phổ biến.

Ví dụ, hãy nói rằng bạn có một chương trình nơi bạn dự định làm việc với các chuỗi. Bạn quyết định giữ mã DRY của mình (không lặp lại chính mình) và viết một số hàm có thể sử dụng lại như sau:

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

Xin chúc mừng. Bạn vừa tạo ra một library.

Cả libraries và frameworks đều là mã có thể tái sử dụng được viết bởi người khác. Mục đích của họ là giúp bạn giải quyết các vấn đề phổ biến theo những cách dễ dàng hơn.

Tôi thường sử dụng một ngôi nhà như một phép ẩn dụ cho các khái niệm phát triển web.

Một library giống như đi đến Ikea. Bạn đã có một ngôi nhà, nhưng bạn cần một chút giúp đỡ với đồ nội thất. Bạn không có cảm giác như làm bàn của mình từ đầu. Ikea cho phép bạn chọn và chọn những thứ khác nhau để đặt trong nhà của bạn. Bạn đang kiểm soát.

Mặt khác, một framework, giống như xây dựng một ngôi nhà kiểu mẫu. Bạn có một bộ đồ án và một vài lựa chọn hạn chế khi nói đến kiến trúc và thiết kế. Cuối cùng, nhà thầu và kế hoạch chi tiết được kiểm soát. Và họ sẽ cho bạn biết khi nào và nơi bạn có thể cung cấp đầu vào của mình.

Contents

The Technical Difference

Sự khác biệt technical giữa một framework và library nằm trong một thuật ngữ gọi là đảo ngược kiểm soát (inversion of control).

Khi bạn sử dụng một thư viện, bạn chịu trách nhiệm về flow của ứng dụng. Bạn đang chọn thời điểm và nơi để gọi thư viện. Khi bạn sử dụng một framework, framework chịu trách nhiệm về luồng. Nó cung cấp một số nơi để bạn cắm mã của mình, nhưng nó gọi mã bạn đã cắm khi cần.

Hãy để xem xét một ví dụ bằng cách sử dụng jQuery (thư viện) và Vue.js (framework).

Hãy tưởng tượng chúng tôi muốn hiển thị thông báo lỗi khi có lỗi. Trong ví dụ của chúng tôi, chúng tôi sẽ nhấp vào nút và giả vờ xảy ra lỗi.

With 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();
  }
});

Lưu ý cách chúng tôi sử dụng jQuery. Chúng tôi nói với chương trình của chúng tôi, nơi chúng tôi muốn gọi nó. Điều này giống như đi đến một thư viện vật lý và kéo một số sách ra khỏi kệ như chúng ta muốn.

Điều đó không thể nói rằng các hàm jQuery không yêu cầu một số đầu vào nhất định khi chúng ta gọi chúng. Chúng tôi phụ trách.

With 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 tôi phải điền vào chỗ trống. Hàm tạo Vue là một đối tượng có các thuộc tính nhất định. Nó cho chúng ta biết những gì nó cần, và sau đó, Vue quyết định khi nào nó cần. Vue đảo ngược sự kiểm soát của chương trình. Chúng tôi cắm mã của chúng tôi vào Vue. Vue phụ trách.

Sự khác biệt cho dù đó là thư viện hay framework là liệu có sự đảo ngược của kiểm soát (inversion of control) hay không.

Tóm tắt

Các framework và thư viện đều là mã được viết bởi người khác giúp bạn thực hiện một số tác vụ phổ biến theo cách ít dài dòng hơn.
Một framework làm đảo ngược sự kiểm soát của chương trình. Nó nói với nhà phát triển những gì họ cần. Một thư viện không có. Lập trình viên gọi thư viện ở đâu và khi nào họ cần.
Mức độ tự do mà một thư viện hoặc framework cung cấp cho developers sẽ cho biết mức độ quan tâm của nó.