react

Qual a diferença entre Framework e Biblioteca?

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

Vamos imaginar que precisamos calcular quantos dias existem entre duas datas utilizando 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: Biblioteca para converter, validar, manipular e exibir datas e horários
  • Chart.js: Biblioteca para a criação de gráficos
  • Voca: Biblioteca para trabalhar com Strings
  • mo.js: Biblioteca para criar animações incríveis com SVG. Já fizemos um post sobre como começar com o mo.js
  • React: Biblioteca para criar interfaces de usuário. Se quiser conhecer um pouquinho, temos um post aqui no blog para você conhecer o React
React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

O que são Frameworks?

Já fizemos um post sobre o 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 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: Framework para criação de aplicações web
  • Vue.js: Framework também para criação de aplicações web
  • Ionic: Framework para criar aplicativos mobile com Angular, React ou Vue
  • Express: Framework para criar aplicações com Node.js
  • LoopBack: Framework para criar APIs e microserviços com Node.js
Angular - Tópicos avançados
Curso de Angular - Tópicos avançados
CONHEÇA O CURSO

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.

function App(props) {
    return (
      <div>
        Olá, {this.props.name}!
      </div>
    );
}

ReactDOM.render(
  <App name="Taylor" />,
  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.

@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
Formação: Desenvolvedor Front-end Sênior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Conheça o React, biblioteca para desenvolvimento Web

O React, lançado em 2013, é uma biblioteca JavaScript de código aberto, fundamental para criação de aplicações front-end.

Anteriormente denominado React.js ou ReactJS, foi desenvolvido pelo Facebook para criação de elementos de interface reutilizáveis de forma simples, intuitiva e com uma ótima performance.

Multiplataforma sobre a licença MIT, diversas são as empresas que o utilizam. Dentre elas podemos citar o próprio Facebook, o Instagram, que também faz parte da empresa Facebook, Twitter, Netflix, Uber, Spotify e muitas outras.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Principais características do React

O React possui diversas características marcantes, o que o torna uma excelente escolha para o desenvolvimento de aplicações, como podemos ver abaixo:

  • Licença MIT: Apesar de parecer bobagem, o react, hoje, é licenciado sob a MIT, o que tranquiliza os desenvolvedores que utilizam este framework, já que eles não precisam se preocupar com patentes;
  • Utiliza Javascript: O Javascript é uma das principais linguagens de desenvolvimento do mundo. Por utilizá-lo, o React agrega a maioria das suas vantagens, além de ser grandemente utilizado por diversos desenvolvedores;
  • Utiliza componentes: O React utiliza a componentização para criação de interfaces, garantindo uma maior flexibilidade e reutilização de interfaces;
  • Desenvolvimento móvel: Em conjunto com o react native, podemos desenvolver aplicações mobile reutilizando componentes criados com o react.
  • Amplamente utilizado: O React é uma das principais tecnologias para desenvolvimento web (e mobile) do mundo.

Empresas que utilizam o React

Diversas são as empresas que utilizam o React para o desenvolvimento de suas soluções, o que a torna uma tecnologia ainda mais atrativa. Dentre essas empresas, podemos citar:

  • Twitter: O Twitter, uma das principais redes sociais do mundo, utiliza o react para criação de suas aplicações;
  • Facebook: Apesar de ter desenvolvido o React, o Facebook também o utiliza para construção de suas aplicações;
  • Medium: O Medium, uma das principais plataformas de blog do mundo utiliza o React para construção de sua aplicação web;
  • Airbnb: Uma das principais plataformas de aluguel, o Airbnb utiliza o React em sua aplicação web.

Quais conhecimentos preciso ter para iniciar com o React?

Por utilizar o Javascript como base para sua construção, para iniciar com o React, é essencial que o desenvolvedor possua conhecimento com essa linguagem.
Além disso, é de grande importância que o desenvolvedor possua conhecimentos de HTML e CSS para a construção de interfaces.

Aqui na TreinaWeb possuímos diversos cursos de JavaScript, que abordarão todos os conceitos essenciais para iniciar com esta tecnologia.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

Sintaxe do React

A sintaxe do React é bem simples. Basicamente, os componentes do React implementam um método render() que recebe os dados de entrada e retornam o que deve ser exibido.

class Treinaweb extends React.Component {
  render() {
    return (
      <div>
        Olá, {this.props.nome}!
      </div>
    );
  }
}

ReactDOM.render(
  <Treinaweb nome="Treinaweb" />,
  document.getElementById('exemplo')
);

Este exemplo usa uma sintaxe parecida com XML, chamada JSX. Os dados de entrada que são passados para o componente podem ser acessados no render() via this.props.

Podemos concluir que…

O React é uma excelente biblioteca JavaScript para o desenvolvimento de aplicações web. Muitas empresas o utilizam, o que o torna ainda mais desejada, já que a quantidade de vagas é cada dia maior.

Em conjunto com o React Native, podemos reutilizar diversos componentes desenvolvidos com o React para a construção de aplicações móveis, tornando a solução ainda mais completa.

O que é o React Native?

Criado pelo Facebook em 2015 sobre a licença MIT, o React Native é um Framework para desenvolvimento de aplicativos móveis multiplataforma.

Um Framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Baseado no React, framework JS para desenvolvimento web, o React Native possibilita a criação de aplicações móvel multiplataforma (Android e iOS) utilizando apenas Javascript. Porém, diferente de outros frameworks com esta mesma finalidade (Cordova, por exemplo), todo o código desenvolvido com o React Native é convertido para linguagem nativa do sistema operacional, o que torna o app muito mais fluido.

React Native - Fundamentos
Curso de React Native - Fundamentos
CONHEÇA O CURSO

Características

O React Native possui diversas características marcantes e fundamentais para sua ampla adoção, como podemos ver abaixo:

  • Acessar a interface e os recursos nativos do Android e iOS utilizando JavaScript;
  • O código produzido é semelhante ao React para Web;
  • Possui a base de conhecimento compartilhada entre o desenvolvimento mobile e front-end;
  • Todo código desenvolvido é convertido para a linguagem nativa do sistema operacional;
  • Com o React Native conseguimos desenvolver aplicações para Android e iOS utilizando um código único;
  • Por ser multiplataforma, podemos desenvolver aplicações com React Native utilizando qualquer sistema operacional (Windows, macOS ou Linux).

Empresas que o utilizam

Por ser amplamente adotado na comunidade mobile, o React Native atraiu a atenção de diversas empresas, que fizeram questão de utilizá-lo em suas soluções mobile. Dentre estas empresas, podemos citar:

  • AirBnb: O AirBnb é uma das principais empresas a utilizar o React Native para seu aplicativo móvel;
  • Wix: O Wix, plataforma online de criação de sites, também utiliza o React Native em seu aplicativo mobile;
  • Facebook: Claro que o Facebook, empresa por trás do React Native, também iria utilizá-la para seu aplicativo móvel;
  • Tesla: A Tesla, principal montadora de carros elétricos, também utiliza esta tecnologia para seu aplicativo móvel;
  • Instagram: Além do Facebook, o Instagram (rede social do mesmo grupo), também utiliza o React Native para o desenvolvimento do seu app.

Como vimos acima, a adoção do React Native por grandes empresas é bem nítida, o que o torna ainda mais completo e utilizado por todo o mundo.

React Native - Componentes nativos
Curso de React Native - Componentes nativos
CONHEÇA O CURSO

Sintaxe

Apesar de ser baseado no React, o React Native não utiliza tags HTML para a criação de seus elementos. Ao invés disso, os elementos são criados utilizando tags nativas do React Native, como podemos ver no trecho de código abaixo:

import React from 'react';
import { Text } from 'react-native';

export default function Ola() {
  return (
    <Text>Olá, mundo!</Text>
  );
}

O Component serve para exibir um texto no aplicativo. Este componente é nativo do React Native, além de tantos outros que podem ser vistos em sua documentação oficial.

Podemos concluir que…

É notável a crescente demanda do uso de aplicativos móveis nos últimos anos. Pensando nisso, diversas empresas desenvolvem suas soluções para facilitar a criação destes aplicativos. Com o React Native, o Facebook lançou uma solução incrível para o desenvolvimento multiplataforma utilizando apenas código Javascript, o que facilita (e muito) os desenvolvedores que já possuem conhecimento em desenvolvimento web e até os que não possuem, já que é um framework com alta curva de aprendizado.

Desenvolvedor React Native Júnior
Formação: Desenvolvedor React Native Júnior
O React Native nos permite criar aplicativos mobile realmente nativos com JavaScript para Android e iOS. Ele vem sendo usado em aplicativos como Facebook, Instagram e Uber.Nesta formação vamos iniciar nossos estudos em React Native e depois aprender a acessar APIs nativas, incluindo o desenvolvimento de nosso próprio código nativo (Java e Objective-C) e integrá-lo ao JavaScript.
CONHEÇA A FORMAÇÃO

O que é Redux?

Redux é uma biblioteca para armazenamento de estados de aplicações JavaScript, criado por Dan Abramov. Ele nasceu através de uma implementação do Flux, uma arquitetura criada pelo Facebook para contribuir com as aplicações de User Interface, utilizando o conceito de fluxo de dados unidirecional. Quando desenvolvemos aplicações utilizando Javascript, sempre temos que lidar com o gerenciamento de estado. O Redux veio para suprir essa necessidade de simplificar o controle dos estados de uma aplicação. Compartilhar estados entre vários componentes diferentes se torna uma coisa muito fácil quando o utilizamos.

Ele basicamente tira a responsabilidade de cada um dos componentes de armazenar os estados, deixando tudo isso centralizado, sendo utilizado ao mesmo tempo por todos os componentes de forma compartilhada. Ele também roda em diferentes ambientes como servidor, cliente e nativo.

Fazendo o uso do Redux todos esses estados ficarão armazenados em uma árvore de objetos através do store. Para que isso aconteça, o Redux utiliza 3 recursos:

  • Store: você pode pensar em store como um container ou um grande centro de informações, que tem disponibilidade para receber e entregar o que o seu componente requisita. A store armazena de forma centralizada todos os estados da aplicação. Vale ressaltar que a store é imutável.
  • Actions: São ações disparadas da aplicação para o store. Elas são criadas através das action creators. As actions são a única forma de acionar uma mudança de estados no store.
  • Reducers: Cada dado da store deve ter o seu próprio reducer. Ele é encarregado de lidar com todas as ações e especificam como o estado da aplicação irá mudar de acordo com a action que foi enviada para o store.
React - Redux e Redux-Saga
Curso de React - Redux e Redux-Saga
CONHEÇA O CURSO

O fluxo geralmente funciona da seguinte forma: um componente gera uma interação através de um clique dado pelo usuário na interface – por exemplo, assim, um action creator é acionado e dispara uma ação para o store. Essa ação chega até um reducer que irá processar e fazer a alteração do estado no store. Assim um novo estado será disponibilizado para o componente.

Também é importante saber que o Redux tem 3 princípios, sendo:
Todos os estados estarão disponíveis exclusivamente através do store: todo o estado da sua aplicação vai estar armazenado nesse store que é único, onde todos os componentes vão consultar nesse store.
Os estados são somente leitura: os componentes não podem fazer uma manipulação direta nas informações que estão nele.
As alterações são feitas através de funções puras: o Redux utiliza o conceito de programação funcional, por isso toda alteração no store é feita através de uma função pura, chamada de reducer. O reducer recebe o estado e a ação, onde com essa ação nós visualizamos o que precisa ser alterado no estado e o reduce entrega uma nova store do nosso estado da aplicação.

Por ser uma biblioteca o Redux pode até ser utilizado sozinho, mas ele é normalmente implementado em um conjunto de outras libs ou frameworks JavaScript (Ember, Vue, Angular…). Mas o comum mesmo, que você até já deve ter visto, é vê-lo em funcionamento com o React. É muito comum ver projetos e exemplos de React com Redux juntos, mas é bom deixar claro que o Redux não depende do React.

Até a próxima!

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200