Escalando aplicações com Isomorphic Javascript

Slide 1

Slide 1 text

ISOMORPHIC JAVASCRIPT IMASTERS DEVELOPER WEEK

Slide 2

Slide 2 text

@ERICKBELFY ERICK BELFORT

Slide 3

Slide 3 text

AGENDA 1. PORQUE ESCOLHER ISOMORPHIC JAVASCRIPT 2. CENÁRIO ATUAL 3. COMO IMPLEMENTAR

Slide 4

Slide 4 text

PORQUE ESCOLHER ISOMORPHIC JAVASCRIPT ?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

O QUE É ISOMORPHIC JAVASCRIPT ?

Slide 7

Slide 7 text

http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/ By isomorphic we mean that any given line of code (with notable exceptions) can execute both on the client and the server. CHARLIE ROBBINS

Slide 8

Slide 8 text

É UMA REPRESENTAÇÃO JAVASCRIPT QUE PODE SER COMPARTILHADA ENTRE AMBIENTES DE DESENVOLVIMENTO

Slide 9

Slide 9 text

VAMOS DAR UM PASSO ATRÁS

Slide 10

Slide 10 text

ARQUITETURAS TRADICIONAIS DOM CAMADA LÓGICA ROTAS VIEWS PERSISTÊNCIA

Slide 11

Slide 11 text

ASCENSÃO DAS SPA's DOM CAMADA LÓGICA ROTAS VIEWS PERSISTÊNCIA

Slide 12

Slide 12 text

CAMADA COMPARTILHADA ISOMORPHIC DOM CAMADA LÓGICA ROTAS VIEWS PERSISTÊNCIA

Slide 13

Slide 13 text

VIEW LAYER MARCAÇÃO HTML REPRESENTAÇÃO DE DADOS INTERNACIONALIZAÇÃO (I18n) ROTAS

Slide 14

Slide 14 text

CASOS DE USO ISOMORPHIC

Slide 15

Slide 15 text

SPA SER COMPLETAMENTE RENDERIZADA NO SERVIDOR GANHO DE PERFORMANCE NO PAGELOAD INICIAL MAIOR PODER DE CAPTURA PELAS ENGINES DE BUSCA

Slide 16

Slide 16 text

APP’s QUE COMPARTILHAM CAMADA ! LÓGICA ENTRE O SERVIDOR E O CLIENTE FLEXIBILIDADE REAL-TIME OFFLINE FIRST NOVAS FORMAS DE SE ESTRUTURAR UMA APLICAÇÃO

Slide 17

Slide 17 text

APP’s QUE COMPARTILHAM CAMADA ! LÓGICA ENTRE O SERVIDOR E O CLIENTE MANUTENÇÃO JAVASCRIPT EVERYWHERE REDUÇÃO DE DUPLICIDADE DE CÓDIGO

Slide 18

Slide 18 text

CENÁRIO ATUAL

Slide 19

Slide 19 text

AIRBNB UTILIZAM O RENDR, UMA BIBLIOTECA BASEADA EM BACKBONE E EXPRESS

Slide 20

Slide 20 text

ASANA APLICATIVO TOTALMENTE REAL-TIME. A META O ASANA É RELACIONADA A EVITAR A ATULIZAÇÃO DE EMAILS PARA COMUNICAR COM SEU TIME.

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ABSTRAÇÕES! MUITAS ABSTRAÇÕES!

Slide 23

Slide 23 text

COMO IMPLEMENTAR

Slide 24

Slide 24 text

TIPOS DE ISOMORFISMO ENVIRONMENT AGNOSTIC SHIMMED PER ENVIRONMENT OU

Slide 25

Slide 25 text

ENVIRONMENT AGNOSTIC NÃO DEPENDE DE PROPRIEDADES ESPECÍFICAS DO BROWSER WINDOW OU DE PROPRIEDADES ESPECÍFICAS DO SERVIDOR HTTP.GET, REQ.COOKIES, PROCESS.ENV, FS.CREATESTREAM

Slide 26

Slide 26 text

MUSTACHE

Slide 27

Slide 27 text

SHIMMED PER ENVIRONMENT API NODE BROWSER

Slide 28

Slide 28 text

SUPERAGENT

Slide 29

Slide 29 text

HACK TIME

Slide 30

Slide 30 text

ABSTRAÇÕES CLIENTE document.cookie = ‘valor=produto1; dominio=.comprar.com’ SERVIDOR res.setHeader( ‘Set-Cookie: valor=produto1; ’ + 'dominio=.comprar.com’ )

Slide 31

Slide 31 text

IMPLEMENTAÇÃO

Slide 32

Slide 32 text

setCookie(‘valor', ‘produto1’) API document.cookie = ‘valor=produto1’ Cliente res.setHeader(‘Set-Cookie: valor=produto1’) Servidor

Slide 33

Slide 33 text

setCookie(‘valor', ‘produto1’, { path: ‘/‘, domain: ‘.meudominio.com.br’, expires: new Date(2015, 05, 26) }); API document.cookie = ‘valor=produto1; Domain=.meudominio.com.br’+ ‘Path=/; Expires=26 May 2015 05:40:00 GMT’ Cliente res.setHeader(‘Set-Cookie: valor=produto1’, {res:res}) Servidor

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

EVITE REINVENTAR A RODA

Slide 38

Slide 38 text

ESTRUTURA

Slide 39

Slide 39 text

API

Slide 40

Slide 40 text

SETTER - NODE

Slide 41

Slide 41 text

SETTER - BROWSER

Slide 42

Slide 42 text

COMO INTEGRAR OS AMBIENTES?

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

TRADUZ MODULOS COMMONJS PARA SEREM UTILIZADOS NO BROWSER require('shazan'); module.exports = function () {};

Slide 45

Slide 45 text

EMPACOTA TODAS AS DEPENDENCIAS DO NODE_MODULES QUE SEU MODULO PRECISA.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

NO PACKAGE.JSON UTILIZE A CHAVE “BROWSER" PARA DEFINIR OS ARQUIVOS QUE SERÃO COMPILADOS QUANDO O BROWSERIFY COMPILAR O CÓDIGO ELE IRÁ SUBSTITUIR O ARQUIVO “SETTER/INDEX.JS” POR “SETTER/CLIENT.JS”

Slide 48

Slide 48 text

setCookie(‘valor', ‘produto1’, { path: ‘/‘, domain: ‘.meudominio.com.br’, expires: new Date(2015, 05, 26) }); API res.setHeader(‘Set-Cookie: valor=produto1’, {res:res}) Servidor document.cookie = ‘valor=produto1; Domain=.meudominio.com.br’+ ‘Path=/; Expires=26 May 2015 05:40:00 GMT’ Cliente