Qual a diferença entre Framework e Biblioteca? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 01 Horas 00 Min 41 Seg Tempo restante da oferta: 01 00 41 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Qual a diferença entre Framework e Biblioteca? [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) # Qual a diferença entre Framework e Biblioteca? A confusão entre frameworks e bibliotecas é muito comum. Entenda qual a diferença entre eles e qual o melhor. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/qual-a-diferenca-entre-framework-e-biblioteca.png) Olá Web Developers! Você sabe qual a diferença entre Framework e Biblioteca? Pois esta é uma dúvida muito comum em programadores de vários níveis. Vamos entender melhor as características de cada um para finalmente entender do que se tratam. ## O que são Bibliotecas? ![Estantes em uma biblioteca com vários livros](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/biblioteca-estantes.jpg) Vamos imaginar que precisamos calcular quantos dias existem entre duas datas utilizando [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript"). Mas no momento não há uma funcionalidade da linguagem que faça este cálculo para nós. Então teremos que criar uma função em que a gente passe duas datas e ela nos retornará a quantidade de dias. E depois pode aparecer a necessidade de pegar uma data e adicionar um certo número de dias. Que data teremos como resultado? E se precisarmos adicionar horas ou minutos? A príncipio podem parecer funções sem conexão, mas note que estamos falando de cálculos que nos remetem a tempo. Com o intuito de deixar o código mais organizado, podemos juntar estas funções em uma “coleção” de funções relacionadas ao cálculo de tempo. Em conclusão, podemos dizer que uma `biblioteca` (do inglês `library`, não confundir com livraria que em inglês é `book store`) é uma coleção de códigos voltados a resolver um determinado tipo de problema. ### Exemplos de Bibliotecas JavaScript - **[Moment.js](https://momentjs.com/ "Moment.js")**: Biblioteca para converter, validar, manipular e exibir datas e horários - **[Chart.js](https://www.chartjs.org/ "Chart.js")**: Biblioteca para a criação de gráficos - **[Voca](https://vocajs.com/ "Voca")**: Biblioteca para trabalhar com Strings - **[mo.js](https://mojs.github.io/ "mo.js")**: Biblioteca para criar animações incríveis com SVG. Já fizemos um post sobre [como começar com o mo.js](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-3-animacoes-com-mo-js-motion-graphics/ "como começar com o mo.js") - **[React](https://reactjs.org/ "React")**: Biblioteca para criar interfaces de usuário. Se quiser conhecer um pouquinho, temos um post aqui no blog para você [conhecer o React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "conhecer o React") [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## O que são Frameworks? Já fizemos um post sobre o [propósito dos frameworks](https://www.treinaweb.com.br/blog/para-que-serve-um-framework/ "propósito dos frameworks"). Mas vamos fazer uma pequena recapitulação. Um `framework` possui várias funcionalidades prontas, e normalmente já possuem um fluxo de trabalho ou estrutura a serem seguidos. É algo bem mais abstrato do que uma biblioteca. Isso realmente confunde muitas pessoas. Por exemplo, o `jQuery` se autodenominava um framework, mas já faz um bom tempo que ele se chama de biblioteca. O foco dos frameworks é mais amplo que das bibliotecas. Aliás, um framework pode ser feito a partir de uma coleção de padrões, [APIs](https://www.treinaweb.com.br/blog/o-que-e-uma-api/ "APIs") e até mesmo de bibliotecas. Só para exemplificar, o `Angular`, framework JavaScript para desenvolvimento de aplicações, é feito a partir de bibliotecas de animação, requisições http, internacionalização, testes, tratamento de dados em formulários, reatividade, roteamento, etc. ### Exemplos de Frameworks JavaScript - **[Angular](https://angular.io/ "Angular")**: Framework para criação de aplicações web - **[Vue.js](https://vuejs.org/ "Vue.js")**: Framework também para criação de aplicações web - **[Ionic](https://ionicframework.com/ "Ionic")**: Framework para criar aplicativos mobile com Angular, React ou Vue - **[Express](https://expressjs.com/ "Express")**: Framework para criar aplicações com Node.js - **[LoopBack](https://loopback.io/ "LoopBack")**: Framework para criar APIs e microserviços com Node.js [ ![AngularJS - Criação de interfaces web](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/angularjs.svg) Curso AngularJS - Criação de interfaces web Conhecer o curso ](https://www.treinaweb.com.br/curso/angularjs-completo) ## Mas então, qual a diferença entre Framework e Biblioteca? Por mais que a gente tenha visto características de framework e biblioteca, ainda assim há confusão, pois nem sempre as funções do software deixa claro a sua natureza. É provável até que não seja nenhum dos dois. Bem como também é comum ver lugares chamando `Angular` de biblioteca e `React` de framework, sendo que na verdade é ao contrário. Antes de tudo, algo que podemos notar além das diferenças já mostradas aqui é que normalmente as bibliotecas são usadas pelos nossos códigos, enquanto os frameworks é quem costumam utilizar os nossos códigos. Por isso podemos diferenciar React de Angular. Se acaso você já usou os dois verá as seguintes diferenças: No `React` nós temos basicamente funções para a criação de componentes e criação de estados. Estamos no controle o tempo todo, nós chamamos as funções do React, podemos decidir qual será a estrutura da nossa aplicação e o fluxo com o qual ela funciona. Se acaso a gente precisar de funcionalidades de roteamento, animações, internacionalização, etc, precisaremos buscar bibliotecas para isso. ```javascript function App(props) { return ( Olá, {this.props.name}! ); } ReactDOM.render( , document.getElementById('hello-example') ); ``` Em contrapartida no `Angular` todas essas funcionalidades já vêm inclusas. Há uma estrutura que devemos seguir (componentes, serviços, pipes, rotas, módulos), e o Angular é quem vai chamar o nosso código seguindo seu próprio fluxo. Essa característica de já ter uma estrutura é o principal diferencial entre um framework e uma biblioteca. Você pode notar que em nenhum momento nós chamamos alguma função como `Angular.nomeFuncao()`. Eventualmente, caso queira fazer algo num fluxo ou estrutura diferente, o Angular não vai entender e você terá um erro. ```typescript @Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { } ``` Veja como já temos uma estrutura a seguir. É como se no framework nós precisássemos preencher os campos que ele pede, é ele quem está no controle de tudo. ## Qual o melhor? Framework ou Biblioteca? Podemos concluir que enquanto na biblioteca nós mesmos criamos a base e o fluxo, no framework já temos toda a estrutura pronta para utilizarmos e seguirmos. Mas isso não significa necessariamente que um é melhor do que o outro. São ferramentas diferentes para propósitos diferentes. Ao passo que no Angular nós já temos toda a estrutura pronta, nos poupando desse trabalho, teremos menos liberdade para certas escolhas. Em contrapartida, no React temos que definir coisas comuns como arquitetura e fluxo, mas teremos mais liberdade de escolher cada biblioteca responsável por cada funcionalidade em nossa aplicação. [ ![Desenvolvedor Front-end Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Formação Desenvolvedor Front-end Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-senior) - [ #Angular ](https://www.treinaweb.com.br/blog/tag/angular) - [ #Vue.js ](https://www.treinaweb.com.br/blog/tag/vue-js) - [ #framework ](https://www.treinaweb.com.br/blog/tag/framework) - [ #biblioteca ](https://www.treinaweb.com.br/blog/tag/biblioteca) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS: Float vs Inline Block - Qual usar em meus layouts? ](https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usar-em-meus-layouts) Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143624/TW-ENTREVISTAS-CAIO-GONDIM-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 05: Caio Gondim ](https://www.treinaweb.com.br/blog/tw-entrevista-05-caio-gondim) Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje é o Caio Gondim, engenheiro de software com passagem pela Globo.com e atualmente no The New York Times. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151327/PARALISIA-ANÁLISE-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Paralisia por Análise - o bloqueio que te impede de começar ](https://www.treinaweb.com.br/blog/paralisia-por-analise-o-bloqueio-que-te-impede-de-comecar) Conheça o que é Paralisia por Análise, a razão de várias pessoas não começarem ou finalizarem algo, seja na vida pessoal ou profissional. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/java-csharp-ou-php-qual-linguagem-escolher-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 9 anos atrás ## [ Java, C# ou PHP: qual linguagem escolher? ](https://www.treinaweb.com.br/blog/java-csharp-ou-php-qual-linguagem-escolher) Qual linguagem escolher? Java, C# ou PHP? Quais são as vantagens de cada uma? Vamos analisar estas dúvidas que são comuns para quem está começando. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/18131538/laravel-route-model-bind-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Como se usa e o que resolve o recurso de Route Model Binding do Laravel ](https://www.treinaweb.com.br/blog/como-se-usa-e-o-que-resolve-o-recurso-de-route-model-binding-do-laravel) Saiba o que é o Route Model Binding do Laravel, qual problema ele resolve e como utilizá-lo de forma automática com Implicit Binding e manual com Explicit Binding. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/qual-a-diferenca-entre-ecmascript-e-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Qual a diferença entre ECMAScript e JavaScript? ](https://www.treinaweb.com.br/blog/qual-a-diferenca-entre-ecmascript-e-javascript) Conheça a história e as curiosidades por trás da criação do ECMAScript e JavaScript. Entenda de uma vez por todas a diferença entre ECMAScript e JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/json-vs-objeto-javascript-qual-a-diferenca-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JSON vs Objeto JavaScript - Qual a diferença? ](https://www.treinaweb.com.br/blog/json-vs-objeto-javascript-qual-a-diferenca) Muitas pessoas acreditam que JSON e Objeto JavaScript são a mesma coisa. Descubra a diferença. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/qual-computador-comprar-para-programar-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 6 anos atrás ## [ Qual computador comprar para programar? ](https://www.treinaweb.com.br/blog/qual-computador-comprar-para-programar) Saiba tudo o que precisa para comprar um computador para programar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/diferenca_entre_os_atributos_async_e_defer-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Diferença entre os atributos async e defer ](https://www.treinaweb.com.br/blog/diferenca-entre-os-atributos-async-e-defer) Nesse artigo vamos ver em detalhes como os atributos async e defer se comportam ao declarar seus arquivos JavaScript no HTML. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/22100127/o-que-é-json-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O que é JSON? ](https://www.treinaweb.com.br/blog/o-que-e-json) Veja neste artigo o que é JSON. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143654/TW-ENTREVISTAS-RAFAEL-CAFERATI-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 06: Rafael Caferati ](https://www.treinaweb.com.br/blog/tw-entrevista-06-rafael-caferati) Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje é o Rafael Caferati, desenvolvedor especialista em UI/UX que já foi premiado pelo CSS Design Awards. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2016/10/yarn-um-novo-gerenciador-de-dependencias-para-javascript-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Yarn: Um novo gerenciador de dependências para JavaScript ](https://www.treinaweb.com.br/blog/yarn-um-novo-gerenciador-de-dependencias-para-javascript) Yarn nasceu para ser uma opção rápida e segura de se gerenciar dependências em JavaScript. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **01h 00min 41s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58