Artigo original: The Difference Between a Framework and a Library

Os desenvolvedores tendem a usar os termos "biblioteca" e "framework" para as mesmas coisas. Há, porém, uma diferença.

Tanto frameworks quanto bibliotecas são código escrito por outras pessoas que é usado para resolver problemas comuns.

Por exemplo, digamos que você tenha um programa onde planeja trabalhar com strings. Você planeja manter seu código DRY (do inglês don’t repeat yourself, ou 'não se repita') e escrever funções reutilizáveis, como as que vemos abaixo:

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

Parabéns. Você criou uma biblioteca.

Não há nada de mágico a respeito de frameworks ou de bibliotecas. Ambos são códigos reutilizáveis escritos por outras pessoas. A finalidade de ambos é ajudar você a resolver problemas comuns mais facilmente.

Eu geralmente uso uma casa como uma metáfora para conceitos de desenvolvimento para a web.

Uma biblioteca é como ir à sua loja de móveis favorita. Você já tem uma casa, mas precisa de ajuda com os móveis. Não é sua intenção fazer uma mesa do zero. Na loja de móveis, você escolhe coisas diferentes que combinem com sua casa. Você controla as ações.

Um framework, por outro lado, é como construir uma casa modelo. Você tem um conjunto de plantas-baixas e algumas escolhas limitadas em termos de arquitetura e design. No fim, o contratante e a planta-baixa são aqueles que controlam. São eles que informarão a você quando e onde você pode dar suas ideias.

A diferença técnica

A diferença técnica entre um framework e uma biblioteca está em um termo chamado inversão do controle.

Ao usar uma biblioteca, você está no controle do fluxo da aplicação. Você seleciona quando e onde chamar a biblioteca. Quando você usa um framework, é ele quem está ao encargo do fluxo. Ele fornece alguns lugares onde você pode encaixar o seu código, mas é ele quem chama o código que você encaixou quando for necessário.

Vamos ver um exemplo disso usando o jQuery (uma biblioteca) e o Vue.js (um framework).

Imagine que queremos exibir uma mensagem de erro quando esse erro ocorrer. Em nosso exemplo, clicaremos em um botão e fingiremos que houve um erro.

Com o 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">Enviar</button>
       </div>
   </body>
</html>
// app.js
// Uma série de linhas com nosso código próprio, 
// seguido de uma chamada à biblioteca do jQuery
let error = false;
const errorMessage = 'Ocorreu um erro';
$('#myButton').on('click', () => {
  error = true; // fingimos que ocorreu um erro e definimos error como true
  if (error) {
    $('#app')
       .append(`<p id="error">${errorMessage}</p>`);
  } else {
    $('#error').remove();
  }
});

Perceba como usamos o jQuery. Nós contamos ao programa como queremos chamá-lo. É como ir a uma biblioteca física, pegar alguns livros das estantes e dizer que os queremos.

Isso não é dizer que as funções do jQuery não necessitem de determinadas entradas assim que as chamamos, mas o jQuery em si é uma biblioteca dessas funções. Somos nós que estamos no comando.

Com o 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">Enviar</button>
               <p v-if="error">{{ errorMessage }}</p>
             </div>`,
  el: '#vue-example',
  data: {
    error: null,
    errorMessage: 'Ocorreu um erro',
  },
  methods: {
    checkForErrors()  {
      this.error = !this.error;
    },
  },
});

Com o Vue, temos de preencher os espaços vazios. O construtor do Vue é um objeto com determinadas propriedades. Ele nos conta do que ele necessita e, então, internamente, o Vue decide quando as necessita. O Vue inverte o controle do programa. Inserimos nosso código no Vue. É o Vue quem está no comando.

A diferença entre ser uma biblioteca ou um framework está no fato de haver ou não uma inversão de controle.

Uma observação sobre ser "opinativo"

Com frequência, você escutará a respeito de frameworks e bibliotecas que são descritos como "opinativos" ou "não opinativos". Esses termos, no entanto, são subjetivos. Eles tentam definir o nível de liberdade que um desenvolvedor tem quando estrutura seu código.

Frameworks, normalmente, são mais opinativos já que, por definição, a inversão de controle exige a concessão da liberdade de criação na aplicação.

Novamente, o grau pelo qual algo é ou não opinativo é subjetivo. Por exemplo, eu considero o Angular um framework altamente opinativo e o Vue.js um framework menos opinativo.

Em resumo

  • Frameworks e bibliotecas são código escrito por outros e que ajudam você a realizar tarefas mais comuns de modos que permitem escrever menos.
  • Um framework inverte o controle do programa. Ele diz ao desenvolvedor de que ele, o framework, necessita. A biblioteca não faz isso. Os programadores chamam a biblioteca onde e quando eles a necessitam.
  • O grau de liberdade que uma biblioteca ou um framework dá ao desenvolvedor é o que rege o fato de ser mais ou menos "opinativo".

Obrigado pela leitura!