Kirin is a cross-platform toolkit for building mobile apps that allows writing UI code in native languages but business logic in JavaScript. It provides device APIs, a Node.js-like environment, and tools to help native and JavaScript developers work together, including an interface description language to define protocols between native and JavaScript code for type-safe calling between the two. Kirin aims to combine the best of native development with the productivity of JavaScript.

1. Kirin:
Single Page Webapps
with a Native UI
James Hugman

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

3. There Will Be Code

4. Kirin is…
• A Cross Platform Toolkit for building
mobile apps
• Write UI in native
• Write business logic in Javascript
• Open source
@jhugman

5. Competition
“So, it’s like …”

6. PhoneGap
• a bunch of device APIs
• a webview to build out your UI
@jhugman

7. Titanium
• a bunch of device APIs
• a native UI built with its own APIs.
@jhugman

8. Kirin
• a bunch of device APIs
• a native UI built with native SDKs.
@jhugman

9. PhoneGap
• Easy to start
• Very lightweight
@jhugman

10. PhoneGap
• Hard to finish to a high quality
• UI unlikely to be good enough
• UI tends to one-size-fits-all
@jhugman

11. Titanium
• Easy to start
• Uses native widgets
@jhugman

12. Titanium
• Designers won’t like:
• UI APIs are always playing catchup
• Trust Titanium to make the right
choices for platform specificity
• Users won’t like:
• JS engine per app
@jhugman

13. Kirin
• Native SDKs. It may be hard to learn.
• Very lightweight
• The whole SDK is there, all the time.
• Use existing JS Engine.
@jhugman

14. But seriously, tell us
about Kirin

15. Architecture of
Participation
• “the nature of systems
that are designed for
user contribution”
• Tim O’Reilly, 2004
@jhugman

16. Design Principles
• Provide a node.js like environment
• Bind native objects to Javascript
• Help teams work together
• Get out of your way
@jhugman

17. Design Principles
• A node.js like environment
• Bind native objects to Javascript
• Help teams work together
• Get out of your way
@jhugman

18. Common JS modules
• Arrange your code into files
• Each “module” has its own variable
scope
• require() and exports link
modules together
@jhugman

19. Common JS/Modules
In lib/greeter.js
exports.greet = function (person) {
console.log(“Hello ” + person);
};
In lib/entry.js
var greeter = require(“./greeter”);
greeter.greet(“World”); // prints Hello World to console
@jhugman

20. npm:
node.js package manager
• Distributes your library
• Manages your dependencies
• 10,000+ packages available
@jhugman

21. Installing kirin
$ npm install kirin
@jhugman

22. Installing kirin
$ kirin-create app ~/my-first-app
@jhugman

23. 10k+ packages for kirin
$ npm search facebook
$ npm install facebook-graph-client
@jhugman

24. Design Principles
• A node.js like environment
• Bind native objects to Javascript
• Help teams work together
• Get out of your way
@jhugman

25. Platform SDKs & Kirin
• Anything can Javascript
• Lifecycles
• Extensions
• Threading
@jhugman

26. Anything can Javascript

27. A Typical Kirin App
Native screen
Javascript
screen module
Controller
Model Your app
Device API
Device Access
@jhugman

28. Not just for screens
Custom UI
Screen UI Fragment
component
Javascript Javascript Javascript
App Delegate Service
Javascript Javascript
Javascript API Javascript API
Third Party API +
Device API
UI
@jhugman

29. Consider this JS:
// called from native screen.
exports.importantButtonClicked = function (value) {}
@jhugman

30. Calling Javascript. Part I
public void onUiButtonClick() {
mKirinHelper.jsMethod("importantButtonClicked", 42);
}
- (IBAction) onUiButtonClick: (id) sender {
[self.kirinHelper
jsMethod: @“importantButtonClicked”
withArgs: [NSNumber numberWithInt:42]
];
}
@jhugman

31. Lifecycles

32. Lifecycles, everywhere
• Android:
• onCreate, onStart, onResume,
onPause, onStop, onDestroy
• iOS:
• viewDidLoad, viewWillAppear,
viewDidAppear, viewWillDisappear,
viewDidUnload, dealloc
@jhugman

33. Lifecycles in Javascript
var theScreen;
module.exports = {
onLoad: function (ui) {
theScreen = ui;
},
onUnload: function () {
theScreen = null;
},
// applicable called at viewWillAppear
onResume: function () {},
// called by viewWillDisappear
onPause: function () {},
};
@jhugman

34. Lifecycles with objects
function MyScreenModule () {
this.screen = null;
}
module.exports = MyScreenModule;
MyScreenModule.prototype.onLoad = function (ui) {
this.screen = ui;
};
MyScreenModule.prototype.onUnload = function () {
this.screen = null;
};
// applicable called at viewWillAppear
MyScreenModule.prototype.onResume = function () {};
// called by viewWillDisappear
MyScreenModule.prototype. onPause = function () {};
@jhugman

35. Android Lifecycles
public class MyScreenActivity extends KirinActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_screen);
bindScreen("MyScreenModule");
}
}
@jhugman

36. iOS Lifecycles
#import <KirinKit/KirinKit.h>
@interface MyViewController : KirinUIViewController
@end
@implementation KirinUIViewController
- (void) viewDidLoad {
[super viewDidLoad];
[self bindScreen:@“MyScreenModule”];
}
@end
@jhugman

37. Extensions

38. Extensions
• Device access e.g.
• app-preferences
• dev-networking-alpha
• app-databases-alpha
• May include a UI e.g.:
• Twitter, Facebook, Address Book
@jhugman

