iOS development with JS and Cordova, is it time to Swift?

arnaudbenard.com

Transcript

1. IOS DEVELOPMENT WITH JAVASCRIPT AND CORDOVA, IS IT TIME TO SWIFT? @arnaudbenard
2. ABOUT ME • Electrical engineer to web developer • Work at Streethub • Past projects: movies.io, Khan Academy Lite
3. CONTENT • Case study of the Streethub iPhone app • What we learned from it • Swift and the future
4. WHAT IS CORDOVA? • Platform for building mobile apps • Exposes Devices APIs (camera, GPS,…) with a JavaScript interface • Targets multiple platforms (iOS, Android, Windows Phone, FireOS, FirefoxOS…)
5. HTML, CSS, Javascript Plugins Client application plugin.camera plugin.geolocation plugin.vibration Device Code Device Code Device Code cordova.js Cordova Device Runtime
6. ECOSYSTEM • Official and third-party plugins on http:// plugins.cordova.io/ • Third-party plugins don’t support all the platforms • Easy to add plugins via the command line
7. PLUGINS ARE EASY TO USE ! $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova- plugin-geolocation.git! ! navigator.geolocation.getCurrentPosition(geolocationSuccess, ! [geolocationError], ! [geolocationOptions]);! BASH JAVASCRIPT
8. CLIENT APPLICATION • Single page applications running in web view • jQuery Mobile, Dojo Mobile, Sencha Touch, Angular.js (Iconic) • Plugins accessible from window object (or cordova.require)
9. WHY DID WE USE CORDOVA? • Multi-platforms • Reuse existing Javascript code • In-house Javascript developers • Fast iteration
10. 6 WEEKS
11. OUR STACK • Front-end: Ember used as Single-Page Application framework • Backend: Node.js (API already built) • Only target iOS
12. JUST LIKE A WEB APP • Debug in the browser • Cordova simulator with Ripple • Simulate any device • Simulate geolocation
13. AND BETTER • Assets size doesn’t matter • Code reusability (current stack or JS resources) • Everybody can participate (design in HTML/CSS) • Only Safari Mobile compatibility to manage • Backend!: API versioning and payload management
14. FIRST WALL • Google Maps Javascript API • Slow performances and scrolling experience • Cordova MapKit plugin • Limited functionalities
15. SECOND WALL • Image gallery • Large number of HTTP requests • Deferred scrolling • Solution • Caching with FileTransfer plugin
16. PLUGIN INSIDE A COMPONENT Client application plugin.FileTransfer Obj-C Code cordova.js Cordova Device Runtime Web component Ember app
17. SEPARATION OF CONCERNS • JSON data massaging in client • Computation heavy in iOS • Objective-C (C) for maths • Example: Maps
18. WRITE C WITH CORDOVA ! char* first= "First";! char* second = "Second";! char * s = malloc(snprintf(NULL, 0, "%s %s", first, second) + 1);! sprintf(s, "%s %s", first, second);! ! var s = ["First","Second"].join(" “);! http://stackoverflow.com/questions/1383649/concatenating-strings-in-c-which-method-is-more-efficient C JAVASCRIPT
19. LAST BUT NOT LEAST • Lose all the built-in iOS goodness • Scrolling • Animations • Gestures • Back buttons
20. SWIFT • 1.0 released • Compiled, typed language • Syntax close to JavaScript • Functional programming patterns • More infos on syntax: https://speakerdeck.com/ jpsim/swift-for-javascript-developers
21. MOST USED • HTTP requests • Async callbacks/Promises • Functional tool-belt (lo-dash, underscore)
22. HTTP REQUESTS ! request.post("http://service.com/upload", {"foo": “bar”},! function (error, response, body) {! ! })! ! Alamofire.request(.POST, "http://service.com/upload", parameters: ["foo": "bar"])! .response { (request, response, data, error) in! ! }! JAVASCRIPT SWIFT
23. PROMISES ! request.getAsync(“http://service.com/img/1”).then(function(data) {! ! })! .catch(function(err){! ! })! .finally(function() {! ! }); ! NSURLConnection.GET(“http://service.com/img/1”).then{ data in! ! }! .catch { error in! ! }! .finally {! ! }! JAVASCRIPT SWIFT
24. FUNCTIONAL TOOL-BELT ! // pluck! _.pluck([{"age": 20}, {"age": 30}, {"age: 40"}], “age”);! => [20, 30, 40]! ! // chaining! _.chain([1, 2], 3, [[4], 5]]).flatten().first().value();! => [1]! ! // pluck! let arr : Dictionary<String, Int>[] = [["age": 20], ["age": 30], ["age": 40]]! $.pluck(arr, value: "age") ! => [20, 30, 40]! ! // chaining! $(array: [[1, 2], 3, [[4], 5]]).flatten().first().value()! as Int[] ! => [1]! JAVASCRIPT SWIFT
25. SWIFT WITH CORDOVA • Same syntax: makes extending plugins easier • iOS 8 brings WKWebView • 20% JS performance gain • Improved message handling and script injection • Cordova: no need to learn iOS API http://developer.telerik.com/featured/why-ios-8s-wkwebview-is-a-big-deal-for-hybrid-development/ http://nshipster.com/wkwebkit/
26. CONCLUSION • Cordova plugins as components for native mobile functionalities • Swift makes plugins easier to develop (lower barrier to entry)
27. THANK YOU @arnaudbenard
28. LINKS http://stackoverflow.com/questions/1383649/concatenating-strings-in-c-which-method- is-more-efficient http://developer.telerik.com/featured/why-ios-8s-wkwebview-is-a-big-deal-for-hybrid- development/ http://nshipster.com/wkwebkit/ https://github.com/mikeal/request https://github.com/Alamofire/Alamofire https://github.com/petkaantonov/bluebird/blob/master/API.md https://github.com/mxcl/PromiseKit http://lodash.com/docs https://github.com/ankurp/Dollar.swift