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

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

Great sample !

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?