Web Avançado

Chrysthian Simão

Frameworks de frontend

Web Avançado

Construir Soluções Web

 

  • Frontend com React e TS
     
  • Backend com Node
     
  • Integração com Banco de dados NOSQL MongoDB

Git

Git

Repositório de códigos para poupar a sua pressão sanguínea e pra ajudar você do futuro.

 

Na universidade está instalado nas máquinas, mas em casa, você precisa instalar ele

https://git-scm.com/downloads

Git

Não tem uma conta? hora de fazer uma

https://github.com/

https://bitbucket.org/

Agora!
Já!
Nesse instante!

Git

Você pode instalar a ferramenta da sua preferência para trabalhar se quiser, mas eu vou mostrar via linha de comando mesmo.


O GitHub tem o github desktop por exemplo.

https://desktop.github.com/

Git

Como eu sei que instalou corretamente?

git --version

Usuário

A primeira coisa que você deve fazer ao instalar Git é configurar seu nome de usuário e endereço de e-mail.

Isto é importante porque cada commit usa esta informação, e ela é carimbada de forma imutável nos commits que você começa a criar.

Usuário

Configurando usuário global

$ git config --global user.name "Fulano de Tal"
$ git config --global user.email fulanodetal@exemplo.br

Clonando um repositório

Para pegar código de um repositório, dizemos que estamos clonando ele, isso quer dizer que tudo o que ele tem, na versão mais atual vai ser copiado para o seu equipamento.

Clonando um repositório

git clone https://github.com/chrysthian/up.git

Git pull

Como o comando clone só copia o repositório *naquele momento*, manter o projeto atualizado requer que você atualize ele.

 

Por exemplo se o professor enviar uma atualização de exercício ou código depois que você clonou.

Git pull

git pull

git pull (só que menor)

Gerenciando alterações

Nos arquivos locais (na sua máquina) você pode fazer o que achar melhor.

 

Mas você só pode enviar código para um repositório que você tem acesso, sendo como dono ou parte do time (isso é configurado no próprio repositório).

Add

É muito comum adicionarmos arquivos novos ao trabalhar em uma solução de código, mas para isso precisamos dizer ao repositório para versionar os arquivos novos também

Commit

A ação de commit, é salvar e versionar os arquivos alterados em relação ao código do repositório.

 

As alterações realizadas podem ser comparadas linha a linha, e é possível "voltar no tempo" entre as versões do código que passaram por um commit.

Commit

Commit é uma ação LOCAL!

O repositório ainda não sabe das suas alterações!!!

Push

Uma vez adicionados os arquivos novos, salvo as alterações nos arquivos antigos através de um commit, é hora de avisar o repositório que a versão do seu trabalho foi atualizada.

Push

Aqui entra o push, você "empurra" o código para o repositório.

Gerenciando alterações

git pull
git add .
git commit -m"mensagem curta sobre as alterações"
git push

Gerenciando alterações

VS Code resolve isso pra você, pode usar? pode

 

A vantagem do terminal é que os comandos são os mesmos sempre, já interface pode mudar de ferramenta pra ferramenta, então tem que acostumar com cada uma.

 

A gosto do freguês desde que entenda o conceito

Resolvendo conflitos

Quando duas pessoas mexem em um mesmo trecho de código, como o repositório sabe qual é o correto?

 

Isso acontece quando esse cenário é identificado em um pull, por isso o primeiro comando antes de enviar código deve ser pull

Resolvendo conflitos

Quando o conflito aparece o git tentará resolver os conflitos automaticamente, (por exemplo somando alterações em um mesmo arquivo, mas trechos diferentes de código)

 

Mas se ainda assim existir conflitos eles precisam ser resolvidos manualmente

Resolvendo conflitos

O próprio VS Code trará uma listagem de arquivos que precisam de uma intervenção do desenvolvedor para que sejam solucionados.

 

Uma vez resolvidos, é necessário um commit e um push.

 

Mas claro, TESTE antes de enviar a sua atualização ou todos que estiverem consumindo o repositório podem acabar puxando um código quebrado.

Caminhos "alternativos"

Algumas pessoas tentam postegar o uso do git ao acessar os sites que contém os repositórios e navegar pelo código diretamente no navegador.

 

Embora as ferramentas como github e bitbucket tenham essa facilidade, é preferível clonar o repositório de fato, permitindo o uso de IDEs, gerar alterações locais, além de aplicações mais complexas precisarem de um processo de build antes de rodar.

 

Consulte pelo navegador somente em casos de consultas rápidas, mas via de regra, clone o repositório

Web comofas?

Cliente x Servidor

