master app - porque menos é mais!
Post on 12-Apr-2017
70 Views
Preview:
TRANSCRIPT
Master App
Turbolinks 5Eu 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
Como voltar paraera 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 caseMaster 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 Visitablevisit
● 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 Visitablevisit
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 fazera. 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 enxutaIncremente 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
ProgressiveWeb 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
https://www.ted.com/talks/bill_gross_the_single_biggest_reason_why_startups_succeed?language=pt-br
Menos
é Mais
"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
top related