node-fxos

Ninja tools for Firefox OS development

https://nicola.github.io/node-fxos

  1. Developing apps for Firefox OS
  2. Exploiting Developer Tools
  3. node-fxos

Hello there

twitter/nicolagreco

github/nicola

me@nicola.io

 

  • Born in Rome
  • Studied at University College London
  • Woken up at Working Capital
  • Awarded by European Commission
  • Party rock at Hackathons

The way I see
Firefox OS impact

  • Serverless web
  • Cross platform
  • Open & decentralised

Client web apps

Developing apps for Firefox OS

Web IDE

write apps in the editor

Apps Manager

Problems

  • Bound to an editor
  • Start & Stop & Debug
  • No automation

How do people do web?

function veryImportantFunc () {
  // ...
  console.log("test 2 a", a)
  // ...
}
.square {
  color: #ff0;
}

.square .img {
  border: 1px solid;
}
<link rel="stylesheet"
    href="/style_1_test.css">

<link rel="stylesheet"
    href="/style_final.css">
var nicola = require('nicola')

describe('Nicola', function() {
  it('should say hi', function() {
.square {
  color: #ff0;

  .img {
    border: 1px solid;
  }
}
<link rel="stylesheet"
    href="/asset.min.css?timestamp=235">

Exploiting

Developer Tools

shift+F2

to start the Browser Console

about:config

devtools.debugger.remote-enabled = true

Remote Debugger

Protocol.js

devtools.debugger.log: true

Browser-as-a-service

Actors

  • Root
    • listTabs()
  • TabActor
    • ConsoleActor
    • StyleSheetsActor
    • ...

Libraries for
Remote Debugger

Let's give it a go

var FirefoxClient = require("firefox-client");
var client = new FirefoxClient();

client.connect(8081, function() {
  client.listTabs(function(err, tabs) {
    tabs.forEach(function(tab,i) {
      console.log(i+1, tab.url)
    })
  });
});

Same on Firefox OS

var FirefoxClient = require("firefox-client");
var client = new FirefoxClient();

client.connect(8000, function() {
  client.getWebapps(function(err, webapps) {
    webapps.getInstalledApps(function(err, apps) {
      apps.forEach(function(app,i) {
        console.log(i+1, app.name);
      });
    });
  });
});

Do you spot anything?

node-fxos

  • fx-ports
    Discover open remote debugger
  • fxos-start
    Starting a simulator
  • fxos-simulators
    Finds installed simulators
  • fxos-connect
    Connects or start a simulator
  • fxos-deploy
    Deploys apps
  • fxos-findapp
    Find an app from a local manifest
  • fxos-reloadcss
    Live-reload of css
  • fxos-console & fxos-console-logs
    Mad science.

HAIKU

Each package

  • does one thing
  • is a CLI tool too
  • is consistent
  • integrates with webIDE

fx-ports

$ fx-ports
TYPE                     PORT     PID      RELEASE               
Firefox OS Simulator     8000     3052     2.2.0.0-prerelease
Firefox Desktop          8080     3072     35.0

$ fx-ports --b2g --release 2.1
$ fx-ports --json
var Ports = require('fx-ports');

Ports({b2g: true}, function(err, instances) {
   // ...
  console.log(instances);
})

fxos-start

$ fxos-start
Firefox Simulator 2.2 started on port 8000 3317

$ fxos-start --verbose --release 2.1
$ fxos-start --bin <b2g-bin> --profile <profile>
$ fxos-start --exit --force
var Start = require('fxos-start');

Start({port: 8000, connect: true}, function(err, sim) {
  // ...
  sim.client.disconnect();
})

fxos-simulators

$ fxos-simulators
RELEASE     BIN
2.1         .../fxos_2_1_simulator@mozilla.org/b2g/B2G.app/Contents/MacOS/b2g-bin
2.2         .../fxos_2_2_simulator@mozilla.org/b2g/B2G.app/Contents/MacOS/b2g-bin

$ fxos-simulators --json --release 2.1
var Simulators = require('fxos-start');

Simulators({release:'2.1'}, function(err, sim_paths) {
  console.log(sim_paths)
})

fxos-connect

var Connect = require('fxos-connect');

Connect(function(err, sim) {
});

Connect({
    port: 8080,
    release: 
  })
  .then(function(sim) {})
  .done();

fxos-findapp

var Connect = require('fxos-connect');
var FindApp = require('fxos-findapp');

Connect(function(err, sim) {

  FindApp({client: sim.client, manifestURL: manif}, function(err, app) {
    app.Console.evaluateJS("alert(1)");
  })
})

fxos-deploy

$ fxos-deploy ./manifest.webapp


$ fxos-deploy ./manifest.webapp  --port 8081
$ fxos-deploy ./manifest.webapp  --release 8081
$ fxos-deploy ./manifest.webapp  --zip build/app.zip
var Deploy = require('fxos-deploy');

Connect(function(err, sim) {
  Deploy({
      manifestURL:"./manifest.webapp",
      zip: "./build/app.zip",
      client: sim.client
    }, function(err, appId) {
      sim.client.disconnect();
    })
})
var Deploy = require('fxos-deploy/command');

Deploy({
    manifestURL:"./manifest.webapp",
    zip: "./build/app.zip",
    client: sim.client
  }, function(err, result) {
    // {value: appId, client: FXClient}
  }, function(err, appId) {
     console.log(appId)
  })

fxos-reloadcss

Seamless with WebIDE

or the ANTI-WebIDE

Gulp

nicola/gulp-firefoxos-example

  gulp.task('deploy', ['zip'], function(cb) {
    deploy({
      exit: true,
      manifestURL:'./src/manifest.webapp',
      zip:'./build/app.zip'
    }, null, cb);
  });

  gulp.task('reloadcss', function(cb) {
    reloadcss({
      manifestURL:'./src/manifest.webapp',
      exit:true
    }, null, cb);
  });

  gulp.task('watch', function() {
    gulp.watch(paths.build, ['deploy']);
    gulp.watch(paths.css, ['reloadcss']);
  });

Gulp

  • Compile CSS before deploy
  • Deploy on multiple devices

fxos-console

Roadmap

  • Cordova (run/emulate)
  • CasperJS (rdp engine)
  • node-fxos 0.1

Contributors

  • sole
  • rodms
  • papples

Thanks to

  • jryans
  • harthur
  • potch
  • cweiss
  • papples (the mind behind node-fxos!)
  • marco
  • mihai
  • kimber
  • jill
  • misty
  • enrico

:)

Made with Slides.com