Upload
abraham-barrera
View
355
Download
2
Embed Size (px)
DESCRIPTION
Develop hybrid applications, with JavascriptCore
Citation preview
Abraham BarreraDesarrollador@abraham_barrera
JavascriptCore & Hybrid Mobile Apps
Abraham BarreraDesarrollador@abraham_barrera
Hybrid Mobile Apps & JavascriptCore
Abraham BarreraDesarrollador@abraham_barrera
SucksAndroid
Abraham BarreraDesarrollador@abraham_barrera
Hybrid Applications
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
Tech Stack
Objective-C
Java
C++
C#
Native Web
Tech Stack
Objective-C
Java
C++
C#
Javascript
HTML5
CSS3
Native Web
Advantages
Device Resources
Stability
Big Storage Support
Etc... A Lot of great things
Cool Transitions / Performance
Native Web
Advantages
Device Resources
Stability
Big Storage Support
CSS Support
Easy Prototyping
Cross Platform
Etc... A Lot of great things
Faster to update content
Cool Transitions / Performance
Native Web
Advantages
Device Resources
Stability
Big Storage Support
CSS Support
Easy Prototyping
Cross Platform
Etc... A Lot of great things
Faster to update content
Cool Transitions / Performance
How long time?
“Hybrid applications.. We recomend”
Iphone OS developer guide - 2008
Long
why don't we listened?
Our first Applications
Hybrid Applications
Why?
Abraham BarreraDesarrollador@abraham_barrera
Our Motivation
A Cool Design
A Cool Design
A Cool Design
Yes We're Hackers, We can
Or not :(
We're 3
Polyglot
We're 3
PolyglotiOS
We're 3
PolyglotiOS
Coolest Designer
We're a hybrid Team
Decision
Make an embed
web
Best of both
Embed web content
Hybrid Applications
Embed web Applications*
Embed web content
Hybrid Applications
Embed web Applications
Native Interpreter
Bridge
Embed web content
Hybrid Applications
Embed web Applications
Native Interpreter
Bridge
Phonegap JavascriptCore / V8
Embed web content
Hybrid Applications
Embed web Applications
Native Interpreter
Bridge
Phonegap JavascriptCore / V8
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
WebView Native API
Native Bridge iOS
document.location =
rhyboo://method?params
WebView Native API
Native Bridge iOS
document.location =
rhyboo://method?params
See it in Action
https://github.com/abrahambarrera/dynlang_june13
Native Bridge Android
Abraham BarreraDesarrollador@abraham_barrera
SucksAndroid
Abraham BarreraDesarrollador@abraham_barrera
SucksAndroid
The only good thing
WebView Native API
myBridge.myMethod(params)
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 They use the best of both worldsof both worlds
Embed web content
Embed web Applications*
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 Web Content
DEVICE PLATFORM
WEBVIEW
REST API Websocket Web Content
DEVICE PLATFORM
WEBVIEW
Webview is Slow
REST API Websocket Web Content
DEVICE PLATFORM
WEBVIEW
Webview is a bottleneck
REST API Websocket Web Content
DEVICE PLATFORM
WEBVIEW
Advantage of native
See it in Action
https://github.com/abrahambarrera/dynlang_june13
Abraham BarreraDesarrollador@abraham_barrera
Thanks !
Questions?