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

Hybrid mobile apps