Where Node.js Meets iOS

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.

Transcript

1. WHERE NODE.JS MEETS IOS Enabling Node.JS Technology for Mobile Applications
2. HI! • Sam (@periping) (github.com/srijs) • CS Student at LUH • Working at doctape (node.js & mobile) • Javascript, Objective-C, plain C, Haskell
3. WHERE NODE.JS MEETS IOS Enabling Node.JS Technology for Mobile Applications
4. JAVASCRIPT ON MOBILE.
5. BAD REPUTATION
6. BAD REPUTATION “Slow” 1.
7. BAD REPUTATION “Slow” 1. 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. BAD REPUTATION Fill an array with 1.000.000 strings (sec.) Call a function/method 1.000.000 times (sec.)
9. BAD REPUTATION Fill an array with 1.000.000 strings (sec.) Call a function/method 1.000.000 times (sec.) Foundation JavaScript 0 0.095 0.19 0.285 0.38
10. BAD REPUTATION Fill an array with 1.000.000 strings (sec.) Call a function/method 1.000.000 times (sec.) Foundation JavaScript 0 0.095 0.19 0.285 0.38 Foundation JavaScript 0 0.15 0.3 0.45 0.6
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]; } - (void)exampleMethod { return; } (function () { var fn = function () { return; }; for (var i = 0; i < 1000000; i++) { fn(); } })();
12. BAD REPUTATION
13. BAD REPUTATION “Bloated” 2.
14. BAD REPUTATION “Bloated” 2. “Memory Hungry” 3.
15. HOW TO JS / IOS
16. HOW TO JS ON IOS Web View w/ HTML/CSS/JS Content
17. HOW TO JS ON IOS Web View w/ HTML/CSS/JS Content A. Slow start-up
18. HOW TO JS ON IOS Web View w/ HTML/CSS/JS Content A. Slow start-up B. Consumes lots of memory
19. HOW TO JS ON IOS Bundle own JS Engine
20. HOW TO JS ON IOS Bundle own JS Engine A. Bloated Binary
21. HOW TO JS ON IOS Bundle own JS Engine A. Bloated Binary B. High memory footprint
22. BAD REPUTATION “Bloated” 2. “Memory Hungry” 3.
23. HOW TO JS ON IOS JavaScriptCore Framework on iOS7 Low-overhead JS Context
24. EXISTING SOLUTIONS.
25. HTML UI Platform bridge LANDSCAPE
26. HTML UI Platform bridge LANDSCAPE
27. HTML UI Platform bridge Touch LANDSCAPE
28. HTML UI Platform bridge Titanium Touch LANDSCAPE
29. HTML UI Platform bridge PhoneGap Titanium Touch LANDSCAPE
30. Platform bridge HTML UI TECHNOLOGY
31. Platform bridge HTML UI TECHNOLOGY
32. Platform bridge HTML UI Proprietary APIs TECHNOLOGY
33. Platform bridge HTML UI Proprietary APIs TECHNOLOGY
34. CAN WE DO BETTER?
35. TECHNOLOGY ?
36. Frontend TECHNOLOGY ?
37. Backend Frontend TECHNOLOGY ?
38. Ti.Network.Socket.createTCP({ connected: function (e) {…} }); Y U SO PROPRIETARY?
39. Ti.Network.Socket.createTCP({ connected: function (e) {…} }); net.createServer(function (s) { … }); Y U SO PROPRIETARY?
40. Ti.Stream.write(e.socket, Ti.createBuffer({ value: ‘Hello World' }), cb); Y U SO PROPRIETARY?
41. Ti.Stream.write(e.socket, Ti.createBuffer({ value: ‘Hello World' }), cb); socket.write( new Buffer(‘Hello World’) ); Y U SO PROPRIETARY?
42. Platform bridge HTML UI TECHNOLOGY
43. Platform bridge HTML UI TECHNOLOGY
44. Platform bridge HTML UI TECHNOLOGY
45. LET’S MAKE NODE.JS FOR MOBILE!
46. AKA “ARE YOU NUTS?!”
47. PROOF-OF-CONCEPT
48. PROOF-OF-CONCEPT
49. >20.000 Visits ! >1.000 Subscribers ! >900 Stars on GitHub PROOF-OF-CONCEPT
50. “Can't wait to see where this goes. Hack on my man, Hack on!” >20.000 Visits ! >1.000 Subscribers ! >900 Stars on GitHub PROOF-OF-CONCEPT
51. LET’S ACTUALLY DO THIS!
52. NODE.JS CODEBASE Source: ohloh.net/p/node
53. NODE.JS CODEBASE ~1.5M LOC Source: ohloh.net/p/node
54. NODE.JS CODEBASE OS Node.js API libuv (io) v8 c-ares (dns) http_parser zlib openssl native modules (js) bindings (c++)
55. NODE.JS CODEBASE OS Node.js API libuv (io) v8 c-ares (dns) http_parser zlib openssl native modules (js) bindings (c++)
56. NODE.JS CODEBASE OS Node.js API libuv (io) v8 c-ares (dns) http_parser zlib openssl native modules (js) bindings (c++) JavaScriptCore.framework
57. NODE.JS CODEBASE OS Node.js API libuv (io) v8 c-ares (dns) http_parser zlib openssl native modules (js) bindings (c++) JavaScriptCore.framework bindings (Obj-C)
58. bindings (c++) ~20.000 LOC 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 APPROACH • Filesystem • Crypto • HTTP Parser • zlib • TCP • Timer • TLS • UDP
59. bindings (Obj-C) ~2.000 LOC APPROACH • 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. BUT DOES IT WORK?
62. STOP! DEMOTIME!
64. https://itunes.apple.com/app/id793774475
65. WHAT ALREADY WORKS…
66. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable
67. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable Stream Events Buffer Reliable
68. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable File System Timers Reliable Stream Events Buffer Reliable
69. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable File System Timers Reliable DNS Basic Stream Events Buffer Reliable
70. WHAT ALREADY WORKS… Assertion Testing Path Punycode Query Strings URL Utilities Reliable File System Timers Reliable DNS Basic Net, HTTP Unstable Stream Events Buffer Reliable
71. WHAT’S THE USE…
72. WHAT’S THE USE… A. JavaScript Logic inside a native App
73. WHAT’S THE USE… A. JavaScript Logic inside a native App B. Attach to a WebView (á la node-webkit)
74. WHAT’S TO COME…
75. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…)
76. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…) • libuv GCD integration
77. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…) • libuv GCD integration • Testing, testing, testing…
78. WHAT’S TO COME… • More Core Modules (Crypto, Zlib,…) • libuv GCD integration • Testing, testing, testing… • Integration with Titanium, PhoneGap, others…
79. PARTICIPATE
80. PARTICIPATE • Download the App from the AppStore
81. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably”
82. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably” • Subscribe to the Mailing List
83. PARTICIPATE • Download the App from the AppStore • Test the modules that should work “reliably” • Subscribe to the Mailing List • File GitHub Issues
84. 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
85. 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
86. Q?
87. Image Credits: http://bassetthounds.wordpress.com/category/basset-hound/ http://woofgallery.org/category/happy-dog-photos/ nodeapp.org github.com/node-app @periping github.com/srijs https://itunes.apple.com/app/id793774475