Descomplicando a

Web moderna

 

@WellsSA

Wellington S. Almeida

  • Typescript Fullstack Developer 
  • CTO & Co-founder at @Envia.io
  • Community Manager at @FlutterNation
  • Designer, maybe?
  • Speaker? @icarcal
  • Music? Let's Rock!

@WellsSA

ETEC Everywhere

@WellsSA

Mas afinal, o que raios é a web?

@WellsSA

No nosso caso

@WellsSA

Frontend

Backend

Infraestrutura

Mas melhor que isso!

@WellsSA

A lógica por trás do mercado atual!

Tecnologias

Conceitos

A princípio

@WellsSA

ANTES DE TUDO

@WellsSA

MAS PRIMEIRO

@WellsSA

1. Aproveite a jornada!

@WellsSA

2. Interrompa, interaja, faça perguntas! :D

("Tamo aí pra isso")

@WellsSA

3. Não se preocupe em saber tudo isso!

(Ajuda, mas não é obrigatório!)

@WellsSA

Agooora sim

@WellsSA

Frontend

Backend

Infraestrutura

@WellsSA

O que é                             ?

Frontend

  • Exibição para o usuário
     
  • Num ambiente controlado (navegador ou aplicativo)
     
  • Web / Mobile / Terminal

@WellsSA

Falando de Web

  • Não interage com o computador (pra existir precisa do browser)
     
  • Não interage com outras abas

@WellsSA

Falando de Mobile

  • Interage com o "computador" (celular) - mas precisa de permissão
     
  • Não interage com outros aplicativos

Tudo que chega pro usuário, ele tem acesso!

(Nada de senha em input hidden!)

@WellsSA

O que é                             ?

  • Responsável por interagir com serviços!
    (Bancos de dados, APIs, outros backends)
     
  • Tem acesso ao computador
     
  • Pode escrever arquivos
    (TXT, PDF, PNG, XLSX, etc)
     
  • Pode ter chaves de acesso

Backend

@WellsSA

Serviços?

http://localhost:3306

Text

(Processos)

@WellsSA

Serviços

@WellsSA

Serviços

http://localhost:3306

Host

Porta

(Máquina)

@WellsSA

O que é                             ?

  • No nosso exemplo, o computador
     
  • Todo o ambiente onde nossos serviços rodarão
     
  • Como vou subir a máquina que vai rodar meu código? O banco de dados?

Infraestrutura

@WellsSA

Provedores de cloud

  • Te permitem criar suas "máquinas" online
     
  • Oferecem serviços de bancos de
    dados, servidores, etc.

@WellsSA

Separado funciona, mas e junto?

www.wellsadev.com

231.69.123.15

