SlideShare uma empresa Scribd logo
1 de 52
o caminho suave
Transição do
desenvolvimento web
para apps
ou…
- Renan Oliveira e Felipe Ramos
"Como foi o último ano"
globo
.com
Renan Oliveira
renanoliveira.net
web
CLIENT-SERVER
o começo…
1280x800px
Benefícios
‣ Mundo conhecido	

‣ Muitas ferramentas	

‣ Grande comunidade	

‣ Diversas soluções
1° passo
RESPONSIVE
Use
‣ Media Queries	

‣ Adapte suas imagens	

‣ Permita gestos	

‣ Layout Flexível	

‣ Adapte os menus
tendência
MOBILE FIRST
Progressive Enhancement
Seguindo a linha
app
2° passo
WebView
"Jeito mais barato de validar
se uma app faz sentido"
Seguindo a estrada
Quem usou/usa?
Titanium Kivy
Cordova
Cordova JS API
Cordova Native Lib
Cordova Native Lib
Cordova JS API
Cordova Native Lib
Cordova JS API
Android Framework +
SDKs
iOS Framework +
SDKs
Silverlight Framework +
Windows Phone SDK
API Built-in
‣ Accelerometer	

‣ Camera	

‣ Connection (wi-fi, 3g e etc)	

‣ Geolocation	

‣ Notification	

‣ Storage
Geolocation
"Podemos fazer código nativo
e trazer via JS para app"
Plugins
git.io/2pLd_Q
Cordova PhoneCallTrap
renanoliveira/cordova-phone-call-trap
EXISTEM PROBLEMAS!
‣ Animações	

‣ Evite reflow do HTML	

‣ Falta de padronização das respostas do celular	

‣ WebView antiga é igual codar para o IE6	

‣ Alert Driven Development	

Problemas
3° passo
NATIVO
"Ainda podemos usar
WebView"
WebView + Nativo
"Procurando mais fluidez, maior
performance, um passo além do que
você conseguiu até agora."
Nativo
3.2%
4.2%
7.1%
85.1%
Android
iOS
Windows
BlackBerry
Bada
Gartner - SmartPhone by OS Market Share - Brazil 2013
AndroidWin!
‣ Code em qualquer
ambiente	

‣ Android Studio	

‣ Java
Android
‣ Muitos devices	

‣ Emulador lento	

‣ API em evolução
My 2cents
‣ Precisa de um Mac	

‣ É pago para gerar o
pacote	

‣ Objective-C
iOS
‣ Poucos devices	

‣ Ótimo simulador	

‣ API madura
Nativo Híbrido
HTML
Natural para
desenvolvedores web
Acesso a API nativa
Distribuido via APP
Store
Atualização instantânea
Distribuição irrestrita
Natural para
desenvolvedores web
Interações avançadas
de uso/layout
Altamente performático
Distribuido via APP
Store
Capacidade
plena
Capacidade
parcial
Uma
plataforma
Múltiplas
plataformas
e o futuro…
GLASS
AndroidWear
Baseado em
movimento
Assistente
Pessoal
"O importante é o seu conteúdo,
a sua ideia, aonde ele vai aparecer
tá nas mãos dos usuários"
IWantToWorkAtGlobocom
github.com
globo
.com
Obrigado!
renanoliveira.net
Referências
‣ http://www.dipockdas.com/2012/11/its-hybrid.html	

‣ http://chelramsey.com/phonegap-vs-native-builds-a-12-month-review/	

‣ http://www.risingj.com/archives/267	

‣ http://designshack.net/articles/css/mobilefirst/	

‣ http://adrocknaphobia.github.io/preso-future-of-mobile/#/	

‣ http://myshadesofgray.wordpress.com/2014/04/15/hybrid-applications-and-android-native-browser/	

‣ http://shineravindra.wordpress.com/2013/05/20/hybrid-mobile-app-development-using-phonegap-a-case-study-for-beginners/	

‣ http://sa.inceptum.eu/sites/sa.inceptum.eu/files/Content/Phonegap%20Lecture%20Notes.pdf	

‣ http://www.passion4teq.com/articles/ios-android-development-comparison-1/	

‣ http://www.passion4teq.com/articles/ios-android-development-comparison-2/	

‣ http://www.forbes.com/sites/anthonykosner/2014/02/15/web-apps-raise-the-ceiling-above-html5-as-famo-us-recreates-facebooks-
paper/	

‣ http://techcrunch.com/2012/12/13/facebook-android-faster/	

‣ http://arquiteturadeinformacao.com/user-experience/5-coisas-que-aprendi-em-um-projeto-mobile-first-responsive-design-para-o-
google/	

‣ http://tableless.com.br/faut-tolerant-base-progressive-enhancement/

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

PWA
PWAPWA
PWA
 
