Caio Almeida, 2019
Caio Almeida
@caiosba | https://ca.ios.ba
- Bacharel e Mestre em Ciência da Computação (UFBA)
- Engenheiro de Software @ Meedan
- Colaborador em projetos de Software Livre
Desafios ao desenvolver
"do zero"
- Código complexo
- Tudo deve ser testado
- Programar cada componente do zero
- Trabalho em equipe não é fácil
- Dificuldade em reutilizar código
Resultado:
- Desorganização
- Consertar uma coisa, quebrar outra
Padrões de arquitetura de software (design patterns) é um jeito de organizar um programa.
Um destes padrões é o MVC.
O que é MVC?
O que é MVC?
- Acrônimo para Model View Controller
- Padrão de arquitetura para desenvolvimento de aplicações web e desktop
- É uma forma de separar a lógica da aplicação da sua visualização
O que é MVC?
- Originalmente descrito como padrão em 1979 para a linguagem Smalltalk
- O paper dele pavimentou o caminho para muitas implementações de MVC que vieram depois
- A separação entre dados, lógica e apresentação facilita a manutenção de código, facilita testar o código e possibilita maior reuso de código
Model
- Acesso a dados e implementação da lógica de negócio
- É responsável por requisitar dados e por salvar dados... ou seja, são representações nativas do banco de dados
- Não há interação direta entre models e views
View
- As views representam exatamente o que é apresentado ao usuário
- Coleta dados do usuário e repassa para o controller
- Controllers passam dados para as views para renderizar em algum formato
- Views são como templates, que são preenchidas com informações passadas pelo controller
- NÃO devem conter lógica de negócio
Controller
- O controller conecta todas as partes do padrão
- É o intermediário entre o model e a view
- Oferecem diferente funcionalidade... obter e alterar dados do banco de dados a partir dos models, e registrar variáveis e objetos a serem utilizados pelas views
Vantagens do MVC
- Separação de responsabilidades
- Divisão de tarefas entre times
- Organização e mantenabilidade
- Múltiplas views
var MediaController = new Controller({
addComment: function(comment) {
// REST request
},
deleteComment: function(commentId) {
// REST request
},
addTag: function(tag) {
// REST request
}
});
<div class="media">
<h2>{{media.title}}</h2>
<ul class="tags">
<li ng-repeat="tag in tags">{{tag.tag}}</li>
<ul>
<ul class="comments">
<li ng-repeat="comment in comments">
<div ng-include="partials/comment.html">
</li>
<ul>
</div>
this.$el.find('#delete-comment')
.on('click', function() {
// call deleteComment
});
Exemplo
Exemplo
Obrigado!
@caiosba
+MVC
By Caio Sacramento
+MVC
- 884