Can you handle suddenly having you develop Electron?

If the leader suddenly said he needed to develop a front-end desktop application, it would be a natural thing for our front-end ER to choose Electron. But in fact, many students are not familiar with Electron.

If we were suddenly asked to develop Electron, a lot of people would be confused and confused. Relying on relatively little information on the Internet, Electronn will slowly explore and step on the road to fulfill its needs.

In order to solve these problems, we have completed a project and open source it to help you learn about Electron.

Learn quickly and get started on the Electron: Electron -playground

Electron playground is a recent open source project of the front end team of our company (Good Future Group Xiao Blackboard).

The purpose of the electron playground project

Help the front-end son better and faster to learn and understand the front-end desktop technology Electron, less detours.

What can electron- Playrgound do for me to learn electron

  1. Tutorial article with GIF examples and a working demo.
  2. Systematical collation of Electron related APIS and functions.
  3. With a walkthrough, try out the electron’s features yourself.

Now I will introduce the content of the project in detail.

Project presentations

1. With GIF examples and operational demo articles

The project is accompanied by a series of tutorial articles, all of which are pit proven and systematic, with GIF examples, and operational demo examples, flowcharts, and more.

The project comes with a GIF demo

Menu: Adds a menu

GIF demonstration of project Demo operation

Dialog: Message prompt and acknowledgement

Dialog: Select file

The flow chart

Window management – Create and manage Windows

Systematical collation of Electron related APIS and functions

Electronn-playground takes a systematic look at Electron’s API and features, as well as engineering related content.

Electron – Playground list classification

  • engineering
    • Crash analysis and collection
    • Development and debugging
    • Packing problem
    • Applying the update
  • application
    • Custom protocol
    • System prompts and file selection
    • The menu
    • The system tray
    • File download
  • Window management
    • Create and manage Windows
    • Hide and Restore
    • Focus, out of focus
    • Full screen, maximize, minimize
    • Window communication
    • Window type
    • Window events
  • other
    • security

A screenshot of the classification of the field-playground list

Drilling field

For more complex operations, we created a walkthrough from Fiddle.

The walkthrough is integrated with vscode’s web-side editing library: monaco-editor, making the coding experience similar to vscode.

How to start

The startup process of electron playground is as follows:

git clone https://github.com/tal-tech/electron-playground.git // Download the project
npm install // Install dependencies
npm run start // Start the project
Copy the code

Welcome to download learning/experience

The purpose of electron playground is to get started and learn electron quickly by trying various characteristics of electron and making the characteristics of electron what you see is what you get.

Interested students can download the project and experience it. I hope this project can help you better and faster learn and understand the front-end desktop technology Electron and avoid detours

If you feel good, give a Star⭐️ to encourage us