FrameWork e Libraries - O que é e como definir na prática.
Olá comunidade 🖖
Achei esse conteúdo bem interessante e decidi escrever esse artigo sobre librares e framework. Lembrando que também estou iniciando na área de programação e todos meus artigos se baseia em pesquisas no chatgpt para compartilhar e aprender ao mesmo tempo.
Direto ao assunto, uma definição bem direta de biblioteca é que quando usada é chamada pelo desenvolvedor no código e no framework é mais automático e chama você. Pra ficar mais claro, achei uma imagem que define muito bem o que estou falando. Veja abaixo!
Muitas vezes estamos codando e nos deparamos com bibliotecas ou framework!
Observe que ficou muito claro a definição entre biblioteca e framework. Agora, como saber isso na hora de codar já que estou iniciando? Vamos lá uma coisa de cada vez.
Um exemplo de biblioteca é o REACT. Alguns definem que o React é uma biblioteca e outros um framework, mais essa é uma discursão pra outro artigo.
O React foi desenvolvida pela Meta (Proprietária do Facebook) e ele consiste em componentização por meio de funções declarativas ou anonimas (JavaScript) que retorna uma marcação em HTML estilizada com css (podendo ser usado também um bootstrap). Cada elemento no React é componentizado para facilitar a manutenção e vida útil do código. Então, entendendo sua estrutura é visível que o React se caracteriza como uma biblioteca e não um framwork. Vou te dar um exemplo bem claro.
import { useState } from "react";
function Contador() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Contador: {count}</h1>
<button onClick={() => setCount(count + 1)}>Incrementar</button>
</div>
);
}
export default Contador;
Tomando esse código como exemplo, usamos apenas o que precisamos do React para criar um contador simples e usamos o hook para mudar o estado do contador ao apertar o botão, usado na função contador e retornando um html com botão. Tá claro? Vamos pra o framework.
Caso você entendeu até aqui, já exemplificamos um framework no código (o bootstrap) mais também podemos tomar como exemplo e muito utilizado o famoso Angular. Vamos pro código!
O Angular é um framework, pois ele define toda a estrutura do seu projeto, incluindo roteamento, gerenciamento de estado e regras do código. Criamos um contador seguindo a estrutura do Angular.
import { Component } from '@angular/core';
@Component({
selector: 'app-contador',
templateUrl: './contador.component.html',
styleUrls: ['./contador.component.css']
})
export class ContadorComponent {
count = 0;
incrementar() {
this.count++;
}
}
componente criado:
<h1>Contador: {{ count }}</h1>
<button (click)="incrementar()">Incrementar</button>
Então, comparando os dois códigos, o primeiro o desenvolvedor chama o useState (hook) para mudar o status do button incrementando +1 e no segundo código o React importa a dependência do framework Angular e veja que o mesmo controla o html, css e incrementação de forma direta.
Veja nessa tabela as diferenças entre um e outro na prática
📌 Diferença prática entre Biblioteca e Framework
Gostou do artigo?👍👍 Veja outro como esse no link abaixo👇
Estou na comunidade👇
