Da ETEC ao mercado de trabalho internacional: O que você precisa saber?

@WellsSA

Do Técnico ao mercado de trabalho internacional: O que você precisa saber?

@WellsSA

@WellsSA

Wellington S. Almeida

  • Senior Software Engineer at @Holonic (Sillicon Valey)
  • Community Manager | Instructor at @EW.it
  • CTO & Co-founder at @Envia.io
  • Community Manager at @FlutterNation
  • Designer, maybe?
  • Speaker? @icarcal
  • Music? Let's Rock!

Bate-papo

@WellsSA

Bora codar!

@WellsSA

Wellington S. Almeida

@WellsSA

@WellsSA

Wellington S. Almeida

  • Semi Senior JS Engineer at @Symphony.fr
  • CTO & Co-founder at @Envia.io
  • Community Manager at @FlutterNation
  • Designer, maybe?
  • Speaker? @icarcal
  • Music? Let's Rock!

@WellsSA

Mas ainda eterno aluno da ETEC

@WellsSA

Fora da ETEC

Dentro da ETEC

X

@WellsSA

Falando um pouco mais sobre isso

Bora codar!

@WellsSA

Wellington S. Almeida

@WellsSA

O que é JS

@WellsSA

Linguagem de programação que é uma das  "core technologies" da Web

O que é Javascript?

@WellsSA

Plataforma open-source que permite execução de linguagem Javascript do lado do servidor

O que é NodeJS?

@WellsSA

Biblioteca Javascript open-source que permite a criação de "User Interfaces"  baseada na criação de Componentes 

O que é ReactJS?

@WellsSA

@WellsSA

Atualmente

Frontend

O Frontend é vivo!

  • Responsabilidades
  • Estados
  • Propriedades

ReactJS, AngularJS, VueJS

@WellsSA

Servidor

(Backend)

Páginas Web

(Frontend)

Páginas Web

(Frontend Moderno)

O que é JSON

@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,
    }, 
]

Por quê: JSON em todo lugar?

@WellsSA

@WellsSA

O que raios é JSON

X

Por que ouvimos tanto falar de JSON?

@WellsSA

@WellsSA

@WellsSA

O que é JSON?

(JavaScript Object Notation)

@WellsSA

JSON é um formato de texto que facilita a troca de dados estruturados!

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)

@WellsSA

Objeto

Texto

Objeto

@WellsSA

@WellsSA

HTTP

(Hyper Text Transfer Protocol)

Objeto

Texto

Objeto

Servidor

Servidor

http://

@WellsSA

@WellsSA

@WellsSA

e no Javascript

@WellsSA

Objeto

Texto

JSON.stringify(objeto)

Texto

Objeto

JSON.parse(texto)

@WellsSA

@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

Plataforma open-source que permite execução de linguagem Javascript do lado do servidor

O que é NodeJS?

@WellsSA

Tudo perfeitamente integrado

@WellsSA

Tudo perfeitamente integrado

@WellsSA

Facilidade na manipulação de dados

Velocidade no desenvolvimento

Integrações práticas

@WellsSA

Comunicação WEB

@WellsSA

Antigamente

Servidor

Infraestrutura

Backend

Frontend Web

Resposta (HTML, CSS, JS)

(Browser)

Frontend Mobile

X

@WellsSA

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

Atualmente

@WellsSA

Em termos de dados

Servidor

Infraestrutura

Backend

Frontend Web

Resposta (JSON)

(Browser)

Frontend Mobile

Resposta (JSON)

@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

Resposta (JSON)

Requisição (http | ws | ...)

@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

Profissionalmente falando

Made with Slides.com