Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
The	Electron	app	communicating	
with	the	browser
TRIDENT	Inc.
Nozomi	Ito
About Me
p Nozomi	Ito
p TRIDENT	Inc.	CEO
p Magic	Pod
n Mobile	app	test	automation	service	using	deep	learning
Magic	Pod
Electron Browser
(Chrome,	Firefox,	etc)
Device
Communication Communication
Why	Electron?
p Browser	cannot	communicate	with	Device
p Win/Mac/Linux	cross-platform	support	is	required
p Test	tool	“App...
Other	cross-platform	app	tool
p C#	(Mono	or	Xamarin)
n I	once	encountered	many	troubles..
p Java	(Swing	etc)
n I	don’t	fee...
My	impression	about	Electron
p Advantage
n Plenty	of	features (Signing,	Auto	update,	Proxy,	etc)
n Node.js has	various	npm...
Browser-Electron	communication
Electron BrowserDevice
USB	Cable
Custom	
protocol
HTTP	&	
WebSocket
Custom	protocol
Electron
<plist>
…
<key>CFBundleURLName</key>
<string>magic-pod</string>
…
</plist>
Enable magic-pod proto...
Custom	protocol
Electron
Browser
Invocation
<a	href=“magic-pod://connect-device”>
</a>
app.on('open-url',	(event,	url)	=>	...
Demo
Thank	you!
Prochain SlideShare
Chargement dans…5
×

The Electron app communicating with the browser

1 746 vues

Publié le

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

Publié dans : Internet
  • Identifiez-vous pour voir les commentaires

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!

×