SlideShare uma empresa Scribd logo
1 de 93
Baixar para ler offline
JavascriptCore &
Hybrid Mobile Apps

Abraham Barrera
Desarrollador
@abraham_barrera
Hybrid Mobile Apps &
JavascriptCore

Abraham Barrera
Desarrollador
@abraham_barrera
Android

Abraham Barrera
Desarrollador
@abraham_barrera

Sucks
Hybrid Applications

Abraham Barrera
Desarrollador
@abraham_barrera
OX:
STRONG & MEEK
A designer desk
Developer Desk
People hates Web
People Loves Web
Some people hates Objective-C
Native

Web

Merge two worlds
Native

Web

Objective-C
Java
C++
C#

Tech Stack
Native

Web

Objective-C

Javascript

Java

HTML5

C++

CSS3

C#

Tech Stack
Native

Web

Cool Transitions / Performance
Device Resources
Stability
Big Storage Support
Etc... A Lot of great things

Advantages
Native

Web

Cool Transitions / Performance

CSS Support

Device Resources

Easy Prototyping

Stability

Cross Platform

Big Storage Support

Faster to update
content

Etc... A Lot of great things

Advantages
Native

Web

Cool Transitions / Performance

CSS Support

Device Resources

Easy Prototyping

Stability

Cross Platform

Big Storage Support

Faster to update
content

Etc... A Lot of great things

Advantages
How long
time?
“Hybrid
applications..
We recomend”
Iphone OS developer guide - 2008

Long
http://code.google.com/p/
iphone-google-maps-component/

Great sample !
why don't we listened?
Our first Applications
Hybrid Applications
Why?

Abraham Barrera
Desarrollador
@abraham_barrera
Our Motivation
A Cool Design
A Cool Design
A Cool Design
Yes We're Hackers, We can
We're 3
Polyglot
We're 3
Polyglot
iOS
We're 3
Polyglot
iOS
Coolest Designer
We're a hybrid Team
Decision
Make an
embed
web
Best of both
Embed web
Applications*

Embed web
content

Hybrid Applications
Embed web
Applications
Bridge

Embed web
content
Native
Interpreter

Hybrid Applications
Embed web
Applications

Embed web
content
Native
Interpreter

Bridge
Phonegap

JavascriptCore / V8

Hybrid Applications
Embed web
Applications

Embed web
content
Native
Interpreter

Bridge
Phonegap

JavascriptCore / V8

Hybrid Applications
Hybrid Applications
Hybrid Applications
Hybrid Applications
Hybrid Applications
Embed Web
Applications
1. Our Case
Native Bridge

First Step
Native Bridge

Social APIS
Native Bridge

Push Notifications
Native Bridge

Comment Composser
Phonegap
Why not?
Phonegap
Why not?
Poor Social Apis, and a lot of
things
Native Bridge iOS
document.location =
rhyboo://method?params

WebView

Native API

Native Bridge iOS
document.location =
rhyboo://method?params

WebView

Native API

Native Bridge iOS
See it in Action
https://github.com/abrahambarrera/dynlang_june13
Native Bridge Android
Android

Abraham Barrera
Desarrollador
@abraham_barrera

Sucks
Android

Abraham Barrera
Desarrollador
@abraham_barrera

Sucks

The only good thing
myBridge.myMethod(params)

WebView

Native API

Native Bridge Android
See it in Action
https://github.com/abrahambarrera/dynlang_june13
Build a web
Application
Second step
¿ Frameworks ?

Time to Market
And others
First Conslusion
JQMobile
(for Desktop browsers)
A lot of Code
JQMobile
(for Desktop browsers)
Large size
JQMobile
(for Desktop browsers)
Many fallbacks
Android Webview
(slow, no websocket)
Very Slow
Android Webview
(slow, no websocket)
deaccelerated transitions
First Tip
use a lightweight
framework
use a lightweight
framework
First Big Question
How did it
Facebook?
Decompile:
Facebok iOS and Android app
They use the best
of both worlds
Embed web
Applications*

