Speaking of desktop applications, we must have used the sea to go. What storm video, QQ, Skype and so on, is not a new thing! But have you seen how to write a desktop application? Historically, how have we written desktop applications?

In fact, the history of desktop application is not long, not to find a variety of information, just by memory, I can think of the desktop application programming language has appeared: C++, Delphi, VB, winForm, WPF, Swing, AWT, QT, Flash, Objective-C, Swift… There may be more.

Isn’t it a bit expensive? So many languages \ technology!! What if you happen to have a critical boss or PM who desperately wants their app to be available on multiple platforms (regardless of whether they have customers on those platforms or not)? Do you take the lead, fail at each technology stack, and thank your boss by committing suicide? Or leave decisively?

Of course not, lazy programmers should look for solutions that are easier to implement and meet the needs of their bosses. So, let’s take a look at today’s topic, electron!

What is electron?

Review images

According to the electron website, electron is a solution for developing cross-platform desktop applications using web technology! Isn’t it a little exciting to be able to write a desktop application using the skills you already know HTML, javascript, and CSS? !

Who’s using Electron?

The famous IDEAtom front boundary is written using electron.

Check out some other notable applications written based on Electron:

Review images

So next, let me begin!

Using program generator

npm install -g generator-electron-naiveCopy the code

If the Unix like operating system is used, add sudo before the command

Create a project

So I’ll start with a simple little app called Todo:

yo electron-naiveCopy the code

When you type the above command, the generator will ask you a series of questions to answer as needed:

Review images

Do you want to load a remote URL directly? If “yes” is selected, you will be asked to enter the exact address again

debugging

cd todo
npm run devCopy the code

After the preceding command is executed, the following application page is displayed:

Review images

Find todo/ SRC /index.html, open it in your favorite IDE, and copy the following code to override the original contents of index.html:



    
        
        TODO
    
    
        
        
    
        
            
        
    
         
                Add item
                
         
                
         
            
        
    
        

        
    
Copy the code

    Let’s take a look at our app interface, which looks like this (no style, sorry for the ugliness) :

    Review images

    Homework: write some style, let the program become beautiful up!

    Generate the application package

    During the previous project generation process, the “Which platform you’d like to package to? In this question, you can select the operating system you want to support in the future in order to generate the corresponding packaging code.

    Now let’s generate a package:

    npm run distCopy the code

    The resulting executable appears in the following location:

    Review images

    Happy double click use it!!