SlideShare a Scribd company logo
1 of 17
Download to read offline
The Joshfire Framework
 Technical overview of the 0.9 release




                 @sylvinus
        ParisJS #8, June 29th 2011
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
The solution
framework
                 A powerful framework based only on
                 standard web technologies
open-source




                 A library of device-specific adapters
One app, many devices
          For developers:
            Simple, fast
            Documented, standard
  App
            Easy to maintain
            Evolutive
          For users:
            A continuous experience
            through all their devices
Let’s do a cross-device video app
Specs

There’s a list of videos
I choose a video
Video plays
(Repeat on new device)
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>
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
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
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
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
...
General design
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 / ...
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)
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
...
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?
Joshfire Framework 0.9 Technical Overview

More Related Content

Viewers also liked

no.de quick presentation at #ParisJS 4
no.de quick presentation at #ParisJS 4no.de quick presentation at #ParisJS 4
no.de quick presentation at #ParisJS 4Sylvain Zimmer
 
PyCon FR 2016 - Et si on recodait Google en Python ?
PyCon FR 2016 - Et si on recodait Google en Python ?PyCon FR 2016 - Et si on recodait Google en Python ?
PyCon FR 2016 - Et si on recodait Google en Python ?Sylvain Zimmer
 
Javascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJSJavascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJSSylvain Zimmer
 
The original vision of Nutch, 14 years later: Building an open source search ...
The original vision of Nutch, 14 years later: Building an open source search ...The original vision of Nutch, 14 years later: Building an open source search ...
The original vision of Nutch, 14 years later: Building an open source search ...Sylvain Zimmer
 
Celery for internal API in SOA infrastructure
Celery for internal API in SOA infrastructureCelery for internal API in SOA infrastructure
Celery for internal API in SOA infrastructureRoman Imankulov
 
Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2
Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2
Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2Sylvain Zimmer
 
Scaling up task processing with Celery
Scaling up task processing with CeleryScaling up task processing with Celery
Scaling up task processing with CeleryNicolas Grasset
 
Advanced task management with Celery
Advanced task management with CeleryAdvanced task management with Celery
Advanced task management with CeleryMahendra M
 

Viewers also liked (8)

no.de quick presentation at #ParisJS 4
no.de quick presentation at #ParisJS 4no.de quick presentation at #ParisJS 4
no.de quick presentation at #ParisJS 4
 
PyCon FR 2016 - Et si on recodait Google en Python ?
PyCon FR 2016 - Et si on recodait Google en Python ?PyCon FR 2016 - Et si on recodait Google en Python ?
PyCon FR 2016 - Et si on recodait Google en Python ?
 
Javascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJSJavascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJS
 
The original vision of Nutch, 14 years later: Building an open source search ...
The original vision of Nutch, 14 years later: Building an open source search ...The original vision of Nutch, 14 years later: Building an open source search ...
The original vision of Nutch, 14 years later: Building an open source search ...
 
Celery for internal API in SOA infrastructure
Celery for internal API in SOA infrastructureCelery for internal API in SOA infrastructure
Celery for internal API in SOA infrastructure
 
Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2
Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2
Why and how Pricing Assistant migrated from Celery to RQ - Paris.py #2
 
Scaling up task processing with Celery
Scaling up task processing with CeleryScaling up task processing with Celery
Scaling up task processing with Celery
 
Advanced task management with Celery
Advanced task management with CeleryAdvanced task management with Celery
Advanced task management with Celery
 

Similar to Joshfire Framework 0.9 Technical Overview

Appium Overview - by Daniel Puterman
Appium Overview - by Daniel PutermanAppium Overview - by Daniel Puterman
Appium Overview - by Daniel PutermanApplitools
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Heiko Behrens
 
Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2FIWARE
 
Pentesting Android Applications
Pentesting Android ApplicationsPentesting Android Applications
Pentesting Android ApplicationsCláudio André
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)danielputerman
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发Zhang Xiaoxue
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceJen Looper
 
2012 java one-con3648
2012 java one-con36482012 java one-con3648
2012 java one-con3648Eing Ong
 
Building Video Applications with YouTube APIs
Building Video Applications with YouTube APIsBuilding Video Applications with YouTube APIs
Building Video Applications with YouTube APIsJarek Wilkiewicz
 
