Desenvolvedor
mobile precisa
aprender Web

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

porto alegre

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

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

A Internet conecta
computadores, a
Web conecta
pessoas
http://www.computerhistory.org/revolution/networking/19/314

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

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

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

High-Performance Browser Networking (O'Reilly)

Optimizing the Critical Rendering Path ~ @igrigorik
14kb

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

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

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

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

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

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

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

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/

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/

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

As demais experiências
podem ser Web 🙌

A Web é universal

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

Tecnologias para
criação de
interfaces evoluíram

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

Os navegadores modernos
suportam uma série de novas
tecnologias

HTML Canvas Audio
Video
App
Cache
Input
types
CSS 2 Transforms Animation Gradient Flexbox Filter
SVG
HTML e CSS

Responsive
Design
Sistemas de
escrita de CSS
WAI-ARIAMicroformats
Padrões para
HTML e CSS

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

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+

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

DHTML jQuery Backbone.js AngularJS
Ember.js D3.jsQUnit React
jQuery
plugins
Twitter
Bootstrap
Zurb
Foundation
jQueryUI
Ferramentas

Seções da App
podem usar
tecnologias Web

Muitas aplicações
desktop já utilizam
tecnologias Web

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

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

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

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

1. Native shell +
webviews
2. + native
navigation
⭐⭐⭐⭐ - 4/5
⭐⭐⭐⭐⭐ - 4.5/5

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

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

Experiências
diferentes 😅

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

http://www.appcelerator.com

Tecnologias Web
são alicerce de
novas ideias

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

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

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

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

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

E as experiências
Web mobile?

As APIs Web
contemplam o
universo mobile

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

<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

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

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

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

Existe bastante
conteúdo relevante
sobre Web mobile

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

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

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

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

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

A Web pode servir melhor
que você imagina

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