Hello everyone!

Relatively long ago, the task of learning to write a term paper came to me, and I finally wrote it. So that the good does not disappear, I decided to arrange it (course) in the form of an article. I hope this article will be useful not only for those who want to plunge into the world of Web development, but also for those who believe that the modern web is not so complicated to pay a high salary.

So, the theme of the course:

Develop a program "Search". The program should search for the given words in a text file. Words are entered sequentially from the keyboard. For each word, the number of occurrences and line numbers of the text should be determined. If the specified word is not in the file, the program should display a message.

I have been developing all sorts of SPA and PWA for a very long time, but somehow there was no case to touch Electron . Slowly closing MS Visual Studio, I thought, why not ...

And, let's start with the developer tools.

Modern software is developed using the ISR (IDE) - Integrated Development Environment. Such development environments allow the programmer to develop high-quality software ( software ), going through the stages of development, from interactive writing of program code, compilation, assembly and debugging, automatic launch of tests, and ending with convenient and comprehensively customizable other developer tools. Before the advent of ISR, development took a lot of time even of the simplest software product. At the same time, the quality of development also suffered. SRIs are primarily intended to automate the development process. The more complex the technology and the environment, the more flexible and complex it will beISR and tools that it can implement in itself.

. . — Visual Studio Code, Microsoft Windows, Linux macOS. «» - . , Git, , IntelliSense . : , . , , . Visual Studio Code , …

- Visual Studio Code

– PhpStorm. - Web . JetBrains IntelliJ IDEA. PhpStorm PHP, HTML JavaScript , PHP JavaScript. PhpStorm PHP 5.3, 5.4, 5.5, 5.6, 7.0, 7.1, 7.2 7.4 ( ), , , , , . SQL- .

, IntelliJ, .

"" PhpStorm , 7 .

– PhpStorm

1.

1.1

Electron — , , GitHub, HTML, CSS JavaScript. Electron Chromium Node.js , Mac, Windows Linux.

Electron 2013 Atom. 2014 . Electron , .

Chromium — , , . Chromium Google Chrome. Electron Chromium .

Node.js — , V8 ( JavaScript ), JavaScript . Node.js JavaScript - API ( C++), , , JavaScript-. Node.js , -, Node.js ( NW.js, AppJS Electron Linux, Windows macOS) (, tessel espruino). Node.js - ( ) /.

Electron Google Chrome – n- . .

Electron

Electron IPC.

IPC ( inter-process communication) — . , , IPC. , .

, IPC, :

• ;
• ;
• ;
• (RPC).

, - , . Electron', , API Node.js -, .

. , «». . .

"" . , , . , , . , , ( ) – npm (Node Package Manager), GitHub ( 2018 Microsoft).

Npm :

• -;
• (CLI);
• .

(CLI), , .

, / , .
, .

1.2 /

:

1. web Electron – ;
2. , Electron.

() web . web .

, «»:

• Webpack, webpack-cli, webpack-merge. Webpack – , () , , . , Webpack JavsScript-, CSS, , html- .
  Webpack — code splitting ( ). , .
• @ babel/core – Babel.JS , javascript ES5 ES-2015+. babel/core — , .
• @ babel/preset-env – @babel/core, , , . «babel/preset-env» .browserslistrc, . .
• babel-plugin-prismjs – babel. PrismJS , , Prism.
• babel-loader – Webpack. babel/core .
• copy-webpack-plugin – Webpack. .
• css-loader – Webpack. import url() import/require() (resolve) .
• html-webpack-plugin – Webpack. html index Webpack’. , , , .
• mini-css-extract-plugin – / Webpack. .css , .
• null-loader – Webpack. "" , .
• Pug, pug-loader, pug-plain-loader – Pug- , Haml JavaScript Node.js . pug-loader, pug-plain-loader – Webpack, , .
• sass-loader – Webpack. sass (Syntactically Awesome Stylesheets) – CSS, CSS . sass-loader CSS pug.
• style-loader – css css <style> Web .
• vue-loader, vue-template-compiler – .vue, . vue-template-compiler Vue ( template) , .

, «»:

• prismjs – Prism, , , -. -, , .
• Vue – JavaScript Framework. Framework «». Framework Google — .
• Vuex – , . Vuex . Vue , , . . — . , , .
• vue-prism-editor – vue prismjs. prismjs, vue .
• electron-find – node.js electron, , .

