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
- Instagram:
@wells.sa -
Slides:
https://slides.com/WellsSA - Código: https://github.com/WellsSA
-
Contatos:
https://wellsadev.com/
@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
-
Slides:
https://slides.com/WellsSA - Código: https://github.com/WellsSA
-
Contatos:
https://wellsadev.com/
@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
Da ETEC ao mercado de trabalho internacional
By Wellington Almeida
