Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Entendendo e identificando design patterns no f...

Entendendo e identificando design patterns no front-end.

Há alguns anos, diversos frameworks de desenvolvimento vêm surgindo no mundo do front end, criando um cenário um tanto quanto caótico para quem tenta acompanhar esse movimento. Mas o que podemos identificar em comum entre eles? Como nos salvar de uma enorme curva de aprendizado dominando todos eles? É aí que os design patterns vêm para o resgate! Nessa palestra entenderemos o que são e os diferentes tipos de design patterns e como eles se aplicam em cada framework.

Isabella Silveira

July 08, 2017
Tweet

More Decks by Isabella Silveira

Other Decks in Programming

Transcript

  1. Design Patterns. Design Patterns. Design Patterns, como o nome sugere,

    são padrões de código pré- estabelecidos que ajudam na reutilização de código e modularização de componentes.
  2. “We want a loosely coupled architecture with functionality broken down

    into independent modules with ideally no inter-module dependencies.” Addy Osmani.
  3. “Modules speak to the rest of the application when something

    interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
  4. MV* MVC. O MVC é um padrão de arquitetura que

    encoraja a separação de responsabilidades na aplicação. Ele aplica o isolamento de dados de negócio (Models) das interfaces de usuário (Views), com um terceiro componente que gerencia a lógica e as ações do usuário (Controllers).
  5. MVC Model. O model gerencia o modelo de dados da

    aplicação. Ele não interfere na camada da view e quando os dados são atualizados, ele notifica possíveis listeners para que eles reajam perante a isso.
  6. MVC View. Views são a representação visual dos models, apresentando

    um estado “filtrado” do estado atual. As views em javascript mantêm e manipulam um elemento do DOM.
  7. MVC Controller. Intermediário entre a view e o model, responsável

    por atualizar o model quando o usuário manipula a view.
  8. MV* MVVM. MVVM é um padrão de arquitetura maseado no

    MVC e MVP. O mesmo tenta separar de forma mais clara a view da lógica de negócio e comportamento dentro da aplicação.
  9. MVVM ViewModel. O ViewModel pode ser considerado um controller especializado

    que funciona como um conversor de dados. Através dos bindings, ele é capaz de passar dados do model diretamente para a view.
  10. Frameworks Por que usá-los? Os frameworks têm como objetivo eliminar

    a necessidade de código boilerplate, e juntar o máximo de utilidades possíveis que completem o seu motivo de existir.
  11. Mas cuidado com a hype, escolha de acordo com os

    desafios e a demanda do seu projeto.
  12. Frameworks React. Só o V de MVC. O React identifica

    as partes do DOM que precisam ser atualizadas e o faz com um virtual DOM correspondente.