The presentation slide for the Electron MeetUp in Tokyo at 11/6/2017 (https://connpass.com/event/69473/ )

1. The Electron app communicating
with the browser
TRIDENT Inc.
Nozomi Ito

2. About Me
p Nozomi Ito
p TRIDENT Inc. CEO
p Magic Pod
n Mobile app test automation service using deep learning

3. Magic Pod
Electron Browser
(Chrome, Firefox, etc)
Device
Communication Communication

4. Why Electron?
p Browser cannot communicate with Device
p Win/Mac/Linux cross-platform support is required
p Test tool “Appium” is based on Node.js
n Can be combined to single executable
p Electron is trendy
n Attractive to many potential collaborators

5. Other cross-platform app tool
p C# (Mono or Xamarin)
n I once encountered many troubles..
p Java (Swing etc)
n I don’t feel it is cool
p Qt, Delphi, etc
n I feel few developers use them
p Go Lang
n GUI development library seemed still weak
n But I expect its future

6. My impression about Electron
p Advantage
n Plenty of features (Signing, Auto update, Proxy, etc)
n Node.js has various npm libraries
n We can use the latest JS syntax without being annoyed by
the browser-compatibility (Especially async/await)
p Disadvantage
n File size becomes too big (due to Node.js + Chromium?)
n Difficult to hide the JS code from the users
n Go lang GUI may resolve these problems someday

7. Browser-Electron communication
Electron BrowserDevice
USB Cable
Custom
protocol
HTTP &
WebSocket

8. Custom protocol
Electron
<plist>
…
<key>CFBundleURLName</key>
<string>magic-pod</string>
…
</plist>
Enable magic-pod protocol in info.plist
setting file for the app
(The case for Mac)

9. Custom protocol
Electron
Browser
Invocation
<a href=“magic-pod://connect-device”>
</a>
app.on('open-url', (event, url) => {
… // Event handler
})

10. Demo

11. Thank you!