2. Sumário
A vida “pós curso” de desenvolvimento de sistemas
O macarrão de frameworks e afins
Full Stack vs Cliente/Servidor
Porquê MERN Stack? JavaScript!
MongoDB
Node.js e Express: o casal que você shipa!
O React do tio Zuck!
Exemplo prático
MERN x MEAN x MEVN
3. Mas primeiro... quem sou eu!
Dev há 15 anos
Ex Pinuts, DigithoBrasil, CASSEMS, FCG
Professor de Desenvolvimento Web (e
dev!) no IFMS campus Aquidauana
Um dos professores responsáveis pelo
NUDES-AQ
4. A vida “pós curso” de
desenvolvimento de sistemas
5.
6.
7.
8.
9. Linguagens (Sopa de letrinhas!)
HTML5
CSS3
JavaScript
Pug
EJS
JSF
Thymeleaf
Sass
Compass
JSX
etc...
PHP
Java
C#
JavaScript
Python
Ruby
Rust
Groovy
Scala
etc...
SQL
JavaScript/JSON
XML
CQL
Cypher
etc...
Front end Back end Banco de dados
13. Linguagem de front end
Linguagem de back end
Linguagem de back end
+ banco de dados
14.
15. Vantagens da arquitetura cliente/servidor
Gerenciamento apropriado dos dados e lógica de negócios
Melhor organização dos times de desenvolvimento
Reutilização de serviços (endpoints)
Maior flexibilidade
Manutenção mais fácil
Interoperabilidade
19. MongoDB in a nutshell
BD multiplataforma orientado a documentos
Documento: bloco de dados JSON
JavaScript como linguagem de consulta
JSON como linguagem de modelagem de dados
20. > use loja
switched to db loja
> db.produtos.insert({"descricao": "Extrato de tomate", "categoria": "Alimento"})
WriteResult({ "nInserted" : 1 })
> db.produtos.find()
{ "_id" : ObjectId("5cc34103a336fd300973277d"), "descricao" : "Extrato de
tomate", "categoria" : "Alimento" }
22. Node.js
Permite JavaScript do lado servidor
Multiplataforma
Implementado sobre o V8, a engine
de JavaScript do browser Chrome
Tem como principal proposta
permitir a implementação de apps
web escaláveis
24. Express
Framework web para o Node.js
Em poucas palavras, deixa o Node.js mais prático e robusto, mas
sem ofuscar tudo o que o Node.js tem de melhor
25. const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Fala, rapaziada!'));
const porta = 3000;
app.listen(porta, () => {
console.log('Servidor rodando na porta ${port}');
});
27. React (ou ReactJS)
Definido pelos criadores como uma biblioteca JavaScript para criar
interfaces com o usuário
Criado pela Facebook Inc. e mantido pela mesma empresa e
algumas outras empresas e desenvolvedores
Baseado em componentes
Cada componente possui um estado e um conjunto de
comportamentos
Permite o reuso de componentes (tags customizadas)