Desenvolvedor mobile precisa aprender Web

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

porto alegre

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

High-Performance Browser Networking (O'Reilly)

Slide 15

Slide 15 text

Optimizing the Critical Rendering Path ~ @igrigorik 14kb

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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-trafﬁc- is-2x-bigger-than-app-trafﬁc-and-growing-faster/

Slide 25

Slide 25 text

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-trafﬁc- is-2x-bigger-than-app-trafﬁc-and-growing-faster/

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

As demais experiências podem ser Web

Slide 28

Slide 28 text

A Web é universal

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Tecnologias para criação de interfaces evoluíram

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Os navegadores modernos suportam uma série de novas tecnologias

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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+

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Seções da App podem usar tecnologias Web

Slide 40

Slide 40 text

Muitas aplicações desktop já utilizam tecnologias Web

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Experiências diferentes

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

http://www.appcelerator.com

Slide 51

Slide 51 text

Tecnologias Web são alicerce de novas ideias

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

E as experiências Web mobile?

Slide 58

Slide 58 text

As APIs Web contemplam o universo mobile

Slide 59

Slide 59 text

APIs Controle   por toque Captura   de áudio Comandos   de voz Geração  de áudio Captura de   imagem Geolocalização Controle de  vibração Emitir  notiﬁcações Condição  da conexão Condição   da bateria Web APIs

Slide 60

Slide 60 text

https://developers.google.com/web/updates/2014/11/Support-for- theme-color-in-Chrome-39-for-Android

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

A Web terá suporte a Push Notiﬁcations através dos Service Workers https://developers.google.com/web/updates/2015/03/push- notiﬁcatons-on-the-open-web

Slide 64

Slide 64 text

Os Service Workers também resolverão o desaﬁo do suporte Oﬄine na Web http://www.html5rocks.com/en/tutorials/service-worker/introduction

Slide 65

Slide 65 text

Existe bastante conteúdo relevante sobre Web mobile

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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