BetterContent

iOS real time content modifications using websockets

Transcript

2. BetterContent Benny Weingarten-Gabbay gardenofwine gardenofwine@gmail.com
3. Content Fine Tuning
4. Content Fine Tuning Create Item Screen “Send your items to valets and they’ll sell it for you”
5. Content Fine Tuning Create Item Screen “Send your items to valets and they’ll sell it for you. You get 70% of the proceedings.”
6. Content Fine Tuning Review Compile/Install Modify
7. Circle of Inefficiency Developer Product Manager Marketing Manager Legal Advisor UX specialist Designer
8. Developer Better Efficiency Product Manager Marketing Manager Legal Advisor UX specialist Designer
9. DevTools for Web
10. DevTools for iOS Pony Debugger
11. DevTools for iOS BetterContent
12. bettercontent.herokuapp.com
13. DEMO
14. Requirements • Fun to use • Easy installation • Zero configuration • Private access • Free • Open source
15. Architecture 1. Serialized NSDictionary 2. Modification JSON Native app web client
16. Architecture 1. Serialized NSDictionary 2. Modification JSON Native app web client
17. Native Architecture Installation pod ‘BetterContent’ Podfile
18. Hook for app start + (void)load { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(startEngine) name:UIApplicationDidFinishLaunchingNotification object:nil]; } Native Architecture Configuration
19. Native Architecture Repeating task A repeating NSTimer scanner Runs every second
20. Native Architecture Scanner NSDictionary “0x7cea4590” “0x7a0b9cf0” “0x79e7bd70” “0x79ea0d90” key: memory address UIApplication.keyWindow
21. Native Architecture Scanner - (void)dealloc { [[NSNotificationCenter defaultCenter] removeObserver:self name:MyNotification object:nil]; [self.spinnerView stop]; } MyUIViewController
22. Native Architecture Scanner “0x7cea4590” “0x7a0b9cf0” “0x79e7bd70” “0x79ea0d90” Weak References* *MAZeroingWeakRef NSDictionary key: memory address UIApplication.keyWindow
23. Native Architecture Scanner
24. @implementation UILabel (BTCLabel) - (BOOL)btcIsSerializable{ return YES; } - (NSString *)btcClass{ return @"label"; } Native Architecture Serializer
25. Native Architecture Serializer @implementation UILabel (BTCLabel) - (NSDictionary *)btcAttributes{ return @{@"text": self.btcSafeText, @"font": @{ @"pointSize" : @(self.font.pointSize) @"color": [self btcHexColor]}}; } - (void)btcUpdateWithComponent:(NSDictionary *)newComponent{ self.text = [newComponent objectForKey:@"text"]; }
26. Architecture 1. Serialized NSDictionary 2. Modification JSON Native app web client
27. Websocket Implementation VS
28. Free Hosting Services based on heroku-examples/node-ws-test
29. Server Architecture var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({server: server}); wss.on('connection', function (ws) { ws.on('message', function (data, flags) { var message = JSON.parse(data); if (message.type === 'register') { ... } if (message.type === 'ping') { ... } if (message.type === 'ui') { /* ALL THE MAGIC HAPPENS HERE */ } }); });
30. Server Architecture function onUI(ws, message) { if (ws.appType == NATIVE_APP) { lastNativeMessages[ws.appName] = message; webClientSockets[ws.appName].send(JSON.stringify(message)); } if (ws.appType == WEB_CLIENT) { nativeSockets[ws.appName].send(JSON.stringify(message)); } }
31. Architecture Native app web client 1. Serialized NSDictionary 2. Modification JSON
32. Web Client Architecture • Single page app • Vanilla JS. • Modular code
33. BetterContent.Components.label = { draw: function(component, element){ setAttributesOnElement(component.attributes, element); // text, font element.setAttribute('contenteditable', true); element.addEventListener("input", function(event) { var element = event.srcElement; var diffJSON = [{ 'key': element.getAttribute('key'), 'attributes': {'text': element.innerText}}]; BetterContent.ws.send(diffJSON); }, false); } } Web Client Architecture Parser
34. Alternatives? 1. Serialized NSDictionary 2. Modification JSON Native app web client
35. Alternatives: Pony Debugger • Not intuitive • Doesn’t work
36. Alternatives: Spark Inspector • Not intuitive • Only Mac • $180 /developer Mac Apps
37. Alternatives: Native Extensions • Not intuitive • On-device editing
38. Alternatives: A/B frameworks • External server • Not main concern • Code intrusive
39. What’s next? • Android support • Additional components • Additional attributes • App control • Heroku templates • Integrate into ponydebugger/FLEX • iOS Framework in addition to pod
40. What’s next? Hands free content management
41. Hand free content management Screen 1 Screen 2 2. Use local content 1. First run No content
42. Hand free content management Screen 1 Screen 2 .strings file on the server 3. Scrape content 4. Create Content Document
43. Hand free content management .strings file server edit 5. Second run 6. Edit on Server
44. BetterContent http://bettercontent.herokuapp.com Benny Weingarten-Gabbay gardenofwine gardenofwine@gmail.com