Dezvoltatorii folosesc adesea termenii „bibliotecă” și „cadru” în mod interschimbabil. Dar există o diferență.

Atât cadrele, cât și bibliotecile sunt coduri scrise de altcineva, care sunt utilizate pentru a ajuta la rezolvarea problemelor comune.

De exemplu, să presupunem că aveți un program în care intenționați să lucrați cu șiruri. Decizi să păstrezi codul DRY (nu te repeta) și să scrii câteva funcții reutilizabile ca acestea:

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

Felicitări. Ați creat o bibliotecă.

Nu există nimic magic în cadrul sau biblioteca. Atât bibliotecile, cât și cadrele sunt cod reutilizabil scris de altcineva. Scopul lor este de a vă ajuta să rezolvați problemele comune în moduri mai ușoare.

Folosesc adesea o casă ca metaforă pentru conceptele de dezvoltare web.

ad-banner

O bibliotecă este ca și cum ai merge la Ikea. Aveți deja o casă, dar aveți nevoie de un pic de ajutor la mobilier. Nu ai chef să-ți faci propria masă de la zero. Ikea vă permite să alegeți și să alegeți diferite lucruri pentru a merge în casa dvs. Ai controlul.

Un cadru, pe de altă parte, este ca și cum ai construi o casă model. Aveți un set de planuri și câteva limitat alegeri când vine vorba de arhitectură și design. În cele din urmă, contractantul și planul sunt în control. Și vă vor anunța când și unde vă puteți furniza contribuția.

Diferența tehnică

Diferența tehnică dintre un cadru și o bibliotecă constă într-un termen numit inversiune a controlului.

Când utilizați o bibliotecă, sunteți responsabil de fluxul aplicației. Alegeți când și unde să apelați biblioteca. Când utilizați un cadru, cadrul este responsabil de flux. Vă oferă câteva locuri pentru a vă conecta codul, dar apelează codul pe care l-ați conectat după cum este necesar.

Să vedem un exemplu folosind jQuery (o bibliotecă) și Vue.js (un framework).

Imaginați-vă că vrem să afișăm un mesaj de eroare atunci când este prezentă o eroare. În exemplul nostru, vom face clic pe un buton și ne vom preface că apare o eroare.

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

Observați cum folosim jQuery. Noi spuneți programului nostru unde vrem să-l numim. Este la fel ca a merge la o bibliotecă fizică și a scoate anumite cărți de pe raft după cum le dorim.

Asta nu înseamnă că funcțiile jQuery nu necesită anumite intrări o singura data le numim, dar jQuery în sine este o bibliotecă a acelor funcții. Suntem la conducere.

Cu 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;
    },
  },
});

Cu Vue, trebuie să completăm spațiile libere. Constructorul Vue este un obiect cu anumite proprietăți. Ne spune de ce are nevoie și apoi, în culise, Vue decide când are nevoie de ea. Vue inversează controlul programului. Ne conectăm codul la Vue. Vue este responsabil.

Diferența dacă este o bibliotecă sau un cadru este dacă există sau nu o inversare a controlului.

O notă despre a fi „opinionat”

Veți auzi deseori cadrele și bibliotecile descrise ca „opinionate” sau „neopinate”. Acești termeni sunt subiectivi. Ei încearcă să definească nivelul de libertate pe care un dezvoltator îl are atunci când își structurează codul.

Cadrele sunt mai mult decât avizate, deoarece – prin definiție – inversarea controlului necesită o concesie de libertate de proiectare a aplicației.

Din nou, gradul în care este opiniat ceva este subiectiv. De exemplu, personal aș considera Angular un cadru extrem de avizat, iar Vue.js un cadru mai puțin avizat.

În concluzie

  • Cadrele și bibliotecile sunt ambele coduri scrise de altcineva, care vă ajută să efectuați unele sarcini comune într-un mod mai puțin detaliat.
  • Un cadru inversează controlul programului. Îi spune dezvoltatorului de ce au nevoie. O bibliotecă nu. Programatorul apelează biblioteca unde și când ei nevoie de el.
  • Gradul de libertate pe care o bibliotecă sau un cadru îl oferă dezvoltatorului va dicta cât de „avizat” este.

Mulțumesc pentru lectură!