Slide 1

Slide 1 text

JS Moderno Do coder ao shareholder

Slide 2

Slide 2 text

linkedin.com/in/luizgonzaga @luizmarelo

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Disclaimer ★ “There are no silver bullets"

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Derpina Derp

Slide 7

Slide 7 text

Derpina Líder de Projeto…
 Arquiteto…
 Programador… Derp

Slide 8

Slide 8 text

CEO…
 Gerente…
 Líder de Projeto… Derpina Líder de Projeto…
 Arquiteto…
 Programador… Derp

Slide 9

Slide 9 text

CEO…
 Gerente…
 Líder de Projeto… Derpina Líder de Projeto…
 Arquiteto…
 Programador… Derp Coder

Slide 10

Slide 10 text

CEO…
 Gerente…
 Líder de Projeto… Derpina Líder de Projeto…
 Arquiteto…
 Programador… Derp Shareholder Coder

Slide 11

Slide 11 text

Era uma vez…

Slide 12

Slide 12 text

Era uma vez… ★ 1995:
 Brendan Eich @ Netscape: Mocha ➛ Livescript ➛ Javascript

Slide 13

Slide 13 text

Era uma vez… ★ 1995:
 Brendan Eich @ Netscape: Mocha ➛ Livescript ➛ Javascript ★ 1996:
 JavaScript clonado no IE 3.0: “JScript”

Slide 14

Slide 14 text

ES.next / “Harmony” “ES4” E4X
 “ES4” ECMA International Technical Committee 39 (TC39) ECMAScript

Slide 15

Slide 15 text

Espiando o ES 6 ★ Sintaxe + concisa e expressiva ★ Modules e Sand-boxing ★ Declaração de "Classe" ★ Iterators e generators ★ Promessas ★ Interpolação de String ★ Objetos e arrays binários ★ Hash Maps e Sets "fracos" ★ Mais Math e String built-in ★ Melhor suporte Unicode

Slide 16

Slide 16 text

Moral da História ★ JS foi mesmo criado “na tora” ★ Passou e vem passando por um longo processo de aperfeiçoamento (ES x.x) ★ Mas, mesmo assim, é uma linguagem cada vez melhor e ubíqua ★ E hoje, grandes nomes contribuem para torná-la excelente…

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Implementações ES V8 SpiderMonkey Chakra Webkit

Slide 19

Slide 19 text

Implementações ES V8 SpiderMonkey Chakra Webkit

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Back && Front

Slide 23

Slide 23 text

Back && Front ★ Com um mínimo (ou nenhum) esforço, podemos reutilizar código entre servidor e cliente

Slide 24

Slide 24 text

Back && Front ★ Com um mínimo (ou nenhum) esforço, podemos reutilizar código entre servidor e cliente ★ Bibliotecas compartilhadas (templates, validação, http…)

Slide 25

Slide 25 text

Back && Front ★ Com um mínimo (ou nenhum) esforço, podemos reutilizar código entre servidor e cliente ★ Bibliotecas compartilhadas (templates, validação, http…) ★ Pré-renderizar um template ou mesmo uma árvore DOM no servidor

Slide 26

Slide 26 text

Back && Front ★ Com um mínimo (ou nenhum) esforço, podemos reutilizar código entre servidor e cliente ★ Bibliotecas compartilhadas (templates, validação, http…) ★ Pré-renderizar um template ou mesmo uma árvore DOM no servidor ★ Navegadores headless (Testes, relatórios, screenshots…)

Slide 27

Slide 27 text

Back && Front ★ Com um mínimo (ou nenhum) esforço, podemos reutilizar código entre servidor e cliente ★ Bibliotecas compartilhadas (templates, validação, http…) ★ Pré-renderizar um template ou mesmo uma árvore DOM no servidor ★ Navegadores headless (Testes, relatórios, screenshots…)

Slide 28

Slide 28 text

1 [! 2 {! 3 "age": 25,! 4 "_id": "53838b29a868960200000001",! 5 "__v": 0,! 6 "name": {! 7 "first": "John",! 8 "last": "Doe"! 9 }! 10 },! 11 {! 12 "age": 65,! 13 "_id": "53838b29a868960200000002",! 14 "__v": 0,! 15 "name": {! 16 "first": "Jane",! 17 "last": "Doe"! 18 }! 19 },! 20 {! 21 "age": 45,! 22 "_id": "53838b29a868960200000003",! 23 "__v": 0,! 24 "name": {! 25 "first": "Alice",! 26 "last": "Smith"! 27 }! 28 }! 29 ]! ?

Slide 29

Slide 29 text

15+ anos ★ Legado de tecnologias EE ★ “Muitas organizações vem se encontrando de mãos atadas, restringidas e de fato impedidas na sua habilidade de inovar” Joe McCann - COO @ Node Firm

