Tópicos Especiais

Chrysthian Simão

Introdução a Frameworks de Frontend

Tópicos Especiais

Desenvolvimento de projetos web

Backend com C# e .Net Core
Frontend com React e TS

Cliente x Servidor

Cliente

(estamos aqui)

Servidor

Model-View-Controller

Alguns exemplos legais

https://stars.chromeexperiments.com/

https://www.apple.com/airpods-pro/

https://sureshmurali.github.io/

Web Básico

HTML Básico

É uma linguagem de marcação para apresentar conteúdo separado por <tags>.

Essas tags são simples e existem desde o início da internet, encapsuladas em arquivos com a extensão .html

HTML Básico

Esse é um dos tipos de arquivo que trafegam pelo protocolo HTTP que é utilizado para montar a nossa página web.

Essas tags são organizadas numa estrutura de árvore chamada DOM (Document Object Model).

Entendendo a árvore do DOM

<html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <h1>My Header</h1>
        <a href="wwww.google.com">My Link</a>
    </body>
</html>

(esse arquivo está no repositório na pasta WebBasico)

Entendendo a árvore do DOM

CSS Básico

Dar uma cara melhor para as coisas começou a fazer diferença, então entrou o CSS - Cascade Styling Sheets.

São marcações que alteram a aparências das páginas de acordo com critérios chamados "selectors".

CSS Básico

Os selectors... selecionam os elementos das páginas que soincidem com os critérios definidos e aplicam as alterações necessárias.

CSS Básico

As principais funções além de estilização são:

Usabilidade (como leitores de tela para deficientes visuais)
Responsividade (múltiplos tamanhos de tela) são coisas resolvidas com o CSS.

Em resumo mudam isso

Pra isso

(esse arquivo está no repositório na pasta WebBasico/Nebula)

JS Básico

Não só de aparências, mas sentiu-se a necessidade de trazer funcionalidades as páginas web.

Então em meados de 1993 a Netscape fez a primeira versão da linguagem e lançou em 1994 no seu navegador.

JS Básico

Javascript é uma linguagem não tipada o que permite algumas... liberdades poéticas com tipagem e lógica de código num geral.

E como junta tudo?

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

(esse arquivo está no repositório na pasta WebBasico/Template)

CSS

Javascript

Tags HTML, que incorporam a árvore do DOM

Particularidades do JS

Boolean

let y = true; 
let x = false;
let z = null;

z = 3 > 2;    // true

// resultados assumindo uma chamada 
// a função teste(z) aqui do lado -->

z = y && x;      //false
z = undefined;   //false
z = null;        //false
z = "";          //false
z = "bolovo";    //true
z = 0;           //false
z = NaN;         //false
z = 10;          //true
z = {};          //true
z = [];          //true

function teste( z ){
    if( z ){
        alert("true");
    } else {
        alert("false");
    }
};

Nada muito novo ali em cima, mas igualdade é uma coisa mais delicada!

String

let a = "Laranja";
let b = "Batata";

console.log(a > b); // true

console.log(a.localeCompare(b)); // -1

console.log(b.localeCompare(a)); // 1

console.log(a.localeCompare(a)); // 0

Array

let a = new Array();  //usamos um construtor para criar um array
let a = [];           //também é um construtor válido

let cars = new Array("Fusca", "Palio", "BMW");
let cars = ["Fusca", "Palio", "BMW"];

let name = cars[0];     //'Fusca'

let x = cars.length;    // obtem o número de elementos (3)
let y = cars.sort();    // ordenação nativa

let fruits = ["Banana", "Laranja", "Maçã", "Manga"];
fruits.push("Limão");                  // adiciona um elemento ao array
fruits[fruits.length] = "Abacate";     // Também funciona

Array

let wtf = [];

wtf["a"] = "abacate";

wtf[0];     // undefined
wtf["a"];   // 'abacate'

function mensagem( str ){ 
    alert( str ); 
}

wtf["funcao"] = mensagem;
wtf["funcao"]("bolinho"); // que diabos!?

Ponteiros

Javascript usa ponteiros (ou referências de memória, como preferir). É um conceito importante para escrever um código otimizado.

Os ponteiros do Javascript funcionam da mesma forma que em Java com contagem de referência.

Ponteiros

Assim como no Java, no JS tudo são ponteiros, a própria declaração de uma variável acontece da seguinte forma:

  let a = [];

O código é interpretado por uma linguagem de baixo nível
Memória é alocada para guardar a informação
A variável recebe o ponteiro de memória contendo a informação

Ponteiros

let a = 2; 
let b = a;