Embed web
content
Bridge
A lot of pictures
(why not CSS3)
Second Conclusion
CSS3

Don't use Box-Shadow
CSS3

Don't use alpha
CSS3

Don't use Border Radius
Second Tip
CSS3

Use transform and translate
Webviews

Aren't browsers
Partial Webviews

Use a few webviews
Embed Web
Content
2. The other way
HTML
Templates
You can use Mustache, JQTempl
Page
Transitions
Managed natively
HTTP /
Websocket
Managed natively
REST API

Websocket

WEBVIEW

DEVICE PLATFORM

Web
Content
REST API

Websocket

WEBVIEW

DEVICE PLATFORM

Webview is Slow

Web
Content
REST API

Websocket

Web
Content

WEBVIEW

DEVICE PLATFORM

Webview is a bottleneck
REST API

Websocket

Web
Content

WEBVIEW

DEVICE PLATFORM

Advantage of native
See it in Action
https://github.com/abrahambarrera/dynlang_june13
Thanks !
Questions?

Abraham Barrera
Desarrollador
@abraham_barrera

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Cordova 3.x
Cordova 3.xCordova 3.x
Cordova 3.x
 
Workshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UXWorkshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UX
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
 
Ionic - A mobile platform
Ionic - A mobile platformIonic - A mobile platform
Ionic - A mobile platform
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF
 
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?
 
Hybrid mobile and Ionic
Hybrid mobile and IonicHybrid mobile and Ionic
Hybrid mobile and Ionic
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
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
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Ionic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application DevelopmentIonic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application Development
 
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
 
DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
DroidCon 2011: Developing HTML5 and hybrid Android apps using PhonegapDroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
 
Why front-end matters in 2019
Why front-end matters in 2019Why front-end matters in 2019
Why front-end matters in 2019
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
 
No code, low code, machine code - Unicom 2021
No code, low code, machine code -  Unicom 2021No code, low code, machine code -  Unicom 2021
No code, low code, machine code - Unicom 2021
 
Phone gap
Phone gapPhone gap
Phone gap
 
Ember
EmberEmber
Ember
 
DF Global Gathering PuneWIT
DF Global Gathering PuneWITDF Global Gathering PuneWIT
DF Global Gathering PuneWIT
 

Destaque (8)

Faceboo rosa
Faceboo rosaFaceboo rosa
Faceboo rosa
 
Ruby & Apple Push Notification
Ruby & Apple Push Notification Ruby & Apple Push Notification
Ruby & Apple Push Notification
 
Pitch
PitchPitch
Pitch
 
Evaluation q1
Evaluation q1Evaluation q1
Evaluation q1
 
Chinatown wars
Chinatown warsChinatown wars
Chinatown wars
 
Facebook
FacebookFacebook
Facebook
 
Extending titanium
Extending titaniumExtending titanium
Extending titanium
 
Core Data without headaches
Core Data without headachesCore Data without headaches
Core Data without headaches
 

Semelhante a Hybrid mobile apps

HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love
 
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010
arif44
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
Caridy Patino
 

Semelhante a Hybrid mobile apps (20)

HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentIonic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
 
Native Mobile Application Using Java Script
Native  Mobile  Application  Using  Java ScriptNative  Mobile  Application  Using  Java Script
Native Mobile Application Using Java Script
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
 
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkHybrid Apps with Ionic Framework
Hybrid Apps with Ionic Framework
 
Why hybrid-is-important
Why hybrid-is-importantWhy hybrid-is-important
Why hybrid-is-important
 
Phone gap
Phone gapPhone gap
Phone gap
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Notes (2012-06-08)
Notes (2012-06-08)Notes (2012-06-08)
Notes (2012-06-08)
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)
 

Ú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
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
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 Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
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
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Hybrid mobile apps