Slides prepared for Over the Air

1. Building Apps for
Billions of Devices
@tidoust
1 June 2012
Over the Air,
Bletchley Park, UK
Friday, June 1, 12

2. The about page
François Daoust / @tidoust
Startup luver since 2000
MotionBridge - bubble startup - 6 years
Microsoft - oldish? startup - 2 years
W3C - one Web startup - 4 years
Joshfire - Factory startup - 0.523487 years and counting
“Relever le défi du Web mobile” with @dontcallmedom
(a book written in French, how weird...)
Friday, June 1, 12

3. Talking about
Connected objects
Cross-device App generation
Combinatorial explosion
Web standards
One Web... Oh boy, that old concept, again?!? Why?
Friday, June 1, 12

4. The Internet of Things
fuckyeahinternetfridge.tumblr.com
Friday, June 1, 12

5. The Internet of Things
2020: 25 Billion devices
Friday, June 1, 12

6. http://lemiroir.joshfire.com/
Friday, June 1, 12

7. Fragmentation at all levels
Form factors
Platforms & Stores
Perfs & Features
UIs
SDKs Java
C++ C# JavaScript
ObjC CE-HTML
Friday, June 1, 12

8. Friday, June 1, 12

9. HTML5 is the wave
But where are the surfboards?
Friday, June 1, 12

10. In other words...
Why must I install & master 42 different SDKs to build my apps?
Why/WTF do I have to start each of my apps (almost) from
scratch for each platform?
Friday, June 1, 12

11. Where is the
WordPress
for Apps?
Friday, June 1, 12

12. Demo!
Friday, June 1, 12

13. Joshfire Factory for developers
Tech overview
Friday, June 1, 12

14. New app?
Start from a template Import your code
Customize w/ addons package.json
Fork it Framework agnostic
A few examples of templates =>
Friday, June 1, 12

15. Friday, June 1, 12

16. Friday, June 1, 12

17. Friday, June 1, 12

18. Friday, June 1, 12

19. Data sources
Implemented in JS (wrappers for APIs, DBs, ...)
Client and/or server-side (perfs, security, cross-origin restrictions)
Standard-friendly libraries (http, xml, base64, async, _, iso8601...)
Normalization w/ schema.org
Can define configuration options
=> form in Factory (based on JSON Schema)
Friday, June 1, 12

20. Add-ons
Hooks everywhere:
HTML body/head
Build time
Friday, June 1, 12

21. Build & deploy everywhere
Native apps: Cordova, Custom containers
Web apps: Push to hosting partners, S3, FTP, ...
TVs, obscure platforms: VMs with SDKs on our side
The sky is the limit
Custom hooks, stores, platforms, ...
Linux ISOs
Node.js
Friday, June 1, 12

22. Money?
Marketplace for templates, data, add-ons, deploys
Define your upfront or monthly pricing, if any
70/30 rev share
Contact us
Friday, June 1, 12

23. App architecture
Friday, June 1, 12

24. Data normalization?
Lots of service providers... and counting!
One service provider = One API
One service provider = One response format
combinatorial explosion!
Friday, June 1, 12

25. Example with images
Flickr Instagram Tumblr
{ { {
"id": "6599755345", "type": "image", "blog_name": "joshfiretest",
"title": "A VW bus in front of lake", "created_time": "1338466731", "id": 20168207596,
"description": { "link": "http://[...]/LSm7fMuskm/", "post_url": "http://[...]/chaumont-with",
"_content": "Riding an old Volkswagen "images": { "type": "photo",
bus!" "thumbnail": { "date": "2012-03-30 13:10:11 GMT",
}, "url": "http://[...]/761.jpg", "timestamp": 1333113011,
"dateupload": "1325245258", "width": 150, "caption": "<p>Picture <strong>taken</
"datetaken": "2011-12-30 03:40:58", "height": 150 strong> at Parc des Buttes Chaumont. (with
"datetakengranularity": "0", }, HTML in the caption ;)).</p>",
"ownername": "tidoust", }, "photos": [
"latitude": 47.582083, "caption": { {
"longitude": -120.257034, "created_time": "1338466755", "caption": "",
"accuracy": "10", "text": "Created with #factory", "original_size": {
"url_sq": "http://[...]/98cd3a90e9_s.jpg", }, "width": 1280,
"height_sq": 75, "id": "203396146901207334_38633761", "height": 1280,
"width_sq": 75, "user": { "url": "http://[...]/1280.jpg"
"url_l": "http://[...]/98cd3a90e9_b.jpg", "username": "fungoku", }
"height_l": "768", "profile_picture": "http://[...]/36391.jpg", }
"width_l": "1024" } ]
} } }
Friday, June 1, 12

26. Schema.org
Friday, June 1, 12

