Joshfire Factory: Building Apps for Billion of Devices

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

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 Joshﬁre - Factory startup - 0.523487 years and counting “Relever le déﬁ du Web mobile” with @dontcallmedom (a book written in French, how weird...)Friday, June 1, 12

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

The Internet of Things fuckyeahinternetfridge.tumblr.comFriday, June 1, 12

The Internet of Things 2020: 25 Billion devicesFriday, June 1, 12

http://lemiroir.joshﬁre.com/Friday, June 1, 12

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

Friday, June 1, 12

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

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

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

Demo!Friday, June 1, 12

Joshﬁre Factory for developers Tech overviewFriday, June 1, 12

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

Friday, June 1, 12

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 deﬁne conﬁguration options => form in Factory (based on JSON Schema)Friday, June 1, 12

Add-ons Hooks everywhere: HTML body/head Build timeFriday, June 1, 12

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.jsFriday, June 1, 12

Money? Marketplace for templates, data, add-ons, deploys Deﬁne your upfront or monthly pricing, if any 70/30 rev share Contact usFriday, June 1, 12

App architectureFriday, June 1, 12

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

Example with images Flickr Instagram Tumblr { { { "id": "6599755345", "type": "image", "blog_name": "joshﬁretest", "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", "proﬁle_picture": "http://[...]/36391.jpg", } "width_l": "1024" } ] } } }Friday, June 1, 12

Schema.orgFriday, June 1, 12

JSON serialization { "@type": "ImageObject", "url": "http://[...]chaumont", "author": [{ "@type": "Person", "name": "joshﬁre" }], "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

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

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

Deﬁne 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 usualFriday, June 1, 12

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

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

In practice Different versions for different classes of devices (hard to use the same version on TV!) User-Agent snifﬁng 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 ﬁxing on actual devices consumes the time that you don’t haveFriday, June 1, 12

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 ZeptoFriday, June 1, 12

Developer doc at: http://developer.joshﬁre.comFriday, June 1, 12

Factory .next Upcoming featuresFriday, June 1, 12

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

SummaryFriday, June 1, 12

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

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

The largest JavaScript conference in France http://dotjs.frFriday, June 1, 12

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 venueFriday, June 1, 12

First conﬁrmed 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.comFriday, June 1, 12

First conﬁrmed 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

Thank you for your attention! Questions? @tidoust francois@joshﬁre.com factory.joshﬁre.comFriday, June 1, 12

Joshfire Factory: Building Apps for Billion of Devices

by tidoust

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 30

Statistics