Vytváření malých desktopových aplikací pomocí Ember.js a Tauri

Nedávno jsem si hrál s Tauri, sadou nástrojů pro vývoj desktopových aplikací s webovými technologiemi. Zde je návod, jak to funguje s aplikací Ember.js.

Co je Ember?

Ember.js je frontendový framework podobný React a Vue JS. Použil jsem ho k vytvoření své aplikace Snipline a také se používá pro weby jako Intercom a LinkedIn. Má přístup „konvence nad konfigurací“ podobný Ruby on Rails.

Co je Tauri?

Tauri je knihovna pro tvorbu desktopových aplikací s webovými technologiemi. Podobné jako Electron s několika klíčovými rozdíly:

1) Je postaven v Rustu spíše než Javascript.

2) Používá nativní webový prohlížeč vašeho operačního systému místo toho, aby sdružoval Chrome, což má za následek docela malé aplikace – alespoň ve srovnání s Electronem!

Instalace a vývoj

Zde jsou příkazy, které jsem spustil pro jednoduchou aplikaci Ember, abych otestoval směrování s Ember a Tauri. Pro informaci používám Node. 14.17.0.

Nastavení Ember

npm install -g ember-cli
ember new tauri-test --lang en
ember g route index
ember g route from-ember
ember serve

Upravil jsem dvě vygenerované šablony, app/templates/index.hbs a 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>

To stačí k tomu, abyste mohli začít a otestovat, že směrování v rámci aplikace funguje. Nyní pojďme k tomu dobrému.

Nastavení Tauri

Nejprve postupujte podle průvodce nastavením vašeho OS v dokumentaci Tauri.

Poté je potřeba jej přidat do vašeho ember projektu – viz integrační dokumentace.

To je to, co jsem udělal, aby to fungovalo.

npm install @tauri-apps/cli
// Add the `tauri` command to your `package.json`
{
  // This content is just a sample
  "scripts": {
    "tauri": "tauri"
  }
}

Projděte procesem inicializace.

npm run tauri init

Po zobrazení výzvy se ujistěte, že jste nastavili vývojový server na http://localhost:4200 a umístění souborů (vzhledem k src-tauri ) až ../dist .

Pak už zbývá jen spustit podpříkaz development (ujistěte se, že váš server Ember je také stále aktivní).

npm run tauri dev

A to je vše! Funguje to i při přebíjení za tepla!

Balení

Vzhledem k tomu, že vývoj stojí mimo cestu, zde je návod, jak aplikaci zabalit pro distribuci. Nebudu se v této příručce dívat na automatické aktualizace, ale Tauri to podporuje.

ember build --environment=production
npm run tauri build

V instalačním programu MacOS .dmg soubor vyšel na 5,4 MB a .app soubor 12,4 MB.

Pro Windows měl vygenerovaný instalační program MSI velikost 4,9 MB a spustitelný soubor 8,9 MB.

Komunikace mezi Rustem a Ember

Když jsem to udělal ještě o krok dále, řekl jsem si, že otestuji jednoduchý příklad ping/pong komunikace mezi Ember a Rustem. Další informace naleznete v dokumentaci Tauri.

Následující kód umožňuje Emberu předat řetězec Rust, Rust zkontroluje hodnotu a přepne mezi textem 'Ping' a 'Pong'. V Emberu jsem přidal tlačítko, které zobrazuje text odpovědi a aktualizuje jej po kliknutí.

// 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
        })
    }
}

Zde je aktualizovaný app/templates/index.hbs soubor šablony.

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

Docela v pohodě! Jsem nadšený, že uvidím, kam se Tauri ubírá, a uvidím, jak roste jeho ekosystém pluginů. Mám v něm zkusit postavit celý projekt nebo napsat další návody s použitím obou technologií? Dejte mi vědět v komentářích!