Bonjour à tous!

Il y a relativement longtemps, la tâche d'apprendre à écrire un article de terminologie m'est venue et je l'ai finalement écrit. Pour que le bien ne disparaisse pas, j'ai décidé de l'arranger sous forme d'article. J'espère que cet article sera utile non seulement pour ceux qui veulent plonger dans le monde du développement Web, mais aussi pour ceux qui croient que le Web moderne n'est pas si compliqué à payer un salaire élevé.

Donc, le thème du cours:

Développer un programme "Recherche". Le programme doit rechercher les mots donnés dans un fichier texte. Les mots sont saisis séquentiellement à partir du clavier. Pour chaque mot, le nombre d'occurrences et les numéros de ligne du texte doivent être déterminés. Si le mot spécifié n'est pas dans le fichier, le programme doit afficher un message.

Je développe toutes sortes de SPA et de PWA depuis très longtemps, mais il n'y avait aucune raison de toucher Electron . En fermant lentement MS Visual Studio, je me suis dit, pourquoi pas ...

Et, commençons par les outils de développement.

Un logiciel moderne est développé à l'aide de l' ISR (IDE) - Integrated Development Environment. De tels environnements de développement permettent au programmeur de développer des logiciels ( logiciels ) de haute qualité , passant par les étapes de développement, de l'écriture interactive du code du programme, de la compilation, de l'assemblage et du débogage, du lancement automatique des tests et se terminant par d'autres outils de développement pratiques et entièrement personnalisables. Avant l'avènement des ISR, le développement prenait beaucoup de temps, même du produit logiciel le plus simple. Dans le même temps, la qualité du développement a également souffert. Les ISR sont principalement destinés à automatiser le processus de développement. Plus la technologie et l'environnement sont complexes, plus ils seront flexibles et complexesISR et outils qu'il peut implémenter en lui-même.

. . — 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 . , , , .

Peut-être qu'à l'avenir, avec un certain raffinement de Chromium, nous aurons l'occasion de lancer des applications Electron qui s'exécutent dans un bac à sable étendu distinct du processus principal déjà en cours d'exécution du navigateur Google Chrome, et nous n'aurons besoin de démarrer qu'un seul processus de rendu, économisant ainsi de la RAM et ayant la taille minimale de l'application Electron elle-même, qui n'inclura plus un chrome complet.

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