SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
@fernando_cejas
WEBVIEW: The Fifth Element
Who am I?
•  GDG Organizer
•  Android, Agile and
technology Geek
•  NFC Actions App
•  Mobile Developer
@fernando_cejas
http://www.fernandocejas.com/
Agenda
•  Native vs web
•  Web developers
•  Native developers
•  Benefits and drawbacks
•  The webview
•  Experiences
•  Advices	
  
What the hell…? …I am a native developer
Why the title? What were you thinking
about?
Actually…
•  Activities
•  Intents
•  Services
•  Widgets
•  ...and Webview!!!
Native vs web???
Web developers? Designers?
Native developers…????
Benefits of native development
•  Default OS look & feel (UI conventions)
•  Performance
•  Access to device hardware (GPS, etc)
•  App store/marketplace distribution
•  Benefit from latest OS enhancements
Drawbacks of native development
•  Tied to the particular OS you built for
•  Maintaining a multi OS team/skill-set
•  Dealing with the app store approval
process
•  Keeping app in sync with OS updates
Benefits of hybrid development
•  Common codebase for multiple OS's
•  Access to device hardware (GPS, etc)
•  App store/marketplace distribution
•  Skills you already have (HTML, CSS, JS)
•  Potential code reuse in web site/app
Drawbacks of hybrid development
•  Build for lowest common denominator
•  3rd party SDK's might lag behind OS
–  Want to use feature X? Wait for an
implementation in abstraction layer
•  An abstraction layer can have bugs of
its own. Have to determine if a bug is in
your code, the abstraction layer, or OS.
So, what should I build?
• Desktop web app
• Mobile web app
• Mobile native app
We can live together…
Webview and the mobile web…
• Webviews and Mobile web are
almost the same…
Webview and the mobile web…
• 2 small differences:
– Mobile web authenticates with
web session
– Webview sets up protocols links
Webview and the mobile web…
• 1 big difference:
– Through webviews we can
access native capabilities
Pitfalls…experiences?
•  Android webview has a lot of bugs
•  Too heavy widget (poor performance?)
•  Differente capabilities depending on the OS
version.
•  Cordova webview implementation (not a silver
bullet)
Some advice…and conclusions…
•  Minimize number of connections
•  Do not assume JS has loaded
•  Minimize page weight
•  Testing in your desktop is not enough
•  Do not resize images on the client
•  Have a version of the web that works
everywhere
•  The most important: know your users
•  Test on real devices
Any questions?
Thanks!
When you look at the dark side, careful you
must be ... for the dark side looks back.
@fernando_cejas
www.fernandocejas.com

Mais conteúdo relacionado

Mais procurados

Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
scottgonzalez
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
Steve Souders
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders
 

Mais procurados (20)

Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
 
Selenium 4 with Simon Stewart [Webinar]
Selenium 4 with Simon Stewart [Webinar]Selenium 4 with Simon Stewart [Webinar]
Selenium 4 with Simon Stewart [Webinar]
 
Web Type: Hype & Gripes
Web Type: Hype & GripesWeb Type: Hype & Gripes
Web Type: Hype & Gripes
 
TDC2016POA | Trilha Web - Garanta a segurança de suas aplicações Web com Keyc...
TDC2016POA | Trilha Web - Garanta a segurança de suas aplicações Web com Keyc...TDC2016POA | Trilha Web - Garanta a segurança de suas aplicações Web com Keyc...
TDC2016POA | Trilha Web - Garanta a segurança de suas aplicações Web com Keyc...
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
WordPress common SEO issues by Olesia Korobka
WordPress common SEO issues by Olesia KorobkaWordPress common SEO issues by Olesia Korobka
WordPress common SEO issues by Olesia Korobka
 

Semelhante a Webview: The fifth element

Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
Brian LeRoux
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Web Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low DownWeb Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low Down
Apppli
 
Mobile web application production for business
Mobile web application production for businessMobile web application production for business
Mobile web application production for business
Hani Gamal
 

Semelhante a Webview: The fifth element (20)

Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting Small
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps development
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentIntroduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
 
Web Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low DownWeb Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low Down
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju Joseph
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju Joseph
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
 
Top 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App DevelopmentTop 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App Development
 
Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopment
 
Mobile web application production for business
Mobile web application production for businessMobile web application production for business
Mobile web application production for business
 

Mais de Fernando Cejas

Android simple 2d Layout animation
Android simple 2d Layout animationAndroid simple 2d Layout animation
Android simple 2d Layout animation
Fernando Cejas
 

Mais de Fernando Cejas (15)

The Mayans Lost Guide to RxJava on Android
The Mayans Lost Guide to RxJava on AndroidThe Mayans Lost Guide to RxJava on Android
The Mayans Lost Guide to RxJava on Android
 
