SlideShare uma empresa Scribd logo
1 de 165
Baixar para ler offline
FERNANDA BERNARDO
REINVENTAR A RODA A CADA
NOVO FRAMEWORK
JS, VALE A
PENA?
Vale a pena?
Vou te contar…
FERNANDA BERNARDO
Engenheira de Software @Elo7
MVP @Microsoft
@Help4Papers
http://fernandabernardo.com.br
@Feh_Bernardo
WARNING
- Contexto
- Escopo
- Cultura
Tudo que for falado tem:
Como trabalhamos?
Programação Pareada
Vanilla JS
Vanilla JS
HTML, CSS e JS
Usuário é importante
Produto guia nossas escolhas
DECISÕES DE DEV
Solução caseira
código sob medida
melhor performance (carregamento)
conhecimento
dar manutenção
testes mais extensivos
demora mais para ficar pronto
Solução caseira
Framework
adaptação
solução pronta
stack overflow ajuda
integração
dependência de terceiros
atualizações
Framework
12x
Real Time
Nova Infra
Performance
Reaproveitar
código
Nova Infra
/home
JSON
componente
página
/search
componente
Nova Infra
POR QUE ?
POR QUE ?
sistema de template JS
isomórfico
performático
exige muito tempo
complexo fazer uma sistema de template
não garante que seria mais performático
Porque não construir o nosso?
Performance
Isomorfismo
O QUE É
ISOMORFISMO?
Java
Ruby
PHP
HTML
CSS
Javascript
SINGLE PAGE APPLICATION (SPA)
Java
Ruby
PHP
HTML
CSS
Javascript+
ISOMÓRFICO
HTML
CSS
Javascript+Javascript
ISOMÓRFICO
HTML
CSS
Javascript+Javascript
JS
Isomórfico
Rotas
Renderização
View Models
i18n
Persistência
Log
Sessão
Eventos UI
Local Storage
Rotas
Renderização
View Models
i18n
isomórfico
Persistência
Log
Sessão
Eventos UI
Local Storage
Rotas
Renderização
View Models
i18n
E ALÉM DA
PERFORMANCE?
Reutilizar código
Server Side Rendering
O QUE É SERVER
SIDE RENDERING?
Servidor
/home
Servidor Comps
/home
Servidor Comps
/home
Servidor Comps
/home
1ª página
==
SSR
Servidor Comps
/home
1ª página
==
SSR
/search
Servidor Comps
/home
1ª página
==
SSR
/search
dados?
Servidor Comps
/home
1ª página
==
SSR
/search
dados?
claro!
Servidor Comps
/home
1ª página
==
SSR
/search
dados?
claro!
Servidor Comps
/home
x páginas
==
CSR
1ª página
==
SSR
/search
dados?
claro!
Servidor Comps
/home
x páginas
==
CSR
1ª página
==
SSR
/search
dados?
claro!
Servidor Comps
/home
BROWSER
QUAIS VANTAGENS
VIMOS NO SSR?
Funciona sem JS
SEO
Performance
Quais os problemas do DUST?
Documentação
Helpers não intuitivos
COMO COLOCAR OS
COMPONENTES
NA TELA?
Servidor
Java
Servidor
Java
Servidor
Node
Escopo
- JS
- CSS
Soluções Estudadas
iframe
shadow
dom
id
Soluções Estudadas
iframe id
shadow
dom
Soluções Estudadas
iframe id
shadow
dom
Soluções Estudadas
iframe id
shadow
dom
Web Components
shadow
dom
Web Components
shadow
dom
templates
custom
elements
HTML
imports
Web Components
shadow
dom
custom
elements
Web Components
shadow
dom
custom
elements
Web Components
shadow
dom
custom
elements
escopo
de CSS
Web Components
shadow
dom
custom
elements
escopo
de CSS
Web Components
shadow
dom
custom
elements
escopo
de CSS
onde colocar o
componente
PROBLEMAS COM
O SHADOW DOM
Por outro lado…
Integração com resto da stack
Time sem fluência
Performance
Não resolve problema de escopo JS
Apostou no futuro do shadow dom
Resultado rápido
Código enxuto
Compatibilidade melhor
1 get
1 post
subir server
HTTP
Eventos e
Broadcasts
Pouco
Isomorfismo
html JS
html JS
html JS
html JS
html
vazia?
JS
html
vazia?
JS
html
vazia?
JS
html
vazia?
JS
Usar mais o isomorfismo
Centralizar lógica na view
Não manipular via JS a view
O QUE QUERÍAMOS?
Não mudar o template
Dust complicou a integração
Queria uma solução mais simples
EXISTIA ALGO PRONTO?
Nymeria
json
json
json
json
Nymeria
teve
mudança!
json
Nymeria
teve
mudança!
json
Nymeria
teve
mudança!
json
Nymeria
teve
mudança!
json
Nymeria
teve
mudança!
morph dom
json
Nymeria
teve
mudança!
morph dom
E OS TESTES?
Testes
unidade aceitação
Unidade
Unidade
Unidade
Unidade
Aceitação
Aceitação
PhantomJS
PORQUE NÃO
FIZEMOS A NOSSA?
COMO SEMPRE OLHAR
PARA OS TESTES?
PROBLEMAS COM
O TRAVIS…
pago
não é tão configurável
fila de espera para rodar
Porque não usar servidor local
de integração contínua?
mais configurações
menos estável
cenário pouco específico
TASK RUNNERS
automatizar tarefas
dev, build, deploy
minificar
otimizar imagens
pré-processador ou transpiler
…
Motivações
MAS…
NENHUMA LIB?
páginas legadas sistemas internos
páginas novas
Quando possível
OU
Se estiver atrapalhando
Mas e aí? Reinventar a roda
realmente valeu a pena?
https://engenharia.elo7.com.br/tags/isomorfico/
https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-
rendering-5d07ff2cefe8
https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=pt-br
https://www.webcomponents.org/
https://developers.google.com/web/fundamentals/web-components/?hl=pt-br
https://betomuniz.com/blog/web-components-hoje/
https://github.com/patrick-steele-idem/morphdom
https://medium.com/@hidace/understanding-reacts-virtual-dom-vs-the-real-
dom-68ae29039951
https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-
frameworks.html
http://blog.caelum.com.br/unidade-integracao-ou-sistema-qual-teste-fazer/
Referências
http://fernandabernardo.com.br
@Feh_Bernardo

