iOS real time content modifications using websockets

1. BetterContent
for a developer’s well being
Benny Weingarten-Gabbay
@gardenofwine

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

3. One day, the PM said,
“Lets change the title”
Home Screen
Title:
“ALL YOUR RECENT ITEMS”

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

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

6. Side note: Content Management
Desirable features:
● Central document for all
content
● Easy localization
● Change app content on
the fly
Reality:
● Not easy
● Mostly obtrusive
● Incomplete

7. Side note: Content Management

8. Reveal App

9. Spark Inspector

10. Optimizely

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

12. Requirements
● Publicly accessible
● Easy development
● Easy installation
● Easy configuration

13. Enter: BetterContent
Buy
now!
Buy
now!

14. Enter: BetterContent
Buy
now!
Buy
now!

15. Free Hosting Services
heroku labs:enable websockets

16. Native packaging
VS

17. Websocket Implementation
VS

18. Tool Architecture
Buy
now!
Buy
or
rent!
Native app
Server
web client

19. Native Architecture
● Hook for app start
● A repeating NSTimer scanner

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

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

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

23. Web Client Architecture
● Still work in progress
● One big js file
● Separate component for each native class
● Currently only supports label editing

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

25. The Holy Grail
Automatic content management
support
1. Use BetterContent to scrape content
2. Build a document with all apps content
3. Native app uses said document for content
4. Said document is editable from the server

26. BetterContent
https://github.com/gardenofwine/better-content-server
Benny Weingarten-Gabbay
@gardenofwine