Joshfire Framework 0.9 Technical Overview
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Joshfire Framework 0.9 Technical Overview

on

  • 4,136 views

 

Statistics

Views

Total Views
4,136
Views on SlideShare
3,301
Embed Views
835

Actions

Likes
2
Downloads
20
Comments
0

11 Embeds 835

http://www.4barbes.com 377
http://framework.joshfire.com 228
http://4barbes.com 190
http://lanyrd.com 20
http://paper.li 10
http://twitter.com 3
http://speakerrate.com 3
http://localhost:40009 1
https://twitter.com 1
http://www.slideshare.net 1
http://4barbes.com.164.seekdotnet.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Joshfire Framework 0.9 Technical Overview Presentation Transcript

  • 1. The Joshfire Framework Technical overview of the 0.9 release @sylvinus ParisJS #8, June 29th 2011
  • 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. The solutionframework A powerful framework based only on standard web technologiesopen-source A library of device-specific adapters
  • 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. Let’s do a cross-device video app
  • 6. SpecsThere’s a list of videosI choose a videoVideo plays(Repeat on new device)
  • 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. 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. 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. 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. 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. General design
  • 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. 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. 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. 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?