SlideShare uma empresa Scribd logo
1 de 97
Master
App
Turbolinks 5
Eu não posso acreditar que não é nativo!
Quem somos?
Menos
é Mais
Por que?
https://soundcloud.com/movimento-ux/sergiosalvador
"Artista é alguém que projeta algo
e que não resolve um problema
real."
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
https://www.youtube.com/watch?v=SWEts0rlezA
Como voltar para
era de ouro?
Turbolinks 5!
O que é?
Onde vive? O que come?
Otimiza a navegação
automaticamente.
Não há necessidade de anotar os links ou especificar
quais partes da página devem ser alteradas.
Nenhuma cooperação
necessária no lado do
servidor.
Responde com páginas HTML completas, nada de
fragmentos de página ou JSON.
<body>
<head>
Uma página:
<body>
<head>
<body>
Replace
no
<body>
<head>
Merge
do
<head>
O que o Turbolinks faz:
<body>
<head>
Respeita a Web.
Os botões Voltar e Recarregar funcionam exatamente
como você espera. Search engine-friendly by design.
Suporta mobile apps.
Os containers iOS e Android permitem que você crie
aplicativos híbridos usando recursos e controles de
navegação nativos.
Instalação/Uso
Rails
rails new ProjectName --skip-turbolinks
rails new ProjectName --skip-turbolinks
Site estático
Overview do Projeto
Executando o servidor de
arquivos estáticos
Request - Response
Instalando e Habilitando o
Turbolinks
Cache automático
Navegando
programaticamente
Desabilitando o
Turbolinks
Atenção!
Mudança de paradigma
Se lembra do cache?
Quer mais?
Nosso case
Master App
Menos
é Mais
Rails Tips
Variants: Use e abuse!
redirect_to(…, turbolinks: :advance)
redirect_to(…, turbolinks: :advance)
redirect_to(…, turbolinks: :advance)
turbolinks-ios: O que?
Da documentação:
“Build high-fidelity hybrid apps with native
navigation and a single shared web view”
turbolinks-ios: Como?
App Session Visitable
visit
● Cria, gerencia única instância
de WebView
● Avisa
○ link taps
○ network errors.
● Contém:
○ WebView container
○ Pull to refresh
○ Loading
turbolinks-ios: Como?
App Session Visitable
visit
1. Usuário da um tap em um link
2. turbolinks-ios intercepta click no link e notifica App através do Session
3. App decide o que fazer
a. Visit na próxima tela (push, present, dismiss, pop)
b. Mostar tela nativa
c. ...
Outras comunidades
Elixir / Phoenix Framework
Elixir / Phoenix Framework
Laravel, Vue.js
Gitlab
Conclusão
Operação enxuta
Incremente as partes nativas apenas em funcionalidades
que se provam necessárias!
Proporção 90% Responsivo e 10% Nativo (Menus,
navegação).
Monolith First.
Rollout (quase) realtime.
Mesmo tendo partes nativas, a aprovação na Apple Store tende a ser mais
rápida.
Facilita uso de teste A/B.
Operação enxuta
SEO Friendly:
Não tem o problema de Server Rendering (comum em
SPAs).
Estratégia do Desktop é refletida no msite.
Analytics Friendly tagueamento pode ser reutilizado entre
diferentes plataformas.
Operação enxuta
Progressive
Web Apps.
Turbolinks 5
Não existe bala de prata!
Server (Monolith First)
Excesso de responsabilidades.
O mesmo bug poderá afetar todas as plataformas.
Se mal feito, aumentará o custo de manutenção e infra.
UX:
Não terá exatamente o mesmo look and feel de um App 100% nativo.
Não terá a mesma performance de um App 100% nativo.
Bill Gross: A maior razão pela qual
startups obtêm sucesso | TED Talk
https://www.ted.com/talks/bill_gross_the_single_biggest_reason_why_startups_succeed?language=pt-br
Menos
é Mais
https://github.com/themasterapp
"Se quer ir rápido, vá sozinho.
Se quer ir longe, vá em grupo."
-- Provérbio africano
Obrigado!
themasterapp.xyz
rodrigo@ysimplicity.comguilherme.hashioka@gmail.com fabiothiroki@gmail.com
github.com/themasterapp

Mais conteúdo relacionado

Mais procurados

Blogdefinições
BlogdefiniçõesBlogdefinições
Blogdefinições
fariasramon
 
