Desenvolvedor mobile precisa aprender Web

Desenvolvedor mobile precisa aprender Web

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.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

October 05, 2015
Tweet

Transcript

  1. Desenvolvedor mobile precisa aprender Web

  2. jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer

  3. porto alegre

  4. None
  5. None
  6. None
  7. None
  8. Desenvolvimento mobile não é apenas sobre aplicações nativas

  9. Web é um conjunto de tecnologias para acesso a informações

    na Internet
  10. A Internet conecta computadores, a 
 Web conecta 
 pessoas

    http://www.computerhistory.org/revolution/networking/19/314
  11. JavaScript Web APIs SVG WebGL HTML CSS HTTP TCP/IP básico

    comunicação scripting gráficos
  12. A maioria das aplicações modernas utiliza pelo menos HTTP e

    TCP/IP
  13. High-Performance Browser Networking (O'Reilly) Latência de uma requisição

  14. High-Performance Browser Networking (O'Reilly)

  15. Optimizing the Critical Rendering Path ~ @igrigorik 14kb

  16. https://docs.google.com/presentation/d/ 1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present

  17. Por que ir além do HTTP e aprender outras tecnologias

    Web?
  18. <meta name="apple-itunes-app" 
 content="app-id=myAppStoreID, 
 affiliate-data=myAffiliateData, app-argument=myURL">

  19. Há outras razões além de fazer um website teaser para

    divulgar sua App nativa
  20. Em 2016, 50% das Apps mobile serão híbridas (mescla de

    tecnologias nativa e Web) - Predição da Gartner
  21. Mas uma predição divulgada pela BlackBerry não vale tanto assim...

  22. A questão inclusive é sobre desenvolver ou não aplicações

  23. None
  24. 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/
  25. 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/
  26. Experiências que dependem massivamente do hardware (jogos, câmera e localização)

    devem continuar sendo nativas
  27. As demais experiências podem ser Web

  28. A Web é universal

  29. 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
  30. Tecnologias para criação de interfaces evoluíram

  31. As maiores dores de cabeça do desenvolvimento Web são os

    navegadores antigos
  32. Os navegadores modernos suportam uma série de novas tecnologias

  33. HTML Canvas Audio
 Video App 
 Cache Input
 types CSS

    2 Transforms Animation Gradient Flexbox Filter SVG HTML e CSS
  34. Responsive 
 Design Sistemas de 
 escrita de CSS WAI-ARIA

    Microformats Padrões para HTML e CSS
  35. A Web é a plataforma mais completa para marcação de

    conteúdo e definição de layout
  36. 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+
  37. Uma série de práticas também foram difundidas para melhor programar

    JavaScript
  38. DHTML jQuery Backbone.js AngularJS Ember.js D3.js QUnit React jQuery
 plugins

    Twitter
 Bootstrap Zurb
 Foundation jQueryUI Ferramentas
  39. Seções da App podem usar tecnologias Web

  40. Muitas aplicações desktop já utilizam tecnologias Web

  41. Aplicações utilizando Electron http://electron.atom.io

  42. 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
  43. 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
  44. Experimentar com tecnologias Web é mais barato e nem toda

    seção da sua App é o Instagram, Facebook ou Twitter
  45. 1. Native shell + webviews
 2. + native navigation ⭐⭐⭐⭐

    - 4/5 ⭐⭐⭐⭐⭐ - 4.5/5
  46. 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
  47. Construir Apps híbridas que mesclam Web e tecnologias nativas é

    uma boa alternativa
  48. Experiências diferentes

  49. É possível também desenvolver Apps nativas com foco em reuso

    http://www.appcelerator.com Appcelerator Platform
  50. http://www.appcelerator.com

  51. Tecnologias Web são alicerce de novas ideias

  52. 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
  53. 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
  54. Com React Native é possível fazer live reload da aplicação

    enquanto se escreve código
  55. Apenas parte da sua aplicação pode utilizar React https://www.youtube.com/watch?v=tFsYCRIDIu8&feature=youtu.be

  56. Cada vez menos é preciso recorrer a soluções proprietárias

  57. E as experiências Web mobile?

  58. As APIs Web contemplam o universo mobile

  59. 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
  60. <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

  61. https://medium.com/woah-basecamp-3/basecamp-3-work-can- wait-4adfb285c84b 3. Push notifications em um App nativo 


    (e Web)
  62. None
  63. 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
  64. Os Service Workers também resolverão o desafio do suporte Offline

    na Web http://www.html5rocks.com/en/tutorials/service-worker/introduction
  65. Existe bastante conteúdo relevante sobre Web mobile

  66. http://www.slideshare.net/caelumdev/serviceworkers-sergio

  67. https://speakerdeck.com/jcemer/construindo-a-web-mobile- de-amanha

  68. http://www.slideshare.net/caelumdev/alm-do-responsive- design-a-mudana-de-paradigma-do-design-adaptativo-e-os- mltiplos-dispositivos

  69. http://www.slideshare.net/caelumdev/tudo-que-voc-precisa- saber-sobre-ltpicture-e-srcset

  70. Como desenvolvedores, devemos entregar a solução que melhor funciona

  71. A Web pode servir melhor que você imagina

  72. Obrigado e dediquem esforços para aprender mais sobre Web -

    @jcemer