Organizando o JavaScript (Redux)

Slide 1

Slide 1 text

ORGANIZANDO O JS NANDO VIEIRA @fnando

Slide 2

Slide 2 text

http://nandovieira.com.br

Slide 3

Slide 3 text

http://hellobits.com

Slide 4

Slide 4 text

http://howtocode.com.br howto.

Slide 5

Slide 5 text

http://codeplane.com.br

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

A PRIMEIRA REVOLUÇÃO 2004

Slide 8

Slide 8 text

ASYNCRONOUS JAVASCRIPT AND XML AJAX

Slide 9

Slide 9 text

A SEGUNDA REVOLUÇÃO 2006

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

A TERCEIRA REVOLUÇÃO 2009

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Dos 50 repositórios mais populares do Github, 29 repositórios* são relacionados a JavaScript. *bootstrap, node, jquery, html5-boilerplate, impress.js, d3, backbone, chosen, three.js, jQuery-File-Upload, brackets, express, angular.js, Modernizr, meteor, less.js, socket.io, jquery-mobile, underscore, reveal.js, coffee-script, jquery-ui, moment, ember.js, select2, todomvc, backbone-fundamentals, jquery-pjax, pdf.js.

Slide 14

Slide 14 text

PERGUNTA QUEM DAQUI REALMENTE CONHECE JAVASCRIPT?

Slide 15

Slide 15 text

DICAS

Slide 16

Slide 16 text

APRENDA JAVASCRIPT

Slide 17

Slide 17 text

CLOSURES, FUNÇÕES, ESCOPO DE VARIÁVEIS, CONTEXTO DE FUNÇÕES, PSEUDO-ORIENTAÇÃO A OBJETOS, PROTOTYPE, MUITO MAIS.

Slide 18

Slide 18 text

CLOSURES

Slide 19

Slide 19 text

FUNÇÕES

Slide 20

Slide 20 text

PROTOTYPE

Slide 21

Slide 21 text

OOP

Slide 22

Slide 22 text

MANIPULAÇÃO DO DOM

Slide 23

Slide 23 text

FUNCTION BINDING

Slide 24

Slide 24 text

MUITO MAIS

Slide 25

Slide 25 text

JQUERY *NÃO* É JAVASCRIPT

Slide 26

Slide 26 text

http://developer.mozilla.org

Slide 27

Slide 27 text

http://howtocode.com.br

Slide 28

Slide 28 text

http://w3scho... melhor não!

Slide 29

Slide 29 text

http://w3fools.com

Slide 30

Slide 30 text

UMA COISA DE CADA VEZ

Slide 31

Slide 31 text