Mais conteúdo relacionado

Mais procurados

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsPaolo Almeida
 
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014Celso Fernandes
 
Automatizando tudo no mundo mobile com fastlane
Automatizando tudo no mundo mobile com fastlaneAutomatizando tudo no mundo mobile com fastlane
Automatizando tudo no mundo mobile com fastlaneakamud
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp RioFellyph Cintra
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp netAnderson Wernek
 
Performance (Web&PHP)
Performance (Web&PHP)Performance (Web&PHP)
Performance (Web&PHP)Nuno Loureiro
 
Navegando em um mar de siglas do mundo java
Navegando em um mar de siglas do mundo javaNavegando em um mar de siglas do mundo java
Navegando em um mar de siglas do mundo javaAndrei Tognolo
 
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Daniel Semedo
 
Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)
Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)
Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)Igor Abade
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressDaniel Paz
 
O Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em ElementorO Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em ElementorDaniel Paz
 
Eclipse Rich Client Platform - FISL 2009 - PT-BR
Eclipse Rich Client Platform - FISL 2009 - PT-BREclipse Rich Client Platform - FISL 2009 - PT-BR
Eclipse Rich Client Platform - FISL 2009 - PT-BRHugo Corbucci
 
Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2Pablo Nóbrega
 

Mais procurados (14)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
 
Automatizando tudo no mundo mobile com fastlane
Automatizando tudo no mundo mobile com fastlaneAutomatizando tudo no mundo mobile com fastlane
Automatizando tudo no mundo mobile com fastlane
 
ASP.NET MVC 5.x
ASP.NET MVC 5.xASP.NET MVC 5.x
ASP.NET MVC 5.x
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp net
 
Performance (Web&PHP)
Performance (Web&PHP)Performance (Web&PHP)
Performance (Web&PHP)
 
Navegando em um mar de siglas do mundo java
Navegando em um mar de siglas do mundo javaNavegando em um mar de siglas do mundo java
Navegando em um mar de siglas do mundo java
 
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
 
Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)
Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)
Smoke tests, deployment e rollback automatizados (Mobile & Cloud Hack Days 2016)
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
 
O Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em ElementorO Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em Elementor
 
Eclipse Rich Client Platform - FISL 2009 - PT-BR
Eclipse Rich Client Platform - FISL 2009 - PT-BREclipse Rich Client Platform - FISL 2009 - PT-BR
Eclipse Rich Client Platform - FISL 2009 - PT-BR
 
Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2
 

Semelhante a Reinventar a roda a cada novo framework js, vale a pena?

Spring roo produtividade no java
Spring roo produtividade no javaSpring roo produtividade no java
Spring roo produtividade no javaPedro Cavalero
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressJackson F. de A. Mafra
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorFellyph Cintra
 
Introdução ao Adobe Flex
Introdução ao Adobe FlexIntrodução ao Adobe Flex
Introdução ao Adobe FlexRafael Nunes
 
Principais novidades do Entity Framework 5.0
Principais novidades do Entity Framework 5.0Principais novidades do Entity Framework 5.0
Principais novidades do Entity Framework 5.0Fernando Henrique
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...iMasters
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformAndré Paulovich
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchRafael Neri
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Romeu Mattos
 
Desmistificando o Framework da Zend
Desmistificando o Framework da ZendDesmistificando o Framework da Zend
Desmistificando o Framework da ZendDomingos Teruel
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015Romeu Mattos
 
Java No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo CustoJava No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo CustoÉberli Cabistani Riella
 
