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

A...
Native

Web

Cool Transitions / Performance

CSS Support

Device Resources

Easy Prototyping

Stability

Cross Platform

B...
Native

Web

Cool Transitions / Performance

CSS Support

Device Resources

Easy Prototyping

Stability

Cross Platform

B...
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
Upcoming SlideShare
Loading in …5
×

Hybrid mobile apps

963 views

Published on

Develop hybrid applications, with JavascriptCore

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
963
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hybrid mobile apps

  1. 1. JavascriptCore & Hybrid Mobile Apps Abraham Barrera Desarrollador @abraham_barrera
  2. 2. Hybrid Mobile Apps & JavascriptCore Abraham Barrera Desarrollador @abraham_barrera
  3. 3. Android Abraham Barrera Desarrollador @abraham_barrera Sucks
  4. 4. Hybrid Applications Abraham Barrera Desarrollador @abraham_barrera
  5. 5. OX: STRONG & MEEK
  6. 6. A designer desk
  7. 7. Developer Desk
  8. 8. People hates Web
  9. 9. People Loves Web
  10. 10. Some people hates Objective-C
  11. 11. Native Web Merge two worlds
  12. 12. Native Web Objective-C Java C++ C# Tech Stack
  13. 13. Native Web Objective-C Javascript Java HTML5 C++ CSS3 C# Tech Stack
  14. 14. Native Web Cool Transitions / Performance Device Resources Stability Big Storage Support Etc... A Lot of great things Advantages
  15. 15. 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
  16. 16. 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
  17. 17. How long time?
  18. 18. “Hybrid applications.. We recomend” Iphone OS developer guide - 2008 Long
  19. 19. http://code.google.com/p/ iphone-google-maps-component/ Great sample !
  20. 20. why don't we listened?
  21. 21. Our first Applications
  22. 22. Hybrid Applications Why? Abraham Barrera Desarrollador @abraham_barrera
  23. 23. Our Motivation
  24. 24. A Cool Design
  25. 25. A Cool Design
  26. 26. A Cool Design
  27. 27. Yes We're Hackers, We can
  28. 28. We're 3 Polyglot
  29. 29. We're 3 Polyglot iOS
  30. 30. We're 3 Polyglot iOS Coolest Designer We're a hybrid Team
  31. 31. Decision Make an embed web Best of both
  32. 32. Embed web Applications* Embed web content Hybrid Applications
  33. 33. Embed web Applications Bridge Embed web content Native Interpreter Hybrid Applications
  34. 34. Embed web Applications Embed web content Native Interpreter Bridge Phonegap JavascriptCore / V8 Hybrid Applications
  35. 35. Embed web Applications Embed web content Native Interpreter Bridge Phonegap JavascriptCore / V8 Hybrid Applications
  36. 36. Hybrid Applications
  37. 37. Hybrid Applications
  38. 38. Hybrid Applications
  39. 39. Hybrid Applications
  40. 40. Embed Web Applications 1. Our Case
  41. 41. Native Bridge First Step
  42. 42. Native Bridge Social APIS
  43. 43. Native Bridge Push Notifications
  44. 44. Native Bridge Comment Composser
  45. 45. Phonegap Why not?
  46. 46. Phonegap Why not? Poor Social Apis, and a lot of things
  47. 47. Native Bridge iOS
  48. 48. document.location = rhyboo://method?params WebView Native API Native Bridge iOS
  49. 49. document.location = rhyboo://method?params WebView Native API Native Bridge iOS
  50. 50. See it in Action https://github.com/abrahambarrera/dynlang_june13
  51. 51. Native Bridge Android
  52. 52. Android Abraham Barrera Desarrollador @abraham_barrera Sucks
  53. 53. Android Abraham Barrera Desarrollador @abraham_barrera Sucks The only good thing
  54. 54. myBridge.myMethod(params) WebView Native API Native Bridge Android
  55. 55. See it in Action https://github.com/abrahambarrera/dynlang_june13
  56. 56. Build a web Application Second step
  57. 57. ¿ Frameworks ? Time to Market
  58. 58. And others
  59. 59. First Conslusion
  60. 60. JQMobile (for Desktop browsers) A lot of Code
  61. 61. JQMobile (for Desktop browsers) Large size
  62. 62. JQMobile (for Desktop browsers) Many fallbacks
  63. 63. Android Webview (slow, no websocket) Very Slow
  64. 64. Android Webview (slow, no websocket) deaccelerated transitions
  65. 65. First Tip
  66. 66. use a lightweight framework
  67. 67. use a lightweight framework
  68. 68. First Big Question
  69. 69. How did it Facebook?
  70. 70. Decompile: Facebok iOS and Android app
  71. 71. They use the best of both worlds
  72. 72. Embed web Applications* Embed web content
  73. 73. Bridge
  74. 74. A lot of pictures (why not CSS3)
  75. 75. Second Conclusion
  76. 76. CSS3 Don't use Box-Shadow
  77. 77. CSS3 Don't use alpha
  78. 78. CSS3 Don't use Border Radius
  79. 79. Second Tip
  80. 80. CSS3 Use transform and translate
  81. 81. Webviews Aren't browsers
  82. 82. Partial Webviews Use a few webviews
  83. 83. Embed Web Content 2. The other way
  84. 84. HTML Templates You can use Mustache, JQTempl
  85. 85. Page Transitions Managed natively
  86. 86. HTTP / Websocket Managed natively
  87. 87. REST API Websocket WEBVIEW DEVICE PLATFORM Web Content
  88. 88. REST API Websocket WEBVIEW DEVICE PLATFORM Webview is Slow Web Content
  89. 89. REST API Websocket Web Content WEBVIEW DEVICE PLATFORM Webview is a bottleneck
  90. 90. REST API Websocket Web Content WEBVIEW DEVICE PLATFORM Advantage of native
  91. 91. See it in Action https://github.com/abrahambarrera/dynlang_june13
  92. 92. Thanks ! Questions? Abraham Barrera Desarrollador @abraham_barrera

×