Limpando Seu Código JS Com O Padrão Pub/Sub

CEJS 2014
Code sample: https://github.com/filipebarcos/cejs_pubsub

Transcript

1. PUB/SUB -> CLEAN JS “Limpando Seu Código JS Com O Padrão Pub/Sub"
2. FILIPE COSTA @filipebarcos
3. Stack Builders Estamos contratando!
4. DISCLAIMER
5. CLEAN CODE
6. TÁ NA MODA! Angular Ember Backbone React MVVM MVC MV******
7. CONTEXTO
8. • Comprar Passeio Turístico no Site • Página Única • Descrição do produto • Horários (seletor de dia/hora) • Mapa • Seletor de quantidade • Resumo da Compra • Formulário de Cliente e Cartão • Total da Compra
10. MÓDULOS
11. Checkout.OrderSummary = function() { return { addItem: function(item) { // Add item to summary // Update Order Total }; }; }; Checkout.CustomerForm = function() {};
12. O PROBLEMA
13. DEPENDÊNCIA
14. Checkout.OrderSummary = function() { var addItemToSummary = function(item) { var orderSummary = document.getElementById('order-summary'); var rowSnippet = buildRow(item); orderSummary.appendChild(rowSnippet); }; var updateOrderTotal = function(item) { var orderTotal = document.getElementById('order-total'), currentTotal = parseFloat(orderTotal.innerHTML); orderTotal.innerHTML = currentTotal + item.quantity * item.cost; }; return { addItem: function(item) { addItemToSummary(item); updateOrderTotal(item); }; }; };
15. Checkout.CustomerForm = function() { var fetchDeliveryCost = function(postalCode) { //fetch from Post Office API }; var updateOrderTotal = function(cost) { var orderTotal = document.getElementById('order-total'), currentTotal = parseFloat(orderTotal.innerHTML); orderTotal.innerHTML = currentTotal + cost; }; return { updateDeliveryCost: function(postalCode) { var cost = fetchDeliveryCost(postalCode); document.getElementById('delivery-cost').innerHTML = cost; updateOrderTotal(cost); }; }; };
16. SOLUÇÕES SOLUÇÃO
17. PUB/SUB
18. PUBlish e SUBscribe é um padrão de mensageria, onde os “Publishers” enviam mensagens e os “Subscribers” escutam essas mensagens
20. PUBSUB.JS
22. PubSub.publish('my-channel', 'value'); PubSub.subscribe('my-channel', function(message, data) { console.log('this is what I got'); console.log(data); });
23. DE VOLTA AO PROBLEMA
24. Checkout.CustomerForm = function() { var updateOrderTotal = function(cost) { var orderTotal = document.getElementById('order-total'), currentTotal = parseFloat(orderTotal.innerHTML); orderTotal.innerHTML = currentTotal + cost; }; }; Checkout.OrderSummary = function() { var updateOrderTotal = function(item) { var orderTotal = document.getElementById('order-total'), currentTotal = parseFloat(orderTotal.innerHTML); orderTotal.innerHTML = currentTotal + item.quantity * item.cost; }; };
25. Checkout.OrderSummary = function() { var addItemToSummary = function(item) { var orderSummary = document.getElementById('order-summary'); var rowSnippet = buildRow(item); orderSummary.appendChild(rowSnippet); }; return { addItem: function(item) { addItemToSummary(item); PubSub.publish('checkout.item', item); }; }; };
26. Checkout.CustomerForm = function() { var fetchDeliveryCost = function(postalCode) { //fetch from Post Office API }; return { updateDeliveryCost: function(postalCode) { var cost = fetchDeliveryCost(postalCode); document.getElementById('delivery-cost').innerHTML = cost; PubSub.publish('checkout.delivery-cost', cost); }; }; };
27. Checkout.OrderTotal = function() { var updateOrderTotal = function(cost) { var orderTotal = document.getElementById('order-total'), currentTotal = parseFloat(orderTotal.innerHTML); orderTotal.innerHTML = currentTotal + cost; }; PubSub.subscribe('checkout.item', function(msg, item) { updateOrderTotal(item.quantity * item.cost); }); PubSub.subscribe('checkout.delivery-cost', function(msg, deliveryCost) { updateOrderTotal(deliveryCost); }); };
28. \O/
29. CONCLUSÃO
30. OBRIGADO https://github.com/filipebarcos/cejs_pubsub