Framework PHP para auxiliar no desenvolvimento de aplicações web
Framework PHP para auxiliar no desenvolvimento de aplicações webFramework PHP para auxiliar no desenvolvimento de aplicações web
Framework PHP para auxiliar no desenvolvimento de aplicações webJosemar Davi Luedke
 
CDI -Contextos e Dependências
CDI -Contextos e DependênciasCDI -Contextos e Dependências
CDI -Contextos e DependênciasWende Mendes
 

Semelhante a Reinventar a roda a cada novo framework js, vale a pena? (20)

Spring roo produtividade no java
Spring roo produtividade no javaSpring roo produtividade no java
Spring roo produtividade no java
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Frameworks PHP @edgarsandi
Frameworks PHP @edgarsandiFrameworks PHP @edgarsandi
Frameworks PHP @edgarsandi
 
Slides da palestra no Flex mania 2011
Slides da palestra no Flex mania 2011Slides da palestra no Flex mania 2011
Slides da palestra no Flex mania 2011
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
Introdução ao Adobe Flex
Introdução ao Adobe FlexIntrodução ao Adobe Flex
Introdução ao Adobe Flex
 
Principais novidades do Entity Framework 5.0
Principais novidades do Entity Framework 5.0Principais novidades do Entity Framework 5.0
Principais novidades do Entity Framework 5.0
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud Platform
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
 
Desmistificando o Framework da Zend
Desmistificando o Framework da ZendDesmistificando o Framework da Zend
Desmistificando o Framework da Zend
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015
 
além do mvp com php
além do mvp com phpalém do mvp com php
além do mvp com php
 
Lab
LabLab
Lab
 
Java No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo CustoJava No Setor Público: Produtividade, Flexibilidade e Baixo Custo
Java No Setor Público: Produtividade, Flexibilidade e Baixo Custo
 
Introducao ao PHP @edgarsandi
Introducao ao PHP @edgarsandiIntroducao ao PHP @edgarsandi
Introducao ao PHP @edgarsandi
 
Framework PHP para auxiliar no desenvolvimento de aplicações web
Framework PHP para auxiliar no desenvolvimento de aplicações webFramework PHP para auxiliar no desenvolvimento de aplicações web
Framework PHP para auxiliar no desenvolvimento de aplicações web
 
CDI -Contextos e Dependências
CDI -Contextos e DependênciasCDI -Contextos e Dependências
CDI -Contextos e Dependências
 
XPT Framework
XPT FrameworkXPT Framework
XPT Framework
 

Mais de Fernanda Bernardo

Mais de Fernanda Bernardo (19)

Jogos 3.0 - MVP Conf
Jogos 3.0 - MVP ConfJogos 3.0 - MVP Conf
Jogos 3.0 - MVP Conf
 
Jogos 3.0
Jogos 3.0Jogos 3.0
Jogos 3.0
 
Palestrantes são seres super mágicos?
Palestrantes são seres super mágicos?Palestrantes são seres super mágicos?
Palestrantes são seres super mágicos?
 
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
 
Ecmascript - Versão extendida
Ecmascript - Versão extendidaEcmascript - Versão extendida
Ecmascript - Versão extendida
 
EcmaScript
EcmaScriptEcmaScript
EcmaScript
 
Descomplicando o alinhamento com css
Descomplicando o alinhamento com cssDescomplicando o alinhamento com css
Descomplicando o alinhamento com css
 
Ux para aumentar a liberdade dos diabéticos
Ux para aumentar a liberdade dos diabéticosUx para aumentar a liberdade dos diabéticos
Ux para aumentar a liberdade dos diabéticos
 
Jogos com css 2.0
Jogos com css 2.0Jogos com css 2.0
Jogos com css 2.0
 
Jogos com css
Jogos com cssJogos com css
Jogos com css
 
Isomorfismo pra quê?
Isomorfismo pra quê?Isomorfismo pra quê?
Isomorfismo pra quê?
 
A influência dos usuários no desenvolvimento do Talk7
A influência dos usuários no desenvolvimento do Talk7A influência dos usuários no desenvolvimento do Talk7
A influência dos usuários no desenvolvimento do Talk7
 
Front end ++: seo e flexbox
Front end ++: seo e flexboxFront end ++: seo e flexbox
Front end ++: seo e flexbox
 
Workshop android
Workshop androidWorkshop android
Workshop android
 
Transformando barreiras para ajudar comunidades
Transformando barreiras para ajudar comunidadesTransformando barreiras para ajudar comunidades
Transformando barreiras para ajudar comunidades
 
Heroku
HerokuHeroku
Heroku
 
UX para aumentar a liberdade de diabéticos
UX para aumentar a liberdade de diabéticosUX para aumentar a liberdade de diabéticos
UX para aumentar a liberdade de diabéticos
 
Diabetes Mais Doce - Versão 1.0
Diabetes Mais Doce - Versão 1.0Diabetes Mais Doce - Versão 1.0
Diabetes Mais Doce - Versão 1.0
 
Coding Dojo
Coding DojoCoding Dojo
Coding Dojo
 

Reinventar a roda a cada novo framework js, vale a pena?