Build your own tools with Electron and React

BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT

CONQUER THE SIDEQUEST

bit.ly/ele-slug

/ele-boag We as an industry love to talk about side
projects and how important they are. How do people have time to do these though?! - Paul Boag

/ele-jason

BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT

seesparkbox.com/foundry

Can we do this with just CSS?

BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT WHAT DID
WE MAKE?

/ele-app

BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT WHAT IS
ELECTRON?

Yes, but is it fast?

Imagine a typical RSS reader — what percentage of the
code makes up the feed and OPML parsers? Well under 1%, I’d bet. The rest might as well be in Lua or JavaScript, and users would never feel the difference, because there would hardly be a difference. - Brent Simmons /ele-brent

It’s fast enough

JS is getting faster /ele-go

#GO $ go run main.go approximating pi with 1000000000 iterations.
3.1415926545880506 total time taken is: 6.658s #JS $ gopherjs run main.go approximating pi with 1000000000 iterations. 3.1415926545880506 total time taken is: 6.549s #C $ gcc -O3 main.c $ time ./a.out approximating pi with 1000000000 iterations. 3.1415926545880506 real 0m6.434s user 0m6.427s sys 0m0.004s

/ele-js-tweet

Apps built with Electron • Slack • Atom • Visual
Studio Code • Ghost • Wordpress • Simplenote • Discord • Postman

BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT START CODING

npm init

npm i electron-prebuilt --save /ele-pre

$(npm bin)/electron main.js

"scripts": { "start": "electron main.js" } /ele-npm

{ "name": "electron-example", "version": "0.1.0", "description": "A dummy Electron app",
"main": "main.js", "scripts": { "start": "electron main.js" }, "author": "Adam Simpson", "license": "ISC", "dependencies": { "electron-prebuilt": "^1.3.3" } }

npm i electron-rebuild --save /ele-re

const {app, BrowserWindow} = require(‘electron') let win function createWindow ()
{ win = new BrowserWindow({width: 800, height: 600}) win.loadURL(`file://${__dirname}/index.html`) win.webContents.openDevTools() win.on('closed', () => { win = null }) } app.on('ready', createWindow);

Two Processes 1. Main 2. Renderer /ele-procs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dummy Electron App</title>
</head> <body> Electron! <script> var versions = process.versions; console.log(' hello'); console.log(' Node version’, versions.node); console.log(' Chrome version', versions.chrome); </script> </body> </html>

main.js index.html package.json icon by Michael Zenaty

http://bit.ly/ele-proj

BUILD YOUR OWN TOOLS WITH REACT AND ELECTRON BENEFITS OF
ELECTRON

…any application that can be written in JavaScript, will eventually
be written in JavaScript. Atwood’s Law /ele-law

http://bit.ly/ele-awe

my $PATH is broken

const installProcess = exec('npm install', {async: true}); ¯\_(ϑ)_/¯

Useful for Electron/NW.js apps as GUI apps on OS X
doesn't inherit the $PATH defined in your dotfiles (.bashrc/.bash_profile/.zshrc/etc). path-fix /ele-path

@ sindresorhus

I can’t kill these processes and their children!!

Don’t do PID math

treekill process and it's all children and child offspring children
treekill /ele-tree

Hmm, I CAN HAZ IP?!

Get current machine IP, MAC and DNS servers. address /ele-addy

getInitialState() { return { 'port': '', 'title': '', 'version': '',
'status': '', 'ip': address.ip() }; },

BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT SO, UH,
REACT?

The problem is that building apps is building components, so
you inevitably are forced back into the manual DOM management to create your app-speciﬁc components - James Longster /ele-rx

<Filter filter={filter} /> Component Prop name Prop value

Tooling /ele-proj

{ "name": "electron-example", "version": "0.1.0", "description": "A dummy Electron app",
"main": "main.js", "scripts": { "start": "webpack --watch | electron main.js", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Adam Simpson", "license": "ISC", "dependencies": { "babel-core": "^6.13.2", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "electron-prebuilt": "^1.3.3", "react": "^15.3.0", "react-dom": "^15.3.0", "webpack": "^1.13.1" } }

"start": "webpack --watch | electron main.js"

const webpack = require('webpack'); module.exports = { entry: [ './components/Root.js'
], output: { path: __dirname, filename: "app.js" }, target: 'electron', module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] } };

import React, { Component} from 'react' import { render }
from 'react-dom' import os from "os"; class Root extends Component { componentDidMount() { console.log(`The home directory is ${os.homedir()}`); } render() { return ( <p> React is loaded!</p> ); } } render(<Root />, appTarget);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dummy Electron App</title>
</head> <body> Electron! <div class="app-target"></div> <script> var versions = process.versions; console.log(' hello'); console.log(' Node version', versions.node); console.log(' Chrome version', versions.chrome); </script> <script src="./app.js"></script> </body> </html>

main.js index.html package.json Root.js webpack.conﬁg.js icon by Michael Zenaty

Thank you! @a_simpson

Build your own tools with Electron and React

Build your own tools with Electron and React

More Decks by Adam Simpson

Other Decks in Programming

Featured

Transcript