Uma breve descrição sobre o que é padrões de projeto (design patterns), como identificá-los e implementá-los principalmente em Javascript.

1. PATTERNS EVERYWHERE
EVEN IN JAVASCRIPT

2. PADRÕES OBSERVADOS NA NATUREZA
Fases da lua
Arquitetura das colmeias
Migração dos pássaros
Meteorologia

3. PADRÕES OBSERVADOS NA NATUREZA

4. PADRÕES QUE CRIAMOS
Unidades de Medida Sinalização

5. - Normas/Modelos a ser seguidos;
- Desenho sistêmico, matemático…
- Aquilo que é mais comum, frequente, normal, mais aceito (em um grupo,
lugar, etc.)
O QUÉ UM PADRÃO?
DESIGN PATTERN (PADRÃO DE PROJETO)
Um design pattern (padrão de projeto) é uma solução de software
reutilizável para tipos de problemas que ocorrem com frequência no
desenvolvimento de software.
CODING PATTERN (PADRÃO DE CODIFICAÇÃO)
Um padrão de codificação geralmente é uma convenção adotada por um
ou mais desenvolvedores para escrever código em uma determinada
linguagem.

6. Existem alguns style guides famosos para escrever Javascript. E
ferramentas para manter o padrão.
CODING PATTERN
Style Guides
Idiomatic.js - https://github.com/rwaldron/idiomatic.js/
Airbnb JavaScript Style Guide - https://github.com/airbnb/javascript
Ferramentas
JSHint - http://jshint.com/
JSBeautifier - http://jsbeautifier.org/
esformatter - https://github.com/millermedeiros/esformatter

7. Existem inúmeros padrões de projetos. E se
tratando de Programação Orientação a Objetos
os padrões do GoF (Gang of Four) são os mais
conhecidos.
DESING PATTERN
O GoF divide os padrões em três categorias: criacionais, comportamentais e
estruturais.
Criacionais
• Abstract Factory
• Builder Pattern
• Factory Method
• Prototype Pattern
• Singleton Pattern
Comportamentais
• Chain of
Responsibility
• Command Pattern
• Iterator Pattern
• Mediator Pattern
• Observer Pattern
• State Pattern
• Strategy Pattern
• Template Pattern …
Estruturais
• Adapter Pattern
• Bridge Pattern
• Composite Pattern
• Decorator Pattern
• Facade Pattern
• Flyweight Pattern
• Proxy Pattern

8. - Fornecem soluções que já foram testadas e aprovadas.
- Tornam o sistema mais fácil de entender e manter.
- Facilitam o desenvolvimento de módulos coesos.
- A comunicação entre os participantes do projeto fica mais eficiente.
DESING PATTERN
BENEFÍCIOS
Implementar um padrão é relativamente fácil e simples. Geralmente a
complexidade está na identificação e aplicação correta dos padrões.
IMPLEMENTAÇÃO

9. IDENTIFICANDO E
IMPLEMENTANDO PADRÕES
A identificação e implementação correta do padrão necessário para
determinado caso vai depender muito do conhecimento e experiência
do desenvolvedor.

10. Identificando e Implementando Padrões
Isso não quer dizer que você não esteja apto.

11. Identificando os Padrões
- Comece entendendo o conceito de cada design pattern e onde são aplicados.
- Visualize os design patterns dentro das categorias: criacionais, comportamentais e
estruturais. Isso dará mais clareza.
- Entenda o problema a ser resolvido e tente associa-lo ao padrão que propõe a solução.
Exemplo
Problema: A API de eventos do Internet Explorer 8 é diferente dos demais browsers.
Solução: Adaptar a API do IE8 para criar uma compatibilidade entres os browsers.
Vejo o que o padrão Adapter diz: Permite que dois objetos se comuniquem mesmo que tenham interfaces
incompatíveis.
var EventAdapter = (function(){
var EventAdapter = function(){};
EventAdapter.prototype.addEvenListiner = function(element,
ev, func){
var el = document.querySelector(element);
if (el.attachEvent)
return el.attachEvent('on' + ev, func);
else
return el.addEventListener(ev, func, false);
};
return EventAdapter;
})();
var event_adapter = new EventAdapter();
event_adapter.addEvenListiner('h1', 'click', function(){
console.log('Adapter click working in all browsers.');
});

12. PROJETOS JAVASCRIPT CONHECIDOS
UTILIZAM MUITOS PADRÕES

