【Electron】40만건의 레코드를 귀신과 같은 속도로 그리는 클라이언트 어플리케이션의 개발

13247 단어 Electron자바스크립트C#Node.js

배경



WPF 그리기 (주로 스크롤 성능) 매우 느립니다.

WPF는 유연성이 높은 만큼 대량 데이터의 묘화는 불가능했지만,
허용되지 않는 레벨에서 지연이 발생하고 있었기 때문에 곤란해지고 있었습니다··.
그럴 때 아무렇지도 않게 "Clusterize.js"이라는 대량 데이터 드로잉 JS를 발견

이 Clausterize.js, 그리기가 악마처럼 빠릅니다. 50만 건의 레코드도 바삭바삭하게 그릴 수 있다.
「어라? 이 JS를 ASP.Net Core로 작성한 페이지에 묻어 Electron으로 움직이면 초고속이 아닌가?」
그렇게 해 보았습니다.

우선 Electron의 도입 부분을, Electron 환경 구축(for Windows) - Qiita 를 참고로 실시,
그 후 Clusterize.js의 동작 확인까지 실시한 자신용 망비록입니다.

NodeJS - 설치



Nodejs.org - Downloads로 이동하여 아래 링크에서 설치 프로그램을 다운로드하십시오.


더블 클릭으로 실행하면 다음 화면이 표시됩니다.
잠시 버튼이 Disabled이지만 조금 기다리면 다음 단계로 진행합니다.


특히 설정을 변경할 필요가 없으므로 설치 프로그램의 안내대로 진행해 주십시오.



위 화면이 표시되면 NodeJS 설치 완료.
만약을 위해 완료 후는 이하의 커멘드로 버젼 확인을 실시합시다.

C:\>node -v
v10.16.0

프로젝트 만들기



놀라운 폴더를 만듭니다.



해당 폴더에서 Git Bash를 엽니다. 그렇지 않다면 설치하십시오.


열면 npm init 에서 프로젝트를 초기화.
기본적으로 엔터 연타로 문제 없음.Is this OK? (yes) 의 확인이 나오면 yes 를 박아 완료.
user_name@machine_name MINGW64 ~/source/repos/magicbullet
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (magicbullet)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\user_name\source\repos\magicbullet\package.json:

{
  "name": "magicbullet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

최종 이미지.ll 명령으로 package.json이 있는지 확인하십시오.
user_name@machine_name MINGW64 ~/source/repos/magicbullet
$ ll
total 1
-rw-r--r-- 1 owner 1049089 207  8月  9 15:01 package.json

package.json
{
  "name": "magicbullet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Electron - 설치



그런 다음 Electron을 설치합니다. 이하의 커멘드를 투입.
npm install electron -g

npm install --save-dev electron

버전 확인을 실시하여 설치되어 있는지 확인.
user_name@machine_name MINGW64 ~/source/repos/magicbullet
$ electron -v

v6.0.1

진입점 만들기



package.json과 같은 경로에 다음 두 파일을 넣습니다.

magicbullet/index.js
"use strct";

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow = null;

// 全てのウィンドウが閉じたら終了
app.on("window-all-closed", () => {
  if (process.platform != "darwin") {
    app.quit();
  }
});


// Electronの初期化完了後に実行
app.on("ready", () => {
  //ウィンドウサイズを1280*720（フレームサイズを含まない）に設定する
  mainWindow = new BrowserWindow({width: 1280, height: 720, useContentSize: true});
  //使用するhtmlファイルを指定する
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

완성 이미지.


Electron - 컴파일



다음 명령을 입력합니다.
user_name@machine_name MINGW64 ~/source/repos/magicbullet
$ electron .



움직였다! 기쁘다! !

Clusterize.js 소개



이번에는 Clusterize.js 데모 페이지를 Electron에서 사용해 보겠습니다.
우선은 git에서 데모 페이지의 소스를 취득.
### 任意のディレクトリで実行
user_name@machine_name MINGW64 ~/source/repos
$ git clone https://github.com/NeXTs/Clusterize.js
Cloning into 'Clusterize.js'...
remote: Enumerating objects: 776, done.
remote: Total 776 (delta 0), reused 0 (delta 0), pack-reused 776
Receiving objects: 100% (776/776), 1.89 MiB | 2.01 MiB/s, done.
Resolving deltas: 100% (416/416), done.

user_name@machine_name MINGW64 ~/source/repos
$ cd Clusterize.js/

user_name@machine_name MINGW64 ~/source/repos
$ git checkout gh-pages
Switched to a new branch 'gh-pages'
Branch 'gh-pages' set up to track remote branch 'gh-pages' from 'origin'.

체크아웃한 코드를 Electron용 디렉토리에 복사합니다.

이런 느낌이 듭니다.


Electron을 시작합니다.
user_name@machine_name MINGW64 ~/source/repos/magicbullet
$ electron .



40만건의 데이터도 바삭바삭 스크롤할 수 있다!
지금 클라이언트 애플리케이션에서 이만큼의 데이터를 스트레스 없이 그리기에는 최고의 선택이 아닐까요? (모르겠다)

이후는, 실제의 시스템에 짜넣을 수 있을까 시험해 가고 싶습니다.

추가:

어! ? 네 CT 론. 뿌리 t 라는 것이 있다! ?



【개인개발/OSS】칸반 앱을 만들어 보았다
【Electron】계속·HTML+JS+C#=클라이언트 어플리케이션!? Electron.Net에서 개발·배포해 본다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage