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.

Transcript

1. Desenvolvedor
   mobile precisa
   aprender Web
   

   View Slide

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

   View Slide

3. porto alegre
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. Desenvolvimento
   mobile não é
   apenas sobre
   aplicações nativas
   

   View Slide

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

   View Slide

10. A Internet conecta
    computadores, a 

    Web conecta 

    pessoas
    http://www.computerhistory.org/revolution/networking/19/314
    

    View Slide

11. JavaScript
    Web APIs
    SVG
    WebGL
    HTML
    CSS
    HTTP
    TCP/IP
    básico
    comunicação
    scripting
    gráficos
    

    View Slide

12. A maioria das aplicações
    modernas utiliza pelo
    menos HTTP e TCP/IP
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. content="app-id=myAppStoreID, 

    affiliate-data=myAffiliateData,
    app-argument=myURL">
    

    View Slide

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

    View Slide

20. Em 2016, 50% das Apps
    mobile serão híbridas
    (mescla de tecnologias
    nativa e Web)
    - Predição da Gartner
    

    View Slide

21. Mas uma predição
    divulgada pela BlackBerry
    não vale tanto assim...
    

    View Slide

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

    View Slide

23. View Slide

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/
    

    View Slide

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/
    

    View Slide

26. Experiências que dependem
    massivamente do hardware
    (jogos, câmera e localização)
    devem continuar sendo
    nativas
    

    View Slide

27. As demais experiências
    podem ser Web
    

    View Slide

28. A Web é universal
    

    View Slide

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
    

    View Slide

30. Tecnologias para
    criação de
    interfaces evoluíram
    

    View Slide

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

    View Slide

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

    View Slide

33. HTML Canvas Audio

    Video
    App 

    Cache
    Input

    types
    CSS 2 Transforms Animation Gradient Flexbox Filter
    SVG
    HTML e CSS
    

    View Slide

34. Responsive 

    Design
    Sistemas de 

    escrita de CSS
    WAI-ARIA
    Microformats
    Padrões para
    HTML e CSS
    

    View Slide

35. A Web é a plataforma
    mais completa para
    marcação de conteúdo e
    definição de layout
    

    View Slide

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+
    

    View Slide

37. Uma série de práticas
    também foram difundidas
    para melhor programar
    JavaScript
    

    View Slide

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

    plugins
    Twitter

    Bootstrap
    Zurb

    Foundation
    jQueryUI
    Ferramentas
    

    View Slide

39. Seções da App
    podem usar
    tecnologias Web
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

44. Experimentar com
    tecnologias Web é mais
    barato e nem toda seção
    da sua App é o Instagram,
    Facebook ou Twitter
    

    View Slide

45. 1. Native shell +
    webviews

    2. + native
    navigation
    ⭐⭐⭐⭐ - 4/5
    ⭐⭐⭐⭐⭐ - 4.5/5
    

    View Slide

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
    

    View Slide

47. Construir Apps híbridas
    que mesclam Web e
    tecnologias nativas é uma
    boa alternativa
    

    View Slide

48. Experiências
    diferentes
    

    View Slide

49. É possível também
    desenvolver Apps nativas
    com foco em reuso
    http://www.appcelerator.com
    Appcelerator
    Platform
    

    View Slide

50. http://www.appcelerator.com
    

    View Slide

51. Tecnologias Web
    são alicerce de
    novas ideias
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. Com React Native é
    possível fazer live reload
    da aplicação enquanto se
    escreve código
    

    View Slide

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

    View Slide

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

    View Slide

57. E as experiências
    Web mobile?
    

    View Slide

58. As APIs Web
    contemplam o
    universo mobile
    

    View Slide

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
    

    View Slide

60. content="#db5945">
    sizes="192x192"

    href="nice-highres.png">
    https://developers.google.com/web/updates/2014/11/Support-for-
    theme-color-in-Chrome-39-for-Android
    

    View Slide

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

    (e Web)
    

    View Slide

62. View Slide

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
    

    View Slide

64. Os Service Workers
    também resolverão o
    desafio do suporte
    Offline na Web
    http://www.html5rocks.com/en/tutorials/service-worker/introduction
    

    View Slide

65. Existe bastante
    conteúdo relevante
    sobre Web mobile
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. A Web pode servir melhor
    que você imagina
    

    View Slide

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

    View Slide