Baixar para ler offline
Carregado porRodrigo Serradura
Master App - Porque menos é mais!
O documento discute o Turbolinks 5, uma ferramenta que otimiza a navegação em aplicações web, permitindo que páginas HTML completas sejam carregadas sem necessidade de configuração complexa no lado do servidor. Também aborda a construção de aplicativos híbridos com turbolinks-iOS e destaca uma abordagem de operação enxuta, sugerindo uma divisão de funcionalidades entre responsivo e nativo. A conclusão enfatiza que, embora o Turbolinks 5 não seja uma solução perfeita, ele é vantajoso para SEO e fácil de implementar, desde que as funcionalidades nativas sejam incorporadas de forma criteriosa.
![Progressive Web Apps [pt_BR]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170306202026-thumbnail.jpg?width=640&height=640&fit=bounds)
Master App - Porque menos é mais!
- 1. Master App Turbolinks 5 Eu nãoposso acreditar que não é nativo!
- 2.
- 3.
- 4.
- 5.
- 6. "Artista é alguémque projeta algo e que não resolve um problema real."
- 8.
- 20.
- 22. Como voltar para erade ouro?
- 23.
- 24. O que é? Ondevive? O que come?
- 25. Otimiza a navegação automaticamente. Nãohá necessidade de anotar os links ou especificar quais partes da página devem ser alteradas.
- 26. Nenhuma cooperação necessária nolado do servidor. Responde com páginas HTML completas, nada de fragmentos de página ou JSON.
- 27.
- 28. <body> <head> <body> Replace no <body> <head> Merge do <head> O que oTurbolinks faz: <body> <head>
- 29. Respeita a Web. Osbotões Voltar e Recarregar funcionam exatamente como você espera. Search engine-friendly by design.
- 30. Suporta mobile apps. Oscontainers iOS e Android permitem que você crie aplicativos híbridos usando recursos e controles de navegação nativos.
- 32.
- 33.
- 34. rails new ProjectName--skip-turbolinks
- 35. rails new ProjectName--skip-turbolinks
- 37.
- 39.
- 41. Executando o servidorde arquivos estáticos
- 43.
- 45. Instalando e Habilitandoo Turbolinks
- 47.
- 49.
- 51.
- 53.
- 58. Se lembra docache?
- 61.
- 64.
- 65.
- 69.
- 70. Variants: Use eabuse!
- 71.
- 72.
- 73.
- 74. turbolinks-ios: O que? Dadocumentação: “Build high-fidelity hybrid apps with native navigation and a single shared web view”
- 75. turbolinks-ios: Como? App SessionVisitable 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 SessionVisitable 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. ...
- 78.
- 79. Elixir / PhoenixFramework
- 80. Elixir / PhoenixFramework
- 81.
- 82.
- 83.
- 84. Operação enxuta Incremente aspartes 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. Mesmotendo 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 temo 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
- 87.
- 88. Não existe balade 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: Amaior razão pela qual startups obtêm sucesso | TED Talk
- 91.
- 93.
- 95.
- 97. "Se quer irrá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
- #13 Era de ouro.
- #21 Web: Desktop + mobile iOS: iPhone + iPad + Android Wear Android: Smartphone + Tablet Desktop: Mac & Windows
- #22 iOS: 4,5 Estrelas - 386 Avaliações (US) Android: 4,4 Estrelas - 1224 Avaliações - Mais de 100k downloads
- #25 É uma lib Javascript!
- #26 Uma vez que o Turbolinks foi carregado, ele irá sobrescrever o comportamento padrão de todos os links.
- #27 Uma vez que o Turbolinks foi carregado, ele irá sobrescrever o comportamento padrão de todos os links.
- #30 O modo "SPA" só ocorre após o primeiro carregamento, a fonte de verdade sempre será o servidor.
- #31 O modo "SPA" só ocorre após o primeiro carregamento, a fonte de verdade sempre será o servidor.
- #32 Eventos propagados no JS são interceptados pelo container. A web pode enviar dados via JS para os containers.
- #41 Overview do source
- #47 Configuração do Turbolinks 5 via tag script.
- #49 Cache automático HTTP
- #52 Quando você quiser sair do site. Ex: Garantir o comportamento do menu hambúrguer do Twitter Bootstrap.
- #59 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.
- #85 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.
- #96 Mostrar URL do projeto Dizer que irá para as lojas E mostrar no site onde ir para a organização do Github. PWA Bots