Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Electron app communicating with the browser

The presentation slide for the Electron MeetUp in Tokyo at 11/6/2017 ( )

  • Login to see the comments

The Electron app communicating with the browser

  1. 1. The Electron app communicating with the browser TRIDENT Inc. Nozomi Ito
  2. 2. About Me p Nozomi Ito p TRIDENT Inc. CEO p Magic Pod n Mobile app test automation service using deep learning
  3. 3. Magic Pod Electron Browser (Chrome, Firefox, etc) Device Communication Communication
  4. 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. 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. 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. 7. Browser-Electron communication Electron BrowserDevice USB Cable Custom protocol HTTP & WebSocket
  8. 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. 9. Custom protocol Electron Browser Invocation <a href=“magic-pod://connect-device”> </a> app.on('open-url', (event, url) => { … // Event handler })
  10. 10. Demo
  11. 11. Thank you!