Master App - Porque menos é mais!
•Transferir como PPTX, PDF•
1 gostou•341 visualizações
No MasterchefBR é comum ouvir que menos é mais, será que o mesmo vale para o desenvolvimento de aplicativos? Nessa palestra apresentei como desenvolver um App multiplataforma: iOS, Android e Web (Desktop e Mobile) usando Turbolinks 5. Ou seja, como fazer mais (4 plataformas) com menos. Link para gravação da apresentação: https://goo.gl/KsWujQ Link para Google Slides: https://goo.gl/BcGSgi
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Master App - Porque menos é mais!
Semelhante a Master App - Porque menos é mais! (20)
Master App - Porque menos é mais!
- 1. Master App Turbolinks 5 Eu não posso acreditar que não é nativo!
- 2. Quem somos?
- 3. Menos é Mais
- 4. Por que?
- 6. "Artista é alguém que projeta algo e que não resolve um problema real."
- 22. Como voltar para era de ouro?
- 23. Turbolinks 5!
- 24. O que é? Onde vive? O que come?
- 25. Otimiza a navegação automaticamente. Não há necessidade de anotar os links ou especificar quais partes da página devem ser alteradas.
- 26. Nenhuma cooperação necessária no lado do servidor. Responde com páginas HTML completas, nada de fragmentos de página ou JSON.
- 28. <body> <head> <body> Replace no <body> <head> Merge do <head> O que o Turbolinks faz: <body> <head>
- 29. Respeita a Web. Os botões Voltar e Recarregar funcionam exatamente como você espera. Search engine-friendly by design.
- 30. Suporta mobile apps. Os containers iOS e Android permitem que você crie aplicativos híbridos usando recursos e controles de navegação nativos.
- 32. Instalação/Uso
- 33. Rails
- 34. rails new ProjectName --skip-turbolinks
- 35. rails new ProjectName --skip-turbolinks
- 37. Site estático
- 41. Executando o servidor de arquivos estáticos
- 45. Instalando e Habilitando o Turbolinks
- 47. Cache automático
- 58. Se lembra do cache?
- 61. Quer mais?
- 65. Menos é Mais
- 69. Rails Tips
- 70. Variants: Use e abuse!
- 74. turbolinks-ios: O que? Da documentação: “Build high-fidelity hybrid apps with native navigation and a single shared web view”
- 75. 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
- 76. 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. ...
- 79. Elixir / Phoenix Framework
- 80. Elixir / Phoenix Framework
- 81. Laravel, Vue.js
- 82. Gitlab
- 83. Conclusão
- 84. 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.
- 85. 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
- 86. 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
- 88. 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.
- 89. Bill Gross: A maior razão pela qual startups obtêm sucesso | TED Talk
- 91. https://www.ted.com/talks/bill_gross_the_single_biggest_reason_why_startups_succeed?language=pt-br
- 93. Menos é Mais
- 97. "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
Notas do Editor
- Era de ouro.
- Web: Desktop + mobile iOS: iPhone + iPad + Android Wear Android: Smartphone + Tablet Desktop: Mac & Windows
- iOS: 4,5 Estrelas - 386 Avaliações (US) Android: 4,4 Estrelas - 1224 Avaliações - Mais de 100k downloads
- É uma lib Javascript!
- Uma vez que o Turbolinks foi carregado, ele irá sobrescrever o comportamento padrão de todos os links.
- Uma vez que o Turbolinks foi carregado, ele irá sobrescrever o comportamento padrão de todos os links.
- O modo "SPA" só ocorre após o primeiro carregamento, a fonte de verdade sempre será o servidor.
- O modo "SPA" só ocorre após o primeiro carregamento, a fonte de verdade sempre será o servidor.
- Eventos propagados no JS são interceptados pelo container. A web pode enviar dados via JS para os containers.
- Overview do source
- Configuração do Turbolinks 5 via tag script.
- Cache automático HTTP
- Quando você quiser sair do site. Ex: Garantir o comportamento do menu hambúrguer do Twitter Bootstrap.
- 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.
- 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.
- Mostrar URL do projeto Dizer que irá para as lojas E mostrar no site onde ir para a organização do Github. PWA Bots