O que é angular?
O que é angular?O que é angular?
O que é angular?
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
Pwa e o futuro do frontend
Pwa e o futuro do frontendPwa e o futuro do frontend
Pwa e o futuro do frontend
 
Desenvolvimento de Aplicações com LightSwitch
Desenvolvimento de Aplicações com LightSwitchDesenvolvimento de Aplicações com LightSwitch
Desenvolvimento de Aplicações com LightSwitch
 
Pwa (progressive web app)
Pwa (progressive web app)Pwa (progressive web app)
Pwa (progressive web app)
 
Aplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudAplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test Cloud
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Talk7 - Da concepção ao desenvolvimento de um aplicativo de mensagens
Talk7 - Da concepção ao desenvolvimento de um aplicativo de mensagensTalk7 - Da concepção ao desenvolvimento de um aplicativo de mensagens
Talk7 - Da concepção ao desenvolvimento de um aplicativo de mensagens
 
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
 

Destaque

Специалност: "Компютърна техника и технологии"
Специалност: "Компютърна техника и технологии"Специалност: "Компютърна техника и технологии"
Специалност: "Компютърна техника и технологии"
gdavidkov
 
宜昌別墅
宜昌別墅宜昌別墅
宜昌別墅
sysology
 
Mettre en place une stratégie digitale performante : pourquoi ? Comment ?
Mettre en place une stratégie digitale performante : pourquoi ? Comment ?Mettre en place une stratégie digitale performante : pourquoi ? Comment ?
Mettre en place une stratégie digitale performante : pourquoi ? Comment ?
Karim Bouras
 
HAPPY LIFE PROFILE
HAPPY LIFE PROFILEHAPPY LIFE PROFILE
HAPPY LIFE PROFILE
Happy life
 
Impacto de las TIC's para la Educación
Impacto de las TIC's para la EducaciónImpacto de las TIC's para la Educación
Impacto de las TIC's para la Educación
UTPL
 

Destaque (18)

What Was Your Name?
What Was Your Name?What Was Your Name?
What Was Your Name?
 
Lazarevac-PPT SEMINAR
Lazarevac-PPT SEMINARLazarevac-PPT SEMINAR
Lazarevac-PPT SEMINAR
 
Klaipeda asi 2015_09_18
Klaipeda asi 2015_09_18Klaipeda asi 2015_09_18
Klaipeda asi 2015_09_18
 
Специалност: "Компютърна техника и технологии"
Специалност: "Компютърна техника и технологии"Специалност: "Компютърна техника и технологии"
Специалност: "Компютърна техника и технологии"
 
Mrs williams
Mrs williamsMrs williams
Mrs williams
 
99310 ap sorvete_original
99310 ap sorvete_original99310 ap sorvete_original
99310 ap sorvete_original
 
Intranetin jalkauttaminen - Sosiaalinen intranet 2014 -seminaari 8.5.2014
Intranetin jalkauttaminen - Sosiaalinen intranet 2014 -seminaari 8.5.2014Intranetin jalkauttaminen - Sosiaalinen intranet 2014 -seminaari 8.5.2014
Intranetin jalkauttaminen - Sosiaalinen intranet 2014 -seminaari 8.5.2014
 
8 woven replica
8 woven replica8 woven replica
8 woven replica
 
宜昌別墅
宜昌別墅宜昌別墅
宜昌別墅
 
Mettre en place une stratégie digitale performante : pourquoi ? Comment ?
Mettre en place une stratégie digitale performante : pourquoi ? Comment ?Mettre en place une stratégie digitale performante : pourquoi ? Comment ?
Mettre en place une stratégie digitale performante : pourquoi ? Comment ?
 
HAPPY LIFE PROFILE
HAPPY LIFE PROFILEHAPPY LIFE PROFILE
HAPPY LIFE PROFILE
 
Getting Ready for 2016 Changes in Health Care Reform
Getting Ready for 2016 Changes in Health Care ReformGetting Ready for 2016 Changes in Health Care Reform
Getting Ready for 2016 Changes in Health Care Reform
 
Sahaba 03-amr-khalid-dimad
Sahaba 03-amr-khalid-dimadSahaba 03-amr-khalid-dimad
Sahaba 03-amr-khalid-dimad
 
How FreeeUp Helps Staffing Companies.
How FreeeUp Helps Staffing Companies.How FreeeUp Helps Staffing Companies.
How FreeeUp Helps Staffing Companies.
 
A2 jessie j price tag
A2  jessie j price tagA2  jessie j price tag
A2 jessie j price tag
 
Impacto de las TIC's para la Educación
Impacto de las TIC's para la EducaciónImpacto de las TIC's para la Educación
Impacto de las TIC's para la Educación
 
11 Accomplishments Employers Want to See On Your Resume
11 Accomplishments Employers Want to See On Your Resume11 Accomplishments Employers Want to See On Your Resume
11 Accomplishments Employers Want to See On Your Resume
 