It is about philosophy: culture of a good programmer
It is about philosophy: culture of a good programmerIt is about philosophy: culture of a good programmer
It is about philosophy: culture of a good programmer
 
Material Design for Old Schoolers
Material Design for Old SchoolersMaterial Design for Old Schoolers
Material Design for Old Schoolers
 
How to Become the MacGyver of Android Custom Views
How to Become the MacGyver of Android Custom ViewsHow to Become the MacGyver of Android Custom Views
How to Become the MacGyver of Android Custom Views
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
How ANDROID TESTING changed how we think about Death - Second Edition
How ANDROID TESTING changed how we think about Death - Second EditionHow ANDROID TESTING changed how we think about Death - Second Edition
How ANDROID TESTING changed how we think about Death - Second Edition
 
How ANDROID TESTING changed how we think about Death
How ANDROID TESTING changed how we think about DeathHow ANDROID TESTING changed how we think about Death
How ANDROID TESTING changed how we think about Death
 
Dinosaurs and Androids: The Listview Evolution
Dinosaurs and Androids: The Listview EvolutionDinosaurs and Androids: The Listview Evolution
Dinosaurs and Androids: The Listview Evolution
 
Inside Android Testing
Inside Android TestingInside Android Testing
Inside Android Testing
 
Nfc on Android
Nfc on AndroidNfc on Android
Nfc on Android
 
Android Design Patterns
Android Design PatternsAndroid Design Patterns
Android Design Patterns
 
Android Cloud To Device Messaging
Android Cloud To Device MessagingAndroid Cloud To Device Messaging
Android Cloud To Device Messaging
 
Android Quick Introduction
Android Quick IntroductionAndroid Quick Introduction
Android Quick Introduction
 
Desarrollo android almacenamiento de datos
Desarrollo android    almacenamiento de datosDesarrollo android    almacenamiento de datos
Desarrollo android almacenamiento de datos
 
Android simple 2d Layout animation
Android simple 2d Layout animationAndroid simple 2d Layout animation
Android simple 2d Layout animation
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Último (20)

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 

Webview: The fifth element

  • 2. Who am I? •  GDG Organizer •  Android, Agile and technology Geek •  NFC Actions App •  Mobile Developer @fernando_cejas http://www.fernandocejas.com/
  • 3. Agenda •  Native vs web •  Web developers •  Native developers •  Benefits and drawbacks •  The webview •  Experiences •  Advices  
  • 4. What the hell…? …I am a native developer
  • 5. Why the title? What were you thinking about?
  • 6. Actually… •  Activities •  Intents •  Services •  Widgets •  ...and Webview!!!
  • 10. Benefits of native development •  Default OS look & feel (UI conventions) •  Performance •  Access to device hardware (GPS, etc) •  App store/marketplace distribution •  Benefit from latest OS enhancements
  • 11. Drawbacks of native development •  Tied to the particular OS you built for •  Maintaining a multi OS team/skill-set •  Dealing with the app store approval process •  Keeping app in sync with OS updates
  • 12. Benefits of hybrid development •  Common codebase for multiple OS's •  Access to device hardware (GPS, etc) •  App store/marketplace distribution •  Skills you already have (HTML, CSS, JS) •  Potential code reuse in web site/app
  • 13. Drawbacks of hybrid development •  Build for lowest common denominator •  3rd party SDK's might lag behind OS –  Want to use feature X? Wait for an implementation in abstraction layer •  An abstraction layer can have bugs of its own. Have to determine if a bug is in your code, the abstraction layer, or OS.
  • 14. So, what should I build? • Desktop web app • Mobile web app • Mobile native app
  • 15. We can live together…
  • 16. Webview and the mobile web… • Webviews and Mobile web are almost the same…
  • 17. Webview and the mobile web… • 2 small differences: – Mobile web authenticates with web session – Webview sets up protocols links
  • 18.
  • 19.
  • 20. Webview and the mobile web… • 1 big difference: – Through webviews we can access native capabilities
  • 21.
  • 22. Pitfalls…experiences? •  Android webview has a lot of bugs •  Too heavy widget (poor performance?) •  Differente capabilities depending on the OS version. •  Cordova webview implementation (not a silver bullet)
  • 23. Some advice…and conclusions… •  Minimize number of connections •  Do not assume JS has loaded •  Minimize page weight •  Testing in your desktop is not enough •  Do not resize images on the client •  Have a version of the web that works everywhere •  The most important: know your users •  Test on real devices
  • 25. Thanks! When you look at the dark side, careful you must be ... for the dark side looks back. @fernando_cejas www.fernandocejas.com