Desenvolvimento de

Aplicações Orientado a
Componentes

Frameworks e Bibliotecas
 Frameworks e Bibliotecas
Uma biblioteca é uma coleção de funções / objetos que serve a um propósito
específico, você pode usar uma biblioteca em uma variedade de projetos.
• Uma biblioteca contém várias funções, e estas funções realizam alguma tarefa útil para o seu
projeto.
Um framework é uma abstração que une códigos comuns entre vários
projetos de software provendo uma funcionalidade genérica.
• Um framework pode atingir uma funcionalidade específica, por configuração, durante a
programação de uma aplicação.
Arquitetura de componentes
● Arquitetura de Software
● definição dos componentes de software, suas propriedades externas, e seus
relacionamentos com outros softwares.

● Arquitetura de Componentes
● abordagem da engenharia de software para estrutura e desenvolvimento de sistemas.
● foco na decomposição da estrutura da funcionalidade individual ou componente lógico
● interface de comunicação contendo seus métodos, eventos e propriedades.
 Benefícios
Alto nível de abstração, estrutura principal da orientação a objetos, não focando em
questões de protocolos de comunicação e compartilhamento de estado.

“Decomposição da estrutura da aplicação em uma reutilização funcional ou

componentes lógicos que expõe um interface de comunicação bem definida.”
Benefícios
● Reusabilidade:
○ estruturados para ser reutilizado em diferentes cenários e diferentes aplicações
○ alguns componentes precisam ser estruturados para tarefa específica

● Substituição:
○ precisam ser facilmente substituídos por outros componentes similares

● Contexto não específico:

○ estruturados para operar em diferentes ambientes e contextos

○ informações específicas como estado do dado, devem ser enviadas para o componente ao
invés de serem incluídos ou acessados pelo componente.
Benefícios
● Extensibilidade:
○ componente pode ser estendido a partir de um componente para fornecer um novo
comportamento

● Encapsulamento:
○ expõe uma interface dele para os invocadores utilizar suas funcionalidades

○ não revela detalhes do seu processo interno ou alguma variável interna e estado

● Independência:
○ estruturados para ter o mínimo de dependência com outros componentes

○ pode ser disponibilizados dentro de um ambiente apropriado sem afetar outros componentes
ou sistemas
 MVC
● Trata-se de um padrão de desenvolvimento
● Não é novo, mas ainda muito usado
● Significa Model-View-Controller, assim:
○ Modelo: armazena os dados e notifica suas visões (banco de dados)

○ Visão: exibe os dados solicitados (front-end, interface gráfica)

○ Controle: regras de negócio da aplicação (back-end)

Por que há tantas coisas novas?
Desenvolvimento de aplicações (web ou não) se move de forma muito veloz.

A sensação que fica é de mudanças que nunca param, impossível acompanhar tudo.

Mas porquê?
○ Adaptação ao projeto
○ Desempenho
○ Funções específicas de um projeto
○ Ter a sua tecnologia é mais fácil de controlá-la
O que cada um carrega
● Cada um desses frameworks e bibliotecas carrega um estilo de desenvolvimento
e característica peculiares
● Existe um ecossistema por trás de cada um
○ Comunidades e empresas
● Foco de cada um pode ser diferente
○ Ambiente, características, funcionalidades
● Estrutura, organização e forma de trabalho
 E eu?
• Muito se fala em adaptação ao mercado
• Para isso, não podemos nos ater a uma única opção
• Tecnologias mudam
• Tecnologias são transitórias
• Profissionais devem conhecer o básico
• Profissionais devem aprender novas tecnologias
React
● Biblioteca JavaScript
● É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de
desenvolvedores individuais
● É utilizado em sites como:
● Netflix
● Airbnb
● Walmart
● e outros
● 9 em cada 10 programadores JavaScript buscam saber React
React
● Código aberto
● Comunidade de apoio
● Características: declarativa, eficiente e flexível para criar interfaces com o usuário
● Composição de interfaces gráficas complexas a partir de pequenos e isolados
códigos chamados “componentes”
● Ideia de reaproveitamento e não “reinventar a roda”
DOM
● Modelo de Objeto de Documento (DOM)
○ interface de programação para documentos HTML, XML e SVG

○ representação estruturada do documento como uma árvore

○ define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e
conteúdo do documento
○ representação do documento como um grupo estruturado de nós e objetos, possuindo várias
propriedades e métodos
○ nós podem ter manipuladores de eventos que lhe são inerentes

○ uma vez que um evento é acionado, os manipuladores de eventos são executados

○ conecta páginas web a scripts ou linguagens de programação

React-DOM
● DOM é frequentemente acessado usando JavaScript
● não é uma parte da linguagem JavaScript
● pode ser acessado por outras linguagens
● Pacote para integração React com DOM
● Métodos específicos para o DOM
Formas de se trabalhar com o React
● Adicionando a um site/sistema já existente
○ Atualização ou manutenção

https://pt-br.reactjs.org/docs/add-react-to-a-website.html

● Criando um novo React App

○ Começar do zero
○ Forma mais recomendada
■ Todas as funcionalidades e potencialidades disponível

https://pt-br.reactjs.org/docs/create-a-new-react-app.html

● Existem pré-requisitos:
○ node (https://nodejs.org/en/download/)
○ npm ( https://www.npmjs.com/get-npm - já vem com o node.js)
Conceitos
React -> entrada principal

● React.Component
○ https://pt-br.reactjs.org/docs/react-component.html

ReactDOM ->

● Funções para manipulação do DOM

● https://pt-br.reactjs.org/docs/react-dom.html

Babel -> Babel é um compilador JavaScript que inclui a capacidade de compilar JSX em
JavaScript regular.

● https://babeljs.io/docs/en/
Vamos a documentação, tutorial, blog e
comunidade

Onde começar?
https://pt-br.reactjs.org
Algumas referência bacanas
● https://blog.codecasts.com.br/enquanto-voce-le-um-novo-framework-js-nasce-
sqn-6da38ed0a0e9
● https://becode.com.br/frameworks-e-bibliotecas-javascript-que-voce-deveria-
conhecer/
● https://www.hostgator.com.br/blog/framework-javascript/