Palestra ministrada no Flisol 2019 em Campo Grande-MS sobre esta famosa pilha de ferramentas para desenvolvimento web

1. Precisamos falar sobre
MERN Stack
Prof. Sidney Sousa

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

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

11. Full Stack
vs
Cliente/Servidor

13. Linguagem de front end
Linguagem de back end
Linguagem de back end
+ banco de dados

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

16. Porquê MERN Stack?
JavaScript!

17. 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

18. MongoDB

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" }

21. Node.js e Express:
o casal que você shipa!

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

23. const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain’);
res.end('Fala, rapaziada!');
});
server.listen(port, hostname, () => {
console.log(`Servidor rodando em http://${hostname}:${port}/`);
});

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}');
});

26. O React do tio Zuck!

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)

29. Exemplo prático
https://github.com/sidneyroberto/palestra-mern

30. MERN x MEAN x MEVN

31. That’s all, folks!
Links interessantes:
 https://www.w3schools.com/nodejs/default.asp
 https://www.w3schools.com/js/default.asp
 https://www.w3schools.com/nodejs/nodejs_mongodb.asp
 https://expressjs.com/en/starter/installing.html
 https://reactjs.org/tutorial/tutorial.html
Contato: sidney.sousa@ifms.edu.br
sidneyroberto