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
2. jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer
3. porto alegre
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
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)
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