Slide 30

Slide 30 text

JS: Reboot

Slide 31

Slide 31 text

JS: Reboot ★ Aplicações web || responsive mobile [Backbone, Angular, React, Dust…]

Slide 32

Slide 32 text

JS: Reboot ★ Aplicações web || responsive mobile [Backbone, Angular, React, Dust…] ★ Aplicações mobile [Cordova / PhoneGap, Kirin, Titanium, iOS/ OSX#WebViewJavascriptBridge…]

Slide 33

Slide 33 text

JS: Reboot ★ Aplicações web || responsive mobile [Backbone, Angular, React, Dust…] ★ Aplicações mobile [Cordova / PhoneGap, Kirin, Titanium, iOS/ OSX#WebViewJavascriptBridge…] ★ Aplicações desktop [node-webkit, DeskShell, ChromeApps, Prism, Adobe AIR…]

Slide 34

Slide 34 text

JS: Reboot ★ Aplicações web || responsive mobile [Backbone, Angular, React, Dust…] ★ Aplicações mobile [Cordova / PhoneGap, Kirin, Titanium, iOS/ OSX#WebViewJavascriptBridge…] ★ Aplicações desktop [node-webkit, DeskShell, ChromeApps, Prism, Adobe AIR…] ★ Projetos em hardware [Espruino, Tessel, Arduino…]

Slide 35

Slide 35 text

JS! Por quê?

Slide 36

Slide 36 text

JS! Por quê? ★ “Já está lá” ★ Baixo risco ★ Escreva código e aplicações uma vez ★ Conjunto macro de conhecimento único

Slide 37

Slide 37 text

Medium Cases

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

★ Construiu uma versão em node de uma aplicação em java na metade do tempo com menos desenvolvedores

Slide 40

Slide 40 text

★ Construiu uma versão em node de uma aplicação em java na metade do tempo com menos desenvolvedores ★ A versão em node do app dobrou o número de req/sec

Slide 41

Slide 41 text

★ Construiu uma versão em node de uma aplicação em java na metade do tempo com menos desenvolvedores ★ A versão em node do app dobrou o número de req/sec ★ Tempo de resposta caiu 35% (200ms)

Slide 42

Slide 42 text

★ Construiu uma versão em node de uma aplicação em java na metade do tempo com menos desenvolvedores ★ A versão em node do app dobrou o número de req/sec ★ Tempo de resposta caiu 35% (200ms) ★ De 1 a 12 apps em 6 meses

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

★ “Velocidade foi o ponto fundamental na mudança do PayPal para Node. Percebemos que habilitamos um enorme avanço em nosso workflow, nos permitindo iterar mais rápido e inovar mais”

Slide 45

Slide 45 text

★ “Velocidade foi o ponto fundamental na mudança do PayPal para Node. Percebemos que habilitamos um enorme avanço em nosso workflow, nos permitindo iterar mais rápido e inovar mais” ★ “PayPal tem uma história de tecnologias enterprise tais como Java e C++. Desde que adotamos Node, inúmeros engenheiros da empresa me contaram como estão energizados por seus trabalhos novamente e animados por estarem adotando uma tecnologia “moderna" para construir nosso futuro. Isso é bom de se ouvir” Jeff Harrel, Director of UI Engineering

Slide 46

Slide 46 text

★ “Velocidade foi o ponto fundamental na mudança do PayPal para Node. Percebemos que habilitamos um enorme avanço em nosso workflow, nos permitindo iterar mais rápido e inovar mais” ★ “PayPal tem uma história de tecnologias enterprise tais como Java e C++. Desde que adotamos Node, inúmeros engenheiros da empresa me contaram como estão energizados por seus trabalhos novamente e animados por estarem adotando uma tecnologia “moderna" para construir nosso futuro. Isso é bom de se ouvir” Jeff Harrel, Director of UI Engineering Economia, Produtividade, Inovação Motivação do desenvolvedor

Slide 47

Slide 47 text

★ “Todo o nosso stack mobile é construído completamente com Node. Uma razão foi escalabilidade. A segunda é que o Node nos mostrou enormes ganhos de performance” Kiran Prasad 
 Director of Engineering, Mobile

Slide 48

Slide 48 text

★ “Todo o nosso stack mobile é construído completamente com Node. Uma razão foi escalabilidade. A segunda é que o Node nos mostrou enormes ganhos de performance” Kiran Prasad 
 Director of Engineering, Mobile Escalabilidade, Performance

Slide 49

Slide 49 text

★ “Uma organização de notícias deve ser responsiva, tanto para seus leitores quanto para um fluxo acelerado de informação. Node provê um nível de flexibilidade que não encontramos em nenhum outro lugar — e nos permite entregar apps performáticos que podem ser facilmente ajustados.” Trevor Landau
 Software Engineer, Mobile Web

Slide 50

Slide 50 text

★ “Uma organização de notícias deve ser responsiva, tanto para seus leitores quanto para um fluxo acelerado de informação. Node provê um nível de flexibilidade que não encontramos em nenhum outro lugar — e nos permite entregar apps performáticos que podem ser facilmente ajustados.” Trevor Landau
 Software Engineer, Mobile Web Flexibilidade

Slide 51

Slide 51 text

★ Servindo 50k req/min (há +8 meses atrás antes do lançamento em 48+ países) ★ Serviços Node agora estão aguentando a mesma quantidade de tráfego de antes mas com menos hardware ★ Tempos de carregamento de páginas caiu em 50% ★ Facilidade em implementar funcionalidades em grande amplitude e mudanças no projeto muito mais rapidamente

Slide 52

Slide 52 text

★ Servindo 50k req/min (há +8 meses atrás antes do lançamento em 48+ países) ★ Serviços Node agora estão aguentando a mesma quantidade de tráfego de antes mas com menos hardware ★ Tempos de carregamento de páginas caiu em 50% ★ Facilidade em implementar funcionalidades em grande amplitude e mudanças no projeto muito mais rapidamente Economia, Produtividade, Inovação

Slide 53

Slide 53 text

★ 55% de todo tráfego na Black Friday foi para os servidores Node. Sequer um servidor Node caiu. ★ Em plena Black Friday e a utilização de CPU pairou em torno dos 1%. Os desenvolvedores estavam entediados!

Slide 54

Slide 54 text

★ 55% de todo tráfego na Black Friday foi para os servidores Node. Sequer um servidor Node caiu. ★ Em plena Black Friday e a utilização de CPU pairou em torno dos 1%. Os desenvolvedores estavam entediados! Economia, Motivação do desenvolvedor

Slide 55

Slide 55 text

★ Em média, serviços Node manejam cerca de 2M req/min ★ Yahoo tem cerca de 200 devs para Node ★ 500 módulos internos, 800 externos ★ “Maior ganho: velocidade e facilidade de desenvolvimento”

Slide 56

Slide 56 text

★ Em média, serviços Node manejam cerca de 2M req/min ★ Yahoo tem cerca de 200 devs para Node ★ 500 módulos internos, 800 externos ★ “Maior ganho: velocidade e facilidade de desenvolvimento” Produtividade

Slide 57

Slide 57 text

Ecossistema

Slide 58

Slide 58 text

Ecossistema

Slide 59

Slide 59 text

NPM

Slide 60

Slide 60 text

NPM ★ Node Package Manager

Slide 61

Slide 61 text

NPM ★ Node Package Manager ★ Similar ao Ruby Gems, Maven…

Slide 62

Slide 62 text

NPM ★ Node Package Manager ★ Similar ao Ruby Gems, Maven… ★ Integração com GitHub

Slide 63

Slide 63 text

NPM ★ Node Package Manager ★ Similar ao Ruby Gems, Maven… ★ Integração com GitHub ★ Facilidade em criar/manter pacotes

Slide 64

Slide 64 text

NPM ★ Node Package Manager ★ Similar ao Ruby Gems, Maven… ★ Integração com GitHub ★ Facilidade em criar/manter pacotes ★ Maior engajamento / fortalecimento da comunidade

Slide 65

Slide 65 text

Testes ★ Mocha ★ Sinon ★ Buster ★ Jasmine ★ QUnit ★ Chai ★ Karma ★ PhantomJS

Slide 66

Slide 66 text

Automatizadores

Slide 67

Slide 67 text

Automatizadores ★ Gulp, Grunt, Broccoli…

Slide 68

Slide 68 text

Automatizadores ★ Gulp, Grunt, Broccoli… ★ Similares de outros ecossistemas: Makefile, Rakefile, Ant, Maven…

Slide 69

Slide 69 text

Automatizadores ★ Gulp, Grunt, Broccoli… ★ Similares de outros ecossistemas: Makefile, Rakefile, Ant, Maven… ★ Configurações declarativas (Grunt) ou JS puro (Gulp)

Slide 70

Slide 70 text

Integração Contínua ★ Travis ★ Jenkins ★ Strider ★ …

Slide 71

Slide 71 text

Plataformas ★ Nodejitsu ★ Heroku ★ Azure ★ Amazon EC2 ★ + várias (https://github.com/joyent/node/wiki/node-hosting)

Slide 72

Slide 72 text

Links & Perguntas ★ bitly.com/bundles/luizmarelo/2
 ★ gojs.org

Slide 73

Slide 73 text

linkedin.com/in/luizgonzaga @luizmarelo Obrigado!