Skip to main content

What's New in Electron

· 2 min read
jlord
jlord

There have been some interesting updates and talks given on Electron recently, here's a roundup.

Source​

Electron is now up to date with Chrome 45 as of v0.32.0. Other updates include...

Better Documentation​

new docs

We have restructured and standardized the documentation to look better and read better. There are also community-contributed translations of the documentation, like Japanese and Korean.

Related pull requests: electron/electron#2028, electron/electron#2533, electron/electron#2557, electron/electron#2709, electron/electron#2725, electron/electron#2698, electron/electron#2649.

Node.js 4.1.0​

Since v0.33.0 Electron ships with Node.js 4.1.0.

Related pull request: electron/electron#2817.

node-pre-gyp​

Modules relying on node-pre-gyp can now be compiled against Electron when building from source.

Related pull request: mapbox/node-pre-gyp#175.

ARM Support​

Electron now provides builds for Linux on ARMv7. It runs on popular platforms like Chromebook and Raspberry Pi 2.

Related issues: atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366.

Yosemite-style Frameless Window​

frameless window

A patch by @jaanus has been merged that, like the other built-in OS X apps, allows creating frameless windows with system traffic lights integrated on OS X Yosemite and later.

Related pull request: electron/electron#2776.

Google Summer of Code Printing Support​

After the Google Summer of Code we have merged patches by @hokein to improve printing support, and add the ability to print the page into PDF files.

Related issues: electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom​

Atom has now upgraded to Electron v0.30.6 running Chrome 44. An upgrade to v0.33.0 is in progress on atom/atom#8779.

Talks​

GitHubber Amy Palamountain gave a great introduction to Electron in a talk at Nordic.js. She also created the electron-accelerator library.

Building native applications with Electron by Amy Palomountain​

Ben Ogle, also on the Atom team, gave an Electron talk at YAPC Asia:

Building Desktop Apps with Web Technologies by Ben Ogle​

Atom team member Kevin Sawicki and others gave talks on Electron at the Bay Are Electron User Group meetup recently. The videos have been posted, here are a couple:

The History of Electron by Kevin Sawicki​

Making a web app feel native by Ben Gotow​

Electron Meetup at GitHub HQ

· One min read
jlord
jlord

Join us September 29th at GitHub's HQ for an Electron meetup hosted by Atom team members @jlord and @kevinsawicki. There will be talks, food to snack on, and time to hangout and meet others doing cool things with Electron. We'll also have a bit of time to do lightning talks for those interested. Hope to see you there!

Talks

  • Jonathan Ross and Francois Laberge from Jibo will share how they use Electron to animate a robot.
  • Jessica Lord will talk about building a teaching tool, Git-it, on Electron.
  • Tom Moor will talk about the pros and cons of building video and screen sharing on Electron with speak.io.
  • Ben Gotow will preview N1: The Nylas Mail Client and talk about developing it on Electron.

Details​

electron-meetup-office-2

Electron Documentation

· 4 min read
jlord
jlord

This week we've given Electron's documentation a home on electronjs.org. You can visit /docs/latest for the latest set of docs. We'll keep versions of older docs, too, so you're able to visit /docs/vX.XX.X for the docs that correlate to the version you're using.

You can visit /docs to see what versions are available or /docs/all to see the latest version of docs all on one page (nice for cmd + f searches).

If you'd like to contribute to the docs content, you can do so in the Electron repository, where the docs are fetched from. We fetch them for each minor release and add them to the Electron site repository, which is made with Jekyll.

If you're interested in learning more about how we pull the docs from one repository to another continue reading below. Otherwise, enjoy the docs!

The Technical Bits​

We're preserving the documentation within the Electron core repository as is. This means that electron/electron will always have the latest version of the docs. When new versions of Electron are released, we duplicate them over on the Electron website repository, electron/electronjs.org.

script/docs​

To fetch the docs we run a script with a command line interface of script/docs vX.XX.X with or without the --latest option (depending on if the version you're importing is the latest version). Our script for fetching docs uses a few interesting Node modules:

Tests help us know that all the bits and pieces landed as expected.

Jekyll​

The Electron website is a Jekyll site and we make use of the Collections feature for the docs with a structure like this:

electron.atom.io
└── _docs
    ├── latest
    ├── v0.27.0
    ├── v0.26.0
    ├── so on
    └── so forth

Front matter​

For Jekyll to render each page it needs at least empty front matter. We're going to make use of front matter on all of our pages so while we're streaming out the /docs directory we check to see if a file is the README.md file (in which case it receives one front matter configuration) or if it is any other file with a markdown extension (in which case it receives slightly different front matter).

Each page receives this set of front matter variables:

---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

The README.md gets an additional permalink so that has a URL has a common root of index.html rather than an awkward /readme/.

permalink: /docs/v0.27.0/index.html

Config and Redirects​

In the site's _config.yml file a variable latest_version is set every time the --latest flag is used when fetching docs. We also add a list of all the versions that have been added to the site as well as the permalink we'd like for the entire docs collection.

latest_version: v0.27.0
available_versions:
  - v0.27.0
collections:
  docs: { output: true, permalink: '/docs/:path/' }

The file latest.md in our site root is empty except for this front matter which allows users to see the index (aka README) of the latest version of docs by visiting this URL, electron.atom.io/docs/latest, rather than using the latest version number specifically (though you can do that, too).

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

Layouts​

In the docs.html layout template we use conditionals to either show or hide information in the header and breadcrumb.

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
  {{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
  page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

To create a page showing the versions that are available we just loop through the list in our config on a file, versions.md, in the site's root. Also we give this page a permalink: /docs/

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

Hope you enjoyed these technical bits! If you're interested in more information on using Jekyll for documentation sites, checkout how GitHub's docs team publishes GitHub's docs on Jekyll.

Atom Shell is now Electron

· 2 min read
kevinsawicki
kevinsawicki

Atom Shell is now called Electron. You can learn more about Electron and what people are building with it at its new home electronjs.org.

electron

Electron is the cross-platform application shell we originally built for the Atom editor to handle the Chromium/Node.js event loop integration and native APIs.

When we got started, our goal wasn't just to support the needs of a text editor. We also wanted to create a straightforward framework that would allow people to use web technologies to build cross-platform desktop apps with all of the native trimmings.

In two years, Electron has grown immensely. It now includes automatic app updates, Windows installers, crash reporting, notifications, and other useful native app features — all exposed through JavaScript APIs. And we have more in the works. We plan to extract even more libraries from Atom to make building a native app with web technologies as easy as possible.

So far, individual developers, early-stage startups, and large companies have built apps on Electron. They've created a huge range of apps — including chat apps, database explorers, map designers, collaborative design tools, and mobile prototyping apps.

Check out the new electronjs.org to see more of the apps people have built on Electron or take a look at the docs to learn more about what else you can make.

If you've already gotten started, we'd love to chat with you about the apps you're building on Electron. Email info@electronjs.org to tell us more. You can also follow the new @ElectronJS Twitter account to stay connected with the project.

⚡ 💙 🔌