Joshfire Framework 0.9 Technical Overview
•
2 likes•1,188 views
The document provides an overview of the Joshfire Framework version 0.9 release. It describes Joshfire as a powerful and modular framework based on standard web technologies that allows developers to build one application that works across multiple devices using a single codebase. It achieves this through the use of device-specific adapters and by separating an application's data and user interface definitions.
Recommended
More Related Content
Viewers also liked
Viewers also liked (8)
Similar to Joshfire Framework 0.9 Technical Overview
Similar to Joshfire Framework 0.9 Technical Overview (20)
More from Sylvain Zimmer
Recently uploaded
Recently uploaded (20)
Joshfire Framework 0.9 Technical Overview
- 1. The Joshfire Framework Technical overview of the 0.9 release @sylvinus ParisJS #8, June 29th 2011
- 2. What problem Joshfire solves App A new device every day... App Technological fragmentation App n ! Some boxes/SDKs are very App at io App App nt eApp App hard to develop for gm Fra App App Agencies selling N apps for N devices App App App App App Increasing fragmentation => Developer pain
- 3. The solution framework A powerful framework based only on standard web technologies open-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. Specs There’s a list of videos I choose a video Video 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 server Adapt UI depending on device (iOS lists, Native video players, ...) Accept any input method (mouse, keyboard, touch, HTTP, ...) Switch to any data source Expose as RSS/XML feed ...
- 12. General design
- 13. Framework opinions Impose what really matters Data & UI Trees Adapters Let developer stay in his comfort zone for the rest Template engine / CSS frameworks / CoffeeScript / ... Backbone.js / Models / Data sources / ... Expressjs / ...
- 14. Tech overview Code 100% JavaScript (FTW!) Beautiful documentation, Simple examples, GitHub Ridiculously 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 solutions Mobile: Zepto, iScroll/Scrollability, PhoneGap, Titanium? TVs: jQuery (modern), Server-side rendering (CEHTML & friends) Desktop: Chromeless, AIR, ... Arduino/Objects: HTTP packets to Node then socket.io Embedded: ARM + Chromium framebuffer? Boxee: XML export ...
- 16. Joshfire 0.9 (Developer preview) Released today! Check http://joshfire.com First JS library ever to ship with web+mobile+TV+node+arduino Under heavy development (new adapters, more doc, ...) Developer feedback welcome before 1.0 API freeze 0.9.x & 1.x releases will focus on media/content apps We’re still hiring ;-) We’ll be happy to help you refactor your apps with the framework Questions?