Simples pelo simples google android com robo guice
Simples pelo simples   google android com robo guiceSimples pelo simples   google android com robo guice
Simples pelo simples google android com robo guice
Diogo Souza
 

Mais procurados (20)

Canal Coding Night - Sua primeira aplicação com Blazor
Canal Coding Night - Sua primeira aplicação com BlazorCanal Coding Night - Sua primeira aplicação com Blazor
Canal Coding Night - Sua primeira aplicação com Blazor
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
TDC2013: ExtJS 4: Dicas e Melhores Practicas
TDC2013: ExtJS 4: Dicas e Melhores PracticasTDC2013: ExtJS 4: Dicas e Melhores Practicas
TDC2013: ExtJS 4: Dicas e Melhores Practicas
 
Blogdefinições
BlogdefiniçõesBlogdefinições
Blogdefinições
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
 
Tchelinux: Go Web!
Tchelinux:  Go Web!Tchelinux:  Go Web!
Tchelinux: Go Web!
 
Simples pelo simples google android com robo guice
Simples pelo simples   google android com robo guiceSimples pelo simples   google android com robo guice
Simples pelo simples google android com robo guice
 
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
 
Novidades do Magento 2
Novidades do Magento 2Novidades do Magento 2
Novidades do Magento 2
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerceWordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
 

Semelhante a Master App - Porque menos é mais!

Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
Luiz Tanure
 

Semelhante a Master App - Porque menos é mais! (20)

Google app engine para lean startups: the good, the bad and the ugly
Google app engine para lean startups: the good, the bad and the uglyGoogle app engine para lean startups: the good, the bad and the ugly
Google app engine para lean startups: the good, the bad and the ugly
 
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
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
gae
gaegae
gae
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
 
[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 ...
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
 
Web Offline
Web OfflineWeb Offline
Web Offline
 
CORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSCORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESS
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Debugging node
Debugging nodeDebugging node
Debugging node
 
Uma Olhada no Netbeans 6
Uma Olhada no Netbeans 6Uma Olhada no Netbeans 6
Uma Olhada no Netbeans 6
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
 

Último

Último (8)

ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 

Master App - Porque menos é mais!

Notas do Editor

  1. Era de ouro.
  2. Web: Desktop + mobile iOS: iPhone + iPad + Android Wear Android: Smartphone + Tablet Desktop: Mac & Windows
  3. iOS: 4,5 Estrelas - 386 Avaliações (US) Android: 4,4 Estrelas - 1224 Avaliações - Mais de 100k downloads
  4. É uma lib Javascript!
  5. Uma vez que o Turbolinks foi carregado, ele irá sobrescrever o comportamento padrão de todos os links.
  6. Uma vez que o Turbolinks foi carregado, ele irá sobrescrever o comportamento padrão de todos os links.
  7. O modo "SPA" só ocorre após o primeiro carregamento, a fonte de verdade sempre será o servidor.
  8. O modo "SPA" só ocorre após o primeiro carregamento, a fonte de verdade sempre será o servidor.
  9. Eventos propagados no JS são interceptados pelo container. A web pode enviar dados via JS para os containers.
  10. Overview do source
  11. Configuração do Turbolinks 5 via tag script.
  12. Cache automático HTTP
  13. Quando você quiser sair do site. Ex: Garantir o comportamento do menu hambúrguer do Twitter Bootstrap.
  14. Turbolinks is fast because it doesn’t reload the page when you follow a link. Instead, your application becomes a persistent, long-running process in the browser. This requires you to rethink the way you structure your JavaScript. In particular, you can no longer depend on a full page load to reset your environment every time you navigate. The JavaScript window and document objects retain their state across page changes, and any other objects you leave in memory will stay in memory. With awareness and a little extra care, you can design your application to gracefully handle this constraint without tightly coupling it to Turbolinks.
  15. Um ponto positivo é que ele torna possível a obtenção de um Approach mais incremental. Os apps começam com Turbolinks e podem ir "nativatizando" conforme a necessidade de negócio. Do lado do App o custo é baixo mesmo. Para as telas que não são nativas, basta configurar a navbar, a navegação de advance e replace é feito automaticamente. E fica semi-nativo. Em poucas palavras é "good enough" a um custo baixo, mas escalável! Guilherme Hashioka - guilherme.hashioka@gmail.com Desenvolvedor iOS/Android.
  16. Mostrar URL do projeto Dizer que irá para as lojas E mostrar no site onde ir para a organização do Github. PWA Bots