27. JSON serialization
{
"@type": "ImageObject",
"url": "http://[...]chaumont",
"author": [{
"@type": "Person",
"name": "joshfire"
}],
"datePublished": "2012-03-30T13:10:11Z",
"name": "Picture taken at Parc des Buttes Chaumont. (with HTML in the caption ;))",
"contentURL": "http://[...]/1280.jpg",
"width": 1280,
"height": 1280
}
Friday, June 1, 12

28. @type for a JS property,
seriously ?!?
Friday, June 1, 12

29. Yes, coming from JSON-LD,
“LD” for Linked Data
That’s Semantic Web for dummies
developers
Friday, June 1, 12

30. Define the @context
{
"@context": {
"schema": "http://schema.org",
"Person": "schema:Person",
"name": "schema:name",
"foaf": "http://xmlns.com/foaf/0.1/"
},
"@type": "Person",
"name": "Francois Daoust",
"foaf:nick": "tidoust"
}
... and proceed as usual
Friday, June 1, 12

31. Meanwhile, in templates...
// Retrieve feed from “some” service provider.
// No need to know which one!
var news = Joshfire.factory.getDataSource("news");
news.find({}, function (err, data) {
if (err) {
// An error occurred (network, service unavailable, etc.)
}
else {
// Parse and store resulting data
_.each(data.entries, function (item, idx) {
var process = function (item) {
// No need to know where the item comes from!
}
return process(item);
});
}
});
Friday, June 1, 12

32. Designing templates
Thou shalt share code across devices
Thou shalt think Responsive Web Design
Thou shalt use feature detection
Thou shalt “give your two cents” in responsive image talks
... and that shall not be enough, I’m afraid :-(
Friday, June 1, 12

33. In practice
Different versions for different classes of devices
(hard to use the same version on TV!)
User-Agent sniffing is still useful in 2012
(no, it does not mean the world is coming to an end)
Fragmentation requires using all sorts of shims
Testing and fixing on actual devices consumes the time that you
don’t have
Friday, June 1, 12

34. Open Source is great!
ACE iScroll oauth
Almond jQuery openid
async jQuery File Upload Plugin PhotoSwipe
Backbone jQuery UI Recurly.js
bcrypt jquery.simplemodal RequireJS
Bootstrap jquery.tmpl restler
browserify JSV (JSON-schema- rimraf
colors validator) sax
connect knox semver
connect-mongo less Transloadit jQuery SDK
ejs mime uglify-js
es5-shim mkdirp underscore
everyauth mongodb useragent
express mongoose Wink Toolkit
formidable mustache wysihtml5
hashlib node.js xml2js
history node-statsd yamlparser
hooks node-uuid Zepto
Friday, June 1, 12

35. Developer doc at:
http://developer.joshfire.com
Friday, June 1, 12

36. Factory .next
Upcoming features
Friday, June 1, 12

37. Upcoming
More templates – hey, you can write templates!
More datasources – hey, you can write datasources!
More deploys
Datasources operators à la Yahoo! Pipes
Local storage, offline support
Back-end / Front-end – mixing the best of two worlds
Friday, June 1, 12

38. Summary
Friday, June 1, 12

39. Summary
The future is full of connected objects and it’s going to be cool :-)
Combinatorial explosion is bad for your hair =|:-(
Web standards forever! ♥
Factor your apps to save time and $
Linked Data is good and you’re already using it ;-)
Friday, June 1, 12

40. One more thing...
Friday, June 1, 12

41. The largest JavaScript conference in France
http://dotjs.fr
Friday, June 1, 12

42. Date & Venue
30 November 2012
(so before the end of the world)
Paris, France
at Le 104 (www.104.fr)
Expecting 400 people
Tickets available!
An option is pending for a bigger venue
Friday, June 1, 12

43. First confirmed speakers (1)
Jeremy Ashkenas
Created CoffeeScript, Backbone.js, Underscore.js
http://ashkenas.com
Mathias Bynens
Created jsperf.com, contributes to HTML5 Boilerplate
http://mathiasbynens.be
Christian Amor Kvalheim
Created the MongoDB driver for Node.js
http://christiankvalheim.com
Friday, June 1, 12

44. First confirmed speakers (2)
Ricardo Cabello aka Mr.doob
Created Three.js & many acclaimed JavaScript demos
http://mrdoob.com
Alex Russell
Created Dojo, member of ECMA TC39 (JavaScript standards)
http://infrequently.org
Bert Belder
Member of the Node.js core team
https://github.com/piscisaureus
Many more world-class speakers to be announced!
Friday, June 1, 12

45. Thank you for your attention!
Questions?
@tidoust
francois@joshfire.com
factory.joshfire.com
Friday, June 1, 12