Electron 및 네이티브 코드 데모

[admin]

https://github.com/felixrieseberg/electron-native-code-demos?ref=felixrieseberg.com

Electron 및 네이티브 코드 데모

이 저장소는 네이티브 코드와 네이티브 UI 요소를 Electron 애플리케이션에 통합하는 방법을 보여줍니다. 튜토리얼이자 자체 개발을 위한 시작점으로 사용됩니다. 모든 패키지는 다음을 구현합니다.

문자열을 받아서 반환하는 함수 helloWorld()입니다. JavaScript에서 호출할 수 있으며 네이티브 코드에서 실행됩니다. 간단한 호출의 시작점으로 사용하세요. 좋은 예로는 특정 운영 체제 API를 호출하는 것입니다.
모든 네이티브 컨트롤이 있는 기본 todo 편집기를 시작하는 함수 helloGui()입니다. todo가 추가, 변경 또는 삭제될 때마다 JavaScript 측에서 세부 정보가 포함된 이벤트가 방출됩니다. 이를 시작점으로 사용하여 Electron 애플리케이션을 완전한 네이티브 사용자 인터페이스로 확장합니다.
패키지
swift: Swift, SwiftUI, Foundation을 사용합니다. JavaScript와 Swift 간의 브리징은 Objective-C++에서 수행됩니다.
objective-c: Objective-C와 Cocoa를 사용합니다. JavaScript와 Objective-C 간의 브리징은 Objective-C++에서 수행됩니다.
cpp-win32: 버전 6에서는 C++와 Windows Common Controls(Win32 API 컨트롤이라고도 함)를 사용합니다. JavaScript와 Win32 세계를 연결하는 작업은 C++로 이루어집니다.
cpp-linux: C++와 GTK3를 사용합니다. JavaScript와 GTK 세계 간의 연결은 C++로 이루어집니다.
예제를 빌드하고 실행하려면 이 저장소를 복제하고 기본 예제 앱을 실행할 수 있습니다.

git clone https://github.com/felixrieseberg/electron-native-code-demos
cd electron-native-code-demos
npm i
npm run build
npm run electron
Electron용 네이티브 애드온 빌드
네이티브 Node.js 애드온을 빌드하여 Electron 앱에 네이티브 코드를 추가할 수 있습니다 . Electron의 메인 스레드는 모든 운영 체제에서 적절한 GUI 애플리케이션을 실행하도록 이미 설정되어 있으므로 네이티브 애드온을 작성하는 것은 비교적 간단합니다. 이 튜토리얼에서는 각 특정 플랫폼으로 분기하기 전에 여러 단계를 공유합니다.

공유 구현 세부 사항
모든 예는 에서 찾을 수 있습니다 packages. 모두 몇 가지 기본 사항을 공유합니다.

package.json
네이티브 Node.js 애드온은 일반적으로 일반적인 Node 패키지이므로 require()이름으로 확인할 수 있습니다.

binding.gyp&node-gyp
node-gyp이 파일은 빌드 시스템을 구성합니다. Google의 GYP("Generate Your Projects") 도구의 포트인 에서 사용됩니다 . 다양한 플랫폼과 Node.js 버전에서 C/C++ 코드를 컴파일하는 복잡한 작업을 처리하며 macOS, Windows, Linux에서 편리하게 작동합니다. 구성 파일은 binding.gypPython과 유사한 구문(실제로는 주석이 있는 JSON)으로 작성되었으며 컴파일할 소스 파일, include 디렉터리, 링크할 라이브러리, 다양한 플랫폼별 설정 및 컴파일 플래그를 지정합니다.

Visual Studio의 msbuild나 Xcode를 구성해야 하는 경우에는 .에서 구성합니다 binding.gyp.

N-API레이어 및 선택적 브리지 레이어
모든 패키지에는 N-API 계층 역할을 하는 애드온 파일이 있습니다. Objective-C의 경우 해당 파일은 라고 하며 objectivec_addon.mm, C++ 패키지에서는 라고 합니다 cpp_addon.cc. 여러 가지 중요한 작업을 수행합니다.

JavaScript/Node.js와 네이티브 코드 사이의 브리지 역할을 합니다.
JavaScript ↔ C++ 유형 변환을 처리합니다.
네이티브 코드와 JavaScript 코드 간의 이벤트 콜백을 관리합니다.
ABI(Application Binary Interface) 안정성을 보장하기 위해 N-API를 사용합니다.
즉, Node.js 세계와 네이티브 세계 사이의 접착제입니다. 얼마나 많은 "타입 변환"을 수행해야 하는지는 JavaScript 세계와 네이티브 세계 사이에서 얼마나 많은 타입을 앞뒤로 운반하고 싶은지에 따라 달라집니다. 이는 주로 여러분에게 달려 있지만, N-API는 이를 상당히 간단하게 만듭니다.

또한, 선택한 언어가 C++에서 "멀어질"수록 상위 수준 코드(예: Swift나 Objective-C)를 하위 수준 코드에 노출하기 위한 추가적인 브리지 계층이 필요할 수 있습니다.

여러분은 궁금할 것입니다: 왜 이런 레이어를 추가할까요? 꼭 필요한 걸까요? 더 적은 파일과 코드 줄에 같은 기능을 집어넣을 수는 있지만, 저는 그렇게 하지 말라고 경고하고 싶습니다. 여러 가지 이점이 있습니다:

1. 관심사 분리:
   // N-API Layer (objectivec_addon.mm)
   Napi::Value HelloWorld(const Napi::CallbackInfo& info) {
   // Handle JS types and call bridge
   NSString* result = [ObjCBridge helloWorld:nsInput];
   }

// Bridge Layer (ObjCBridge.m)

• (NSString*)helloWorld:(NSString*)input {
  // Handle native implementation
  return [NSString stringWithFormat:@"Hello from Objective-C! You said: %@", input];
  }

2. ABI 안정성:
   N-API는 안정적인 ABI를 제공하므로 애드온을 다른 Node.js 버전에 맞게 다시 컴파일할 필요가 없습니다.
   N-API 코드를 별도로 유지하면 버전에 따라 달라지는 코드가 격리됩니다.
3. 언어 경계:
   // N-API Layer: C++ with Node.js bindings
   class ObjectiveCAddon : public Napi::ObjectWrap {
   // JavaScript interface code
   }

// Bridge Layer: Pure Objective-C
@interface ObjCBridge : NSObject {
// Native interface code
}
4) 이벤트 처리
// N-API Layer: Sets up JavaScript callbacks
[ObjCBridge setTodoAddedCallback:makeCallback("todoAdded")];

// Bridge Layer: Manages native callbacks
static void (^todoAddedCallback)(NSString*);

// UI Layer: Triggers events
[self.delegate todoAdded:jsonString];