Skip to content
Snippets Groups Projects
Commit d2bc1af4 authored by Éloïs's avatar Éloïs
Browse files

progress wasm presentation

parent 01d5bde8
No related branches found
No related tags found
No related merge requests found
...@@ -4,6 +4,8 @@ This repository contains all* the slides of the presentations and conferences of ...@@ -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. 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 ## Liste des présentations
### Rustkathon mars 2019 ### Rustkathon mars 2019
......
...@@ -3,6 +3,22 @@ ...@@ -3,6 +3,22 @@
background-color: #222; background-color: #222;
color: #fff; color: #fff;
} }
h1, h2, h3 { h1, h2, h3 {
font-weight: normal; 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
images/rust-logo-128x128.png

12.9 KiB

images/rust-logo-256x256.png

32.9 KiB

images/rustwasm.png

9.43 KiB

images/wasm-pack-logo.png

18.9 KiB

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 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. Dans le `package.json`, remplacez `hello-wasm-pack` par votre lib :
2. Deep-dive
3. ... ```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 Présentation réalisée avec [remark](https://github.com/gnab/remark).
\ No newline at end of file Graphes réalisés avec [mermaid](https://github.com/knsv/mermaid).
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment