JAVASCRIPT? IN MY IOS APP?

MIKELAZER-WALKER

@LAZERWALKER

JAVASCRIPT? IN MY IOS APP?

OR, SOMETIMES TO REDUCE COMPLEXITY YOU MUST ADD COMPLEXITY

1. What the project was2. How it was architected

3. Why JavaScript?

LOCATION-BASED STORYTELLING

HER LONG-BLACK HAIRHTTPS://PHIFFER.ORG/HLBH/

WHAT'S HARD ABOUT THIS?

WHAT'S HARD ABOUT THIS?

1. Data Sensors!

WHAT'S HARD ABOUT THIS?

1. Data Sensors!2. Narrative Models!

DIRECTED NODE GRAPHE.G. TWINE

http://aliendovecote.com/uploads/twine/kesha.html

RULE- / EVENT-BASED SYSTEM

E.G. LEFT 4 DEAD 2

"AI-Driven Dynamic Dialog Through Fuzzy Pattern Matching"

http://gdcvault.com/play/1015528/AI-driven-Dynamic-Dialog-through

WHAT DID I BUILD?

https://github.com/lazerwalker/storyboardhttps://github.com/lazerwalker/storyboard-ios

PhoneGap

PhoneGapReact Native

JAVASCRIPTCOREINTRODUCED (SORT OF) IN IOS 7

new Game(content)

Game.start()Game.stop()

Game.addOutput("type", function(content, passageId) { ... });Game.receiveInput("type", "value");

// --

Game.receiveMomentaryInput("type", "value");Game.completePassage(passageId);

import Foundation

typealias SensorInputBlock = (AnyObject) -> Void

protocol SensorInput { /* As a SensorInput, you should store this callback * and call it whenever your data changes. * * By convention, your implementation of onChange should immediately call * the passed callback with the current/initial value of your sensor. */ var onChange:SensorInputBlock? { get set }

let type:String}

import Foundationimport CoreMotion

class AltimeterSensor : SensorInput { let type = "altitude"

let altimeter = CMAltimeter()

var onChange:SensorInputBlock?

init() { if let queue = OperationQueue.current { altimeter.startRelativeAltitudeUpdates(to: queue) { (altitudeData, error) -> Void in if let data = altitudeData, let cb = self.onChange { cb(data.relativeAltitude) } } } }}

game.receiveInput("altitude", data.relativeAltitude)

WHY?

SHORT FEEDBACK

LOOPS

SHORT FEEDBACK LOOPS

1. Test Location-Based Content Without a Device

SHORT FEEDBACK LOOPS

1. Test Location-Based Content Without a Device2. Test New Content Without A Recompile

SHORT FEEDBACK LOOPS

1. Test Location-Based Content Without a Device2. Test New Content Without A Recompile

3. Test Core Engine Work Quickly

CROSS-PLATFORM

1. Production use in non-iOS contexts

CROSS-PLATFORM

1. Run in non-iOS contexts2. Authoring tools

LANGUAGE FEATURES

1. Dynamism

{ "nodeId": "4", "passages": [{ "passageId": "6", "type": "speech", "content": "I didn't tell you to go back down!" }], "predicate": { "altitude": { "lte": "graph.previousChoice.predicate.altitude.gte" } }}

LANGUAGE FEATURES

1. Dynamism2. Community

WHAT SUCKED?

1. JS interop and ES6 was trickier than it should be

IN PRACTICE

private func addInput(type:String, sensor:SensorInput) { sensor.onChange = { (value) -> Void in self.context.setObject(value, forKeyedSubscript: "input") self.context.setObject(type, forKeyedSubscript: "sensor") self.context.evaluateScript("game.receiveInput(sensor, input)") } }

WHAT SUCKED?

1. JS interop and ES6 was trickier than it should be2. Potential performance issues?

WHAT SUCKED?

1. JS interop and ES6 was trickier than it should be2. Potential performance issues?

3. Swift and Objective-C are pretty nice!

WHAT SUCKED?

1. JS interop and ES6 was trickier than it should be2. Potential performance issues?

3. Swift and Objective-C are pretty nice!4. Context switching is minorly annoying

"SO, I SHOULD OBVIOUSLY JUST WRITE EVERYTHING IN JAVASCRIPT, RIGHT?"

SOMETIMES TO REDUCE COMPLEXITY YOU MUST

ADD COMPLEXITY

PROGRAMMING LANGUAGES ARE TOOLS"If all you have is truisms about only having a hammer..."

Thanks!

@lazerwalker