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.

Cross-Platform Desktop Apps with Electron (CodeStock Edition)

1,568 views

Published on

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.

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/gpGYz ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/gpGYz ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Cross-Platform Desktop Apps with Electron (CodeStock Edition)

  1. 1. Up Ahead • What is Electron? • Why desktop? • Crash course • Tips
  2. 2. .NET + Mono + Xamarin Pros: • Shared .NET code base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI is hard • Deployment • Licensing
  3. 3. Electron Pros: • HTML + CSS + JavaScript • Node.js + Chrome • No deployment dependencies
  4. 4. Electron Cons: • HTML + CSS + JavaScript
  5. 5. History • Created by GitHub for Atom • Formerly Atom Shell • Active since January 2013 • 1.0 release May 2016 • 1.2.6 release July 6th
  6. 6. Electron Features • Rapid development • Themes • Shared code/UI • Deployment + “silent” updates • Native UX
  7. 7. 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”
  8. 8. 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
  9. 9. Atom
  10. 10. Nylas N1
  11. 11. > npm install electron-prebuilt > touch main.js > touch index.html
  12. 12. ( main.js )
  13. 13. ( main.js )
  14. 14. ( main.js ) ( index.html )
  15. 15. ( main.js ) ( home.html ) ( editor.html ) ( settings.html )
  16. 16. main.js
  17. 17. main.js
  18. 18. main.js
  19. 19. main.js
  20. 20. main.js
  21. 21. main.js
  22. 22. main.js
  23. 23. main.js
  24. 24. index.html
  25. 25. index.html > electron main.js
  26. 26. index.html
  27. 27. index.html
  28. 28. index.html
  29. 29. index.html
  30. 30. index.html
  31. 31. index.html
  32. 32. index.html
  33. 33. index.html
  34. 34. main.js
  35. 35. main.js
  36. 36. main.js
  37. 37. Process modules • app • ipc • dialog • menu, menu-item • power-monitor • tray
  38. 38. Render modules • ipc • remote • web-frame
  39. 39. Modules available to both • clipboard • crash-reporter • native-image • screen • shell
  40. 40. Recommended Tools • electron-debug • electron-reload • electron-packager • electron-builder • electron-updater • electron-mocha
  41. 41. Devtron
  42. 42. Test your app
  43. 43. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate
  44. 44. electron-prebuilt-compile • ES6/ES7 (Babel), TypeScript, CoffeeScript • React.js • LESS • Jade • CSON
  45. 45. photonkit.com
  46. 46. Building for Windows • Windows 7/Server 2008 R2 minimum (https://dev.modern.ie) • Visual Studio 2015 Community • Python 2.7 • Node.js • Git
  47. 47. Building for Mac • OS X 10.8+ • Xcode 5.1+ • Node.js • pyobjc (only if using Python installed with Homebrew)
  48. 48. Building for Linux • Python 2.7 • Node.js • Clang 3.4+ • GTK+ & libnotify dev headers
  49. 49. Tips • Use CSS default cursor • -webkit-user-drag:none • -webkit-user-drag:text • Keep windows open
  50. 50. Local Storage • Read/write .json files – Pro tip: use fs-jetpack • nedb • pouchdb
  51. 51. Relational DB Storage • seriate • pg • mysql • oracledb
  52. 52. From here… https://github.com/sindresorhus/awesome-electron Pluralsight Course: Rob Conery’s “Electron Playbook” http://electron.atom.io
  53. 53. 12:55 PM Room 200-C

×