TIC EN EL AULA
TIC EN EL AULATIC EN EL AULA
TIC EN EL AULA
 

Semelhante a Transição do desenvolvimento web para apps - o caminho suave

Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)
grupouro
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)
grupouro
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
Rodrigo Peleias
 

Semelhante a Transição do desenvolvimento web para apps - o caminho suave (20)

Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
 
Utilização de DevOps
Utilização de DevOpsUtilização de DevOps
Utilização de DevOps
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-Platform
 
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
 
Desenvolvimento de Aplicações Móveis em Java
Desenvolvimento de Aplicações Móveis em JavaDesenvolvimento de Aplicações Móveis em Java
Desenvolvimento de Aplicações Móveis em Java
 
The twelve factor app - Princípios e boas práticas aplicados no mundo real
The twelve factor app - Princípios e boas práticas aplicados no mundo realThe twelve factor app - Princípios e boas práticas aplicados no mundo real
The twelve factor app - Princípios e boas práticas aplicados no mundo real
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)
 
Phonegap
PhonegapPhonegap
Phonegap
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
 
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
 
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
 
Webinar: Introdução à Distribuição Contínua na AWS
Webinar: Introdução à Distribuição Contínua na AWSWebinar: Introdução à Distribuição Contínua na AWS
Webinar: Introdução à Distribuição Contínua na AWS
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 

Mais de Renan Moreira de Oliveira

Mais de Renan Moreira de Oliveira (20)

PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
AI & Big Data - Personalização da Jornada - PicPay - TDC
AI & Big Data - Personalização da Jornada - PicPay - TDCAI & Big Data - Personalização da Jornada - PicPay - TDC
AI & Big Data - Personalização da Jornada - PicPay - TDC
 
AI na jornada do usuário de ecommerce
AI na jornada do usuário de ecommerceAI na jornada do usuário de ecommerce
AI na jornada do usuário de ecommerce
 
RecSys 2020 - iFood recommendation
RecSys 2020 - iFood recommendationRecSys 2020 - iFood recommendation
RecSys 2020 - iFood recommendation
 
Data science Framework
Data science FrameworkData science Framework
Data science Framework
 
iFood Recommendations
iFood RecommendationsiFood Recommendations
iFood Recommendations
 
Sistemas de Recomendação
Sistemas de RecomendaçãoSistemas de Recomendação
Sistemas de Recomendação
 
Big data e Machine Learning na globo.com
Big data e Machine Learning na globo.comBig data e Machine Learning na globo.com
Big data e Machine Learning na globo.com
 
What is AB, MVT and MAB?
What is AB, MVT and MAB?What is AB, MVT and MAB?
What is AB, MVT and MAB?
 
Dados importam, seja data-driven!
Dados importam, seja data-driven!Dados importam, seja data-driven!
Dados importam, seja data-driven!
 
Machine Learning na globo-com
Machine Learning na globo-comMachine Learning na globo-com
Machine Learning na globo-com
 
Big Data to Machine Learning
Big Data to Machine LearningBig Data to Machine Learning
Big Data to Machine Learning
 
Dev para Engenheiro de Dados (From Dev to Data Engineer)
Dev para Engenheiro de Dados (From Dev to Data Engineer)Dev para Engenheiro de Dados (From Dev to Data Engineer)
Dev para Engenheiro de Dados (From Dev to Data Engineer)
 
Big data e globo.com - Uma visão sobre a cultura de dados
Big data e globo.com - Uma visão sobre a cultura de dadosBig data e globo.com - Uma visão sobre a cultura de dados
Big data e globo.com - Uma visão sobre a cultura de dados
 
Big data e a globo.com - 2017
Big data e a globo.com - 2017Big data e a globo.com - 2017
Big data e a globo.com - 2017
 
Big Data e seu fiel companheiro Spark
Big Data e seu fiel companheiro SparkBig Data e seu fiel companheiro Spark
Big Data e seu fiel companheiro Spark
 
Big Data na Globo.com - Dev Version - 2016
Big Data na Globo.com - Dev Version - 2016Big Data na Globo.com - Dev Version - 2016
Big Data na Globo.com - Dev Version - 2016
 
Big Data na globo.com
Big Data na globo.comBig Data na globo.com
Big Data na globo.com
 
Excelsior - Perfil usando Big Data e Web Semântica
Excelsior - Perfil usando Big Data e Web SemânticaExcelsior - Perfil usando Big Data e Web Semântica
Excelsior - Perfil usando Big Data e Web Semântica
 
Ontologias e sua utilização em aplicações semânticas - UFF - CASI - 2014
Ontologias e sua utilização em aplicações semânticas - UFF - CASI - 2014Ontologias e sua utilização em aplicações semânticas - UFF - CASI - 2014
Ontologias e sua utilização em aplicações semânticas - UFF - CASI - 2014
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 

Transição do desenvolvimento web para apps - o caminho suave