Commit d2bc1af4 authored by Éloïs's avatar Éloïs

progress wasm presentation

parent 01d5bde8
......@@ -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
......
.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
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).
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment