Build your own tools with Electron and React

Build your own tools with Electron and React

Given at Abstractions '16. Transcript coming soon.

Ac6a8e9ccd9e02b6051112296760c939?s=128

Adam Simpson

August 18, 2016
Tweet

Transcript

  1. BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT

  2. CONQUER THE SIDEQUEST

  3. bit.ly/ele-slug

  4. None
  5. /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
  6. /ele-jason

  7. BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT

  8. seesparkbox.com/foundry

  9. Can we do this with just CSS?

  10. BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT WHAT DID

    WE MAKE?
  11. /ele-app

  12. None
  13. None
  14. BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT WHAT IS

    ELECTRON?
  15. None
  16. Yes, but is it fast?

  17. 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
  18. It’s fast enough

  19. JS is getting faster /ele-go

  20. #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
  21. /ele-js-tweet

  22. Apps built with Electron • Slack • Atom • Visual

    Studio Code • Ghost • Wordpress • Simplenote • Discord • Postman
  23. MacOS

  24. BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT START CODING

  25. npm init

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

  27. $(npm bin)/electron main.js

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

  29. { "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" } }
  30. npm i electron-rebuild --save /ele-re

  31. 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);
  32. Two Processes 1. Main 2. Renderer /ele-procs

  33. <!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>
  34. None
  35. main.js index.html package.json icon by Michael Zenaty

  36. http://bit.ly/ele-proj

  37. BUILD YOUR OWN TOOLS WITH REACT AND ELECTRON BENEFITS OF

    ELECTRON
  38. …any application that can be written in JavaScript, will eventually

    be written in JavaScript. Atwood’s Law /ele-law
  39. http://bit.ly/ele-awe

  40. None
  41. my $PATH is broken

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

  43. 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
  44. @ sindresorhus

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

  46. Don’t do PID math

  47. treekill process and it's all children and child offspring children

    treekill /ele-tree
  48. Hmm, I CAN HAZ IP?!

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

  50. getInitialState() { return { 'port': '', 'title': '', 'version': '',

    'status': '', 'ip': address.ip() }; },
  51. None
  52. BUILD YOUR OWN TOOLS WITH ELECTRON AND REACT SO, UH,

    REACT?
  53. 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
  54. <Filter filter={filter} /> Component Prop name Prop value

  55. Tooling /ele-proj

  56. { "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" } }
  57. "start": "webpack --watch | electron main.js"

  58. 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'] } } ] } };
  59. 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);
  60. <!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>
  61. main.js index.html package.json Root.js webpack.config.js icon by Michael Zenaty

  62. None
  63. Thank you! @a_simpson