Navegadores
(por baixo dos panos)

  • Seu navegador (cliente) faz requisições para um servidor
     
  • O servidor processa essa requisição
     
  • Seu navegador recebe uma resposta
     
  • O Navegador baixa os arquivos localmente (cache)
     
  • Usando as informações locais, o browser as interpreta e exibe na tela o resultado

HTTP é a sigla para Hypertext Transfer Protocol, que em português significa Protocolo de Transferência de Hipertexto.

Trata-se de um padrão de comunicação utilizado para a transferência de informações na World Wide Web e em outros sistemas de rede.

Protocolo HTTP

Ele é a base da comunicação na internet e permite que os navegadores solicitem páginas da web e outros recursos de servidores, bem como enviem informações de volta para esses servidores.

Protocolo HTTP

http, a parte antes de "://" é o que chamamos de URL Scheme.

 

Nesse caso, estamos falando para o navegador usar o Hypertext Transfer Protocol, o HTTP.

URL

Existem outros esquemas, tais como: https, FTP, mailto.

 

Tudo que vier depois de "://" é específico do protocolo que estiver sendo utilizado.

URL

https://slides.com/chrysthian/

Protocolo HTTP

Hypertext Transfer Protocol Secure (HTTPS) é uma extensão do HTTP que usa criptografia de dados, ou seja é igual, só que diferente

Endereços como google.com são na verdade o nome do servidor que armazena nosso recurso.

Nosso navegador vai realizar um processo conhecido como DNS Lookup para traduzir o nome em um endereço de rede (IP) e vai enviar a requisição para esse endereço.

DNS
Domain Name System

A sua função não é hospedar sites ou aplicações que criamos, mas sim permitir que as requisições cheguem aos locais corretos.

 

Um servidor DNS é feito única e exclusivamente para a tradução de domínios para endereços de IP

DNS
Domain Name System

https://slides.com/chrysthian/

DNS

18.211.49.95

Url path é o que aparece depois do DNS.

 

O servidor irá identificar qual é o recurso específico que deve devolver para este caminho quando a requisição chega

URL PATH

Podem ser recursos a serem interpretados como uma página

OU

Arquivos que fazem parte da apresentação como arquivos CSS, JS, vídeos e imagens.

URL PATH

Na nossa disciplina, uma aplicação desenvolvida em node irá tratar a requisição no servidor, fará uma consulta em um banco de dados e o recurso que será devolvido para ser construído dinamicamente por esta aplicação.

URL PATH

https://slides.com/chrysthian/

URL PATH

Esse número 80 representa o número da porta que o servidor está usando para “ouvir” requisições HTTPS.

A porta 80 é a padrão e é opcional no caso do uso do endereço em um navegador, então, normalmente você não vê esse 80 nas URLs.

PORT

https://slides.com:80/chrysthian

É mais comum especificarmos esta porta quando estamos testando a aplicação em ambiente de homologação/testes.

 

Como por exemplo http://localhost:3000

PORT

http://localhost:3000

PORT

Aba Network do seu browser

 Ctrl+Shift+J (Edge)

F12 (Chrome, Firefox)

Status

Para saber se uma requisição foi bem sucedida ou não há um padrão de códigos de status.

 

Respostas Informativas (100 – 199)
Respostas bem-sucedidas (200 – 299)
Mensagens de redirecionamento (300 – 399)
Respostas de erro do cliente (400 – 499)
Respostas de erro do servidor (500 – 599)

http.cat

https://developer.mozilla.org

React!
(Finally!)

Um pouco de história

Era uma vez o facebook... Eles tem uma aplicação de complexidade crescente que precisava de um controle adequado na exibição, sem que as coisas fossem complexas demais para gerenciar.

A partir daí os engenheiros criaram essa biblioteca, viram que ela era muito robusta, então disponibilizaram ela em código aberto para a comunidade.

Dezoito versões depois, cá estamos.

Framework

Um framework é um conjunto de ferramentas e bibliotecas que fornecem um conjunto de recursos e funcionalidades prontas para programadores.

 

Isso permite construir aplicativos mais rapidamente, com menos esforço e código, e com menores chances de erros.

Framework

Algumas pessoas dizem que o React não é um framework e sim uma biblioteca, porque o react te da ferramentas, mas você é livre pra usá-las como achar melhor.

É bom porque você pode fazer o que quiser

É ruim porque você pode fazer o que quiser!

Framework

MAS, contudo, todavia, entretanto, existem algumas soluções que são consideradas frameworks, como o next.js.

 

Ele é construído em cima de react.js e a própria página de quick start cita o uso de um framework.

 