39. Extension access
• Exposed only to Javascript
• Can be written in JS, Native or a
combination of both
• May have a full-screen or popover UI
var prefs = require(“app-preferences”),
url = prefs.get(“imageServerUrl”);
// applicable called at viewWillAppear
prefs.put(“lastSuccessfulPoll”, Date.now());
• theScreen
prefs.commit();
@jhugman

40. Threading

41. Transparent threading
• You don’t have to know this:
• Extensions run in a thread pool
• JS engine runs in its own thread
• Responsive UI Thread.
@jhugman

42. Design Principles
• A node.js like environment
• Bind native objects to Javascript
• Help teams work together
• Get out of your way
@jhugman

43. Conway’s Law
• “...organizations which design
systems ... are constrained to produce
designs which are copies of the
communication structures of these
organizations.”
• Melvin Conway 1968
@jhugman

44. Native devs value:
• compilers doing work for them
• IDEs doing work for them
• build tools doing work for them
@jhugman

45. Javascript devs value:
• Rapid prototyping and development
• Expressive language constructs
• Garbage collection
@jhugman

46. Type safe calling of JS

47. Consider the method:
// called from native screen.
exports.importantButtonClicked = function (value) {};
@jhugman

48. Obj-C calling JS
@protocol IMyScreenModule <NSObject>
- (void) importantButtonClicked: (int) value;
@end
- (void) viewDidLoad {
// ...
self.screenModule =
[self bindScreen:@"MyScreenModule"
withProtocol:@protocol(IMyScreenModule)];
// ...
}
- (IBAction) onUiButtonClick: (id) sender {
[self.screenModule importantButtonClicked: 42];
}
@jhugman

49. Android calling JS
public interface IMyScreenModule {
void importantButtonClicked(int value);
}
public void onCreate(Bundle savedInstanceState) {
// ...
mScreenModule = bindScreen("MyScreenModule",
IMyScreenModule.class);
// ...
}
public void onUiButtonClick() {
mScreenModule.importantButtonClicked(42);
}
@jhugman

50. Calling Native. Part II
In MyScreenModule.js
var theScreen;
function updateUi (data) {
theScreen.displayDataAndEnableUi(data, true);
}
In MyScreenViewController.h
- (void) displayData: (id<IMyScreenRequest>) data
andEnableUi: (BOOL) flag;
In MyScreenActivity.java
public void displayDataAndEnableUi(IMyScreenRequest data,
boolean flag);
@jhugman

51. Files required for type-
safety
• ScreenModule.h protocol
• ScreenModule.java interface
• Screen.h protocol
• Screen.java interface
• ScreenRequest.java interface
• ScreenReqest.h protocol
@jhugman

52. Foreign Function
Interface
calling native
Implemented By
Implemented by Implemented by
Javascript
Javascript Native
calling javascript
@jhugman

53. Different implementations
Implemented by Implemented by
Javascript iOS
@jhugman

54. Same Shaped API
Implemented by Implemented by
Javascript Android
@jhugman

55. “Isomorphic” “bi-layer”
• Clean interface for JS to talk to
• Clean interface for native to talk to
• Everything kept in sync
@jhugman

56. Bi-layer problems
• Too many moving parts
• Easy to break
• Difficult to document
• Important for porting
@jhugman

57. The clean interface
problem
• Interacting components:
• different languages
• different contexts
@jhugman

58. Interface Description
Language
• Properties! Methods!
• Human readable and writeable
• Generate interface.java and
protocol.h files
@jhugman

59. Interface Description
Language
"IMyScreen": {
implementedBy: "native",
methods: {
"displayData:andUiEnabled:": [
{data: "IMyScreenRequest"},
{flag: "boolean"}
]
}
},
"IMyScreenModule": {
implementedBy: "javascript",
methods: {
"onImportantButtonClick": [
{id: "integer"}
]
}
},
@jhugman

60. IDL generates Java…
public interface IMyScreenModule {
void importantButtonClicked(int value);
}
public interface IMyScreen {
void displayDataAndUiEnabled(IMyScreenRequest data,
boolean flag);
}
public interface IMyScreenRequest {
String getTitle();
JSONArray getNames();
}
@jhugman

61. IDL generates Obj-C…
@protocol MyScreenModule <NSObject>
- (void) importantButtonClicked: (int) value;
@end
@protocol IMyScreenModule <NSObject>
// data is an id<IMyScreenRequest>
- (void) displayData: (NSDictionary*) data;
AndUiEnabled: (BOOL) flag;
@end
@protocol IMyScreenRequest
@property(readonly, retain) NSString* title;
@property(readonly, retain) NSArray* names;
@end
@jhugman

62. Little Languages
• Easily iterable
• Expressive
• The right level of abstraction
@jhugman

63. Design Principles
• A node.js like environment
• Bind native objects to Javascript
• Help teams work together
• Get out of your way
@jhugman

64. Get out of your way

65. How can we help you to
kick ass?

66. Summary!
• Native apps with node.js goodness
• JS apps with Native UI
• Tools to design APIs between them
• Tools to design APIs for device
access
@jhugman

67. Things we’ve thought of
to do next
• Building out extensions
• Other platforms: Chrome, WP7
• More IDL, docs
@jhugman

68. Resources
• kirinjs.org
• github.com/kirinjs/kirin
• cocoacontrols.com
• Android UI Patterns app
@jhugman

69. Wait. You want a demo?

70. Thanks
kirinjs.org
@kirinjs & @jhugman