TIBET Logo

Desktop TIBET

Electron

wins

  • Build cross-platform desktop and web applications with a single framework.
  • Leverage a large-scale framework built to run offline but fully HTTP-capable.
  • Use interactive development tools for faster desktop app development.

contents

concepts

cookbook

Getting Started
Development

code


concepts

One of the long-standing problems in the IT industry is developing cross-platform applications that run on Windows, Macs, and Linux/Unix platforms.

While we'd be the first to agree that web technologies were not initially designed as an application platform, porting apps from historical platforms such as PowerBuilder, Delphi, Visual Basic, etc. to the web is a direct response to the cross-platform problem.

Electron, a pairing of Node.js with the Chrome browser, is an emerging solution that makes building cross-platform desktop applications possible using web technology, one leveraged by popular desktop apps like the extremely popular Slack product.

Electron applications run on Windows®, Mac OS®, and Linux® making them a powerful option for building cross-platform desktop applications. TIBET gives you a framework uniquely qualified to take maximum advantage of the Electron platform.


TIBET+Electron

TIBET+Electron


TIBET applications run out of the box with Electron, in fact TIBET ships with Electron 'dna' for the tibet clone command letting you create a new TIBET+Electron project in seconds.


cookbook

Getting Started

Installing Electron

To run a TIBET+Electron project you'll need to install Electron. Complete installation instructions can be found at the Electron GitHub repo. The short version is:

# Install the `electron` command globally in your $PATH
npm install electron-prebuilt -g

With this step concluded you should be able to confirm installation via:

$ electron --version
v0.34.1

Creating A TIBET+Electron Project

TIBET+Electron projects are built using TIBET's standard tibet clone/tibet init approach. Simply add --dna electron to get an Electron project:

$ tibet clone  --dna electron
$ cd 
$ tibet init

Development

Running Your Electron App

How you launch your project depends on your Electron installation method and platform. If you installed the electron-prebuilt package you should be able to use:

$ cd 
$ tibet start
Found electron.js. Launching Electron.

Developing For The main Process

Describing how to build additional functionality in the 'main process' (aka the "server") is best left to the Electron Documentation. TIBET+Electron projects use an electron.js file which loads the TIBET framework just as it loads for any "no server" project:

var app,
    BrowserWindow,
    path,
    url,
    win;

electron = require('electron');
app = electron.app;
BrowserWindow = electron.BrowserWindow;
path = require('path');
url = require('url');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
win = null;

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {

    // Create the browser window.
    win = new BrowserWindow({
        width: 1024,
        height: 768
    });

    // Load the index.html of the app. This will boot TIBET.
    //  TODO:   read command line args for boot profile etc.
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    //  TODO: configurable
    // Open the devtools.
    win.openDevTools();

    // Emitted when the window is closed.
    win.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
});

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    //  TODO:   make this a preference.
    //if (process.platform !== 'darwin') {
        app.quit();
    //}
});

Developing For The renderer Process

Developing for the renderer process is identical to developing for Chrome. All of TIBET's functionality is available to you, including all of TIBET's interactive development tools, the TIBET command line, etc. See the documentation for those components for details.

Testing Your Electron App

Like any TIBET project, your TIBET+Electron project is testable right out of the box using the tibet test command:

$ tibet test
# Loading TIBET via PhantomJS 2.0.0 at April 18, 2016 at 09:49:03 MDT
# TIBET loaded in 3291 ms. Starting execution.
# TIBET starting test run
# 1 suite(s) found.
1..3
#
# tibet test APP --suite='APP suite'
ok - Has a namespace.
ok - Has an application type.
ok - Has an app tag.
# pass: 3 total, 3 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
#
# PASS: 3 total, 3 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
# Finished in 3375 ms w/TSH exec time of 84 ms.

code

At the present time there's no Electron-specific code in the TIBET client. In some sense that's a testament to both the Electron platform and TIBET's offline-first design.

That said, we do have plans for tighter integration with Electron's Node.js foundation so you have TIBET-supported APIs for interacting with the file system and with other services.