+MVC

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?

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

Obrigado!

@caiosba