2. «»

2.1

«» Windows. . - OC ( ) .

. Node.JS. https://nodejs.org/ru/ . Node.JS npm (Node Package Manager) (CLI).

Node.JS , , :

npm init

:

1. ;
2. ;
3. ;
4. JavaScript ;
5. ;
6. Git ;
7. , , npm;
8. ;
9. , , npm;

JSON.

npm .

, Enter. : package.json, .

, ( PhpStorm) , JSON .

{
  "name": "stext",
  "version": "1.0.0",
  "description": " : :   «».         .     .           .      ,      ",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "dev": "webpack --mode=development --config webpack.dev.js --progress",
    "build": "webpack --config webpack.prod.js --env.F --mode=production --progress --hide-modules",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "roman.gavrilow.ru.stext",
    "icon": "app/mainicon.png",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }
  },
  "author": "roman@gavrilow.ru",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "babel-plugin-prismjs": "^2.0.1",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.5.1",
    "electron": "^8.2.1",
    "electron-builder": "^22.4.1",
    "html-webpack-plugin": "^4.0.4",
    "mini-css-extract-plugin": "^0.9.0",
    "null-loader": "^3.0.0",
    "prismjs": "^1.20.0",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "vuex": "^3.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "electron-find": "^1.0.6",
    "vue-prism-editor": "^0.5.1"
  }
}

package.json. :

"scripts"

• "start": "electron .", Electron . , , , "main".
• "dev": "webpack --mode=development --config webpack.dev.js --progress", . , .
• "build": "webpack --config webpack.prod.js --env.F --mode=production --progress --hide-modules", , .
• "pack": "electron-builder --dir", Electron «dist\» .
• "dist": "electron-builder" — Electron , .

devDependencies dependencies , . 1.2

package.json , npm install npm. node_modules , , , , …

2.2

     2.2.1 .

Electron main package.json. "main.js".

:

const { app, BrowserWindow, globalShortcut, Menu, dialog } = require('electron');

• app — Electron .
• BrowserWindow – render .
• globalShortcut – .
• Menu – .
• Dialog – .

. , . Electron. :

const { app, BrowserWindow, globalShortcut, Menu, dialog } = require('electron');

let win;

const isMac = process.platform === 'darwin';

function createWindow () {
    //   .
    win = new BrowserWindow({
        width: 800,
        height: 600,
        center: true,
        title: '   .   ..',
        icon: 'app/mainicon.png',
        webPreferences: {
            nodeIntegration: true
        }
    });

    //   index.html .
    win.loadFile('app/index.html');

    // ,      .
    //win.webContents.openDevTools();

    //    "focus",       
    //      Ctrl + F
    win.on('focus', () => {
        globalShortcut.register('CommandOrControl+F', function () {
            if (win && win.webContents) {
                //    "on-find"   .
                win.webContents.send('on-find')
            }
        })
    });

    //    "blur",        
    //       Ctrl + F
    win.on('blur', () => {
        globalShortcut.unregister('CommandOrControl+F')
    });

}

const template = [
    {
        label: '',
        submenu: [
            {
                label: '',
                click: async () => { //          ""
                    //      
                    let files = await dialog.showOpenDialog(win,{ properties: ['openFile'] });

                    if (win && win.webContents) {
                        //    "on-files-select"      .
                        await win.webContents.send('on-files-select', files)
                    }
                }
            },

            { type: 'separator' }, //  .
            isMac ? { role: 'close' } : { role: 'quit' } //      Electron
        ]
    },
    {
        label: '',
        submenu: [
            {
                label: '',
                click: async () => { //         ""
                    if (win && win.webContents) {
                        //    "on-find"   .
                        win.webContents.send('on-find')
                    }
                }
            }
        ]
    }
];

app.whenReady().then(function(){
    createWindow();
});

app.on('will-quit', () => {
    //    .
    globalShortcut.unregisterAll()
});

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

Menu Menu.buildFromTemplate(template), template JSON JavaScript Object. "main.js". :

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

«»

     2.2.2 IPC.

, , Electron. , - render , IPC . Electron , , BrowserWindow:

