Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Transição do desenvolvimento web para apps - o caminho suave

866 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Transição do desenvolvimento web para apps - o caminho suave

  1. 1. o caminho suave Transição do desenvolvimento web para apps
  2. 2. ou…
  3. 3. - Renan Oliveira e Felipe Ramos "Como foi o último ano"
  4. 4. globo .com Renan Oliveira renanoliveira.net
  5. 5. web
  6. 6. CLIENT-SERVER
  7. 7. o começo…
  8. 8. 1280x800px
  9. 9. Benefícios ‣ Mundo conhecido ‣ Muitas ferramentas ‣ Grande comunidade ‣ Diversas soluções
  10. 10. 1° passo
  11. 11. RESPONSIVE
  12. 12. Use ‣ Media Queries ‣ Adapte suas imagens ‣ Permita gestos ‣ Layout Flexível ‣ Adapte os menus
  13. 13. tendência
  14. 14. MOBILE FIRST
  15. 15. Progressive Enhancement Seguindo a linha
  16. 16. app
  17. 17. 2° passo
  18. 18. WebView
  19. 19. "Jeito mais barato de validar se uma app faz sentido" Seguindo a estrada
  20. 20. Quem usou/usa?
  21. 21. Titanium Kivy Cordova
  22. 22. Cordova JS API Cordova Native Lib Cordova Native Lib Cordova JS API Cordova Native Lib Cordova JS API Android Framework + SDKs iOS Framework + SDKs Silverlight Framework + Windows Phone SDK
  23. 23. API Built-in ‣ Accelerometer ‣ Camera ‣ Connection (wi-fi, 3g e etc) ‣ Geolocation ‣ Notification ‣ Storage
  24. 24. Geolocation
  25. 25. "Podemos fazer código nativo e trazer via JS para app" Plugins
  26. 26. git.io/2pLd_Q Cordova PhoneCallTrap renanoliveira/cordova-phone-call-trap
  27. 27. EXISTEM PROBLEMAS!
  28. 28. ‣ Animações ‣ Evite reflow do HTML ‣ Falta de padronização das respostas do celular ‣ WebView antiga é igual codar para o IE6 ‣ Alert Driven Development Problemas
  29. 29. 3° passo
  30. 30. NATIVO
  31. 31. "Ainda podemos usar WebView" WebView + Nativo
  32. 32. "Procurando mais fluidez, maior performance, um passo além do que você conseguiu até agora." Nativo
  33. 33. 3.2% 4.2% 7.1% 85.1% Android iOS Windows BlackBerry Bada Gartner - SmartPhone by OS Market Share - Brazil 2013 AndroidWin!
  34. 34. ‣ Code em qualquer ambiente ‣ Android Studio ‣ Java Android ‣ Muitos devices ‣ Emulador lento ‣ API em evolução
  35. 35. My 2cents
  36. 36. ‣ Precisa de um Mac ‣ É pago para gerar o pacote ‣ Objective-C iOS ‣ Poucos devices ‣ Ótimo simulador ‣ API madura
  37. 37. Nativo Híbrido HTML Natural para desenvolvedores web Acesso a API nativa Distribuido via APP Store Atualização instantânea Distribuição irrestrita Natural para desenvolvedores web Interações avançadas de uso/layout Altamente performático Distribuido via APP Store Capacidade plena Capacidade parcial Uma plataforma Múltiplas plataformas
  38. 38. e o futuro…
  39. 39. GLASS
  40. 40. AndroidWear
  41. 41. Baseado em movimento
  42. 42. Assistente Pessoal
  43. 43. "O importante é o seu conteúdo, a sua ideia, aonde ele vai aparecer tá nas mãos dos usuários"
  44. 44. IWantToWorkAtGlobocom github.com
  45. 45. globo .com Obrigado! renanoliveira.net
  46. 46. Referências ‣ http://www.dipockdas.com/2012/11/its-hybrid.html ‣ http://chelramsey.com/phonegap-vs-native-builds-a-12-month-review/ ‣ http://www.risingj.com/archives/267 ‣ http://designshack.net/articles/css/mobilefirst/ ‣ http://adrocknaphobia.github.io/preso-future-of-mobile/#/ ‣ http://myshadesofgray.wordpress.com/2014/04/15/hybrid-applications-and-android-native-browser/ ‣ http://shineravindra.wordpress.com/2013/05/20/hybrid-mobile-app-development-using-phonegap-a-case-study-for-beginners/ ‣ http://sa.inceptum.eu/sites/sa.inceptum.eu/files/Content/Phonegap%20Lecture%20Notes.pdf ‣ http://www.passion4teq.com/articles/ios-android-development-comparison-1/ ‣ http://www.passion4teq.com/articles/ios-android-development-comparison-2/ ‣ http://www.forbes.com/sites/anthonykosner/2014/02/15/web-apps-raise-the-ceiling-above-html5-as-famo-us-recreates-facebooks- paper/ ‣ http://techcrunch.com/2012/12/13/facebook-android-faster/ ‣ http://arquiteturadeinformacao.com/user-experience/5-coisas-que-aprendi-em-um-projeto-mobile-first-responsive-design-para-o- google/ ‣ http://tableless.com.br/faut-tolerant-base-progressive-enhancement/

×