We are happy to host Benny Weingarten-Gabbay, Senior Software Engineer at eBay at our offices. Benny presents BetterContent, a tool that allows editing of an iOS mobile app in runtime, in a fun and easy way. Read more on our DevBlog: https://connect.liveperson.com/community/developers/blog/2015/03/26/mobile-app-real-time-content-modifications-using-websockets

2. BetterContent
Benny Weingarten-Gabbay
gardenofwine
gardenofwine@gmail.com

3. Once upon a time,
there was an app
Home Screen
Title:
“MY ACTIVITY”

4. One day, the PM said,
“Lets change the title”
Home Screen
Title:
“My RECENT ACTIVITY”

5. Inefficiency
Developer
Product Manager
Marketing Manager
Legal Advisor
UX specialist Designer

6. Better Efficiency
Developer
Product Manager
Marketing Manager
Legal Advisor
UX specialist Designer

7. Runtime editors
Mac Apps
Spark Inspector

8. Runtime editors
Native plugins

9. Runtime editors
A/B testing frameworks

10. Requirements
● Easy & Fun to use
● Easy installation
● Little/No configuration
● Public & Private access
● Free
● Open source

11. Enter: BetterContent
Immediately,
at runtime
Buy
now!
Buy
now!

12. bettercontent.herokuapp.com
Buy
now!
Immediately,
at runtime
Buy
now!

13. DEMO

14. BetterContent
Buy
now!

15. BetterContent
Buy
now!
Buy
now!

16. Free Hosting Services

17. Websocket Implementation
VS

18. Tool Architecture
Buy
now!
1. Serialized NSDictionary
2. Modification JSON
Native app
Server
web client
Buy
now!

19. Native Architecture
Scanner
A repeating NSTimer scanner

20. Native Architecture
Scanner
NSDictionary
“0x7cea4590”
“0x7a0b9cf0”
“0x79e7bd70”
“0x79ea0d90”

21. Native Architecture
Scanner
NSDictionary
“0x7cea4590”
“0x7a0b9cf0”
“0x79e7bd70”
“0x79ea0d90”
Weak References*
*MAZeroingWeakRef

22. Native Architecture
Hook for app start
+ (void)load {
[[NSNotificationCenter defaultCenter]
addObserver:self
selector:@selector(startEngine)
name:UIApplicationDidFinishLaunchingNotification
object:nil];
}

23. @implementation UILabel (BTCLabel)
- (BOOL)btcIsSerializable{
return YES;
}
- (NSString *)btcClass{
return @"label";
}
Native Architecture
Serializer

24. Native Architecture
Serializer
@implementation UILabel (BTCLabel)
- (NSDictionary *)btcAttributes{
return @{@"text": self.btcSafeText,
@"font": @{
@"pointSize" : @(self.font.pointSize)
@"color": [self btcHexColor]}};
}
- (void)updateWithComponent:(BTCComponent *)newComponent{
self.text = [newComponent.attributes objectForKey:@"text"];
}

25. Native packaging
VS

26. Server Architecture
● Node.js, gulp build system
● based on heroku-examples/node-ws-test
● Simple websocket protocol
● Mostly a data pipe between Native App
and web app.

27. 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 === 'ui') { ... }
if (message.type === 'ping') { ... }
});
});

28. Web Client Architecture
● One big js file
● Separate component for each native class
● Currently only supports label editing

29. Web Client Architecture
Parser
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);
}
}

30. The Future
● Additional components
● Additional attributes
● Native API for app control over
functionality
● Heroku templates
● iOS Framework in addition to pod
● Android support

31. Content Management

32. The Holy Grail
hands free content management
1. Use BetterContent to scrape content
2. Build a content document
3. Native app uses said document for content
4. Native app updates document from server
5. Document is editable from the server

33. The Holy Grail
Screen 1 Screen 2 .strings file
1. Scrape content 2. Create Content Document

34. The Holy Grail
4. App downloads updates
Copy
3. Copy Content Document
.strings
file

35. BetterContent
http://bettercontent.herokuapp.com
Benny Weingarten-Gabbay
gardenofwine
gardenofwine@gmail.com