pattners everywhere, even in javascript
TRANSCRIPT
PADRÕES OBSERVADOS NA NATUREZA
Fases da lua
Arquitetura das colmeias
Migração dos pássaros
Meteorologia
- 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.
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
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
- 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 PATTERNBENEFÍ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
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.
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.
ExemploProblema: 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.'); });
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.
ANGULARFACADE // 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'); });
ANGULARDECORATOR 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(); } } }
NODEJSSINGLETON 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');
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.
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
Gustavo Corrêa Alves
http://www.gustavocalves.com.br/
https://github.com/gcajpa
https://br.linkedin.com/in/gustavocorreaalves
OBRIGADO!