Cross-Platform Desktop Apps with Electron (JSConf UY)
•
5 gefällt mir•1,476 views
Would you like to leverage your HTML, CSS, and JavaScript skills to build cross-platform desktop applications? Electron is an open source application shell created by GitHub, designed to make building great desktop applications easy. You may have already experienced Electron using applications such as Atom, Slack, or Visual Studio Code. In this talk, you will learn its features, how to quickly get started, and tips from my experience building Electron applications.
![Cross-Platform Desktop
Apps with Electron
David Neal | reverentgeek.com | @reverentgeek
var trustMe = {
has: ["Beard", "Motorcycle"],
consumes: ["Bacon", "Caffeine"]
};](https://image.slidesharecdn.com/jsconfuy-cross-platformdesktopappswithelectron-160415173819/85/Cross-Platform-Desktop-Apps-with-Electron-JSConf-UY-1-320.jpg)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Cross-Platform Desktop Apps with Electron (JSConf UY)
Ähnlich wie Cross-Platform Desktop Apps with Electron (JSConf UY) (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Cross-Platform Desktop Apps with Electron (JSConf UY)
- 1. Cross-Platform Desktop Apps with Electron David Neal | reverentgeek.com | @reverentgeek var trustMe = { has: ["Beard", "Motorcycle"], consumes: ["Bacon", "Caffeine"] };
- 2. Up Ahead • What is Electron? • Why desktop? • Crash course • Tips
- 3. .NET + Mono + Xamarin Pros: • Shared .NET code base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI • Deployment • Licensing
- 5. Electron Pros: • HTML + CSS + JavaScript • Node.js + Chrome • No deployment dependencies
- 7. Electron Cons: • HTML + CSS + JavaScript • Seriously, JavaScript • Decisions, Decisions
- 8. Electron • Created by GitHub for Atom • Formerly Atom Shell • Active since January 2013
- 9. Electron Features • Rapid development • 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. Atom
- 16. Nylas N1
- 20. > npm install electron-prebuilt > touch main.js > touch index.html
- 21. ( main.js )
- 22. ( main.js )
- 23. ( main.js ) ( index.html )
- 24. ( main.js ) ( home.html ) ( editor.html ) ( settings.html )
- 25. main.js
- 26. main.js
- 27. main.js
- 28. main.js
- 29. main.js
- 30. main.js
- 31. main.js
- 32. main.js
- 33. index.html
- 35. index.html
- 36. index.html
- 37. index.html
- 38. index.html
- 40. main.js
- 41. main.js
- 49. Process modules • app • ipc • dialog • menu, menu-item • power-monitor • tray
- 50. Renderer modules • ipc • remote • web-frame
- 51. Modules available to both • clipboard • crash-reporter • native-image • screen • shell
- 52. Recommended Tools • electron-debug • electron-reload • electron-packager • electron-builder • electron-updater • electron-mocha
- 53. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate
- 54. electron-prebuilt-compile • ES6/ES7 (Babel), TypeScript, CoffeeScript • React.js • LESS • Jade • CSON
- 55. photonkit.com
- 58. Tips • Use CSS default cursor • -webkit-user-drag:none • -webkit-user-drag:text • Keep windows open
- 59. Resources https://github.com/sindresorhus/awesome-electron Pluralsight Course: Rob Conery’s “Electron Playbook”