Where Node.JS Meets iOS

5,014 views

Published on

Writing iOS apps in Javascript is not a new idea, anymore, at least since companies like Appcelerator (Titanium) built entire business models around corresponding frameworks.

And yet, Apple manages to open up two exciting new possibilities during the WWDC 2013: The release of the JavaScriptCore Framework as a public API on iOS and OS X, as well as the announcement of an Objective-C to Javascript Bridge.

I'd like to talk to you about my experiences with these new bridge-technologies, the new ways in which you can use them and finally present to you my own project; Node.app — a Node.js implementation for iOS.

Published in: Technology, Design
2 Comments
5 Likes
Statistics
Notes
  • @tommypane I know the project ;) What I can read from their article is that it is very basic atm, and with no Node.js interface. I honestly don't know if this could be a viable alternative.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice work but check (jxcore llvm) (native app development for ios using JS)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,014
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
38
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Where Node.JS Meets iOS

  1. 1. WHERE NODE.JS MEETS IOS Enabling Node.JS Technology for Mobile Applications
  2. 2. HI! • Sam (@periping) (github.com/srijs) • CS Student at LUH • Working at doctape (node.js & mobile) • Javascript, Objective-C, plain C, Haskell
  3. 3. WHERE NODE.JS MEETS IOS Enabling Node.JS Technology for Mobile Applications
  4. 4. JAVASCRIPT ON MOBILE.
  5. 5. BAD REPUTATION
  6. 6. BAD REPUTATION 1.“Slow”
  7. 7. BAD REPUTATION 1.“Slow” Rough “Benchmarks” on iPhone 4S: a) Fill an array (NSMutableArray vs. Array) with 1.000.000 strings b) Call a function/method 1.000.000 times
  8. 8. BAD REPUTATION Fill an array with 1.000.000 strings (sec.) Call a function/method 1.000.000 times (sec.)
  9. 9. BAD REPUTATION Fill an array with 1.000.000 strings (sec.) Foundation JavaScript 0 0.095 0.19 0.285 0.38 Call a function/method 1.000.000 times (sec.)
  10. 10. BAD REPUTATION Fill an array with 1.000.000 strings (sec.) Foundation JavaScript 0 0.095 0.19 0.285 0.38 Call a function/method 1.000.000 times (sec.) Foundation JavaScript 0 0.15 0.3 0.45 0.6
  11. 11. BAD REPUTATION NSMutableArray *a = [NSMutableArray new]; for (int i = 0; i < 1000000; i++) { a[i] = @“Hello World”; } (function () { var a = []; for (var i = 0; i < 1000000; i++) { a[i] = ‘Hello World’; } })(); for (int i = 0; i < 1000000; i++) { [self exampleMethod]; } (function () { var fn = function () { return; }; for (var i = 0; i < 1000000; i++) { fn(); } })(); - (void)exampleMethod { return; }
  12. 12. BAD REPUTATION
  13. 13. BAD REPUTATION 2.“Bloated”
  14. 14. BAD REPUTATION 2.“Bloated” 3.“Memory Hungry”
  15. 15. HOW TO JS / IOS
  16. 16. HOW TO JS ON IOS Web View w/ HTML/CSS/JS Content
  17. 17. HOW TO JS ON IOS Web View w/ HTML/CSS/JS Content A. Slow start-up
  18. 18. HOW TO JS ON IOS Web View w/ HTML/CSS/JS Content A. Slow start-up B. Consumes lots of memory
  19. 19. HOW TO JS ON IOS Bundle own JS Engine
  20. 20. HOW TO JS ON IOS Bundle own JS Engine A. Bloated Binary
  21. 21. HOW TO JS ON IOS Bundle own JS Engine A. B. Bloated Binary High memory footprint
  22. 22. BAD REPUTATION 2.“Bloated” 3.“Memory Hungry”
  23. 23. HOW TO JS ON IOS JavaScriptCore Framework on iOS7 Low-overhead JS Context
  24. 24. EXISTING SOLUTIONS.
  25. 25. LANDSCAPE HTML UI Platform bridge
  26. 26. LANDSCAPE HTML UI Platform bridge
  27. 27. LANDSCAPE Touch HTML UI Platform bridge
  28. 28. LANDSCAPE Titanium Touch HTML UI Platform bridge
  29. 29. LANDSCAPE Titanium PhoneGap Touch HTML UI Platform bridge
  30. 30. TECHNOLOGY HTML UI Platform bridge
  31. 31. TECHNOLOGY HTML UI Platform bridge
  32. 32. TECHNOLOGY Proprietary APIs HTML UI Platform bridge
  33. 33. TECHNOLOGY Proprietary APIs HTML UI Platform bridge
  34. 34. CAN WE DO BETTER?
  35. 35. TECHNOLOGY ?
  36. 36. TECHNOLOGY ? Frontend
  37. 37. TECHNOLOGY ? Frontend Backend
  38. 38. Y U SO PROPRIETARY? Ti.Network.Socket.createTCP({ connected: function (e) {…} });
  39. 39. Y U SO PROPRIETARY? Ti.Network.Socket.createTCP({ connected: function (e) {…} }); net.createServer(function (s) { … });
  40. 40. Y U SO PROPRIETARY? Ti.Stream.write(e.socket, Ti.createBuffer({ value: ‘Hello World' }), cb);
  41. 41. Y U SO PROPRIETARY? Ti.Stream.write(e.socket, Ti.createBuffer({ value: ‘Hello World' }), cb); socket.write( new Buffer(‘Hello World’) );
  42. 42. TECHNOLOGY HTML UI Platform bridge
  43. 43. TECHNOLOGY HTML UI Platform bridge
  44. 44. TECHNOLOGY HTML UI Platform bridge
  45. 45. LET’S MAKE NODE.JS FOR MOBILE!
  46. 46. AKA “ARE YOU NUTS?!”
  47. 47. PROOF-OF-CONCEPT
  48. 48. PROOF-OF-CONCEPT
  49. 49. PROOF-OF-CONCEPT >20.000 Visits ! >1.000 Subscribers ! >900 Stars on GitHub
  50. 50. PROOF-OF-CONCEPT >20.000 Visits ! >1.000 Subscribers ! >900 Stars on GitHub “Can't wait to see where this goes. Hack on my man, Hack on!”
  51. 51. LET’S ACTUALLY DO THIS!
  52. 52. NODE.JS CODEBASE Source: ohloh.net/p/node
  53. 53. NODE.JS CODEBASE ~1.5M LOC Source: ohloh.net/p/node
  54. 54. NODE.JS CODEBASE Node.js API native modules (js) v8 c-ares (dns) http_parser bindings (c++) libuv (io) OS openssl zlib
  55. 55. NODE.JS CODEBASE Node.js API native modules (js) v8 c-ares (dns) http_parser bindings (c++) libuv (io) OS openssl zlib
  56. 56. NODE.JS CODEBASE Node.js API native modules (js) v8 JavaScriptCore.framework c-ares (dns) http_parser bindings (c++) libuv (io) OS openssl zlib
  57. 57. NODE.JS CODEBASE Node.js API native modules (js) v8 JavaScriptCore.framework c-ares (dns) http_parser bindings (Obj-C) bindings (c++) libuv (io) OS openssl zlib
  58. 58. APPROACH bindings (c++) ~20.000 LOC • • • • • • • • Filesystem Crypto HTTP Parser zlib TCP Timer TLS UDP src$ wc -l *.cc 1180 cares_wrap.cc 196 fs_event_wrap.cc 136 handle_wrap.cc 3442 node.cc 668 node_buffer.cc 1066 node_constants.cc 631 node_contextify.cc 141 node_counters.cc 4179 node_crypto.cc 449 node_crypto_bio.cc 265 node_crypto_clienthello.cc 327 node_dtrace.cc 68 node_extensions.cc 1100 node_file.cc 603 node_http_parser.cc 58 node_javascript.cc 67 node_main.cc 305 node_os.cc 143 node_stat_watcher.cc 99 node_watchdog.cc 206 node_win32_etw_provider.cc 335 node_win32_perfctr_provider.cc 611 node_zlib.cc 293 pipe_wrap.cc 296 process_wrap.cc 117 signal_wrap.cc 499 smalloc.cc 604 stream_wrap.cc 751 string_bytes.cc 464 tcp_wrap.cc 160 timer_wrap.cc 724 tls_wrap.cc 183 tty_wrap.cc 442 udp_wrap.cc 65 uv.cc 20873 total
  59. 59. APPROACH bindings (Obj-C) ~2.000 LOC • • • • • Filesystem HTTP Parser TCP Timer Buffer Nodelike$ wc -l *.m 86 NLBinding.m 119 NLBindingBuffer.m 213 NLBindingConstants.m 309 NLBindingFilesystem.m 35 NLBindingSmalloc.m 34 NLBindingUv.m 162 NLCaresWrap.m 187 NLContext.m 364 NLHTTPParser.m 83 NLHandle.m 26 NLProcess.m 254 NLStream.m 197 NLTCP.m 70 NLTimer.m 33 NLUDP.m 2172 total
  60. 60. BUT DOES IT WORK?
  61. 61. STOP! DEMOTIME!
  62. 62. https://itunes.apple.com/app/id793774475
  63. 63. WHAT ALREADY WORKS…
  64. 64. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable
  65. 65. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable Stream Events Buffer Reliable
  66. 66. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable Stream File System Events Timers Buffer Reliable Reliable
  67. 67. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable Stream File System Events Timers Buffer Reliable DNS Basic Reliable
  68. 68. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable Stream File System Events Timers Buffer Reliable DNS Basic Reliable Net, HTTP Unstable
  69. 69. WHAT’S THE USE…
  70. 70. WHAT’S THE USE… A. JavaScript Logic inside a native App
  71. 71. WHAT’S THE USE… A. JavaScript Logic inside a native App B. Attach to a WebView (á la node-webkit)
  72. 72. WHAT’S TO COME…
  73. 73. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…)
  74. 74. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…) • libuv GCD integration
  75. 75. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…) • libuv GCD integration • Testing, testing, testing…
  76. 76. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…) • libuv GCD integration • Testing, testing, testing… • Integration with Titanium, PhoneGap, others…
  77. 77. PARTICIPATE
  78. 78. PARTICIPATE • Download the App from the AppStore
  79. 79. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably”
  80. 80. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably” • Subscribe to the Mailing List
  81. 81. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably” • Subscribe to the Mailing List • File GitHub Issues
  82. 82. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably” • Subscribe to the Mailing List • File GitHub Issues • Spread the word
  83. 83. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably” • Subscribe to the Mailing List • File GitHub Issues • Spread the word • Talk to me if you want to participate
  84. 84. Q?
  85. 85. nodeapp.org github.com/node-app https://itunes.apple.com/app/id793774475 @periping github.com/srijs Image Credits: http://bassetthounds.wordpress.com/category/basset-hound/ http://woofgallery.org/category/happy-dog-photos/

×