The Joshfire Framework Technical overview of the 0.9 release                 @sylvinus        ParisJS #8, June 29th 2011
What problem Joshfire solves                                          AppA new device every day...                         ...
The solutionframework                 A powerful framework based only on                 standard web technologiesopen-sou...
One app, many devices          For developers:            Simple, fast            Documented, standard  App            Eas...
Let’s do a cross-device video app
SpecsThere’s a list of videosI choose a videoVideo plays(Repeat on new device)
HTML5 ?<html><body>	   <video id="myplayer" controls autoplay />             <video> nightmare	   <ul>                    ...
Describe what you want!                              var UI = [                                 {var Data = [             ...
Describe what you want!var Data = [                                var UI = [   {                                   {     ...
Describe what you want!                                       var UI = [                                          {       ...
What does this allow?Forget PHP, Ruby and [insert deprecated language]. Full JavaScript stack.Translate to HTML(5), either...
General design
Framework opinionsImpose what really matters  Data & UI Trees  AdaptersLet developer stay in his comfort zone for the rest...
Tech overviewCode 100% JavaScript (FTW!)Beautiful documentation, Simple examples, GitHubRidiculously modular (RequireJS, E...
Adapter solutionsMobile: Zepto, iScroll/Scrollability, PhoneGap, Titanium?TVs: jQuery (modern), Server-side rendering (CEH...
Joshfire 0.9 (Developer preview)Released today! Check http://joshfire.comFirst JS library ever to ship with web+mobile+TV+no...
Joshfire Framework 0.9 Technical Overview
Upcoming SlideShare
Loading in …5
×

Joshfire Framework 0.9 Technical Overview

4,119 views
4,000 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,119
On SlideShare
0
From Embeds
0
Number of Embeds
835
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Joshfire Framework 0.9 Technical Overview

  1. 1. The Joshfire Framework Technical overview of the 0.9 release @sylvinus ParisJS #8, June 29th 2011
  2. 2. What problem Joshfire solves AppA new device every day... AppTechnological fragmentation App n !Some boxes/SDKs are very App at io App App nt eApp Apphard to develop for gm Fra App AppAgencies selling N apps forN devices App App App App App Increasing fragmentation => Developer pain
  3. 3. The solutionframework A powerful framework based only on standard web technologiesopen-source A library of device-specific adapters
  4. 4. One app, many devices For developers: Simple, fast Documented, standard App Easy to maintain Evolutive For users: A continuous experience through all their devices
  5. 5. Let’s do a cross-device video app
  6. 6. SpecsThere’s a list of videosI choose a videoVideo plays(Repeat on new device)
  7. 7. HTML5 ?<html><body> <video id="myplayer" controls autoplay /> <video> nightmare <ul> ic e ev <li><a href="video1.mp4">Video 1</a></li> -d jQuery on poor browsers :/ s <li><a href="video2.mp4">Video 2</a></li> s </ul> c ro Keyboard/Remote support? lly <script> a $(li a).click(function(ev) { tu c $(#myplayer)[0].src = ev.target.href; a How to load Video 3? }); o t N </script></body> Server-side?</html>
  8. 8. Describe what you want! var UI = [ {var Data = [ “id”:”myPlayer”, { “type”:”video” “id”:”1”, }, “url”:”video1.mp4” { }, “id”:”myVideos”, { “type”:”list”, “id”:”2”, “dataPath”:”/”, “url”:”video2.mp4” “onSelect”:function(elt) { }, app.ui.myPlayer.play(elt.url);]; } } ]; Every Joshfire app has a Data Tree and a UI Tree
  9. 9. Describe what you want!var Data = [ var UI = [ { { “id”:”videos”, “id”:”myPlayer”, “children”:[ “type”:”video” { }, “id”:”1”, { “url”:”video1.mp4” “id”:”myVideos”, }, “type”:”list”, { “dataPath”:”/videos/”, “id”:”2”, “onSelect”:function(elt) { “url”:”video2.mp4” app.ui.myPlayer.play(elt.url); } } ]} } } ];]; Every Joshfire app has a Data Tree and a UI Tree
  10. 10. Describe what you want! var UI = [ { “id”:”myPlayer”,var Data = [ “type”:”video” { }, “id”:”videos”, { “children”:function(callback) { “id”:”myVideos”, myVideoApi(callback); “type”:”list”, } “dataPath”:”/videos/”, } “onSelect”:function(elt) {]; app.ui.myPlayer.play(elt.url); } } ]; Every Joshfire app has a Data Tree and a UI Tree
  11. 11. What does this allow?Forget PHP, Ruby and [insert deprecated language]. Full JavaScript stack.Translate to HTML(5), either on client or serverAdapt UI depending on device (iOS lists, Native video players, ...)Accept any input method (mouse, keyboard, touch, HTTP, ...)Switch to any data sourceExpose as RSS/XML feed...
  12. 12. General design
  13. 13. Framework opinionsImpose what really matters Data & UI Trees AdaptersLet developer stay in his comfort zone for the rest Template engine / CSS frameworks / CoffeeScript / ... Backbone.js / Models / Data sources / ... Expressjs / ...
  14. 14. Tech overviewCode 100% JavaScript (FTW!)Beautiful documentation, Simple examples, GitHubRidiculously modular (RequireJS, Events)Don’t reinvent the wheel (Underscore.js, MediaElement.js, ...)Utils library (Splashscreen, Stresstest, Worker pool, Geoloc, ...)Optional build tools in Python (synchronous, Fabric)
  15. 15. Adapter solutionsMobile: Zepto, iScroll/Scrollability, PhoneGap, Titanium?TVs: jQuery (modern), Server-side rendering (CEHTML & friends)Desktop: Chromeless, AIR, ...Arduino/Objects: HTTP packets to Node then socket.ioEmbedded: ARM + Chromium framebuffer?Boxee: XML export...
  16. 16. Joshfire 0.9 (Developer preview)Released today! Check http://joshfire.comFirst JS library ever to ship with web+mobile+TV+node+arduinoUnder heavy development (new adapters, more doc, ...)Developer feedback welcome before 1.0 API freeze0.9.x & 1.x releases will focus on media/content appsWe’re still hiring ;-)We’ll be happy to help you refactor your apps with the frameworkQuestions?

×