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.

Transcript

1. 8 de julho, 2017 Hello WTM. Entendendo e identificando design patterns no front-end.
2. Agenda. 1. Front-end em 2017 2. Design patterns 3. Dando nome aos bois
3. Isabella Silveira. Web Engineer @ Huge 3
4. Front-end em 2017. 1
5. Muitas tecnologias diferentes para aprender, curva de aprendizado grande.
6. Estamos na era dos frameworks e pré-processadores.
8. “Qual framework eu devo aprender?”
11. Mas calma! Há uma luz no fim do túnel.
12. A saída é sempre tentar enxergar os padrões.
13. Design Patterns. 2
14. 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.
15. 1. Module. 2. Revealing Module. 3. Facade. 4. Mediator. 5. MV*. Design Patterns
16. Module. Design Patterns
17. “We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies.” Addy Osmani.
18. “Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
19. 
 1. Object Literal. 2. AMD. 3. ES6. 4. Outros. Módulos
20. Object Literal. Módulos
21. Sintaxe.
22. AMD. Módulos
23. Sintaxe.
24. Sintaxe.
25. Exemplo.
26. ES6. Módulos
27. Sintaxe/Exemplo.
28. Sintaxe/Exemplo.
29. Sintaxe/Exemplo.
30. Sintaxe/Exemplo.
31. Sintaxe/Exemplo.
32. Outros. Módulos
33. 
 1. RequireJS. 2. Browserify. 3. Webpack. 4. SystemJS & JSPM. Outros
34. 
 1. RequireJS. 2. Browserify. 3. Webpack. 4. SystemJS & JSPM. Outros
35. Exemplo.
36. Exemplo.
37. Exemplo.
38. 
 1. RequireJS. 2. Browserify. 3. Webpack. 4. SystemJS & JSPM. Outros
39. Revealing Module. Patterns
40. Exemplo.
41. Facade. Patterns
42. Exemplo.
43. Mediator. Patterns
44. Exemplo.
45. Exemplo.
46. MV*. Patterns
47. 
 1. MVC. 2. MVVM. MV*
48. MVC. MV*
49. 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).
51. Model. MVC:
52. 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.
53. Exemplo.
54. View. MVC:
55. 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.
56. Exemplo.
57. Controller. MVC:
58. MVC Controller. Intermediário entre a view e o model, responsável por atualizar o model quando o usuário manipula a view.
59. Exemplo.
60. MVVM. MV*
61. 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.
63. 
 1. Model. 2. View. 3. ViewModel. MVVM
64. 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.
65. Example.
66. Dando nome aos bois. 3
67. Ok, vimos alguns padrões, agora como vamos saber quem é quem e por que devemos usá-los?
68. Frameworks
69. 1. Por que usá-los? 2. Backbone. 3. AngularJS. 4. Ember. 5. React. Frameworks
70. 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.
71. Mas cuidado com a hype, escolha de acordo com os desafios e a demanda do seu projeto.
72. Backbone.
75. Exemplo.
76. Exemplo.
77. Exemplo.
78. Exemplo.
79. AngularJS.
80. Example.
81. Example.
83. Ember.
86. Example.
87. React.
88. 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.
89. Exemplo.
90. Exemplo.
91. Exemplo.
92. Exemplo.
93. Faça as perguntas certas.
94. Front-end
95. Agradecimentos. Caio Vaccaro. Associate Director of Engineering @Huge
96. Done. 8 de julho, 2017 Entendendo e identificando design patterns no front-end.