Los desarrolladores a menudo usan los términos "biblioteca" y "marco" de manera intercambiable. Pero hay una diferencia.

Tanto los marcos como las bibliotecas son códigos escritos por otra persona que se utilizan para ayudar a resolver problemas comunes.

Por ejemplo, supongamos que tiene un programa en el que planea trabajar con cadenas. Decide mantener su código SECO (no lo repita) y escribir algunas funciones reutilizables como estas:

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

Felicidades. Ha creado una biblioteca.

No hay nada mágico en los marcos o la biblioteca. Tanto las bibliotecas como los marcos son código reutilizable escrito por otra persona. Su propósito es ayudarlo a resolver problemas comunes de manera más fácil.

A menudo uso una casa como metáfora de los conceptos de desarrollo web.

Una biblioteca es como ir a Ikea. Ya tienes una casa, pero necesitas un poco de ayuda con los muebles. No tienes ganas de hacer tu propia mesa desde cero. Ikea te permite elegir diferentes cosas para ir a tu casa. Tú tienes el control.

Un marco, por otro lado, es como construir una casa modelo. Tiene un conjunto de planos y algunas opciones limitadas cuando se trata de arquitectura y diseño. En última instancia, el contratista y el proyecto tienen el control. Y le informarán cuándo y dónde puede dar su opinión.

La diferencia técnica

La diferencia técnica entre un marco y una biblioteca radica en un término llamado inversión de control.

When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.

Let’s look at an example using jQuery (a library) and Vue.js (a framework).

Imagine we want to display an error message when an error is present. In our example, we will click a button, and pretend an error occurs.

With jQuery:

// index.html