(http://)

DNS

Você

Resposta

Requisição

Frontend

Infraestrutura

Infraestrutura

Infraestrutura

Backend

(HTML, CSS, JS)

@WellsSA

Por trás do backend

166.72.122.12

Infraestrutura

Infraestrutura

Backend

231.69.123.15

172.16.124.13

Backend

Infraestrutura

Banco de dados

Requisições (http | ws | ...)

Resposta (JSON)

@WellsSA

O que é JSON? 

[
    {
        nome: "Wellington",
        idade: 20,
        amigos: ["Kaleo", "Lucas"],
    },
    {
        nome: "Kaleo",
        idade: 21,
        amigos: ["Lucas", "Wellington"],
    },
]
"[{"nome":"Wellington","idade":20,"amigos":["Kaleo","Lucas"]},{"nome":"Kaleo","idade":21,"amigos":["Lucas","Wellington"]}]"

Objeto

X

Texto

(JavaScript Object Notation)

Partindo do básico

"Lá em 1800 e Chicão era     jovem" - Correa, Cristiano

@WellsSA

Programação Estruturada

meu programa;

int variável;
String variável2;

begin
    # um monte de código
    # mais código
    # sério, muito código
    # mais um pouquinho de código
    # já disse que tem código?
    # pode acreditar, código mesmo
	...
end

@WellsSA

Programação Orientada a Objetos

class Ornitorrinco {
    String nome;
    int idade;
}
function alimentar(Ornitorrinco o, Alimento b) {
    // M A G I A
    // mentira, mais código mesmo
}
class Batata extends Alimento {
    // Exemplo meramente ilustrativo
    // Tipo foto de alimento
}

@WellsSA

ISSO É MUITO ÚTIL

// Antes
[1, 2, 3, 4, 5]

// Depois
[Ornitorrinco, Ornitorrinco, Ornitorrinco, Ornitorrinco]
[
    {
        nome: 'Zé',
        idade: 15,
    }, 
    {
        nome: 'Zezim',
        idade: 3,
    }, 
]

@WellsSA

Programação Funcional

var x = 2;
var y = 3;
var resultado;

function somar() {
    resultado = x + y;
}

function causarDiscordia() {
    x = x + 10;
}

causarDiscordia();
somar();
const x = 2;
const y = 3;

function somar(x, y) {
    return x + y;
}

const resultado = somar(x, y);

Antes

Depois

Stateless / Immutable

@WellsSA

O quê, não como

const meuEmail = 'zezim123@gmail.com';

function recuperarSenha(email) {
    // 1. Validar o e-mail
    const deuBom = validaEmail(email);

    // 2. Se o e-mail estiver certo, pegar os dados do usuário
    if(deuBom === true) {
        const meuUsuario = procuraUsuarioPorEmail(email);

        // 3. Gerar chave de acesso única
        const token = gerarToken(meuUsuario.id);

        // 4. Preparar mensagem
        const mensagem = 
            'Para alterar sua senha clique em http://meusite.com?auth=' + token;
			
        // 5. Enviar e-mail com a mensagem
        const email = enviarEmail(email, mensagem);
    }
}

@WellsSA

  • A forma com que programamos muda!
  • Mas por quê?

Ou seja

Programação Estruturada

Programação Orientada a Objetos

Programação Funcional

@WellsSA

A evolução vem da necessidade!

@WellsSA

E quais as necessidades da web moderna?

@WellsSA

@WellsSA

A magia da evolução

Componentes

Módulos

Containers

Frontend

Backend

Infraestrutura

@WellsSA

Componentes

Frontend

O Frontend é vivo!

  • Responsabilidades
  • Estados
  • Propriedades

ReactJS, Angular JS, VueJS

@WellsSA

@WellsSA

@WellsSA

Antigamente

Servidor

Infraestrutura

Backend

Frontend Web

Resposta (HTML, CSS, JS)

(Browser)

Frontend Mobile

X

@WellsSA

Atualmente

Servidor

Infraestrutura

Backend

Frontend Web

Resposta (JSON)

(Browser)

Frontend Mobile

Resposta (JSON)

@WellsSA

SPA + REST

O Frontend Só é carregado uma vez!

(Single Page Application + REpresentational State Transfer)

O que ele precisar, ele pede pro servidor (Que devolve só os dados)

@WellsSA

Lembram desse modelo?

www.wellsadev.com

231.69.123.15

(http://)

DNS

Você

Resposta

Requisição

Frontend

Infraestrutura

Infraestrutura

Infraestrutura

Backend

(HTML, CSS, JS)

@WellsSA

Agora ele fica assim

www.app.envia.io

(http://)

DNS

Você

Resposta

Requisição

Frontend

Infraestrutura

(HTML, CSS, JS)

231.69.123.15

Infraestrutura

Backend

231.69.123.15

Infraestrutura

Backend

(JSON)

Resposta

Requisição

Infraestrutura

Backend

231.69.123.16

@WellsSA

Profissionalmente falando

@WellsSA

Módulos

Implementações independentes que funcionam separadamente

NodeJS, Python, Spring

Backend

@WellsSA

Serverless

(Sim, SEM SERVIDOR!)

Funções everywhere

"Pay as you go"

@WellsSA

Containers

Docker, Kubernetes, Docker-Compose

Infraestrutura

Então eu preciso saber de tudo isso pra ser dev?

@WellsSA

NÃÃÃÃÃO!!

@WellsSA

@WellsSA

Existem EQUIPES <3

@WellsSA

E dias normais

Então Bora codar!

@WellsSA

Wellington S. Almeida

@WellsSA

Descomplicando a Web Moderna

By Wellington Almeida

Made with Slides.com

Descomplicando a Web Moderna

  • 65

More from Wellington Almeida