How does Atom use Electron?


#1

Wanted to figure out the build process for Atom, and how it uses Electron
have a bunch of questions, they are related only by this fact

  1. How does Atom use Electron ?

    I see that there is a require("electron") in a couple of places. but there is no electron is package.json. nor is it
    installed by a dependency. checked by doing a yarn install and checking the 'yarn.lock` file

    script/build works ie. does not give an error (even though the generated app gives an error - have mentioned the
    stacktrace below). So where does it install Electron. did not find it in vendor as well

  2. Atom has it’s own build script ?

    Atom does not use electron-builder or some such ?
    Is there a package for the atom build process ?

  3. What is the development process like ?

    did not find a “start” script or some such in package.json. only preinstall and test
    ie. something which will open up an Electron app locally

PS: after opening the built app on OSX 10.10.5, get an error backtrace saying

Uncaught Exception:
Error: Module version mismatch. Expected 49, got 48.
    at Error (native)
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:168:20)
    at Object.Module._extensions..node (module.js:583:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:182:18)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/deepak/Code/atom/out/Atom.app/Contents/Resources/app.asar/node_modules/nslog/lib/nslog.js:5:11)

#3
  1. I’m not sure I understand the question here. Atom is an Electron application, so it uses Electron in the same ways that other Electron applications use it: to provide access to Node, provide a UI, cross-platform capabilities, etc.
  2. Yes (see the script folder)
    1. No, it doesn’t
    2. No, there isn’t
  3. See the build instructions for your platform. Once you’re ready to build, run script/build --install and then launch Atom as normal.

Keep in mind that Atom was the first Electron application. Electron was created from Atom, Electron was originally called “atom-shell” for that reason. Most of Atom and Atom’s build process predates all of the convenience packages that are available for Electron today.


#4

thanks @leedohm for answering :slight_smile:

I am new to electron, so i was looking at the electron source to see:

  1. how the code is organised ?
  2. what is the build process like ?
  3. any development goodies. like debugging, logging, hot reloading etc ?
  4. what are the cli and CMD params for starting electron for local development ?

I have taken a look at the quick start app
so when i took a look at atom’s package.json
i was expecting it be be similar: :slight_smile:

  1. the electron package under devDependencies. wanted to see which version is being used
  2. a entry for main to start reading the code
  3. how to start electron for local development

there was no devDependencies for electron’s package.json, but there was a electronVersion
then I took a look at the main entry point.
It has an require('electron') entry

but when i installed the dependencies in atom using yarn
there was no entry for electron there. so electron is not a child dependency as well.

so am confused now as to, how atom is pulling in the dependency for electron ?
guessed it would be one of two things:

  1. installed globally
  2. via the build scripts
  3. vendored

tested (1) by uninstalling the global install. build did not still error out
as for (2), not sure where the build script is pulling in electron from ?
and did not see it being vendored as well (3)

so i guess that is the first part of my question:
how exactly does Atom depend on Electron ?
And where is the dependency being pulled in (or used) ?

Am making it seem more involved than it really was :sweat_smile:

Again my point of reference is the quick start app
it has a npm start which calls electron . of course

How do the electron developers develop locally ?
Do they generating a build to see and test changes ?
What is the local development workflow like for the Atom app ?


#5

Atom copies down Electron via its build scripts. It depends on Electron the same way any other Electron application does by using require('electron').

Atom uses electron-packager to build a fully packaged Electron application with a renamed Electron executable (to “Atom” of course).

Where is it used? You can search GitHub for that information:

If you mean the Atom developers, as I mentioned above, we run script/build --install as per the build instructions and then launch Atom normally. If you mean the people who develop the Electron framework, I’m actually not sure since I’ve never contributed code to Electron.

It depends on what is changed. Because so much of Atom is in Atom packages, a full build is rarely necessary. And even when code is changed in atom/atom itself, most of the time it is still JavaScript code … so only a relaunch of Atom is necessary.

  1. Change some code
  2. Run some tests
  3. When things look good, relaunch Atom (possibly in Dev Mode, depending on what is being changed)
  4. Optionally test things manually
  5. Rinse, repeat

#6

thanks @leedohm :smile:


#7

Is the Atom build incremental ?
Are there any articles or talks on how Atom contributors work ?


#8

Not really in the way that someone developing using C/C++ would mean “incremental build”, no. But since Atom is made up of a lot of JavaScript code, things that have been changed get compiled on startup, load or activation time. So yes, there are various levels of “build” in that sense.

There is this blog post about the process of building an Atom package. Since so much of what we do is working on packages, it is a pretty decent indication of a lot of our workflow.