Electron at MongoDB: LibertyJS 2016

Transcript

1. Electron at MongoDB Desktop apps with web technologies LibertyJS '16
2. disclaimer: personal opinions and do not reflect the views of MongoDB Inc.
3. > 2 years !
4. @__lucas #libertyjs #electron
5. lucas@mongodb.com
7. mongodb.com/compass
8. Visualize, understand, and work with your data
9. Provides an intuitive editor for interacting with your data
10. web ➡ desktop
11. Electron Desktop apps, web technologies
12. Atom Editor by GitHub
13. 1 app :: any platform Windows, macOS & Linux
15. Early Adopters GitHub, Slack, Microsoft, Docker
16. Electron API Demos App electron.atom.io/#get-started
17. Electron provides Process control
18. Electron provides Filesystem access
19. Electron provides Screenshot
20. Electron provides Clipboard read & write
21. Electron provides Menus & notifications
22. Electron provides System tray
23. Why not just make it a web app?
24. What if you could write your own browser and everyone had to use it?
26. Control.
27. web ➡ desktop ✅ Smaller teams ✅ Happier users
28. A lot of form inputs required to connect to MongoDB...
31. const _ = require('lodash'); const {clipboard, dialog} = require('electron'); window.on('focus', () => { const text = clipboard.readText(); if (_.startsWith(text, 'mongodb://')) return; dialog.showMessageBox({ message: `Would you like to connect to `${text}`?`, buttons: ['Yes', 'No'], }, (yes) => { if (!yes) return; // Update form from parsed `${text}` }); });
32. Q&A ! — lucas@mongodb.com
33. </slides> !
34. <bonus-slides>
35. Why has electron been so successful?
36. Desktop apps with web technologies is not new... • nw.js • breach • macgap • Adobe brackets-shell • Google Chrome Apps • appjs
37. (cont.) • Mozilla Chromeless • Mozilla Prism • Titanium • Adobe Air • Google Gears • QT • Mozilla XULRunner
38. Electron Extensibility node.js native add-ons for platform specific API's
39. Example: keytar Secure key/value storage using platform specific API's
40. Embrace node.js ecosystem, conventions & values
41. Large companies as early adopters GitHub, Slack, Microsoft, Docker
42. Thanks! • @zcbenz, @kevinsawicki, @jlord, @zeke (Electron) • @paulcbetts (Slack) • @maxogden, @electron-userland (Community) • @emorikawa (Nylas N1)
43. Resources mentioned during Q&A
44. Existing apps built on Electron electron.atom.io/apps
45. Marp Markdown presentation writer (similar to @deckset) Ionic Lab Create, build, test, and deploy Ionic apps. Theme Juice WordPress Development Made Easy
46. Submitting to app stores ! Mac App Store ! Windows Store
47. electron + meteor.js meteor-electron The easiest way to create a desktop Meteor application electrify Easily package your Meteor apps with Electron
48. Tooling electron-builder A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box electron-prebuilt For dev
49. Extensibility ! Using Pepper Flash Plugin ! Native Modules
50. github.com/mongodb-js Electron tooling and more we've been building at MongoDB.
51. Quick Start electron-quickstart ! Quick Start Tutorial Electron: the hard parts made easy
52. ! Additional Platform Specific Features On Windows, applications can put shortcuts in the JumpList of task bar, and on Mac, applications can put a custom menu in the dock menu.
53. asar require('asar'); ! Application Packaging ! Application Distribution Optimize launch performance by ordering ASAR contents
54. Window Management ! BrowserWindow Create and control browser windows. electron-positioner Helps positioning your electron windows. Multi Window Electron Desktop Apps
55. devtools devtron inspect, monitor, and debug your Electron app on top of the amazing Chrome Developer Tools electron-devtools-installer Use devtools extensions in Electron like you already are in Chrome: Ember Inspector, React Developer Tools, jQuery Debugger,
56. Even more resources awesome-electron