gloo

Se faire passer

Une boîte à outils pour construire des applications Web et des bibliothèques rapides et fiables avec Rust and Wasm.

• Quoi?
• Objectifs
• Exemple
• Impliquez-vous!

Quoi?

Gloo est une collection de bibliothèques, et ces bibliothèques fournissent des emballages de rouille ergonomiques pour les API du navigateur. web-sys / js-sys est très difficile / gênant à utiliser directement, donc Gloo fournit des emballages autour des liaisons brutes, ce qui facilite la consommation de ces API. C'est pourquoi il est appelé une "boîte à outils", au lieu de "bibliothèque" ou "framework".

Arrière-plan

Dans la feuille de route 2019 du Rust and Webassembly Working Group, nous avons choisi de cultiver délibérément notre écosystème de bibliothèque en construisant une boîte à outils modulaire:

Collaboration sur une boîte à outils modulaire

L'idée de construire [des bibliothèques de haut niveau] d'une manière modulaire qui permettra à d'autres membres de la communauté de rassembler les composants d'une manière différente est très excitante pour moi. Nous espérons que l'écosystème dans son ensemble dans son ensemble.

En particulier, j'aimerais voir un effort modulaire pour implémenter une bibliothèque DOM virtuelle avec JSX comme la syntaxe. Il y a eu plusieurs efforts sur ce front, mais tous semblaient relativement monolithiques et «batteries incluses». J'espère que cela changera en 2019.

- Ryan Levick in Rust Webassembly 2019

Ne créez pas de silos de marque. L'image de marque pourrait peut-être être utile pour atteindre la gloire. Mais si nous voulons vraiment que l'histoire de Rust Wasm réussisse, nous devrions penser à des moyens de collaborer au lieu de régler le territoire.

- Yoshua Wuyts dans Wasm 2019

En 2018, nous avons créé des bibliothèques fondamentales comme js-sys et web-sys . En 2019, nous devons construire des bibliothèques modulaires de haut niveau en plus et collecter les bibliothèques sous une caisse de boîte à outils parapluie pour une expérience holistique. Cette boîte à outils et ses bibliothèques mettront à la disposition toutes les batteries que vous souhaitez lors du ciblage de WasM.

Construire une application Web Greenfield? Utilisez l'intégralité de la boîte à outils pour appuyer sur le sol en cours d'exécution. Créer soigneusement un minuscule module WASM et l'intégrer dans un projet JavaScript existant? Saisissez cette bibliothèque ciblée dont vous avez besoin à partir de la boîte à outils et utilisez-la par elle-même.

Gloo est cette boîte à outils modulaire.

Objectifs

• Prise en charge des applications Web entières et de petites bibliothèques ciblées: Gloo, et la collection de caisses de services publics qui composent sa boîte à outils, devraient vous aider à être productive si vous écrivez une application Web en champ vert avec Rust et Wasm. Et cela devrait également vous aider à être productif si vous écrivez une petite bibliothèque WASM ciblée qui sera intégrée dans une application JavaScript existante.

• Cultivez l'écosystème de la bibliothèque Rust and Wasm: nous voulons utiliser Gloo comme fonction de forçage pour créer et partager les éléments constitutifs du développement Web. Les types de bibliothèques que tout cadre ou bibliothèque de haut niveau devraient créer. Nous voulons explicitement démêler ces bibliothèques et les rendre disponibles pour le partage dans l'ensemble de l'écosystème.

• Boîte à outils modulaire, pas le cadre: Gloo devrait être une collection lâche de caisses utilitaires qui peuvent être utilisées individuellement, ou toutes ensemble. Gloo ne présume pas qu'il "possède" toute la page Web, qu'il contrôle la fonction start WASM, etc. Ce manque d'hypothèses permet d'atteindre plus de cas d'utilisation (comme le remplacement chirurgical d'un chemin de code chaud à partir de js) que les cadres monolithiques ne le peuvent. Dans la mesure du possible, Gloo devrait préférer les interfaces aux implémentations, de sorte que différentes implémentations avec différentes approches sont swapables.

• Rapide: tissons les abstractions à coût de Rust et concevons avec les performances à l'esprit, pour montrer à tout le monde à quelle vitesse le Web peut être;)

• Fiable: chaque caisse doit être soigneusement testée. Tests de navigateur sans tête. Tests QuickCheck. Utilisation du système de type pour rendre les classes entières de bogues impossibles.

• Petit: petite taille de code pour les charges de page plus rapides. Ne tirant pas accidentellement toute l'infrastructure de panique et de formatage. Les utilisateurs ne devraient pas avoir à faire un compromis entre l'utilisation de bibliothèques Gloo et la petite binaire Wasm.

• Idiomatique: Nous voulons construire des API rouillées, qui semblent naturelles à utiliser. Les API du Web n'ont pas été conçues pour la langue de rouille, et vous pouvez ressentir l'inadéquation d'impédance de temps en temps. Corrigeons cela, comblez l'écart et fabriquons des bibliothèques qui sont une joie à utiliser.

Exemple

Cet exemple utilise gloo::events pour ajouter des auditeurs d'événements et gloo::timers pour créer des délais d'attente. Il crée un élément <button> et ajoute un écouteur d'événements "cliquer" à lui. Chaque fois que le bouton est cliqué, il démarre un temps mort d'une seconde, qui définit le contenu du texte du bouton sur "Hello from One Second!".

 use gloo :: { events :: EventListener , timers :: callback :: Timeout } ;
use wasm_bindgen :: prelude :: * ;

pub struct DelayedHelloButton {
    button : web_sys :: Element ,
    on_click : events :: EventListener ,
}

impl DelayedHelloButton {
    pub fn new ( document : & web_sys :: Document ) -> Result < DelayedHelloButton , JsValue > {
        // Create a `<button>` element.
        let button = document . create_element ( "button" ) ? ;

        // Listen to "click" events on the button.
        let button2 = button . clone ( ) ;
        let on_click = EventListener :: new ( & button , "click" , move |_event| {
            // After a one second timeout, update the button's text content.
            let button3 = button2 . clone ( ) ;
            Timeout :: new ( 1_000 , move || {
                button3 . set_text_content ( Some ( "Hello from one second ago!" ) ) ;
            } )
            . forget ( ) ;
        } ) ;

        Ok ( DelayedHelloButton { button , on_click } )
    }
} 

Impliquez-vous!

Vous voulez nous aider à construire Gloo? Découvrez CONTRIBUTING.md !