Ember.js 및 Tauri로 작은 데스크탑 앱 빌드

나는 최근에 웹 기술을 사용하여 데스크톱 앱을 개발하기 위한 툴킷인 Tauri를 가지고 놀았습니다. 다음은 Ember.js 애플리케이션에서 작동하게 하는 방법입니다.

엠버란?

Ember.js는 React 및 Vue JS와 유사한 프런트엔드 프레임워크입니다. 내 앱Snipline을 빌드하는 데 사용했으며 Intercom 및 LinkedIn과 같은 웹 사이트에도 사용됩니다. Ruby on Rails와 유사한 '구성보다 관례' 접근 방식이 있습니다.

타우리는 무엇입니까?

Tauri는 웹 기술로 데스크톱 애플리케이션을 만들기 위한 라이브러리입니다. Electron과 유사하지만 몇 가지 중요한 차이점이 있습니다.

1) Javascript가 아닌 Rust로 제작되었습니다.

2) Chrome을 번들로 제공하는 대신 운영 체제의 기본 웹 브라우저를 사용하므로 최소한 Electron과 비교할 때 매우 작은 애플리케이션이 생성됩니다!

설치 및 개발

다음은 간단한 Ember 앱에서 Ember 및 Tauri로 라우팅을 테스트하기 위해 실행한 명령입니다. 참고로 저는 Node.js를 사용하고 있습니다. 14.17.0.

엠버 설정

npm install -g ember-cli

ember new tauri-test --lang en

ember g route index
ember g route from-ember

ember serve

생성된 두 템플릿(app/templates/index.hbs 및 app/templates/from-ember.hbs 을 편집했습니다.

{{page-title "Index"}}
<h1>Hello, Tauri 😄</h1>
<LinkTo @route="from-ember">Click here</LinkTo>

{{page-title "FromEmber"}}
<h1>From Ember 🧡</h1>
<LinkTo @route="index">Back</LinkTo>

시작하고 앱 내에서 라우팅이 작동하는지 테스트하기에 충분합니다. 이제 좋은 내용을 살펴보겠습니다.

타우리 설정

먼저, follow the set up guide for your OS in the Tauri documentation .

그런 다음 ember 프로젝트에 추가하는 문제입니다 - See the integration documentation .

이것이 내가 작동하도록 한 것입니다.

npm install @tauri-apps/cli

// Add the `tauri` command to your `package.json`
{
  // This content is just a sample
  "scripts": {
    "tauri": "tauri"
  }
}

초기화 프로세스를 실행합니다.

npm run tauri init

프롬프트가 표시되면 개발 서버를 http://localhost:4200 로 설정하고 파일 위치(src-tauri 에 상대적)를 ../dist 로 설정했는지 확인하십시오.

그런 다음 개발 하위 명령을 실행하기만 하면 됩니다(Ember 서버도 여전히 실행 중인지 확인하십시오).

npm run tauri dev

그리고 그게 다야! 핫 리로딩에서도 작동합니다!

포장

개발이 끝난 상태에서 배포를 위해 앱을 패키징하는 방법은 다음과 같습니다. 이 가이드에서는 자동 업데이트를 살펴보지 않겠지만 Tauri does have support for this .

ember build --environment=production
npm run tauri build

MacOS 설치 프로그램.dmg에서 파일은 5.4MB로, .app 파일은 12.4MB로 나왔습니다.



Windows의 경우 생성된 MSI 설치 프로그램은 4.9MB이고 실행 파일은 8.9MB입니다.

Rust와 Ember 간의 통신

한 단계 더 나아가 Ember와 Rust 간의 통신에 대한 간단한 핑/퐁 예제를 테스트해야겠다고 생각했습니다. 자세한 내용은 check the Tauri docs .

다음 코드는 Ember가 문자열을 Rust에 전달하도록 허용하고 Rust는 값을 확인하고 텍스트 'Ping'과 'Pong' 사이를 전환합니다. Ember에서 응답 텍스트를 표시하고 클릭 시 업데이트하는 버튼을 추가했습니다.

// src-tauri/src/main.rs
#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

// Add a new function that takes a string and returns a string
#[tauri::command]
fn my_custom_command(current_text: String) -> String {
    // Depending on what we receive from Ember we toggle the response
    if current_text == "Ping" {
        "Pong!".into()
    } else {
        "Ping".into()
    }
}

fn main() {
  // Add the custom command so that the frontend can invoke it
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![my_custom_command])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

// app/controllers/index.js
import Controller from '@ember/controller'
import { action } from '@ember/object'
import { tracked } from '@glimmer/tracking'
import { invoke } from '@tauri-apps/api/tauri'

export default class IndexController extends Controller {
    // Set the default button text
    @tracked buttonText = 'Ping'
    // Create an action that will be attached to a button in the template
    @action
    checkRust() {
        // Invoke the Rust command and update the button text to the response
        invoke('my_custom_command', { currentText: this.buttonText }).then(resp => {
            console.log(resp)
            this.buttonText = resp
        })
    }
}

다음은 업데이트된app/templates/index.hbs 템플릿 파일입니다.

{{page-title "Index"}}
<h1>Hello, Tauri 😄</h1>
<LinkTo @route="from-ember">Click here</LinkTo>
<button {{ on 'click' this.checkRust }}>{{this.buttonText}}</button>

정말 멋진! 나는 Tauri가 어디로 가는지, 그리고 플러그인 생태계가 성장하는 것을 보게 되어 기쁩니다. 전체 프로젝트를 빌드해야 합니까 아니면 두 기술을 모두 사용하여 자습서를 더 작성해야 합니까? 댓글로 알려주세요!