// Só há um espaço reservado em memória com o nosso objeto
// No entanto há duas referências ("a" e "b") para o mesmo
// endereço de memória

b = null;

// Isto faz com que a referência ao objeto da variável "b" 
// deixe de existir mantendo apenas uma referência em "a"

a = null;

// Agora sem as duas referências o valor alocado em memória 
// pode ser sinalizado para garbage collection

Ponteiros

Algumas coisas começam a fazer sentido agora como por exemplo, porque consideram o operador "new" computacionalmente caro, é porque ele aloca fisicamente memória.

Isso não é só sobre JS mas linguagens num geral.

Se a linguagem usa uma VM inteligente, ela gerencia a própria memória e consegue amenizar o impacto em tempo de execução.

Null e Undefined

Null e Undefined são coisas diferentes para a linguagem, mas são logicamente iguais (então por isso é comum confundir).

Uma variável declarada vazia, sem atribuição é undefined, porque nenhuma memória foi alocada para ela ainda.

Se a variável recebe a atribução de null, significa que ela continha algo e está pronta para ser coletada no Garbage Collector porque ela não será mais usada.

Afetando a página com JS

Objeto Math

https://developer.mozilla.org

Math.sqrt(16);   //4
Math.PI;         //3.141592653589793
Math.cos(1);     //0.5403023058681398
Math.ceil(1.2);  //2
Math.floor(1.2); //1
Math.random();   //Um número aleatório entre 0 e 1

//esta função retorna um valor aleatório entre um mínimo e um máximo
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

Objeto document

<html>
    <head>
        <title>My Title</title>
    </head>

    <body>
        <h1 id="header">My header</h1>
        <a href="http://www.google.com.br" id="myLink">My link</a>
    </body>
</html>

<script>
    console.log( document.getElementById("myLink") );
</script>

https://developer.mozilla.org

Objeto document

//Retorna uma lista de elementos com o nome de tag HTML fornecido.
document.getElementsByTagName();

function encontrarTagP() {
  const all = document.getElementsByTagName('p');
  let num = all.length;
  alert('Existem ' + num + ' parágrafos neste documento');
}

Objeto document

//Retorna uma lista de elementos com o nome de classe CSS fornecido.
document.getElementsByClassName();

<p class="test">hello</p>
            
<script>
   let test = document.getElementsByClassName("test");
   console.log(test);
</script>

Interagindo com Tags

Tags HTML podem ser manipuladas normalmente com JS, é o uso mais comum da linguagem.

Atributos, valores e eventos podem ser manipulados programaticamente

Interagindo com Tags

<html>
    <head>
        <title>My Title</title>
    </head>

    <body>
        <h1 id="header">My header</h1>
        <a href="http://www.google.com.br" id="myLink">My link</a>
    </body>
</html>

<script>
    console.log( document.getElementById("myLink").href );
</script>

Eventos do Navegador

<html>
    <head>
        <title>My Title</title>
    </head>

    <body>
        <h1 id="header">My header</h1>
        <a href="http://www.google.com.br" id="myLink">My link</a><br>
        <input type="button" value="Click me!"
         onclick="exibirConsole()">
    </body>
</html>

<script>
    function exibirConsole(){
        console.log( document.getElementById("myLink").href );
    }
</script>

Manipulando HTML

<html>
<body>

<h1 id="header">Você não clicou no botão</h1>

<input type="button" value="Clique em mim!" onclick="change()">
<script>

let count = 0;

function change(){
    let element = document.getElementById("header");
    count++;
    element.innerHTML = "Você clicou no botão " + count + " vez(es)!";

    console.log(window.count);
}

</script>
</body>
</html>

Let's get Ready to Rumble!

Adivinhe a cor

React!

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!

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

Hands On

Hello React.js + TS

npx create-react-app my-app --template typescript
npm start

Hands On

localhost:3000

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 / TSX

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.

A variante do JSX para Typescript (que vamos usar) é TSX.

SPA

Single-page application é uma aplicação que carrega uma única página web, e então atualiza o conteúdo desse documento utilizando Javascript.

SPA

Da mesma forma que demonstramos que é possível trazer interação no exemplo de adivinhar a cor, React e outras bibliotecas e frameworks elevam isso trazendo estruturas mais complexas e otimizadas

Rotas

Então como navegamos pela aplicação se quisermos mais do que... uma página?

Usamos o conceito de rotas, o JS toma controle do histórico de navegador para simular o comportamento, e dar a impressão de múltiplas páginas, mas no fim do dia é uma só, atualizada constantemente

Rotas

Como estamos usando o React vanilla, temos que usar uma biblioteca externa para incluir e configurar rotas, alguns frameworks como o Next.js já tem configuradas as rotas no template padrão