"invite_friends" : function() { var resizeLoader = function() { $("#loader").css("width", $(".places").width()); $("#loader").css("height", $(".places").height()-18); } resizeLoader(); var resizeTimer; $(window).bind('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeLoader, 50); }); $("a[href=#automatic_invite]").click(function(e){ SomeApp.utils.stopPropagation(e); if(!$(this).parents(".tab_title:first").is(".active")) { $(".tab_title:first") .toggleClass("active"); $(".tab_title:last") .toggleClass("active"); $("#automatic") .toggleClass("hidden"); $("#manual") .toggleClass("hidden"); } }); var suffixes = { "gmail": "@gmail.com", "yahoo": "", "live": "@hotmail.com", "other": ""

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

354 LINHAS

Slide 34

Slide 34 text

BAD JQUERY OU BAD DEVELOPER?

Slide 35

Slide 35 text

$("#page").load("/some/file.html");

Slide 36

Slide 36 text

Seleção do elemento no DOM $("#page").load("/some/file.html");

Slide 37

Slide 37 text

Requisição AJAX $("#page").load("/some/file.html");

Slide 38

Slide 38 text

Manipulação do DOM $("#page").load("/some/file.html");

Slide 39

Slide 39 text

FAÇA APENAS UMA COISA E A FAÇA BEM FEITATM

Slide 40

Slide 40 text

COMPONENTES

Slide 41

Slide 41 text

PENSE COMO SE FOSSE UM QUEBRA-CABEÇA

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

PERGUNTA QUANTOS COMPONENTES VOCÊ CONSEGUE IDENTIFICAR?

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

ESSE APP TERÁ MAIS COMPONENTES QUE SÓ SERÃO IDENTIFICADOS NO DESENVOLVIMENTO.

Slide 51

Slide 51 text

TER PEQUENAS PARTES PARA COMPOR UM APP É MUITO MAIS SIMPLES.

Slide 52

Slide 52 text

O CÓDIGO FICA MAIS SIMPLES POR QUE DEVE FAZER MENOS COISA.

Slide 53

Slide 53 text

QUEBRE CADA COMPONENTE EM SEU PRÓPRIO ARQUIVO.

Slide 54

Slide 54 text

CONCATENE OS ARQUIVOS NA HORA DO DEPLOY.

Slide 55

Slide 55 text

NAMESPACES

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Module("Todo.TaskInput", function(TaskInput){ }); https://github.com/fnando/module.js

Slide 58

Slide 58 text

DEFININDO TAREFAS NA INICIALIZAÇÃO DO COMPONENTE.

Slide 59

Slide 59 text

Module("Todo.TaskInput", function(TaskInput){ TaskInput.fn.initialize = function(input) { this.input = input; }; });

Slide 60

Slide 60 text

var taskInput = Todo.TaskInput($("input#task"));

Slide 61

Slide 61 text

PENSE EM COMO VOCÊ QUER INTERAGIR COM O COMPONENTE.

Slide 62

Slide 62 text

taskInput.on("enter", callback);

Slide 63

Slide 63 text

Slide 64

Slide 64 text

INTERAGINDO COM O WRAPPER DO JQUERY

Slide 65

Slide 65 text

Module("Todo.TaskInput", function(TaskInput){ TaskInput.fn.initialize = function(input) { this.input = input; this.emitter = Emitter.create(); this.on = $.proxy(this.emitter, "on"); this.addEventListeners(); }; TaskInput.fn.addEventListeners = function() { this.input.on("keyup", $.proxy(this, "onKeyUp")); }; TaskInput.fn.onKeyUp = function(event) { if (event.which !== 13 || !event.target.value) { return; } this.emitter.emit("enter", event.target.value); event.target.value = ""; }; });

Slide 66

Slide 66 text

SABER JAVASCRIPT PERMITE DECIDIR QUAL A MELHOR ABORDAGEM PARA UM PROBLEMA.

Slide 67

Slide 67 text

TESTES AUTOMATIZADOS

Slide 68

Slide 68 text

AUTOMATIZE O QUE VOCÊ FARIA COM F5.

Slide 69

Slide 69 text

COMPONENTES MENORES SÃO MAIS FÁCEIS DE TESTAR.

Slide 70

Slide 70 text

describe("Calculation", function() { it("sums two numbers", function() { expect(2 + 2).toEqual(4); }); }); http://pivotal.github.io/jasmine/

Slide 71

Slide 71 text

EVENTOS, AJAX, INTERAÇÃO COM O DOM, E QUASE TODO O RESTO.

Slide 72

Slide 72 text

TESTE O QUE VOCÊ JULGA IMPORTANTE.

Slide 73

Slide 73 text

describe("Todo.TaskInput", function() { var component, input, callback, event; beforeEach(function() { input = $("").val("Some task"); callback = jasmine.createSpy("callback"); component = Todo.TaskInput(input); event = $.Event(); event.which = 13; event.type = "keyup"; }); it("triggers event on enter", function() { component.on("enter", callback); input.trigger(event); expect(callback).wasCalledWith("Some task"); }); // other tests go here. });

Slide 74

Slide 74 text

É MAIS DIFÍCIL DO QUE PARECE.

Slide 75

Slide 75 text

JAVASCRIPT PATTERNS

Slide 76

Slide 76 text

PATTERNS STANDARDS VS

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

ADAPTER COMMAND COMPOSITE DECORATOR FACADE FACTORY MIXIN MODULE NAMESPACE OBSERVER PROTOTYPE REVEALING SINGLETON MAIS

Slide 79

Slide 79 text

MVC/MV*

Slide 80

Slide 80 text

SEPARA AS APLICAÇÕES EM TRÊS PARTES CONHECIDAS COMO MODEL, VIEWS E CONTROLLERS.

Slide 81

Slide 81 text

EXISTEM POUCAS IMPLEMENTAÇÕES QUE SEGUEM O MVC PROPOSTO PELA XEROX PARC À RISCA.

Slide 82

Slide 82 text

A MAIORIA DOS FRAMEWORKS IMPLEMENTA UMA VARIAÇÃO (OU NEM IMPLEMENTA).

Slide 83

Slide 83 text

MVVM Model View ViewModel Model View Presenter Model View Adapter Model View Variation MVP MVA MV*

Slide 84

Slide 84 text

NO JAVASCRIPT, TIVEMOS UMA EXPLOSÃO DE FRAMEWORKS NOS ÚLTIMOS 2 ANOS.

Slide 85

Slide 85 text

EXISTEM MAIS DE 50 FRAMEWORKS QUE QUEREM VIRAR “O QUERIDINHO” DOS DESENVOLVEDORES.

Slide 86

Slide 86 text

http://addyosmani.github.com/todomvc/

Slide 87

Slide 87 text

CRIE SEU PRÓPRIO FRAMEWORK.

Slide 88

Slide 88 text

ISSO FARÁ COM QUE VOCÊ ENTENDA O PROBLEMA A FUNDO E DARÁ O CONHECIMENTO PARA RESOLVER O PROBLEMA.

Slide 89

Slide 89 text

DEPOIS, JOGUE TUDO FORA!

Slide 90

Slide 90 text

DEPLOY

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

$ find public -name '*.js' | wc -l 21

Slide 93

Slide 93 text

$ grunt Running "concat:dist" (concat) task File "public/javascripts/todo.bundle.js" created. Running "jshint:dist" (jshint) task >> 13 files lint free. Running "uglify:dist" (uglify) task File "public/javascripts/todo.min.js" created. Original: 298908 bytes. Minified: 107864 bytes. Gzipped: 37187 bytes. Running "cssmin:dist" (cssmin) task File public/stylesheets/todo.min.css created. Original: 2465 bytes. Minified: 1950 bytes. Gzipped: 500 bytes. Done, without errors.