Download as PDF, PPTX
Uploaded byDavid Neal
Cross-Platform Desktop Apps with Electron (CodeStock Edition)
The document discusses Electron as a framework for building desktop applications using web technologies like HTML, CSS, and JavaScript, highlighting its advantages such as rapid development and native UX capabilities. It contrasts Electron with Xamarin, outlining pros and cons for both, and provides insights into the desktop application market and various application ideas. Additionally, it offers guidance on building for different operating systems and suggests tools and modules for development.
Cross-Platform Desktop Apps with Electron (CodeStock Edition)
- 2. Up Ahead • Whatis Electron? • Why desktop? • Crash course • Tips
- 3. .NET + Mono+ Xamarin Pros: • Shared .NET code base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI is hard • Deployment • Licensing
- 5. Electron Pros: • HTML +CSS + JavaScript • Node.js + Chrome • No deployment dependencies
- 7. Electron Cons: • HTML +CSS + JavaScript
- 8. History • Created byGitHub for Atom • Formerly Atom Shell • Active since January 2013 • 1.0 release May 2016 • 1.2.6 release July 6th
- 9. Electron Features • Rapiddevelopment • Themes • Shared code/UI • Deployment + “silent” updates • Native UX
- 10. Why Desktop Apps? •Offline • Printers, devices, other local hardware • On-premises • Internal, LOB • Edit local files • App Store • Kiosk • Desktop > Intranet • Sometimes it “just feels right”
- 11. Desktop App Ideas •Disconnected data entry • Editor • Time management • Media player • Email client • Messaging, collaboration • Kiosk • Mapping, route planner • Social media client • Calendar • Bulk media editor • File management, backup • Document generation, reading • Audio/video conferencing • Games
- 12.
- 16.
- 20. > npm installelectron-prebuilt > touch main.js > touch index.html
- 21.
- 22.
- 23. ( main.js ) (index.html )
- 24. ( main.js ) (home.html ) ( editor.html ) ( settings.html )
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 44.
- 45.
- 46.
- 54. Process modules • app •ipc • dialog • menu, menu-item • power-monitor • tray
- 55. Render modules • ipc •remote • web-frame
- 56. Modules available toboth • clipboard • crash-reporter • native-image • screen • shell
- 57. Recommended Tools • electron-debug •electron-reload • electron-packager • electron-builder • electron-updater • electron-mocha
- 58.
- 59.
- 60. Boilerplate Projects • electron-boilerplate •electron-react-boilerplate
- 61. electron-prebuilt-compile • ES6/ES7 (Babel),TypeScript, CoffeeScript • React.js • LESS • Jade • CSON
- 63.
- 65. Building for Windows •Windows 7/Server 2008 R2 minimum (https://dev.modern.ie) • Visual Studio 2015 Community • Python 2.7 • Node.js • Git
- 66. Building for Mac •OS X 10.8+ • Xcode 5.1+ • Node.js • pyobjc (only if using Python installed with Homebrew)
- 67. Building for Linux •Python 2.7 • Node.js • Clang 3.4+ • GTK+ & libnotify dev headers
- 68. Tips • Use CSSdefault cursor • -webkit-user-drag:none • -webkit-user-drag:text • Keep windows open
- 69. Local Storage • Read/write.json files – Pro tip: use fs-jetpack • nedb • pouchdb
- 70. Relational DB Storage •seriate • pg • mysql • oracledb
- 71. From here… https://github.com/sindresorhus/awesome-electron Pluralsight Course:Rob Conery’s “Electron Playbook” http://electron.atom.io
- 73.