win.webContents.send('on-find')
await win.webContents.send('on-files-select', files)

, «src/electron.js»

ipcRenderer.on('on-find', (e, args) => {

});

ipcRenderer.on('on-files-select', (e, args) => {

});

'on-find' – .
'on-files-select' – , , «». . , .

     2.2.3

«» Vue. -, Vue . (view), . , Vue (SPA, Single-Page Applications), .

Vue Model-View-ViewModel (MVVM) . 2005 (John Gossman), Presentation Model. , Windows Presentation Foundation, Silverlight Microsoft.

MVVM MVC , , , « ». MVC/MVP , (. Controller) Presenter. WPF Silverlight « », . , MVC, - , MVC/MVP.

Vue . «». . , , :

Vue — , , Vue .

Vue , Webpack, (entry). JavaScript «.js». «src/main.js». Web , , (bundle).

, Webpack webpack.common.js, . Webpack :

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

Webpack , .

Vue, vue-prism-editor, 1.2 . ( ) «».

Vue 3 : , . . . “src/app.vue”. template lang="pug", vue-loader pug , pug html . , html.

<script> . Vue , (hooks) . , , , . «» created(), . , - “src/main.js”. (ON_SELECT_FILE) , IPC, Electron. IPC “on-files-select”

ON_SELECT_FILE . created() , , , , language, . language – . , prism-editor . , text. text , prism-editor , .

     2.3

Electron , Webpack’. 2 : development (webpack.dev.js) production (webpack.prod.js). webpack.dev.js webpack.prod.js webpack.common.js. , . "webpack-merge" npm. devDependencies «package.json». , , Webpack’ (. scripts «package.json».) Webpack’ : path: path.resolve(__dirname, './app'). development production , production : + js, css , , VueJS , (bundle) Webpack’.

development :

npm run dev

«/app».

, , .

"production" :

npm run build

«/app» Webpack .

2.4 «»

Electron :

npm start

"scripts" :

"start": "electron ."

«electron .» Electron «» , "main" «package.json»

     2.4.1

«». «main.js», .

, «» «» Ctrl+F.

, .
(. .). . , , / (1/2). "<" ">" .

, , "0/0".

     2.4.2

, . , , open source npm, API Electron. dependencies «package.json» 'electron-find'. «src/electron.js». Webpak’ . () ipc 'on-find', Electron Ctrl+F «». (. main.js)

2.5 «»

, - Web , « » . Electron Chromium, , , , Google Chrome. , (main.js), Electron, «Dev Tools». (render ):

win.webContents.openDevTools();

2.6 «»

, - , , . 'devDependencies 'electron-builder. 'electron-builder — Electron « ». 'electron-builder «package.json». 64- Windows:

  "build": {
    "appId": "roman.gavrilow.ru.stext",
    "icon": "app/mainicon.png",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }
  },

:

• appId – AppUserModelIDs Windows CFBundleIdentifier MacOS;
• icon – ;
• win – ;
• target – / ;
• arch – ;

, :

npm run dist

.

. :

npm run pack

«dist/win-unpacked» .

web (), Webpack «/app», . , electron-builder «» () .asar resources. tar- , . Electron .

Electron API: Node API, Node.js Web API, Chromium. API asar:

• Node API: Electron Node API, , fs.readFile require asar , — .
• Web API: - file:. Node API, asar , :
  

  let response = await this.$http.get('file:///path/to/example.asar/file.txt', parms);

«.asar» , , , original-fs, fs asar:

const originalFs = require('original-fs');
originalFs.readFileSync('/path/to/example.asar');

«» Web , , - , . – Electron (Chromium). (50 ; 180 – ),

Electron , ( Skype). , ( (IDE) — Visual Studio Code).

.

«» , , , , .

, Ctrl+F .

, - , Electron . … «» , . .

, , . , , C++ C++ QT. web , , , C++ , Web , , GET POST . , , , .

Perhaps in the future, with a certain refinement of Chromium, we will have the opportunity to launch Electron applications that run in a separate extended sandbox of the already running main process of the Google Chrome browser, and we will only need to start only one render process, thereby saving RAM and having the minimum size of the Electron application itself, which will no longer include a full Chromium.

GitHub project:
https://github.com/gewisser/SText