¡Hola a todos!

Hace relativamente tiempo, se me ocurrió la tarea de aprender a escribir un trabajo final, y finalmente lo escribí. Para que lo bueno no desaparezca, decidí organizarlo (curso) en forma de artículo. Espero que este artículo sea útil no solo para aquellos que desean sumergirse en el mundo del desarrollo web, sino también para aquellos que creen que la web moderna no es tan complicada para pagar un salario alto.

Entonces, el tema del curso:

Desarrollar un programa "Buscar". El programa debe buscar las palabras dadas en un archivo de texto. Las palabras se ingresan secuencialmente desde el teclado. Para cada palabra, se debe determinar el número de apariciones y números de línea del texto. Si la palabra especificada no está en el archivo, el programa debería mostrar un mensaje.

He estado desarrollando todo tipo de SPA y PWA durante mucho tiempo, pero de alguna manera no había caso para tocar Electron . Lentamente cerrando MS Visual Studio, pensé, ¿por qué no ...

Y, comencemos con las herramientas de desarrollador.

El software moderno se desarrolla utilizando el ISR (IDE) - Entorno de desarrollo integrado. Dichos entornos de desarrollo permiten al programador desarrollar software ( software ) de alta calidad , pasando por las etapas de desarrollo, desde la escritura interactiva del código del programa, la compilación, el ensamblaje y la depuración, el lanzamiento automático de pruebas y el final con otras herramientas de desarrollador convenientes y completamente personalizables. Antes del advenimiento de ISR, el desarrollo tomó mucho tiempo incluso del producto de software más simple. Al mismo tiempo, la calidad del desarrollo también sufrió. Los SRI están destinados principalmente a automatizar el proceso de desarrollo. Cuanto más compleja sea la tecnología y el medio ambiente, más flexible y compleja será.ISR y herramientas que puede implementar en sí mismo.

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

Quizás en el futuro, con un cierto refinamiento de Chromium, podamos lanzar aplicaciones Electron que se ejecuten en una caja de arena extendida separada del proceso principal que ya se está ejecutando en el navegador Google Chrome, y solo necesitaremos comenzar un solo proceso de renderizado, ahorrando así RAM y teniendo el tamaño mínimo de la aplicación Electron en sí, que ya no incluirá un cromo completo.

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