React.js base é perfeitamente capaz de suportar uma aplicação de alta disponibilidade, MAS a arquitetura é por nossa conta.

Porque React?

Aplicações web ricas que precisam ser atualizadas em tempo real e que permita a criação de soluções escaláveis em times de qualquer tamanho.

Componentes

A principal característica do React é permitir a criação de componentes reutilizáveis, como blocos de montar.

 

Estes componentes podem ser tão atômicos quanto necessário, de linhas e botões, até a páginas inteiras.

Virtual DOM

O que torna o React tão rãpido é o conceito introduzido pela lib, o Virtual DOM.

 

A árvore do DOM como vimos até agora é lenta demais para atualizações constantes.

Virtual DOM

Como o nome diz, é uma representação da árvore do DOM em memória, que uma vez atualizada é replicada inteira para o DOM final, sendo muito mais rápida porque acaba modificando somente o elemento necessário e não reconstruindo todos os nós.

Montando Ambiente

Node.js

É um motor de tempo de execução JavaScript de código aberto. Ele executa o código JavaScript fora de um navegador.

https://nodejs.org/en/

Node.js

Como eu sei que instalou corretamente?

node --version
npm --version
npx --version

NPM

O NPM (Node Package Manager), é o gerenciador de pacotes do node, e permite baixar e gerenciar bibliotecas javascript.

 

React é uma delas, mas muitas outras bibliotecas podem ser instaladas através dessa ferramenta.

node_modules

Terminal

Usuários do windão (provavelmente 99,9%), windows terminal é seu amigo, se não tem instalado na sua máquina em casa, instale!

 

https://apps.microsoft.com/detail/9n0dx20hk701?hl=en-us&gl=BR

Hands On

Hello React.js

npx create-react-app nome-do-seu-projeto
npm start

JSX (WTF!?)

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

JSX

JSX é uma extensão da linguagem JavaScript que é usada pelo React para criar interfaces de usuário.

 

Ele permite que você misture código JS com sintaxe de HTML, o que torna mais fácil escrever componentes de interface de usuário em um único arquivo de código.

 

Diferente do Angular, que traz lógica para o HTML, o React traz o HTML pra dentro do JS.

Next.js

Exemplo de código

npm install
npm run dev

Exemplos do que vem a seguir no projeto "next-freestyle" do repositório, MAS é altamente aconselhável fazer junto na aula

Hands On

Hello Next.js

npx create-next-app@13.5.6
npm run dev

Requer Node 16.14.0 no mínimo!
(LTS mais recente está na versão 20)

Hands On

"files.associations": {
  "*.css": "tailwindcss"
}

Configurações adicionais se estiver com tailwind:
 

CTRL + SHIFT + P
workspace settings (JSON)

Estrutura de pastas

/app - rotas componentes e lógica da sua aplicação

 

/app/globals.css - Configurações CSS globais da sua aplicação

 

/public: Contêm os assets estáticos da sua aplicação (ex. imagens)

 

Simple component

import React from 'react';

export default function Simple() {
  return (<div> Simples </div>)
}

Simple component+

import React, { ReactNode } from 'react';

interface params {
  name: string;
  age?: number;
}

const SimpleWithParam = (values: params): ReactNode => {
  return (<div> {values.name} </div>)
}

export default SimpleWithParam;

Simple component++

import React from 'react';

const SimpleWithChildren =
  ({ children }: // nome do parâmetro
    { children: React.ReactNode }) // tipo do parâmetro
    : React.ReactNode => { // retorno da função

    return (<div> {children} </div>)

  }


export default SimpleWithChildren;

Simple component++ (v2)

import React from 'react';

interface params {
  children: React.ReactNode
}

const SimpleWithChildren = (values: params)
: React.ReactNode => {
  return (<div> {values.children} </div>)
}


export default SimpleWithChildren;

Como usa?

import styles from './page.module.css'
import Simple from './components/Simple'
import SimpleWithChildren from './components/SimpleWithChildren'
import SimpleWithParam from './components/SimpleWithParam'

export default function Home() {
  return (
    <main className={styles.main}>
      <Simple />
      <SimpleWithChildren>
        <h1>Quero café</h1>
      </SimpleWithChildren>

      <SimpleWithParam name="Takoyaki" />
    </main>
  )
}

Google Fonts

Fontes são importantes para fortalecer imagem e características para a sua aplicação, e felizmente utilizar fontes customizáveis é bem simples.

https://fonts.google.com/

Serifas

Elas funcionam para conduzir o texto, guiando os olhos do leitor em um fluxo horizontal.

 

Durante a leitura, nosso cérebro não decifra letra por letra e sim 

palavras ou conjuntos delas, facilitando a leitura.

 