13. JQUERY
ITERATOR
$.each(function(){});
$('div').each(function(){});
STRATEGY
$('div').toggle(function(){}, function(){});
PROXY
$.proxy(function(){}, obj);
BUILDER
$('<div class="hello">world</div>');
PROTOTYPE
$.fn.plugin = function(){}
$('div').plugin();
ADAPTER OR WRAPPER
$('div').css({
opacity: .1 // opacity in modern browsers, filter in IE.
});
FACADE
// higher level interfaces (facades) for $.ajax();
$.getJSON();
$.get();
$.getScript();
$.post();
OBSERVER
// jQuery utilizes it's own event system implementation on top
of DOM events.
$('div').click(function(){})
$('div').trigger('click', function(){})
O GoF divide os padrões em três categorias: criacionais, comportamentais e
estruturais.

14. ANGULAR
FACADE
// Simple interface to use XMLHttpRequest
$http({
method: 'POST',
url: '/example/new',
data: data
})
.then(function (response) {
alert(response);
});
FACTORY METHOD
myModule.config(function ($provide) {
$provide.provider('foo', function () {
var baz = 42;
return {
//Factory method
$get: function (bar) {
var baz = bar.baz();
return {
baz: baz
};
}
};
});
});
OBSERVER
function ExampleCtrl($scope) {
$scope.$on('event-name', function handler() { //body });
}
function ExampleCtrl($scope) {
$scope.$emit('event-name', { foo: 'bar' });
}
CHAIN OF RESPONSIBILITY
myModule.controller('MainCtrl', function ($scope) {
$scope.$on('foo', function () {
console.log('foo received');
});
});
myModule.controller('ParentCtrl', function ($scope) {
$scope.$on('foo', function (e) {
console.log('foo received');
});
});
myModule.controller('ChildCtrl', function ($scope) {
$scope.$emit('foo');
});

15. ANGULAR
DECORATOR
myModule.controller('MainCtrl', function (foo) {
foo.bar();
});
myModule.factory('foo', function () {
return {
bar: function () {
console.log('I'm bar');
},
baz: function () {
console.log('I'm baz');
}
};
});
myModule.config(function ($provide) {
$provide.decorator('foo', function ($delegate) {
var barBackup = $delegate.bar;
$delegate.bar = function () {
console.log('Decorated');
barBackup.apply($delegate, arguments);
};
return $delegate;
});
});
SINGLETON
// Services in Angular are Singleton Objects
// The function getService from Angular source creates
the singleton
function getService(serviceName) {
if (cache.hasOwnProperty(serviceName)) {
if (cache[serviceName] === INSTANTIATING) {
throw $injectorMinErr('cdep', 'Circular dependency
found: {0}', path.join(' <- '));
}
return cache[serviceName];
} else {
try {
path.unshift(serviceName);
cache[serviceName] = INSTANTIATING;
return cache[serviceName] = factory(serviceName);
} catch (err) {
if (cache[serviceName] === INSTANTIATING) {
delete cache[serviceName];
}
throw err;
} finally {
path.shift();
}
}
}

16. NODEJS
SINGLETON
VAR PI = MATH.PI;
FUNCTION CIRCLE (RADIUS) {
RETURN RADIUS * RADIUS * PI;
}
MODULE.EXPORTS.CIRCLE = CIRCLE;
FACTORY
function MyClass (options) {
this.options = options;
}
function create(options) {
// modify the options here if you want
return new MyClass(options);
}
module.exports.create = create;
OBSERVER
var util = require('util');
var EventEmitter = require('events').EventEmitter;
function MyObservable() {
EventEmitter.call(this);
}
util.inherits(MyObservable, EventEmitter);
MyObservable.prototype.hello = function (name) {
this.emit('hello', name);
};
var observable = new MyObservable();
observable.on('hello', function (name) {
console.log(name);
});
observable.hello(‘john doe');

17. OS BENEFÍCIOS DOS PATTERNS SÃO MUITOS, MAS
NÃO FIQUE PRESO À ELES.
SINTA-SE LIVRE PARA IMPLEMENTAR SUAS
PRÓPRIAS SOLUÇÕES QUE AS VEZES PODEM SER
ATÉ MAIS CRIATIVAS.

18. Sites
http://jstherightway.org/
Livros
Head First Design Pattern
Gang of Four Design Pattner
Padrões JavaScript
Learning JavaScript Design Patterns
Artigos
http://cleancodedevelopment-qualityseal.blogspot.com.br/2013/12/how-to-identify-design-pattern-
before.html
BIBLIOGRAFIA

19. Gustavo Corrêa Alves
http://www.gustavocalves.com.br/
https://github.com/gcajpa
https://br.linkedin.com/in/gustavocorreaalves
OBRIGADO!