MVC MVP MVVM


   André Faria Gomes
      @andrefaria
MVC
                                               1979 (Smalltalk)


                Model-View-Controller



Melhor arquitetura através de separation of concerns

Isola os dados (model) das interfaces de usuário (views)

     Controlers tratam da entrada de usuário e
         coordenação das views e models
4
                                           VC ipt
                                         M r
                                          vaSc
                                        Ja
                Backbone, Ember.js and JavaScriptMVC
Ajuda a resolver o problema do Js spaghetti estruturando o código
Gerenciar os dados de negócio


Não diz respeito a UI, porém
quando um modelo muda,
geralmente vai notificar
observadores para que as
mudanças também ocorram na
apresentação. Podendo ter vários
observadores por modelo.




                                   Models
Representações visuais dos modelos em seu estado atual

A tarefa de atualizar o modelo (geralmente) é do controller
Usuários interagem com a view, lendo, editando, etc.




Views
Templates
Muitos frameworks usam templates porque é uma má prática (de codificação de
e performance) criar longos blocos de strings concatenadas.

 A aplicação recebe dados em Json e aplica no Template
Intermediários entre models e views

Atualiza a views quando o model muda

Atualiza o model quando o usuário altera a view

Nem sempre explícito, no
backbone a responsabilidade
é divida pelos Routes e
View, outros frameworks
como o Spine já tem o
Controller explícito.




                         Controllers
Separation of Concerns facilita manutenção

Desacoplar model e view facilita a escrita de testes

Permite reutilizar lógica em diferentes locais da aplicação




                               Benefícios
1990 (Smalltalk)


                      MVP
                     Model-View-Presenter



O Presenter é um componente que contém a regra de negócio
relacionada a user-interface, invocações da view são delegadas
para o presenter.

O presenter fala com a view e com o model, porém esses são
isoldados entre si. Eles fazem o bind eles a view e o controller. As
views expõe seeters para que o presenter possam alterar seus
dados.

Útil quando é preciso reutilizar regras de apresentação. Muito
usado em grandes aplicações corporativas.
http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx
MVVM
                                                    2005
                                                Microsoft

            Model View ViewModel



Baseado em MVC e MVP procura separar de
    forma mais clara a regra de negócio da
   interface de usuário das outras regras e
comportamentos da aplicação através data-
            bindings declarativos.

Isso facilita que UI e desenvolvimento possam
 ocorrer simultaneamente na mesma base de
   código. Desenvolvedores de UI escrevem
bindings no HTML, enquanto desenvolvedores
                 cuidam do resto.
Dados apenas, nada de Comportamento (Tipicamente)
Não formatam informação nem fazem aparecer dados na UI, isso é
gerenciado pelo ViewModel




                                     Models
Interação com o usuário

Não é responsável por gerenciar o estado
Representam o estado do ViewModel

Geralmente é apenas um HTML com bindings declarativos




                                           Views
Um tipo de controller especializado que converte dados.

Transforma o model e view e passa comandos do views para o model.

Representa os dados da Views para o Model.

Testável

Pode ser exagero para UI’s muito simples




                         Viewmodel
“I must admit that when I first reviewed implementations
of MVVM (e.g KnockoutJS, Knockback), I was surprised
that any developer would want to return to the days of old
where we mixed logic (JavaScript) with our markup and
found it quickly unmaintainable.”
                             Addy Osmani
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
refs



http://addyosmani.com/blog
@andrefaria
http://blog.andrefaria.com

MVC MVP MVVM para Web

  • 1.
    MVC MVP MVVM André Faria Gomes @andrefaria
  • 2.
    MVC 1979 (Smalltalk) Model-View-Controller Melhor arquitetura através de separation of concerns Isola os dados (model) das interfaces de usuário (views) Controlers tratam da entrada de usuário e coordenação das views e models
  • 3.
    4 VC ipt M r vaSc Ja Backbone, Ember.js and JavaScriptMVC Ajuda a resolver o problema do Js spaghetti estruturando o código
  • 4.
    Gerenciar os dadosde negócio Não diz respeito a UI, porém quando um modelo muda, geralmente vai notificar observadores para que as mudanças também ocorram na apresentação. Podendo ter vários observadores por modelo. Models
  • 5.
    Representações visuais dosmodelos em seu estado atual A tarefa de atualizar o modelo (geralmente) é do controller Usuários interagem com a view, lendo, editando, etc. Views
  • 6.
    Templates Muitos frameworks usamtemplates porque é uma má prática (de codificação de e performance) criar longos blocos de strings concatenadas. A aplicação recebe dados em Json e aplica no Template
  • 9.
    Intermediários entre modelse views Atualiza a views quando o model muda Atualiza o model quando o usuário altera a view Nem sempre explícito, no backbone a responsabilidade é divida pelos Routes e View, outros frameworks como o Spine já tem o Controller explícito. Controllers
  • 10.
    Separation of Concernsfacilita manutenção Desacoplar model e view facilita a escrita de testes Permite reutilizar lógica em diferentes locais da aplicação Benefícios
  • 11.
    1990 (Smalltalk) MVP Model-View-Presenter O Presenter é um componente que contém a regra de negócio relacionada a user-interface, invocações da view são delegadas para o presenter. O presenter fala com a view e com o model, porém esses são isoldados entre si. Eles fazem o bind eles a view e o controller. As views expõe seeters para que o presenter possam alterar seus dados. Útil quando é preciso reutilizar regras de apresentação. Muito usado em grandes aplicações corporativas.
  • 12.
  • 13.
    MVVM 2005 Microsoft Model View ViewModel Baseado em MVC e MVP procura separar de forma mais clara a regra de negócio da interface de usuário das outras regras e comportamentos da aplicação através data- bindings declarativos. Isso facilita que UI e desenvolvimento possam ocorrer simultaneamente na mesma base de código. Desenvolvedores de UI escrevem bindings no HTML, enquanto desenvolvedores cuidam do resto.
  • 14.
    Dados apenas, nadade Comportamento (Tipicamente) Não formatam informação nem fazem aparecer dados na UI, isso é gerenciado pelo ViewModel Models
  • 15.
    Interação com ousuário Não é responsável por gerenciar o estado Representam o estado do ViewModel Geralmente é apenas um HTML com bindings declarativos Views
  • 16.
    Um tipo decontroller especializado que converte dados. Transforma o model e view e passa comandos do views para o model. Representa os dados da Views para o Model. Testável Pode ser exagero para UI’s muito simples Viewmodel
  • 18.
    “I must admitthat when I first reviewed implementations of MVVM (e.g KnockoutJS, Knockback), I was surprised that any developer would want to return to the days of old where we mixed logic (JavaScript) with our markup and found it quickly unmaintainable.” Addy Osmani
  • 19.
  • 20.
  • 21.