Kirin - Making Single Page Web Apps with a Native UI

1,126 views
1,029 views

Published on

Learn more about what Kirin is, and how it is developing. This introduces a number of concepts, and is fairly code heavy.

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

  • Be the first to like this

No Downloads
Views
Total views
1,126
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Any web developer can do it.\n
  • - Hard to finish, to a high quality (webkit bugs, fragmentation)\n - UI isn't good enough yet: only imitating native, not performant.\n - UI tends towards one-size-fits all, not platform specific.\n
  • + Easy to start. You don't even need CSS or DOM. \n
  • Catchup: so difficult to style. Your designer won't like this.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Kirin - Making Single Page Web Apps with a Native UI

    1. 1. Kirin:Single Page Webappswith a Native UIJames Hugman
    2. 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. 3. There Will Be Code
    4. 4. Kirin is… • A Cross Platform Toolkit for building mobile apps • Write UI in native • Write business logic in Javascript • Open source@jhugman
    5. 5. Competition“So, it’s like …”
    6. 6. PhoneGap • a bunch of device APIs • a webview to build out your UI@jhugman
    7. 7. Titanium • a bunch of device APIs • a native UI built with its own APIs.@jhugman
    8. 8. Kirin • a bunch of device APIs • a native UI built with native SDKs.@jhugman
    9. 9. PhoneGap • Easy to start • Very lightweight@jhugman
    10. 10. PhoneGap • Hard to finish to a high quality • UI unlikely to be good enough • UI tends to one-size-fits-all@jhugman
    11. 11. Titanium • Easy to start • Uses native widgets@jhugman
    12. 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. 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. 14. But seriously, tell usabout Kirin
    15. 15. Architecture of Participation • “the nature of systems that are designed for user contribution” • Tim O’Reilly, 2004@jhugman
    16. 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. 17. Design Principles • A node.js like environment • Bind native objects to Javascript • Help teams work together • Get out of your way@jhugman
    18. 18. Common JS modules • Arrange your code into files • Each “module” has its own variable scope • require() and exports link modules together@jhugman
    19. 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. 20. npm: node.js package manager • Distributes your library • Manages your dependencies • 10,000+ packages available@jhugman
    21. 21. Installing kirin $ npm install kirin@jhugman
    22. 22. Installing kirin $ kirin-create app ~/my-first-app@jhugman
    23. 23. 10k+ packages for kirin $ npm search facebook $ npm install facebook-graph-client@jhugman
    24. 24. Design Principles • A node.js like environment • Bind native objects to Javascript • Help teams work together • Get out of your way@jhugman
    25. 25. Platform SDKs & Kirin • Anything can Javascript • Lifecycles • Extensions • Threading@jhugman
    26. 26. Anything can Javascript
    27. 27. A Typical Kirin App Native screen Javascript screen module Controller Model Your app Device API Device Access@jhugman
    28. 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. 29. Consider this JS: // called from native screen. exports.importantButtonClicked = function (value) {}@jhugman
    30. 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. 31. Lifecycles
    32. 32. Lifecycles, everywhere • Android: • onCreate, onStart, onResume, onPause, onStop, onDestroy • iOS: • viewDidLoad, viewWillAppear, viewDidAppear, viewWillDisappear, viewDidUnload, dealloc@jhugman
    33. 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. 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. 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. 36. iOS Lifecycles #import <KirinKit/KirinKit.h> @interface MyViewController : KirinUIViewController @end @implementation KirinUIViewController - (void) viewDidLoad { [super viewDidLoad]; [self bindScreen:@“MyScreenModule”]; } @end@jhugman
    37. 37. Extensions
    38. 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. 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. 40. Threading
    41. 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. 42. Design Principles • A node.js like environment • Bind native objects to Javascript • Help teams work together • Get out of your way@jhugman
    43. 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. 44. Native devs value: • compilers doing work for them • IDEs doing work for them • build tools doing work for them@jhugman
    45. 45. Javascript devs value: • Rapid prototyping and development • Expressive language constructs • Garbage collection@jhugman
    46. 46. Type safe calling of JS
    47. 47. Consider the method: // called from native screen. exports.importantButtonClicked = function (value) {};@jhugman
    48. 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. 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. 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. 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. 52. Foreign Function Interface calling native Implemented By Implemented by Implemented by Javascript Javascript Native calling javascript@jhugman
    53. 53. Different implementations Implemented by Implemented by Javascript iOS@jhugman
    54. 54. Same Shaped API Implemented by Implemented by Javascript Android@jhugman
    55. 55. “Isomorphic” “bi-layer” • Clean interface for JS to talk to • Clean interface for native to talk to • Everything kept in sync@jhugman
    56. 56. Bi-layer problems • Too many moving parts • Easy to break • Difficult to document • Important for porting@jhugman
    57. 57. The clean interface problem • Interacting components: • different languages • different contexts@jhugman
    58. 58. Interface Description Language • Properties! Methods! • Human readable and writeable • Generate interface.java and protocol.h files@jhugman
    59. 59. Interface Description Language "IMyScreen": { implementedBy: "native", methods: { "displayData:andUiEnabled:": [ {data: "IMyScreenRequest"}, {flag: "boolean"} ] } }, "IMyScreenModule": { implementedBy: "javascript", methods: { "onImportantButtonClick": [ {id: "integer"} ] } },@jhugman
    60. 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. 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. 62. Little Languages • Easily iterable • Expressive • The right level of abstraction@jhugman
    63. 63. Design Principles • A node.js like environment • Bind native objects to Javascript • Help teams work together • Get out of your way@jhugman
    64. 64. Get out of your way
    65. 65. How can we help you tokick ass?
    66. 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. 67. Things we’ve thought of to do next • Building out extensions • Other platforms: Chrome, WP7 • More IDL, docs@jhugman
    68. 68. Resources • kirinjs.org • github.com/kirinjs/kirin • cocoacontrols.com • Android UI Patterns app@jhugman
    69. 69. Wait. You want a demo?
    70. 70. Thankskirinjs.org@kirinjs & @jhugman

    ×