$30 off During Our Annual Pro Sale. View Details »

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.

Jean Carlo Emer

October 05, 2015
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

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