Este documento resume um workshop sobre Design Patterns em JavaScript. O documento introduz Design Patterns, explica porque são úteis, quando usá-los e dá um exemplo prático de uso do Strategy Pattern para envio de remessas bancárias. O documento também discute como frameworks não eliminam a necessidade de Design Patterns.

1. DESIGN PATTERNS COM
JAVASCRIPT
FABIO MIRANDA

2. FABIO MIRANDA GONÇALVES
SOFTWARE ENGINEER NO MERCADO LIVRE
BACHAREL EM SISTEMAS DE INFORMAÇÃO PELA USJT
DESENVOLVEDOR DESDE 2008
@FABIOMIRGO
fabio.mirgo@gmail.com

3. DESIGN PATTERN COM JAVASCRIPT

4. DESIGN PATTERN COM JAVASCRIPT
DESIGN PATTERN ??

5. DESIGN PATTERN COM JAVASCRIPT
DESIGN PATTERN ??
"Em Engenharia de Software, um Design Pattern
é uma solução geral, reutilizável para um
problema comum, em um determinado
contexto no design de software."
Wikipedia

6. UMA MELHOR DEFINIÇÃO
DESIGN PATTERN COM JAVASCRIPT
▸ Pense em Design Patterns como receitas de bolo.
▸ Cada receita é uma forma padrão que você tem que
desenvolver (seguir a receita, escrever código como a
receita pede)
▸ Existem várias formas, e cada forma tem um nome.
▸ Cada forma resolve melhor um tipo de problema.
▸ Essa forma funciona tão bem, que ela acaba sendo uma
solução geral e reutilizável.

7. POR QUE USAR ?
DESIGN PATTERN COM JAVASCRIPT
▸ É uma solução geral para um tipo de problema.
▸ É reutilizável.
▸ Código mais limpo.
▸ Código mais organizado.
▸ Menor complexidade para o seu código (tem padrão).

8. DESIGN PATTERN COM JAVASCRIPT
QUANDO USAR ?
▸ Para usar, é necessário primeiro enxergar problemas que se
repetem.
▸ Ao enxergar um problema que se repete, deve-se buscar
qual o Design Pattern mais adequado para solucionar esse
problema, ou seja, qual a melhor forma.
▸ Seu projeto inteiro não é um problema que se repete
▸ Não use demasiadamente.
▸ Faça um trade-off, refactors futuros tem um custo maior.

9. FRAMEWORKS E DESIGN PATTERNS
DESIGN PATTERN COM JAVASCRIPT
MAS AGORA TEM FRAMEWORK, NÃO PRECISA DE DESIGN PATTERN.
CERTO ? ERRADO !

10. EXEMPLO PRÁTICO - ENVIO DE REMESSA PARA O BANCO
DESIGN PATTERN COM JAVASCRIPT

11. DESIGN PATTERN COM JAVASCRIPT
PROBLEMA
BACKEND FRONTEND
Envio de
remessa

12. DESIGN PATTERN COM JAVASCRIPT
PROBLEMA
BACKEND FRONTEND
Envio de
remessa

13. DESIGN PATTERN COM JAVASCRIPT
PROBLEMA
BACKEND FRONTEND
Envio de
remessa

14. DESIGN PATTERN COM JAVASCRIPT
PROBLEMA
BACKEND FRONTEND
Envio de
remessa

15. DESIGN PATTERN COM JAVASCRIPT
PROBLEMA
BACKEND FRONTEND
Envio de
remessa
n
…
…

16. CODE SMELL
DESIGN PATTERN COM JAVASCRIPT

17. DESIGN PATTERN COM JAVASCRIPT
CÓDIGO VESPEIRO - NINGUÉM QUER POR A MÃO

18. STRATEGY - O DESIGN PATTERN ESCOLHIDO
DESIGN PATTERN COM JAVASCRIPT
"definir uma família de algoritmos, encapsular cada
uma delas e torná-las intercambiáveis. Strategy
permite que o algoritmo varie independentemente dos
clientes que o utilizam” (livro GoF)

19. CODE TIME
DESIGN PATTERN COM JAVASCRIPT

20. MERCADO LIVRE - TEMOS VAGAS
DESIGN PATTERN COM JAVASCRIPT
▸ Backend pleno e Senior - [DevBE]
▸ Frontend pleno e Senior - [DevFE]
▸ Desenvolvedor Android - [DevAnd]
▸ Desenvolvedor iOS - [DeviOS]
▸ Analista de Infra/Suporte - [AnaInfra]
▸ Mais detalhes: https://jobs.mercadolibre.com/
▸ Enviar CV para: meire.monte@mercadolivre.com