Medium.com usa serifas para texto contínuo

Sem Serifas

Essas fontes são bastante utilizadas para textos mais curtos e para a criação de peças de design gráfico.

 

No entanto as interfaces de aplicações tendem a ser mais sucintas e abusam de fontes SEM serifas, muitas vezes adotando a fonte ao layout.

Fonte Primária

import { Poppins } from 'next/font/google'
const poppins = Poppins({ subsets: ['latin'],
  variable: '--font-poppins', weight: ['400'] });
  
  return (
    <html lang="en">
      <body className={poppins.variable}>{children}</body>
    </html>
  )

Layout.jsx

Mais fontes!

import { Lusitana } from 'next/font/google';

export const lusitana = Lusitana({
  weight: ['400', '700'],
  subsets: ['latin'],
});

./ui/fonts.ts

import { lusitana } from './ui/fonts';

<p className={`${lusitana.className} text-3xl text-white`}>
  Que ninguém se engane, só se consegue a simplicidade
  através de muito trabalho.
</p>

page.tsx

Otimização de Imagens

Arquivos estáticos como imagens podem ser otimizados para responsividade.

 

Impedir um "flick" conforme o conteúdo é incorporado a página e  trazendo carregamendo tardio (lazy-loading) com o Next.js

Otimização de Imagens

Para isso utilizamos o componetne de <Image> no Next.js.

 

Bônus que ele já é um componente que exige acessibilidade obrigando o atributo alt na tag. 

Rotas

Uma facilidade do Next é a resolução natural as rotas de novas páginas, no React vanilla é necessário adicionar uma biblioteca e configurar ​ manualmente

Rotas

Rotas aqui utilizam o contexto de pastas, apenas respeitando a estrutura ela se resolve automagicamente.

Rotas

CSS Modules

Permite a criação de nomes únicos de classes por componentes, adicionando um hash, Isso existe para evitar conflitos.

 

Next.js tem um suporte nativo a  módulos CSS usando a extensão .module.css .

CSS Modules

import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

CLSX

Lógica com classes CSS?

 

Já pensou em aplicar uma classe CSS em situações específicas?

 

A biblioteca clsx te salva, MAS ela não vem instalada por padrão no Next.js.

Bibliotecas NPM

Algumas coisas mais comuns pra uma aplicação provavelmente já foram resolvidas, então não é necessário reinventar a roda, talvez uma biblioteca NPM resolva seu caso.

 

Isso vai instalar a biblioteca e as dependências no node_modules e atualizar o package.json e package-lock.json

Hands On

npm install clsx

Componente Status

<div
  className={clsx(
    'status',
    {
      'bg-gray-100 text-gray-500': status === 'pending',
      'bg-green-500 text-white': status === 'paid',
    },
  )}
>

Como usa?

import Status from './ui/Status';

<div>
  <Status status='pending' />
  <Status status='paid' />
</div>

Tailwind

https://tailwindcss.com/docs/preflight

Tailwind é uma biblioteca incorporada ao Next que traz facilidades em escrever CSS para coisas usuais.

Pode parecer um pouco amendrontador no início mas com o tempo ela fica mais natural de usar.

https://tailwindcss.com/docs/utility-first

Funciona junto com o seu CSS customizado, MAS pode ter problemas dependendo da biblioteca externa que você tentar juntar ao projeto.

Responsividade

Existem ferramentas para ajudar na responsividade (conteúdo adequado ao tamanho de tela), uma delas é utilizar media queries do CSS, isso permite que regras CSS sejam aplicadas conforme o tamanho da tela do navegador

Responsividade

@media (min-width: 640px) {
 /*
 	aqui só será aplicado se a tela
 	tiver 640px ou MENOS
 */
}


@media (min-width:400px) and (max-width:900px) {
	/* Não menor que 400px nem maior que 900px */
}

Responsividade

Outra ferramenta é usar elementos com
display:flex
display:grid

https://origamid.com/projetos/flexbox-guia-completo/

https://www.origamid.com/projetos/css-grid-layout-guia-completo/

1-line-css layouts

https://1linelayouts.glitch.me/

https://www.youtube.com/watch?v=qm0IfG1GyZU

Material UI

Seguindo a mágica de componentes em React, e se a gente tivesse uma biblioteca de componetnes inteligentes e ricos para podermos utilizar em nossas aplicações?

 

Alguns componentes, digamos... da google.

Material UI

https://mui.com/material-ui/

É um conjunto de componentes que segue os princípios da Google de design, tudo é feito de forma a simular uma representação física, um....material.

https://mui.com/material-ui/all-components/

Material UI + Tailwind

