Electron

1. Electron

Electron actually focus on desktop cross-platform development. I think, if GitHub create a project that builds a mobile app based on web technologies, they will create another project and probably will be called like Photon. 😃

If you want to use web technologies to build mobile applications, consider to use Apache Cordova, Ionic Framework, PhoneGap or probably one of other numerous JS frameworks.

1.1. docs

• https://www.electronjs.org/zh/docs/latest/

1.2. Electron Fiddle

Electron Fiddle 带来最简单的 Electron 入门方式, 你可以使用 Electron Fiddle 创建并运行小段 Electron 程序, 从一个简单的模板开始, 随心所欲地挥洒你的创意, 选择一个 Electron 版本欣赏运行效果, 最后, 你可以将其下载保存, 或推送 GitHub Gist 上, 所有人都可以输入网址运行你的 Fiddle。

1.2.1. Electron Editors

Electron Fiddle allows you to build little experiments and mini-apps with Electron. Each Fiddle has at least three of these files: A main script, a renderer script, a preload script, and an HTML file.

If you require() a module, Fiddle will install it automatically. It will also automatically provide you with autocomplete information for the electron module.

1.2.2. Choose an Electron Version

Electron Fiddle knows about all released Electron versions, downloading your versions automatically in the background.

Open the preferences to see all available versions and delete those previously downloaded.

1.2.3. Run Your Fiddle

Hit this button Run to give your Fiddle a try and start it.

1.2.4. Share Your Fiddle

Like what you’ve built? You can save your Fiddle as a public GitHub Gist, allowing other users to load it by pasting the URL into the address bar. If they don’t have Electron Fiddle, they can see and download your code directly from GitHub.

You can also package your Fiddle as a standalone binary or as an installer from the “Tasks” menu.

1.3. Electron Basics

1.3.1. Main Script

Every Electron app starts with a main script, very similar to how a Node.js application is started. The main script runs in the “main process”. To display a user interface, the main process creates renderer processes – usually in the form of windows, which Electron calls BrowserWindow.

To get started, pretend that the main process is just like a Node.js process. All APIs and features found in Electron are accessible through the electron module, which can be required like any other Node.js module.

The default fiddle creates a new BrowserWindow and loads an HTML file.

1.3.2. HTML

In the default fiddle, this HTML file is loaded in the BrowserWindow. Any HTML, CSS, or JavaScript that works in a browser will work here, too. In addition, Electron allows you to execute Node.js code. Take a close look at the <script /> tag and notice how we can call require() like we would in Node.js.

1.3.3. Render Script

This is the script we just required from the HTML file. In here, you can do anything that works in Node.js and anything that works in a browser.

By the way: If you want to use an npm module here, just require it. Electron Fiddle will automatically detect that you requested a module and install it as soon as you run your fiddle.