JHipster Beyond CRUD - JHipster Conf' 2019
JHipster Beyond CRUD - JHipster Conf' 2019JHipster Beyond CRUD - JHipster Conf' 2019
JHipster Beyond CRUD - JHipster Conf' 2019Intesys
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch
 
Beginning Real World iOS App Development
Beginning Real World iOS App DevelopmentBeginning Real World iOS App Development
Beginning Real World iOS App DevelopmentAndri Yadi
 
Mobile Security Assessment: 101
Mobile Security Assessment: 101Mobile Security Assessment: 101
Mobile Security Assessment: 101wireharbor
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJSGregor Woiwode
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumAxway Appcelerator
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAJeff Haynie
 

Similar to Joshfire Framework 0.9 Technical Overview (20)

Appium Overview - by Daniel Puterman
Appium Overview - by Daniel PutermanAppium Overview - by Daniel Puterman
Appium Overview - by Daniel Puterman
 
Intro to appcelerator
Intro to appceleratorIntro to appcelerator
Intro to appcelerator
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2
 
Pentesting Android Applications
Pentesting Android ApplicationsPentesting Android Applications
Pentesting Android Applications
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT Conference
 
2012 java one-con3648
2012 java one-con36482012 java one-con3648
2012 java one-con3648
 
Building Video Applications with YouTube APIs
Building Video Applications with YouTube APIsBuilding Video Applications with YouTube APIs
Building Video Applications with YouTube APIs
 
JHipster Beyond CRUD - JHipster Conf' 2019
JHipster Beyond CRUD - JHipster Conf' 2019JHipster Beyond CRUD - JHipster Conf' 2019
JHipster Beyond CRUD - JHipster Conf' 2019
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Beginning Real World iOS App Development
Beginning Real World iOS App DevelopmentBeginning Real World iOS App Development
Beginning Real World iOS App Development
 
Mobile Security Assessment: 101
Mobile Security Assessment: 101Mobile Security Assessment: 101
Mobile Security Assessment: 101
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJS
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
 

More from Sylvain Zimmer

Developer-friendly taskqueues: What you should ask yourself before choosing one
Developer-friendly taskqueues: What you should ask yourself before choosing oneDeveloper-friendly taskqueues: What you should ask yourself before choosing one
Developer-friendly taskqueues: What you should ask yourself before choosing oneSylvain Zimmer
 
Ranking the Web with Spark
Ranking the Web with SparkRanking the Web with Spark
Ranking the Web with SparkSylvain Zimmer
 
Kinect + Javascript tech talk at #ParisJS Jan 2011
Kinect + Javascript tech talk at #ParisJS Jan 2011Kinect + Javascript tech talk at #ParisJS Jan 2011
Kinect + Javascript tech talk at #ParisJS Jan 2011Sylvain Zimmer
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJSSylvain Zimmer
 
Archicamp présentation
Archicamp présentationArchicamp présentation
Archicamp présentationSylvain Zimmer
 
Twisted presentation & Jamendo usecases
Twisted presentation & Jamendo usecasesTwisted presentation & Jamendo usecases
Twisted presentation & Jamendo usecasesSylvain Zimmer
 

More from Sylvain Zimmer (6)

Developer-friendly taskqueues: What you should ask yourself before choosing one
Developer-friendly taskqueues: What you should ask yourself before choosing oneDeveloper-friendly taskqueues: What you should ask yourself before choosing one
Developer-friendly taskqueues: What you should ask yourself before choosing one
 
Ranking the Web with Spark
Ranking the Web with SparkRanking the Web with Spark
Ranking the Web with Spark
 
Kinect + Javascript tech talk at #ParisJS Jan 2011
Kinect + Javascript tech talk at #ParisJS Jan 2011Kinect + Javascript tech talk at #ParisJS Jan 2011
Kinect + Javascript tech talk at #ParisJS Jan 2011
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS
 
Archicamp présentation
Archicamp présentationArchicamp présentation
Archicamp présentation
 
Twisted presentation & Jamendo usecases
Twisted presentation & Jamendo usecasesTwisted presentation & Jamendo usecases
Twisted presentation & Jamendo usecases
 

Recently uploaded

Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 

Recently uploaded (20)

Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 

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 ...
  • 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?