Présentation des plateformes

NSH fonctionne sur les téléphones, les ordinateurs de bureau et le web : iOS, Android, macOS, Windows, Linux, GPUI et les pages web. Chaque plateforme a son propre backend, qui dessine avec l’interface native de la plateforme : une application est donc faite de vues UIKit sur un iPhone, de vues AppKit sur un Mac, de widgets GTK 4 sous Linux, d’éléments GPUI dans une application GPUI et de HTML dans un navigateur, avec le texte, la saisie, l’accessibilité et le mode sombre de la plateforme. Tout ce qui se trouve au-dessus du backend est partagé : le graphe réactif, le moteur de rendu, la mise en page Taffy, les composants et les modules natifs sont le même code Rust partout, de sorte qu’une même application s’exécute sur toutes les plateformes. Une application écrite en Rust, c’est ce code et votre crate, sans machine virtuelle JavaScript ; une application TSX exécute ses modules sur QuickJS par-dessus (Building with Rust).

Sur chaque plateforme, une application s’utilise de deux façons : empaquetée comme une application installable de cette plateforme (nsh package), ou intégrée dans votre propre application native, que l’hôte lie une racine Rust ou charge du TSX à l’exécution. Vous la développez avec nsh run (les modifications Rust reconstruisent et relancent l’application, les modifications TSX sont des mises à jour à chaud).

#En un coup d’œil

• GPUI dessine les applications avec GPUI, le framework du projet frère GPUI Kit, sur macOS, Windows et Linux : c’est le backend pour l’intégration dans les applications GPUI et GPUI Kit, qui placent leur AppView dans leur propre arbre d’éléments. Les applications de bureau autonomes s’exécutent et s’empaquettent avec le backend propre à chaque OS (AppKit, Win32, GTK 4).
• Web affiche les applications en HTML dans une page de navigateur : nsh package --target web publie un site statique pour n’importe quel serveur web ou CDN, avec le moteur et la crate d’une application Rust compilés en WebAssembly, et une page de votre choix intègre une application avec createPlayer ou une iframe. C’est aussi lui qui fait fonctionner les démos en direct et le playground de ce site.
• Mac Catalyst exécute le backend iOS dans une fenêtre de la taille d’un iPhone (390×844) sur un Mac, pour le développement. Sélectionnez-le avec --target catalyst pour voir l’aspect d’une application sur un téléphone.

#Développer et empaqueter

nsh run choisit la plateforme de la machine elle-même lorsque vous ne donnez aucun --target : AppKit sur macOS, la fenêtre GTK sous Linux et la fenêtre Win32 sous Windows. Les téléphones se pilotent depuis un ordinateur : iOS depuis un Mac avec Xcode, Android depuis macOS, Linux ou Windows avec le SDK Android (Installation).

Une application Rust (son nsh.json nomme le composant "root") s’exécute et s’empaquette depuis son répertoire : nsh construit le runner propre à l’application pour la cible, avec votre crate et sans QuickJS. Une application TSX nomme son point d’entrée :

# A Rust app, from its directory
nsh run --target macos             # or ios, android, windows, linux, web, catalyst
nsh package --target macos         # or ios, ios-simulator, android, windows, linux, web

# A TSX app
nsh run App.tsx --target macos     # or ios, android, windows, linux, gpui, web, catalyst
nsh package App.tsx --target macos

Chaque OS de bureau empaquette les applications avec son propre backend, construit pour la machine sur laquelle il s’exécute : empaquetez une application Mac sur un Mac, une application Windows sur Windows et une application Linux sur Linux. Packaging décrit la sortie, la signature et les icônes de chaque cible.

#Intégrer dans une application native

Un hôte Rust monte une racine Rust (Root::of::<App>()) avec AppSource::Rust ou App::Rust, et donne à ses moteurs les ensembles d’interface de l’application avec set_ui_sets, de sorte que le TSX qu’il charge importe les composants et modules propres à l’application. Chaque vue est un moteur, et une application peut en afficher plusieurs. L’hôte enregistre ses propres vues natives que les applications peuvent utiliser sur toutes les plateformes (Native components).

#Écrire pour toutes les plateformes

La plus grande partie d’une application n’a besoin d’aucun test de plateforme : les éléments, les styles, la mise en page et les modules se comportent partout de la même manière. Là où les plateformes diffèrent, NSH donne à la différence un emplacement unique (Platform-specific code) :

• L’environnement indique où l’application s’exécute : en Rust os(), idiom() et is_desktop() (nsh_core::prelude), en TSX platform.os, platform.idiom, platform.desktop et platform.select depuis nsh. L’OS est iOS, Android, macOS, Windows, Linux ou le web.
• Les props propres à une plateforme vont dans ios={{…}}, android={{…}}, web={{…}} ou desktop={{…}} en TSX (desktop : macOS, Windows, Linux et navigateurs de bureau).
• La saisie suit la plateforme. Les téléphones ont le toucher et le clavier logiciel ; les ordinateurs de bureau ont la souris, le pavé tactile et le clavier.

Les composants d’une application sont dessinés avec les primitives de NSH : ils fonctionnent donc aussi bien sur ordinateur que sur téléphone, avec le même aspect. Une mise en page de bureau se construit à partir des primitives (view, text, scroll, virtual_list, … ; View, Text, Scroll, List, … en TSX) et d’un test pour le bureau, comme le fait la mise en page de bureau de la galerie :

use nsh_core::prelude::*;

#[component]
pub fn Shell() -> impl IntoElement {
    // macOS, Windows, Linux and desktop browsers get a sidebar; phones get tabs.
    view()
        .flex_1()
        .child(if is_desktop() { sidebar_layout() } else { tab_layout() })
}

fn sidebar_layout() -> AnyElement {
    view().flex_1().flex_row().into_element()
}

fn tab_layout() -> AnyElement {
    view().flex_1().flex_col().into_element()
}

import { View } from "nsh";
import { platform } from "nsh";

export function Shell() {
  // macOS, Windows, Linux and desktop browsers get a sidebar; phones get tabs.
  return <View class="flex-1">{platform.desktop ? <SidebarLayout /> : <TabLayout />}</View>;
}

function SidebarLayout() {
  return <View class="flex-1 flex-row" />;
}

function TabLayout() {
  return <View class="flex-1 flex-col" />;
}

Chaque backend énumère ce qu’il fait à sa manière : macOS, Windows, Linux, GPUI.

#Voir aussi

• Getting started : une première application, exécutée sur chaque plateforme.
• Building with Rust : les applications écrites en Rust, et Rust avec TSX.
• Installation : les outils dont chaque plateforme a besoin.
• Architecture : ce qui est partagé et ce que fait chaque backend.