PATTERNS EVERYWHERE EVEN IN JAVASCRIPT

PADRÕES OBSERVADOS NA NATUREZA

Fases da lua

Arquitetura das colmeias

Migração dos pássaros

Meteorologia

PADRÕES OBSERVADOS NA NATUREZA

PADRÕES QUE CRIAMOS

Unidades de Medida Sinalização

- 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 e Implementando Padrões

Isso não quer dizer que você não esteja apto.

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.'); });

PROJETOS JAVASCRIPT CONHECIDOS UTILIZAM MUITOS PADRÕES

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!