Material UI tem seu CSS, suas definições, tailwind também, então eles não conversam muito bem... 

 

Então se você vai usar uma estrutura que precisa de uns componentes mais complicados, comece pelo material UI, se a estrutura é mais próxima de uma landing page, é preferível usar o tailwind.

 

Da pra juntar os dois? até da, mas vai precisar resolver uns conflitos...

Hands On

Quero instalar o Material-UI

npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource/roboto
npm install @mui/icons-material

Avaliação A2!

  • Somente frontend (backend vai pra A1)
  • React + TS (Next não é obrigatório, mas recomendado)
  • Somente GIT! (zipão não vai colar)
  • 2 páginas (mínimo)
  • Componentes customizados com lógica, igual a quantidate de integrantes (minimo 3)
  • Responsivo
  • Com controle de estado (Redux/Zustand)
  • Com hooks
  • O tema que você quiser, defendendo o código durante a apresentação

Exemplos e Templates

React hooks

React tem a sua forma de reagir a coisas que ocorrem na página, incluímos em nossos componentes algumas coisas específicas da biblioteca, chamados hooks

React hooks

Por padrão, hooks são nomeados com o prefixo "use", como useState, useEffect, useMemo, useRouter etc...

useState

useState é um comportamento adicionado aos nosso componentes que guarda... um estado próprio do componente, algo que só ele precisa saber.

useState

const [count, setCount] = useState(0)

Variável que guarda o valor

função pra alterar esse valor

chamada do hook + inicialização

useEffect

Essa é a forma de reagir a aplicação, mudança do ciclo de vida do nosso componente (criação, montagem e desmontagem de acordo com o virtualDOM).

 

É uma função que vai ser chamada e fazer... alguma coisa quando um critério de execução acontecer

useEffect

useEffect(
    () => {
        // executa o side effect / função
    },
    // array opcional de critérios para execução
    [
        // 0 ou mais critérios
    ] 
)

useEffect

useEffect(() => {
  // Executa toda vez que o componente for
  // renderizado (mudou valor, 
  // desenhou um componente filho etc...)
});

useEffect(() => {
  // Executa apenas uma vez
  // quando o componente aprece
}, []);

useEffect(() => {
  // Executa a primeira vez que renderizar
  // E toda vez que "count" mudar de valor
}, [count, count2]);

useEffect

No fim só parece aplicar lógica com passos extras! (meme aqui)
 

Mas agora coloque em perpectiva que chamadas de APIs externas podem acontecer no useEffect

 

(Ex. apertei um botão para envio de um formulário, eu vou REAGIR a resposta)

Gerenciando estados da aplicação

Lembra da história do facebook com React?

Eles precisavam controlar não só o estado de cada componente, mas o estado da aplicação como um todo, para que cada componente reaja de acordo com as mudanças da aplicação.

 

Ex. Usuário logado, ele tem permissões a quais telas? qual o tema de cores ele escolheu, claro ou escuro?

Gerenciando estados da aplicação

Além do que, não era incomum componentes precisarem mandar informações para outros componentes, e aí, comofas?

 

Entrou em pauta o gerenciamento de estados da aplicação, pra não virar um macarrão de componetnes pasasndo informações de forma desorganizada, isso começou com uma tecnologia chamada Redux.

 

MAS para a sua sorte esse tipo de abordagem evoluiu pra alguns conceitos com uma curva de aprendizado mais amena.

Gerenciando estados da aplicação

Zustand

npm install zustand

Exemplos estão no projeto "hooks-states-api" do repositório

Revisão

next-day-night

Baixem o projeto base, instalem as dependências e vamos incluir estados locais e globais!

next-day-night

Estado Local (por componente)


Cada janela vai exibir um texto se ela está aberta ou fechada e ao clicar no botão isso se atualiza

next-day-night

Se o modo for escuro a cor do fundo da página será: #292c35

 

Se o modo for claro a cor do fundo da página será: #fff

next-day-night

Se o modo for escuro as janelas vão ter a cor: #0e4a66 e texto #ffff00

 

Se o modo for claro as janelas vão ter a cor: #0e4aaa e texto #ffffff

Avaliação A2! (AGAIN!)

  • Somente frontend (backend vai pra A1)
  • React + TS (Next não é obrigatório, mas recomendado)
  • Somente GIT! (zipão não vai colar)
  • 2 páginas (mínimo)
  • Componentes customizados com lógica, igual a quantidate de integrantes (minimo 3)
  • Responsivo
  • Com controle de estado (Redux/Zustand)
  • Com hooks
  • O tema que você quiser, defendendo o código durante a apresentação
Made with Slides.com