Neste artigo faço uma pequena descrição sobre o padrão de arquitetura de software MVC. Nele descrevo brevemente o funcionamento das camadas MVC, exemplifico o funcionamento básico com Node.JS e cito algumas vantagens de se utilizar este padrão.
MVC – CAMADAS
Model-view-controller (MVC) é um padrão de arquitetura de software que divide a aplicação em três camadas: Model, View e Controller.
M (MODEL)
A camada Model (modelo) é responsável pela leitura, escrita e validação dos dados. Nesta camada são implementadas as regras de negócio.
Regras de negócios são as definições de como a empresa em questão faz negócios. É a declaração de como a empresa trabalha, todos os processos para execução do serviço, ou entrega do produto com que a empresa trabalha.
V (VIEW)
A camada View (visão) é responsável pela interação com o usuário. Nesta camada são apresentados os dados ao usuário.
Os dados podem ser entregues em vários formatos, dependendo do que for preciso, como páginas HTML, arquivos XML, documentos, vídeos, fotos, músicas etc.
C (CONTROLLER)
A camada Controller (controlador) é responsável por lidar com as requisições do usuário. Ela gerencia as ações realizadas, fala qual Model e qual View utilizar para que a ação seja completada.
MVC – Exemplo básico do funcionamento em Node.JS
O padrão MVC é simples na utilização, mas sua implementação no código pode ser um tanto complexa. Segue um exemplo simples e básico que utiliza do conceito MVC em Node.JS. Este é o fluxo que a aplicação MVC vai seguir.
A aplicação para exemplificação do MVC em Node.JS, consiste em uma tela onde serão listadas as últimas notícias fictícias. Para simplificação do exemplo, não utilizarei um banco de dados, mas um arquivo JSON onde estarão salvas as notícias que serão exibidas. O código da aplicação está disponível no meu GitHub: https://github.com/andersonirias/mvc-exemplo-nodejs
Nosso projeto conterá a estrutura apresentada abaixo:
O arquivo package.json possui vários metadados relevantes para o projeto. Este arquivo é utilizado para fornecer informações que permitem identificar o projeto e trabalhar com suas dependências.
{
"name": "mvc-exemplo-nodejs",
"version": "1.0.0",
"description": "Exemplo prático do artigo: \"MVC - Conceito e exemplo em Node.JS\"",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Anderson Irias",
"license": "ISC",
"dependencies": {
"consign": "^0.1.6",
"ejs": "^2.6.1",
"express": "^4.16.4",
"fs": "0.0.1-security"
}
}O arquivo app.js é o arquivo principal do projeto. Primeiramente incluímos as dependências do projeto. Depois configuramos o módulo ejs, que é para trabalharmos com as views. Após isso configuramos o módulo consign, que faz o carregamento automático dos scripts do nosso projeto. E por fim configuramos o servidor web do framework express para escutar requisições http na porta 3000.
var express = require('express');
var consign = require('consign');
var app = express();
app.set('view engine', 'ejs');
app.set('views', './src/views');
consign()
.include('src/routes')
.then('src/models')
.then('src/controllers')
.into(app);
app.listen(3000, function(){
console.log('APP rodando na porta 3000');
});
O arquivo data/noticias.json é o JSON que estamos utilizando como base de dados do projeto, para armazenar as notícias que serão exibidas.
{
"noticias": [
{
"titulo": "Primeira notícia",
"noticia": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},
{
"titulo": "Segunda notícia",
"noticia": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
}
]
}O arquivo src/routes/news.js é o responsável por realizar o roteamento da aplicação. Nele falamos que ao se acessar a raiz da aplicação, com o método GET “http://localhost:3000/”. Será chamado o controller news.
module.exports = function(application){
application.get('/', function(req, res){
application.src.controllers.news.index(application, req, res);
});
}
O arquivo src/controller/news.js é o controller da aplicação. Primeiramente estamos criando um objeto do model news. Depois estamos utilizando a função getLastNews para recuperar as últimas 5 notícias do arquivo noticias.json. E por fim passamos as notícias para a view news/index.
module.exports.index = function(application, req, res) {
var newsModel = new application.src.models.news();
newsModel.getLastNews(function(err, result) {
res.render("news/index", {news : result});
});
}
O arquivo src/models/news.js é o model da aplicação. Primeiramente incluímos o módulo fs que auxiliará na leitura do arquivo JSON. Depois criamos a função news que vai funcionar como uma classe news. Após isto temos a função getLastNews, que realiza a leitura das notícias contidas no arquivo noticias.json e recupera somente as 5 ultimas, conforme a regra de negócio fictícia que foi estabelecida.
var fs = require('fs');
function news() {}
news.prototype.getLastNews = function(callback) {
fs.readFile('./data/noticias.json', 'utf8', function(err, result) {
var data = [];
if (!err) {
var obj = JSON.parse(result);
if (obj.noticias.length > 4) {
var i = 4;
} else {
var i = (obj.noticias.length - 1);
}
obj.noticias.forEach(function(noticia) {
if (i >= 0) {
data[i] = noticia;
i--;
}
});
}
callback(err, data);
});
};
module.exports = function(){
return news;
}
O arquivo src/views/news/index.ejs é a view da aplicação. Ela é um arquivo HTML simples, onde pegamos as notícias enviadas pelo controller e realizamos uma iteração sobre elas, para exibir todas na tela inicial.
<!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MVC Exemplo Node.JS</title>
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<br/><br/><br/>
<h2>MVC Exemplo Node.JS</h2>
<br/>
<% if (news.length > 0) { %>
<div class="row">
<% for(var i = 0; i < news.length; i++) {%>
<div class="col-md-12 jumbotron">
<h4><%= news[i].titulo %></h4>
<p><%= news[i].noticia %></p>
</div>
<% } %>
</div>
<% } %>
</div>
</body>
</html>O resultado da aplicação é este:
MVC – Vantagens no desenvolvimento
O padrão de desenvolvimento de software MVC (Model view controller) traz consigo grandes vantagens para o desenvolvimento de aplicações. Vantagens como:
Reusabilidade de código
Uma funcionalidade já implementada em uma parte do sistema, pode ser novamente utilizada em outra parte, sem ser necessário o seu re-desenvolvimento.
Exemplo: em um sistema toda vez que um usuário alterar sua senha, ele recebe um e-mail informando a alteração. Neste mesmo sistema, quando ocorre uma venda, também é enviado um e-mail informando este usuário. Os e-mails enviados possuem assunto e conteúdo diferentes, mas ambos utilizam a funcionalidade de envio de e-mail. Sendo assim, não é necessário realizar o desenvolvimento de um novo código de envio de e-mails, basta somente utilizar a funcionalidade existente, modificando os dados a serem enviados.
Rápido Desenvolvimento
Neste modelo é possível que desenvolvedores e designers trabalhem simultaneamente na aplicação. Cada um trabalharia em uma camada diferente da aplicação, tornando o desenvolvimento produtivo.
Fácil manutenção
Como o código é dividido em partes distintas, torna- se fácil adicionar novas funcionalidades e alterar características antigas. O código também fica mais fácil de ser compreendido por outros desenvolvedores.
Exemplo: um sistema de uma transportadora foi feito por um desenvolvedor que não presta mais serviços para a mesma. No futuro esta transportadora precisa realizar uma modificação em uma parte específica do sistema, é contratado outro desenvolvedor para a tarefa. Quando o responsável pela rotina na transportadora informar o mesmo ao desenvolvedor, ele conseguirá facilmente identificar o reportado no código do sistema.
Muito obrigado.