Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build your own tools with Electron and React

Build your own tools with Electron and React

Given at Abstractions '16. Transcript coming soon.

Adam Simpson

August 18, 2016
Tweet

More Decks by Adam Simpson

Other Decks in Programming

Transcript

  1. /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
  2. 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
  3. #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
  4. Apps built with Electron • Slack • Atom • Visual

    Studio Code • Ghost • Wordpress • Simplenote • Discord • Postman
  5. { "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" } }
  6. 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);
  7. <!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>
  8. …any application that can be written in JavaScript, will eventually

    be written in JavaScript. Atwood’s Law /ele-law
  9. 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
  10. The problem is that building apps is building components, so

    you inevitably are forced back into the manual DOM management to create your app-specific components - James Longster /ele-rx
  11. { "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" } }
  12. 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'] } } ] } };
  13. 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);
  14. <!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>