<p>This presents a framework we built when making the Glastonbury 2011 app for iOS, Android and Qt. We looked at the available options, and found them wanting. </p> <p> TL;DR: Javascript app logic, native UI. And we open sourced it. </p> <p>And it works. The Glastonbury 2011 app was well received, featured in the app stores we released for, and is now winning awards.</p>

1. Making Cross Platform
Apps Suck Less
James Hugman

2. I am…
• an engineer at Future Platforms
• We make apps for clients
• We’re technology agnostic. i.e. Web,
Native, Whatever.
@jhugman

3. Story Arc
• A public service announcement
• A big client, a big job
• A painful flashback
• Experiments yield a surprising result
• The future looks bright.
@jhugman

4. Web v Native
is a
False Dilemma
Web Native

5. Reality

6. Reality?
ft.com LinkedIn Guardian
Angry
PhoneGap Titanium
Appstore Birds

7. Reality?
native Guardian
Profanisaurus
Facebook
UI Gmail
LinkedIn
Appstore
ft.com
Plugins
web
PhoneGap
web Logic native

8. Glastonbury 2011
• “…we want users to love us…”
• iPhone, Android, Nokia
• Hostile terrain

9. Consequences
• UI should feel native and platform
specific
• Assume offline
@jhugman

10. Technology Options
• HTML app
• Something else
• Three native apps
@jhugman

11. Approach 1
HTML5 is coming!

12. The promise
@jhugman

13. Executive Summary
@jhugman

14. Executive Summary
Bu y o ne
g et
n FREE! ! !
@jhugman

15. Fundamental problems
• Native is closest to native
• Different platform metaphors.
@jhugman

16. Webkit
Fragmentation
• Webkit is everywhere
• “No two implementations are alike”
— @ppk
• Different platform half-lives
@jhugman

17. Lots of work
• Developer time getting it just right.
• CPU is spent doing UI, not your app.
@jhugman

18. Developer happiness
• Endless browser bugs
• Less time building features
• #ifdef code
@jhugman

19. Addendum
• Clients love to pay for web-technologies
• but hate the quality
@jhugman

20. Approach 2
Something else

21. What’s left
native
? Too expensive
UI
Not there yet
web
web Logic native

22. App Architectures
Presentation Layer
Application Logic Layer
Platform Services Layer

23. App Architectures
Presentation Layer
(Sencha, JS, SASS, CSS, HTML)
Application Logic Layer
(Javascript, requirejs, Backbone, SQL, HTTP)
Platform Services Layer
Webview Native PhoneGap plugins
PhoneGap App

24. App Architectures
Presentation Layer
(written in JS, rendered natively)
Application Logic Layer
(Javascript, SQL, HTTP)
Platform Services Layer
(Native)
“Something Else” app

25. Titanium
“a cross platform
operating system”

26. The Pitch
• Write UI in Javascript
• Native widgets are generated at
runtime
• iOS & Android
@jhugman

27. JS/Native Bridge
Performance is I/O Bound
Native Button
To Native
setText()
setTextColor()
setBackgroundColor()
From Javascript
onTouchDown
onTouchUp
onClick

28. No UI Tooling
• No development tooling
• No runtime tools
@jhugman

29. Other significant
problems
• Porting by framework’s best effort
• Difficult to take advantage of
unsupported API
@jhugman

30. DOM-less Game Libraries
Canvas APIs implemented
with OpenGL

31. Examples
• Game Closure
• Impact for iOS
• appMobi’s DirectCanvas
@jhugman

32. Observations
• Game UI is not Platform UI
• also see: Web UI is not Platform UI
@jhugman

33. UI Performance is I/O
Bound
• Each bundles its own Javascript
engine
@jhugman

34. Introducing Kirin
A new platform

35. Requirements
• Maximise code re-use
• Native, platform appropriate UIs
• Happy developers & designers
• Minimal runtime to download
@jhugman

36. Idealised Architecture
Presentation Layer
(written in Native)
Application Logic Layer
(Javascript, SQL, HTTP)
Platform Services Layer
(Native)
Kirin App

37. Consequences
• Platform appropriate UX
• Better tooling
• Fewer compromises
@jhugman

38. Fewer JS/Native function
calls
Activity
configureSpecificButtonWithData_(data)
To Native
configureSpecificButtonWithData_(data)
From Javascript
onSpecificButtonClick

39. Consequences
• Can use existing JS Engine in an
invisible WebView
@jhugman

40. Priorities
• Great performance
• Easy to grow
• Modular
• Easy-to-use Foreign Function
Interface
@jhugman

41. Super easy FFI
Native to Javascript:
// In MyScreenActivity.java
mScreenProxy.onButtonClick();
// In MyScreenUIViewController.m
[KIRIN fireEventIntoJS:
@”native2jsScreenProxy.onButtonClick()”];
// In MyScreen.js
exports.onButtonClick = function () {
// do some logic.
}

42. Super easy FFI
Javascript to Native:
// In MyScreen.js
kirin.js2nativeScreenProxy.setText_andSize_(“Hello world”, 15);
// In MyScreenActivity.java
public void setText_andSize_(String message, int size) {
// do the thing
}
// In MyScreenUIViewController.m
-(void) setText:(NSString*) message andSize:(NSInteger)size {
// do the thing
}

43. Inspired by node.js
• CommonJS Modules
• Transparent threading
@jhugman

44. Hello World
Would you like to see a
demo?

45. Back to Glastonbury
• What we shipped:
• iOS, native only
• Qt in JS/QML, with Kirin
• Android with Kirin

46. Outcome
• Two apps with Kirin (Android & Qt)
• Android app was built in half (50%)
the time of either Qt or iOS apps.

47. Outcome
• 100,000+ downloads
• Featured in all three app stores
• Lots of great reviews
• Very happy client
• Winning awards

48. But that’s not all…

49. Open Sourcing Kirin
• Apache Licence
• Release early, release often
• Looking for feedback
• Looking for feature requests
@jhugman

50. Current Status
• iOS and Android on Github
• Coming…
• Android Fragments
• Windows Phone 7
• Qt (already implemented)
@jhugman

51. Thanks
@jhugman
github.com/kirinjs

52. Follow @KirinJS
http://github.com/kirinjs
@jhugman