Rotas

npm install --save react-router-dom

Adicionamos bibliotecas ao projeto para não ser necessário fazer muitas coisas no braço, assim como C# tem o nuGet, o Java tem o Maven, o Node tem o NPM, e instalamos as bibliotecas por comandos node

Simple component

import React from 'react';

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

Simple component+

import React, { ReactElement } from 'react';

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

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

export default SimpleWithParam;

Simple component++ (v2)

import React from 'react';

interface params {
  children: React.ReactNode
}

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


export default SimpleWithChildren;

Como usa?

import Simple from './components/Simple'
import SimpleWithChildren from './components/SimpleWithChildren'
import SimpleWithParam from './components/SimpleWithParam'

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

  	  <SimpleWithChildren>
        <h1>Quero café</h1>
      </SimpleWithChildren>

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

CSS + React

React é uma biblioteca que interpreta as páginas JSX/TSX transfere elas para o Virtual DOM, e este, atualiza o DOM do navegador.

Isso significa que o navegador não entende a sintaxe de um componente ou página React

CSS + React

Então algumas coisas precisam ser ligeiramente adaptadas, no caso do CSS, normalmente utilizamos o atributo class para aplicar um estilo CSS, mas essa é uma palavra reservada, então em TSX usamos className

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 MAIS
 */
}


@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

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

Store

É basicamente uma forma de armazenamento de variáveis e funções globais, que afeta a aplicação como um todo.

Uma alteração faz uma cascata de chamadas para quem está observando, é um design pattern chamado de observer

Zustand

npm install zustand

Store

Primeiro precisamos criar essa store

import { create } from "zustand"

// definição do meu estado global
interface DarkModeStore {
  dark: boolean // variável
  setDark: () => void // método pra alterar minha variável
}

//crio um estado baseado na minha interface
export const useDarkMode = create<DarkModeStore>()(
  // inicializo as minhas variáveis e defino os comportamentos
  (set) => ({
    dark: true,
    setDark: () => set((store) => ({ dark: !store.dark })),
  })
)

Store

Então acessamos ela de dentro dos componetentes

import { useDarkMode } from "../../store/darkModeStore"

const Window = (): ReactElement => {
  const isDark = useDarkMode((state) => {
    return state.dark
  })
  
  const backgorundColor = isDark ? "#0e4a66" : "#0e4aaa"

  return (
    <div className="window" style={{
    	background: backgorundColor,
    }}>
    </div>)
}

Hands on!

Crie um projeto em React (pode usar meus templates) que tenha um componente que apresente um contador e um botão.

Quando eu no botão uma vez ele incrementa o valor em um.

Utilize o hook de useState

Hands on!

Agora crie um novo componente que faça o mesmo MAS usando uma store do zustand.

Coloque múltiplos componentes iguais na tela pra mostrar o estado global.

Integrando front e backend

C#

Mais algumas configurações para o nosso backend para habilitar comunicação com o frontend, no projeto C#, há um arquivo de configuração chamado launchSettings.json.

Através dele vamos configurar uma porta padrão para que a nossa aplicação rode.

Dentro desse arquivo mude as portas dos endereços listados para a porta que você deseja (por exemplo 4000)

CORS

Cross-Origin Resource Sharing, a sina dos frontends, o terror dos dev ops.

// nome arbitrário
var origins = "_origins";

builder.Services.AddCors(options =>
{
	options.AddPolicy(name: origins,
	policy =>
		{
			policy.WithOrigins("http://localhost:3000")
				.AllowAnyHeader()
				.AllowAnyMethod();
		});
});

WebApplication app = builder.Build();
app.UseCors(origins);

Lá no frontend

  useEffect(() => {
    fetch('http://localhost:4000/api/icecream/getAll',
    {method: "GET"})
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
      })
  }, [])

Dentro do seu componente (por exemplo)

Lá no frontend

  useEffect(() => {
    if (!isDark) {
      const data = {
        id: "a2dcc71f-7705-4db6-8cf4-4f87994203b1",
        name: "Framboesa",
      }

      fetch("http://localhost:4000/api/flavors", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((res) => res.json())
        .then((data) => {
          console.log(data)
        })
    }
  }, [isDark])

Referências Legais

https://www.w3schools.com/css/css3_animations.asp

Avaliação A1!

Frontend em react e TS, backend em C# com Asp.net
Pelo menos 3 componentes com lógica
Frontend responsivo (tem que caber de desktop a 375px)
Utilizar Rest API com pelo menos 7 endpoints
GET, POST, PATCH, PUT, DELETE
Persistência no banco
O tema que você quiser, defendendo o código durante a apresentação