Extended Resources List + Associated Notes

[hollenberry]

Resources

Videos

GitHub

• Electron with Jessica Lord and JIBO
  • Great intro to building a simple Electron App, as well as a demonstration of hardware integration via Bluetooth.
• Electron with Zeke
  • An incredible dive into the history of Electron, including current community use measurements and tips.
  • The accompanying app that Zeke built for his presentation.
• Electron with Katrina and BB8/Sphero
  • A deep dive into an Electron interface, with extended hardware integration via Bluetooth.

Community

• Simple Electron App with Kyle Young
  • 10 minute intro to Electron that cuts out all of the extra context. Straight to the essentials.

Hands-on Exercises and Lists

The following list is intentionally ordered from beginner through advanced steps. You don't need to do all of these!

• Electron API Demo
  • This is a hands on list of exercises and button presses that demonstrate some of Electron's most exciting capabilities.
• Quickstart Guide
  • Tutorial to get started and build a simple Electron app.
• Awesome Electron
  • An exhaustive list resources for learning everything Electron, as well as major apps for viewing best practices and making contributions.
• Photon
  • A UI toolkit for building desktop apps with Electron.
• Electron Forge
  • A promising, but potentially volatile tool to jump right in to Electron development.

[hollenberry]

@hollenberry's notes on the above resources + side conversations with GitHubbers

Chat With Zeke

Chat with Zeke (Essentials)

• Electron is a combination of Chrome + NodeJS
  • In order for JS to be executed out of the browser, you originally had to use + install Node.
  • Electron essentially brings Node back into the browser.
    • This is like being in a candy shop. You have access to everything.
• Electron also involves multiple independent processes
  • JSON needs to be sent back and forth between two JS windows.

Kyle Robinson Videos

Kyle Robinson Videos



Excellent 10 minute videos (for both 0.x and 1.x) to get up and running fast on Electron. Includes exposure to terminology and expected structure/best practices on the Electron platform. Builds a quick app that opens windows, and good reference for differences between versions.



• Electron handles 2 processes

• Main.js handles the lifecycle of the app (opening and closing)

• The other process is the renderer process. This is the Chrome window in the frame.
• We want the renderer to talk to the main process.

Why can’t you run Node dependencies in a browser as is?

• Browsers can’t handle npm. No updates.


• Node requires dependencies that are installed via npm, and a browser isn't capable of doing that ever because it's got to be done locally, electron bridges that gap
• I wish my toaster could microwave stuff, but it can't. I have to put the thing in the microwave.

Universe 2015 with JIBO and jlord

Universe 2015 (Electron 0.x) with JIBO and jlord



JLORD

• The story of Electron will always begin with the story of Atom.
  • The dream of Atom was to build a desktop application with web technology (HTML, CSS, JS). The existing technologies at the time weren’t quite right.

  • Began in Jan 2013, Open Sourced May 2014, named Electron April 2015 (Used to be called “Atom Shell”)

• One-liner: It’s a framework for building cross platform desktop applications with web technology
• Node and Chrome are both built with V8
• Electron always has the latest features of Chrome + you only need to worry about one browser, instead of how something might look across multiple platforms
• Electron has multiple processes
  • Main
    • When you start and end your app
    • Comes with built in modules
      • Dialog
      • Menu
      • Node.js APIs
      • IPC (Inter Process Communication)
      • Browser Window (creates the Render Process)
      • More
    • Similar to Chrome (even if all windows/tabs are closed, you have the file/edit/view bar up top)
  • Render
    • Your web page
    • Also has modules
      • IPC
      • DOM
      • Node
    • Similar to Chrome tabs. Each one is a render process.
• A minimal Electron App has three pieces
  • Package.json
    • Points Electron to where your main process file is defined (main.js)
  • Main.js (Main Process)
    • Points to a file that your window will open.
  • Index.html (Render Process)

JIBO

• SDK is an Atom plugin
• Skills run in Electron
• JS API is an npm module
• Skills can run on the Robot, or on your computer via Wifi, or on your simulator
• Speech Recognition, sound localization/segmentation, text to speech, + Electron features, Natural Language Understanding, Local Perceptual Space (Motion detection and face recognition)
• Wireless connections are fine
• Most of the interactions in this first demo happen on the Atom SDK. Need to see how far they've come in their development process to get access to Electron skills

Universe 2016 with Zeke

Universe 2016 with Zeke

History of the Internet

• 1994: Netscape was the first browser. No JS until 1995.
  • JS was created to allow users to behave dynamically.
