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.

Desenvolvedor mobile precisa aprender Web

1,331 views

Published on

Aprender tecnologias Web não é tão simples mas pode ser um grande diferencial no seu toolkit de ferramentas. Nesta palestra, vamos conhecer algumas das situações em que o desenvolvedor mobile pode utilizar HTML, CSS e JavaScript no seu dia-a-dia.

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Desenvolvedor mobile precisa aprender Web

  1. 1. Desenvolvedor mobile precisa aprender Web
  2. 2. jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer
  3. 3. porto alegre
  4. 4. Desenvolvimento mobile não é apenas sobre aplicações nativas
  5. 5. Web é um conjunto de tecnologias para acesso a informações na Internet
  6. 6. A Internet conecta computadores, a 
 Web conecta 
 pessoas http://www.computerhistory.org/revolution/networking/19/314
  7. 7. JavaScript Web APIs SVG WebGL HTML CSS HTTP TCP/IP básico comunicação scripting gráficos
  8. 8. A maioria das aplicações modernas utiliza pelo menos HTTP e TCP/IP 😎
  9. 9. High-Performance Browser Networking (O'Reilly) Latência de uma requisição
  10. 10. High-Performance Browser Networking (O'Reilly)
  11. 11. Optimizing the Critical Rendering Path ~ @igrigorik 14kb
  12. 12. https://docs.google.com/presentation/d/ 1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present
  13. 13. Por que ir além do HTTP e aprender outras tecnologias Web?
  14. 14. <meta name="apple-itunes-app" 
 content="app-id=myAppStoreID, 
 affiliate-data=myAffiliateData, app-argument=myURL">
  15. 15. Há outras razões além de fazer um website teaser para divulgar sua App nativa 😛
  16. 16. Em 2016, 50% das Apps mobile serão híbridas (mescla de tecnologias nativa e Web) - Predição da Gartner
  17. 17. Mas uma predição divulgada pela BlackBerry não vale tanto assim...
  18. 18. A questão inclusive é sobre desenvolver ou não aplicações
  19. 19. Deepest engagement for the longest period of time happens in apps, so apps matter, and they matter desperately for brands who want to connect to customers. http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic- is-2x-bigger-than-app-traffic-and-growing-faster/
  20. 20. no-one is going to install an app for each company, service, or site he or she interacts with, your mobile web experience has to be good, and it has to be strong. http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic- is-2x-bigger-than-app-traffic-and-growing-faster/
  21. 21. Experiências que dependem massivamente do hardware (jogos, câmera e localização) devem continuar sendo nativas
  22. 22. As demais experiências podem ser Web  🙌
  23. 23. A Web é universal
  24. 24. It should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large. - Sir Tim Berners-Lee P
  25. 25. Tecnologias para criação de interfaces evoluíram
  26. 26. As maiores dores de cabeça do desenvolvimento Web são os navegadores antigos
  27. 27. Os navegadores modernos suportam uma série de novas tecnologias
  28. 28. HTML Canvas Audio
 Video App 
 Cache Input
 types CSS 2 Transforms Animation Gradient Flexbox Filter SVG HTML e CSS
  29. 29. Responsive 
 Design Sistemas de 
 escrita de CSS WAI-ARIAMicroformats Padrões para HTML e CSS
  30. 30. A Web é a plataforma mais completa para marcação de conteúdo e definição de layout
  31. 31. JS Object
 properties Array 
 manipulation Arrow 
 functions Block
 scoping Classes Default
 parameter
 values Destructuring 
 Assignments Iterators Generators Modules Rest 
 parameters Spread
 operator Template
 strings ECMAScript 2015+
  32. 32. Uma série de práticas também foram difundidas para melhor programar JavaScript
  33. 33. DHTML jQuery Backbone.js AngularJS Ember.js D3.jsQUnit React jQuery
 plugins Twitter
 Bootstrap Zurb
 Foundation jQueryUI Ferramentas
  34. 34. Seções da App podem usar tecnologias Web
  35. 35. Muitas aplicações desktop já utilizam tecnologias Web
  36. 36. Aplicações utilizando Electron http://electron.atom.io
  37. 37. Mundo mobile tem dado mais atenção para as webviews Android 5.0 auto-updates WebView http://developer.telerik.com/featured/android-5-0s-auto-updating- webview-means-mobile-apps
  38. 38. We realized that we had no control over how the webview manages important system resources - Building a better Instagram 
 app for Android http://instagram-engineering.tumblr.com/post/97740520316/ betterandroid
  39. 39. Experimentar com tecnologias Web é mais barato e nem toda seção da sua App é o Instagram, Facebook ou Twitter
  40. 40. 1. Native shell + webviews
 2. + native navigation ⭐⭐⭐⭐ - 4/5 ⭐⭐⭐⭐⭐ - 4.5/5
  41. 41. We were able to put out a fantastic version of Basecamp for Android by reusing 95% of the work - DHH https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native- navigation-web-content
  42. 42. Construir Apps híbridas que mesclam Web e tecnologias nativas é uma boa alternativa
  43. 43. Experiências diferentes 😅
  44. 44. É possível também desenvolver Apps nativas com foco em reuso http://www.appcelerator.com Appcelerator Platform
  45. 45. http://www.appcelerator.com
  46. 46. Tecnologias Web são alicerce de novas ideias
  47. 47. React Native garantiu 
 87% de reuso de código na escrita de uma aplicação para iOS e Android https://www.youtube.com/watch?v=PAA9O4E1IM4
  48. 48. React Native enables you to build native using a consistent developer experience based on JavaScript. The focus is learn once, write anywhere. https://facebook.github.io/react-native
  49. 49. Com React Native é possível fazer live reload da aplicação enquanto se escreve código
  50. 50. Apenas parte da sua aplicação pode utilizar React https://www.youtube.com/watch?v=tFsYCRIDIu8&feature=youtu.be
  51. 51. Cada vez menos é preciso recorrer a soluções proprietárias
  52. 52. E as experiências Web mobile?
  53. 53. As APIs Web contemplam o universo mobile
  54. 54. APIs Controle 
 por toque Captura 
 de áudio Comandos 
 de voz Geração
 de áudio Captura de 
 imagem Geolocalização Controle de
 vibração Emitir
 notificações Condição
 da conexão Condição 
 da bateria Web APIs
  55. 55. <meta name="theme-color"
 content="#db5945"> <link rel="icon" 
 sizes="192x192"
 href="nice-highres.png"> https://developers.google.com/web/updates/2014/11/Support-for- theme-color-in-Chrome-39-for-Android
  56. 56. https://medium.com/woah-basecamp-3/basecamp-3-work-can- wait-4adfb285c84b 3. Push notifications em um App nativo 
 (e Web)
  57. 57. A Web terá suporte a Push Notifications através dos Service Workers https://developers.google.com/web/updates/2015/03/push- notificatons-on-the-open-web
  58. 58. Os Service Workers também resolverão o desafio do suporte Offline na Web http://www.html5rocks.com/en/tutorials/service-worker/introduction
  59. 59. Existe bastante conteúdo relevante sobre Web mobile
  60. 60. http://www.slideshare.net/caelumdev/serviceworkers-sergio
  61. 61. https://speakerdeck.com/jcemer/construindo-a-web-mobile- de-amanha
  62. 62. http://www.slideshare.net/caelumdev/alm-do-responsive- design-a-mudana-de-paradigma-do-design-adaptativo-e-os- mltiplos-dispositivos
  63. 63. http://www.slideshare.net/caelumdev/tudo-que-voc-precisa- saber-sobre-ltpicture-e-srcset
  64. 64. Como desenvolvedores, devemos entregar a solução que melhor funciona
  65. 65. A Web pode servir melhor que você imagina
  66. 66. Obrigado e dediquem esforços para aprender mais sobre Web - @jcemer

×