progress wasm presentation

README.md

@@ -4,6 +4,8 @@ This repository contains all* the slides of the presentations and conferences of
 
 Ce dépôt regroupe toutes* les slides des présentations et conférences de librelois en rapport avec la monnaie libre.
 
+*since 2019 / depuis 2019
+
 ## Liste des présentations
 
 ### Rustkathon mars 2019

common.css

 .dark {
-        background: #222;
-        background-color: #222;
-        color: #fff;
-      }
-      h1, h2, h3 {
-        font-weight: normal;
-      }
\ No newline at end of file
+  background: #222;
+  background-color: #222;
+  color: #fff;
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+a {
+  color: rgb(0, 238, 255);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+a:hover {
+  color: #fff;
+}
+
+.question {
+  font-style: italic;
+  color: #888;
+}
\ No newline at end of file

rustkathon2019_1/wasm/markdown.md

-class: dark, center, middle
+class: dark, middle, center
 
-# Web Assembly
+# Rust & Web Assembly
 
-.center[![wasm logo](../../images/wasm-logo.png)]
+![rust logo](../../images/rust-logo-128x128.png) ![wasm logo](../../images/wasm-logo.png)
+
+_23 mars 2019_  
+_Rustkathon 1_  
+_Librelois <elois@ifee.fr>_
+
+Suivre la présentation sur votre ecran :
+
+`librelois.duniter.io/slides/rustkathon2019_1/wasm`
 
 ---
 
+layout: true
 class: dark
 
-# Agenda
+.center[Rust & Web Assembly]
+
+---
+
+## Sommaire
+
+1. Qu’est-ce que WebAssembly ?
+2. Pourquoi WebAssembly ?
+3. Wasm + Rust = &#128150;
+4. 2 target  différentes
+5. Wasm-pack
+6. Les références
+7. Installation des outils
+8. Atelier : hello world
+9. Atelier : binding Rust/Js
+10. Étude d'un exemple concret : `dup-tools-wasm`
+
+---
+
+## .center[Qu’est-ce que WebAssembly ?]
+
+.center[![wasm logo](../../images/wasm-logo.png)]
+
+--
+
+WebAssembly est un standard de binaire (byte code) compréhensible par les navigateurs **modernes** (Firefox, Chrome, Safari et même Edge).
+
+--
+> .question[C’est donc un nouveau langage ?]
+
+--
+
+Non, c’est un format binaire comme l’assembleur. Il a été conçu pour être utilisé avec des langages haut niveau comme le C/C++/Rust.
+
+--
+
+> .question[Faut-il générer un binaire pour chaque plateforme ?]
+
+--
+
+Non, le binaire est indépendant de la plateforme : il n’y aura pas de compilation spécifique pour ARM / x32 / x64. Une fois le byte code livré, il fonctionnera tel quel sur tous les types d’architecture !
+
+---
+
+## .center[Pourquoi WebAssembly ?]
+
+> .question[WebAssembly va-t-il remplacer Javascript ?]
+
+WebAssembly n’a pas pour but de remplacer Javascript. Il est conçu pour compléter Javascript avec des performances supérieures.  
+C’est une alternative pour construire des jeux 2D / 3D, ou des applications Web devant effectuer des calculs complexes.
+
+> .question[Quels sont les avantages de WebAssembly par rapport à Javascript ?]
+
+- Binaire compilé -> parsing grandement facilité -> ~ 20 fois plus rapide à charger qu’un fichier javascript !
+- Ce n’est pas un fichier texte donc il sera « moins » gros. Il est donc plus rapide à charger et plus rapide à exécuter.
+- Plus rapide pour faire les calculs : adapté pour compression, manipulation d’images, opérations cryptographiques, jeux vidéos, etc
+
+---
+
+## .center[Wasm + Rust = &#128150;]
+
+- Compilateur Rust->Webassembly depuis le 21/12/17
+- Intégration de webpack et npm depuis qq mois !!
+--
+
+- Très facile a développer avec wasm-pack !
+--
+name: wasm-rust
+- On peut faire des jeux temps réel dans le navigateur
+
+> [Exemple de jeu en rust-wasm](https://aochagavia.github.io/blog/rocket---a-rust-game-running-on-wasm/)
+
+---
+
+## .center[2 target  différentes]
+
+### wasm32-unknown-emscripten
+
+- Emscripten est utilisé pour embarquer l'émulation des I/O (TCP sockets/file io/multithreading/opengl).
+- Attention : Livrable final volumineux !
+
+### wasm32-unknown-unknown
+
+- Target ultralight. Livrable final de quelques dizaines de Ko seulement.
+- A préférer si vous utilisez webassembly comme une bibliothèque de fonctions et que vous gérez les I/O en Javascript.
+- Avec crates web-sys & js-sys, 
+
+---
+
+## Wasm-pack
+
+![wasm-pack](../../images/wasm-pack-logo.png)
+
+- Génération automatique du binding Rust/Js
+- Enrobage dans un module npm !!
+- Binding Typescript
+- Tests automatisés avec moteurs Firefox et Chrome
+- Passage en toolchain stable avec Rust 2018 edition
+
+---
+
+## Les références
+
+- [wasm-bindgen book](https://rustwasm.github.io/docs/wasm-bindgen/)
+- [wasm-pack book](https://rustwasm.github.io/docs/wasm-pack/)
+
+---
+
+## Installation des outils
+
+1. Installer [Rust](https://www.rust-lang.org/tools/install)
+2. Installer nvm ([linux/mac][nvm-linux-install] ou [windows][nvm-windows-install])
+3. Installez npm via nvm (`nvm install 10.15.3`)
+4. [Installer wasm-pack](https://rustwasm.github.io/wasm-pack/installer/)
+
+[nvm-linux-install]:https://github.com/creationix/nvm#installation-and-update
+[nvm-windows-install]:https://github.com/coreybutler/nvm-windows#installation--upgrades
+
+---
+
+## Atelier : Hello World (1/3)
+
+Créez un nouveau projet:
+
+```bash
+cargo new --lib my-first-wasm-lib
+```
+
+Modifiez le Cargo.toml :
+
+```toml
+[package]
+name = "my-first-wasm-lib"
+version = "0.1.0"
+authors = ["you <you@mail.tld>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"] # Our library is a C compatible dynamic library
+
+[dependencies]
+wasm-bindgen = "0.2" # library for Js binding
+```
+
+---
+
+## Atelier : Hello World (2/3)
+
+Ajoutez le code suivant dans `src/lib.rs`
+
+```rust
+extern crate wasm_bindgen;
+
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern {
+    fn alert(s: &str); // On "capte" la fonction Js 'alert()'
+}
+
+#[wasm_bindgen]
+pub fn greet() { // Fonction qui sera appellée par notre front
+    alert("Hello, World!");
+}
+```
+
+Buildez votre lib :
+
+```bash
+wasm-pack build
+```
+
+---
+
+## Atelier : Hello World (3/3)
+
+1. Créez un dépot pour votre front a partir du template wasm-app :
+
+    ```bash
+    mkdir my-first-wasm-app && cd my-first-wasm-app
+    npm init wasm-app
+    ```
 
-1. Introduction
-2. Deep-dive
-3. ...
+2. Dans le `package.json`, remplacez `hello-wasm-pack` par votre lib :
+
+    ```json
+        "devDependencies": {
+            "my-first-wasm-lib": "local/path/to/your/lib",
+            ... // keep others dependencies
+        }
+    ```
+
+3. Dans `index.js` remplacez `hello-wasm-pack` par votre lib :
+
+    ```js
+    import * as wasm from "my-first-wasm-lib";
+
+    wasm.greet();
+    ```
+
+4. Builder et lancer votre front : `npm i && npm start`
+
+---
+
+## Atelier : binding Rust/Js (1/2)
+
+1. Créer un nouveau projet a partir du template `wasm-pack` :
+
+    ```bash
+    cargo install cargo-generate
+    cargo generate --git https://github.com/rustwasm/wasm-pack-template
+    ```
+
+2. Compilez puis importez dans votre front.
+3. Binder une enum, dans `src/lib.rs` :
+
+    ```rust
+    #[wasm_bindgen]
+    #[derive(Debug, Copy, Clone)]
+    pub enum MyEnum {
+        Variant1,
+        Variant2,
+        ...
+    }
+    ```
 
 ???
 
-Pense a dire **blablabla** !
+Le nom du projet est demandé de manière interactive par cargo-generate.
+C'est cargo-generate qui vas créer le dossier du projet.
 
 ---
 
-class: dark
+## Atelier : binding Rust/Js (2/2)
+
+1. Déclarer une fonction recevant votre enum :
+
+    ```rust
+    #[wasm_bindgen]
+    pub fn my_function(variant: ) -> String {
+        match variant {
+            MyEnum::Variant1 => "variante 1 !".into(),
+            MyEnum::Variant2 => "variante 2 !".into(),
+            ...
+        }
+    }
+    ```
+
+2. Compilez puis utilisez cette fonction dans votre front.
+
+3. Faite une fonction rust qui renvoie une enum. Exemple: une fonction qui reçoit un age en entrée et qui indique si la personne est enfant, active ou retraitée.
+
+4. Libérez votre créativité !
+
+---
+
+## Étude d'un exemple concret : `dup-tools-wasm`
+
+<div class="mermaid">
+graph LR
+        dup-crypto-->dubp-documents
+        dup-crypto-->durs-network-documents
+        dubp-documents-->dup-tools-wasm
+        durs-network-documents-->dup-tools-wasm
+</div>
+
+(en cours de rédaction ...)
+
+---
+
+# .center[Merci de votre attention]
 
-# Introduction
\ No newline at end of file
+Présentation réalisée avec [remark](https://github.com/gnab/remark).  
+Graphes réalisés avec [mermaid](https://github.com/knsv/mermaid).