Escalando aplicações com Isomorphic Javascript

Referências:
https://github.com/rendrjs/rendr
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/
https://github.com/spikebrehm/isomorphic-tutorial
https://github.com/spikebrehm/set-cookie
https://github.com/spikebrehm/isomorphic-examples

Transcript

1. ISOMORPHIC JAVASCRIPT IMASTERS DEVELOPER WEEK
2. @ERICKBELFY ERICK BELFORT
3. AGENDA 1. PORQUE ESCOLHER ISOMORPHIC JAVASCRIPT 2. CENÁRIO ATUAL 3. COMO IMPLEMENTAR
4. PORQUE ESCOLHER ISOMORPHIC JAVASCRIPT ?
6. O QUE É ISOMORPHIC JAVASCRIPT ?
7. 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
8. É UMA REPRESENTAÇÃO JAVASCRIPT QUE PODE SER COMPARTILHADA ENTRE AMBIENTES DE DESENVOLVIMENTO
9. VAMOS DAR UM PASSO ATRÁS
10. ARQUITETURAS TRADICIONAIS DOM CAMADA LÓGICA ROTAS VIEWS PERSISTÊNCIA
11. ASCENSÃO DAS SPA's DOM CAMADA LÓGICA ROTAS VIEWS PERSISTÊNCIA
12. CAMADA COMPARTILHADA ISOMORPHIC DOM CAMADA LÓGICA ROTAS VIEWS PERSISTÊNCIA
13. VIEW LAYER MARCAÇÃO HTML REPRESENTAÇÃO DE DADOS INTERNACIONALIZAÇÃO (I18n) ROTAS
14. CASOS DE USO ISOMORPHIC
15. SPA SER COMPLETAMENTE RENDERIZADA NO SERVIDOR GANHO DE PERFORMANCE NO PAGELOAD INICIAL MAIOR PODER DE CAPTURA PELAS ENGINES DE BUSCA
16. 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
17. APP’s QUE COMPARTILHAM CAMADA ! LÓGICA ENTRE O SERVIDOR E O CLIENTE MANUTENÇÃO JAVASCRIPT EVERYWHERE REDUÇÃO DE DUPLICIDADE DE CÓDIGO
18. CENÁRIO ATUAL
19. AIRBNB UTILIZAM O RENDR, UMA BIBLIOTECA BASEADA EM BACKBONE E EXPRESS
20. ASANA APLICATIVO TOTALMENTE REAL-TIME. A META O ASANA É RELACIONADA A EVITAR A ATULIZAÇÃO DE EMAILS PARA COMUNICAR COM SEU TIME.
22. ABSTRAÇÕES! MUITAS ABSTRAÇÕES!
23. COMO IMPLEMENTAR
24. TIPOS DE ISOMORFISMO ENVIRONMENT AGNOSTIC SHIMMED PER ENVIRONMENT OU
25. 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
26. MUSTACHE
27. SHIMMED PER ENVIRONMENT API NODE BROWSER
28. SUPERAGENT
29. HACK TIME
30. ABSTRAÇÕES CLIENTE document.cookie = ‘valor=produto1; dominio=.comprar.com’ SERVIDOR res.setHeader( ‘Set-Cookie: valor=produto1; ’ + 'dominio=.comprar.com’ )
31. IMPLEMENTAÇÃO
32. setCookie(‘valor', ‘produto1’) API document.cookie = ‘valor=produto1’ Cliente res.setHeader(‘Set-Cookie: valor=produto1’) Servidor
33. 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
37. EVITE REINVENTAR A RODA
38. ESTRUTURA
39. API
40. SETTER - NODE
41. SETTER - BROWSER
42. COMO INTEGRAR OS AMBIENTES?
44. TRADUZ MODULOS COMMONJS PARA SEREM UTILIZADOS NO BROWSER require('shazan'); module.exports = function () {};
45. EMPACOTA TODAS AS DEPENDENCIAS DO NODE_MODULES QUE SEU MODULO PRECISA.
47. 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”
48. 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
49. EXPERIMENTE, DESCUBRA, TESTE.
50. EXISTE NO MERCADO ESPAÇO PARA TODOS NÓS!
51. PERGUNTAS?
52. OBRIGADO! @erickbelfy