• Netscape had 80% of the market before IE launched in 1995.
• Windows has 90% of the desktop operating market, and overtook Netscape.
• Netscape was acquired by AOL in 1998.
  • Netscape never had more money than the profit Microsoft made purely in interest.
  • Netscape open sourced their tech before being acquired, and started the Mozilla organization.
• Firefox 1.0 released in 2000, opposite to IE 6.
  • Firefox was a flexible, extensible browser to compete with IE.
• In 2009, the spider monkey JS compiler was added to Firefox.
  • Prior to this, all JS in computers was interpreted at run time (it was slow).
  • If you had wanted to re-render 10 objects on your page, it would have crippled it.
  • This made JS, and browsers, 10 - 40x faster.
• Around this time, Chrome was also released.
  • Chrome has an Open Source basis, called Chromium (the majority of the Chrome web browser)
• Google hired a team to work on a new JS engine called V8 in 2009.
  • It came out of the gate faster than spider monkey, and it's still the fastest JS engine today.
  • In 2009, we saw divisions between front and back end.
    • Sites were designed with different languages, and being a full stack developer was ambitious.
• Node.js is, at its essence, a way to run JS outside of the web browser.
  • Prior to 2009 (node's launch), there were few ways to run JS outside of the browser.
  • At this time, JS was seen as a toy.
  • Node made JS powerful, because it wasn't limited by weak browsers.
• NPM is a package registry for putting pieces of JS together and sharing them to the world
  • Package.json is a file where you describe all of the fundamentals of your project
    • It's your table of contents.
    • Made it really easy for people to share and distribute code.
  • Nodeschool.io is a great resource for learning Node

Electron

• If you used to be a "lowly web designer", you can now become a desktop app developer.
• Electron brings Node back into the browser.
• You can package Electron apps to every major OS with a common code base.
• Starting with Windows 8, Microsoft has been working from the Universal Windows Platform
  • You can develop apps for the universal platform on one codebase/single app package for phones, Xbox, and computers (all Windows hardware, essentially)
• Mojibar is something cool and a good demo of a discrete Electron app
• SVGSUS is weird, but Zeke likes it, so we should look into understanding this a bit more.
• Electron apps don't need to have a visual interface.

Building an App

• Step One: Go to Node.js and install Node.
• Step Two: Make a directory and run npm init
  • Seems annoying, but this is actually good for you and creates the package.json and helps organize your project.
• Step Three: Install Electron with the save dev flag
  • This saves it as a dev dependency in your package instead of as a regular dependency
    • What's the distinction here?
  • npm install electron --save-dev
• Step Four: Make the two remaining files for Electron (main.js and index.html)
• Step Five: Populate the main.js with Electron things.
  • Same as content above, just point it to index.html on ready.
  • Where OS level stuff lives
• Step Six: Start executing npm files in your webpage (index.html)
  • This is a big deal, Zeke is visibly excited here and the crowd loved it.
    • Essentially, that reaction is what makes Electron the coolest.
    • This is especially cool if you've been doing this stuff for awhile.
      • I'd love examples about what you could never have dreamed of before that's possible now, similar to the above demo reel of Electron apps.
  • In this example, reach into the file system and display them as a web page.
• Step Seven: Define start script
• Step Eight: npm start
• 10,000 Repos on GitHub depend on Electron

Goodies thanks to Chromium

• You get dev tools!
  • It's a Chrome browser window, but with access to everything in your OS!
• You get ES6!
  • No need to use the Babel transpiler to write new JS
• Geolocation
  • You can get the users location without asking for it
  • This is scary, but not when you're the developer
• Webcam
  • You can access the webcam and microphone
  • No permission needed. Also scary.
• P2P with WEBRTC Apps
  • No dependency on servers
  • Examples?
• CSS Custom Properties
  • Like SASS or LESS
  • You can do this with Vanilla CSS now
  • Added manipulation with JS
    • Breaks down the barrier between them
• CSS Containment
  • Controls which pieces of the DOM are rendered and how
• No more CORS
  • What is CORS?
• ASYNC/AWAIT
  • Write code that appears to be synchronous but is user friendly
• HTML Imports
• Desktop Notifications
• Push Notifications to Devices
• Web Audio API
• Mouse and Keyboard control with RobotJS
• Is babel still necessary for future JS?
• Check out npm trymodule
• 1000 packages on npm are related to Electron in some way
• npms.io is a cool way to find NPM modules
• GHUB.io is a better place to evaluate that package once found