Slide notes, styling, Images
This commit is contained in:
parent
99a5d4f3cb
commit
0ac7521033
7 changed files with 214 additions and 9 deletions
25
css/main.css
25
css/main.css
|
@ -21,3 +21,28 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
ol li {
|
ol li {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.remark-slide-content:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
top: -10%;
|
||||||
|
left: 75%;
|
||||||
|
opacity: 0.1;
|
||||||
|
background: url(/images/rust.png) 0 0 no-repeat;
|
||||||
|
background-size: 300px 300px;
|
||||||
|
-webkit-transform: rotate(30deg);
|
||||||
|
-moz-transform: rotate(30deg);
|
||||||
|
-ms-transform: rotate(30deg);
|
||||||
|
-o-transform: rotate(30deg);
|
||||||
|
transform: rotate(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
BIN
images/falcon.png
Normal file
BIN
images/falcon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.8 MiB |
BIN
images/r2d2.png
Normal file
BIN
images/r2d2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 206 KiB |
BIN
images/rust.png
Normal file
BIN
images/rust.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
BIN
images/tie-fighter.png
Normal file
BIN
images/tie-fighter.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 930 KiB |
BIN
images/xwing.png
Normal file
BIN
images/xwing.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 MiB |
184
slides.md
184
slides.md
|
@ -6,6 +6,42 @@ class: center, middle
|
||||||
|
|
||||||
<div style="font-size: 16px">Johannes Schriewer aka. Dunkelstern</div>
|
<div style="font-size: 16px">Johannes Schriewer aka. Dunkelstern</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
class: center, middle
|
||||||
|
|
||||||
|
<img src="/images/xwing.png" width="100%">
|
||||||
|
|
||||||
|
Wenn es fertig ist sieht das ganze so aus...
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Ein bisschen rostig für den Charme
|
||||||
|
- Flink
|
||||||
|
- Mit kleinem sidekick
|
||||||
|
- Mit ein bisschen glück kann man auch den Todesstern vernichten.
|
||||||
|
|
||||||
|
---
|
||||||
|
class: center, middle
|
||||||
|
|
||||||
|
Wenn man genau hinschaut ist sogar R2D2 mit an Board:
|
||||||
|
|
||||||
|
<img src="/images/r2d2.png" width="100%">
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
Und tausend anderen Modulen, hello javascript
|
||||||
|
|
||||||
|
---
|
||||||
|
class: center, middle
|
||||||
|
|
||||||
|
In Go sähe es dann so aus:
|
||||||
|
|
||||||
|
<img src="/images/tie-fighter.png" width="60%">
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
Ok ein bisschen Spaß muss sein...
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Übersicht
|
# Übersicht
|
||||||
|
@ -37,16 +73,28 @@ class: center, middle
|
||||||
- Es gibt verschiedene Frameworks
|
- Es gibt verschiedene Frameworks
|
||||||
|
|
||||||
--
|
--
|
||||||
|
|
||||||
- Iron
|
- Iron
|
||||||
|
- Nickel
|
||||||
|
- Conduit
|
||||||
- Rocket
|
- Rocket
|
||||||
- Gotham
|
- Gotham
|
||||||
- Nickel
|
|
||||||
- ...
|
- ...
|
||||||
|
|
||||||
|
???
|
||||||
|
- Iron: Juni 2014, Aktuell kein Maintainer
|
||||||
|
- Nickel: Juni 2014, API ähnlich Express
|
||||||
|
- Conduit: Juni 2014, Wahrscheinlich tot
|
||||||
|
- Rocket: März 2016, Aktive Entwicklung
|
||||||
|
- Gotham: März 2017, Viele Beispiele, Aktive Entwicklung
|
||||||
|
|
||||||
--
|
--
|
||||||
- Das Benutzerfreundlichste ist [Rocket](https://rocket.rs)
|
- Das Benutzerfreundlichste ist [Rocket](https://rocket.rs)
|
||||||
--
|
--
|
||||||
(IMHO)
|
(IMHO)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Beispiel: Rocket
|
## Beispiel: Rocket
|
||||||
|
@ -67,6 +115,15 @@ fn main() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Wir brauchen Compiler Plugins
|
||||||
|
- ... und den Rocket Code-Generator für weniger Boilerplate
|
||||||
|
- Dann bauen wir uns einen Endpunkt
|
||||||
|
- Python Flask
|
||||||
|
- Return String, `format` ist ein macro
|
||||||
|
- Start mit einer einzelnen route
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## JSON API Beispiel
|
## JSON API Beispiel
|
||||||
|
@ -92,6 +149,14 @@ pub struct Person {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Wieder ein neues rust-Feature
|
||||||
|
- Serde: Serializer-Deserializer
|
||||||
|
- Chrono: Date/Time lib
|
||||||
|
- Boilerplate lassen wir wieder generieren
|
||||||
|
- `Person` ist unser Model
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### View
|
### View
|
||||||
|
@ -112,6 +177,13 @@ fn get_person(id: i32) -> Result<Json<Person>, Failure> {
|
||||||
|
|
||||||
Die anderen HTTP Methoden funktionieren natürlich auch...
|
Die anderen HTTP Methoden funktionieren natürlich auch...
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- JSON-Support laden
|
||||||
|
- Mock-Endpoint
|
||||||
|
- Statische Daten als Beispiel
|
||||||
|
- Reagiert nur auf `Accept: application/json`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### Ergebnis
|
#### Ergebnis
|
||||||
|
@ -137,6 +209,11 @@ Die anderen HTTP Methoden funktionieren natürlich auch...
|
||||||
}</span>
|
}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- `Accept`-Header nicht vergessen sonst 404
|
||||||
|
- JSON formatiert zur besseren lesbarkeit
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Request Guards (aka Middleware)
|
### Request Guards (aka Middleware)
|
||||||
|
@ -160,6 +237,14 @@ fn admin_panel_redirect() -> Redirect {
|
||||||
|
|
||||||
Rocket wählt automatisch denjenigen View der alle Request guards unterstützt (und den niedrigsten Rank hat)
|
Rocket wählt automatisch denjenigen View der alle Request guards unterstützt (und den niedrigsten Rank hat)
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Middleware als opt-in
|
||||||
|
- Die Parameter-Typen implementieren `FromRequest`-Trait
|
||||||
|
- Nach Rank
|
||||||
|
- Request Guards müssen erfüllt werden sonst 404
|
||||||
|
- `format` im Decorator funktioniert ähnlich
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rust für Datenbanken
|
# Rust für Datenbanken
|
||||||
|
@ -171,9 +256,17 @@ Rocket wählt automatisch denjenigen View der alle Request guards unterstützt (
|
||||||
- Rustorm
|
- Rustorm
|
||||||
- Diesel
|
- Diesel
|
||||||
- ...
|
- ...
|
||||||
|
???
|
||||||
|
|
||||||
|
- Postgres-Lib: Nicht direkt typesafe, bzw dynamisch
|
||||||
|
- Langsam
|
||||||
|
- Rustorm: Rewrite in progress, schlechte Doku
|
||||||
|
- Diesel: Dürftige Doku aber es geht voran
|
||||||
|
- Schneller als postgres-lib direkt
|
||||||
--
|
--
|
||||||
- Ich habe mich auf [Diesel](https://diesel.rs) eingeschossen weil es typesafe ist.
|
- Ich habe mich auf [Diesel](https://diesel.rs) eingeschossen weil es typesafe ist.
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Model definition (Diesel)
|
## Model definition (Diesel)
|
||||||
|
@ -197,6 +290,13 @@ pub struct Person {
|
||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Migrations: SQL direkt
|
||||||
|
- `table!` definition lässt sich mit `diesel-cli` automatisieren
|
||||||
|
- Model wie vorher, mehr `derive`
|
||||||
|
- Boilerplate wird wieder generiert
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## View (Diesel)
|
## View (Diesel)
|
||||||
|
@ -214,7 +314,7 @@ pub fn get_person_list(conn: DbConn)
|
||||||
|
|
||||||
#[get("/person/<id>")]
|
#[get("/person/<id>")]
|
||||||
pub fn get_person(id: i32, conn: DbConn)
|
pub fn get_person(id: i32, conn: DbConn)
|
||||||
-> Result<Json<Series>, Failure>
|
-> Result<Json<Person>, Failure>
|
||||||
{
|
{
|
||||||
person::table
|
person::table
|
||||||
.find(id)
|
.find(id)
|
||||||
|
@ -224,6 +324,15 @@ pub fn get_person(id: i32, conn: DbConn)
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Sehr vereinfacht
|
||||||
|
- Kein DB-Connection Error-Handling
|
||||||
|
- `DbConn` kommt als Request-Guard
|
||||||
|
- Kaputte DB -> 404
|
||||||
|
- `map` konvertiert nur _Success_
|
||||||
|
- `map_err` konvertiert nur _Error_
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## View (continued)
|
## View (continued)
|
||||||
|
@ -250,6 +359,15 @@ pub fn create_person(data: Json<Person>, conn: DbConn)
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Kurzes beispiel für nen DB-Save
|
||||||
|
- Der `DbConn`-Request-Guard erzeugt und committed transaction
|
||||||
|
- Nur deshalb ist der Query-Code safe
|
||||||
|
- Insert and Return geht noch nicht
|
||||||
|
- Serde und Diesel übernehmen das Decoding der `Person`
|
||||||
|
- Kein error handling beim insert: `unwrap()` crashed den worker -> 500
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rust im Browser
|
# Rust im Browser
|
||||||
|
@ -257,6 +375,12 @@ pub fn create_person(data: Json<Person>, conn: DbConn)
|
||||||
1. _wasm-bindgen_ und Webpack, JS module in Rust
|
1. _wasm-bindgen_ und Webpack, JS module in Rust
|
||||||
2. _yew_, React-style Framework, Everything Rust
|
2. _yew_, React-style Framework, Everything Rust
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Beides nur kurz angerissen
|
||||||
|
- Alles sehr alpha
|
||||||
|
- Aber es funktioniert und wird weiterentwickelt
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## WebAssembly Module für Javascript
|
## WebAssembly Module für Javascript
|
||||||
|
@ -280,6 +404,16 @@ pub fn greet(name: &str) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Wir brauchen `bindgen` und ne Menge **nightly** Kram
|
||||||
|
- Bindgen baut den Typ-Konverter von JS -> WASM
|
||||||
|
- Die Bindgen Macros bauen Typ-Konverter WASM -> Rust
|
||||||
|
|
||||||
|
|
||||||
|
- Externe Funktion `alert`, kann aber jede beliebige JS funktion sein
|
||||||
|
- Export von unserer `greet` funktion für JS
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Vorbereiten
|
### Vorbereiten
|
||||||
|
@ -303,6 +437,19 @@ $ wasm-bindgen target/wasm32-unknown-unknown/debug/wasm_greet.wasm \
|
||||||
const rust = import("./wasm_greet");
|
const rust = import("./wasm_greet");
|
||||||
rust.then(m => m.greet("World!"));
|
rust.then(m => m.greet("World!"));
|
||||||
```
|
```
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Erstmal brauchen wir tooling
|
||||||
|
|
||||||
|
|
||||||
|
- Dann compilen wir den Rust-Code
|
||||||
|
- Dann bauen wir den JS Glue-Code
|
||||||
|
- In Production sollte das dann Webpack machen
|
||||||
|
|
||||||
|
|
||||||
|
- Am Ende ist es einfach ein JS module
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Direkt in Rust rendern: Yew
|
## Direkt in Rust rendern: Yew
|
||||||
|
@ -315,9 +462,39 @@ https://github.com/DenisKolodin/yew
|
||||||
- Eigener Virtual DOM
|
- Eigener Virtual DOM
|
||||||
- Components und Fragments wie bereits bekannt
|
- Components und Fragments wie bereits bekannt
|
||||||
|
|
||||||
|
???
|
||||||
|
- Nur angerissen was theoretisch geht
|
||||||
|
- Projekt existiert seit Dezember 2017
|
||||||
|
- TODO-MVC geht aber schon
|
||||||
|
|
||||||
--
|
--
|
||||||
- **Very Alpha**
|
- **Very Alpha**
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
- Das ist als Warnung zu verstehen, Ich kenne ja die Javascript leute...
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Dank [crates.io](https://crates.io) findet man aber noch viele Zusatzmodule
|
||||||
|
|
||||||
|
--
|
||||||
|
<img src="/images/falcon.png" width="100%">
|
||||||
|
|
||||||
|
???
|
||||||
|
|
||||||
|
So wird dann aus unserem kleinen X-Wing ein großer Millenium Falcon.
|
||||||
|
|
||||||
|
Aber trotzdem:
|
||||||
|
|
||||||
|
> This is the ship that made the Kessel Run in fourteen parsecs?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Es gibt übrigens noch kein Crate namens _Solo_.
|
||||||
|
|
||||||
|
C3PO ist leider an den verkehrten Anwendungsfall gebunden, es wäre so schön gewesen wenn das ein I18N Crate wäre.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
class: center, middle
|
class: center, middle
|
||||||
|
@ -326,6 +503,8 @@ class: center, middle
|
||||||
|
|
||||||
Kommt gerne auf mich zu wenn ihr mehr wissen wollt!
|
Kommt gerne auf mich zu wenn ihr mehr wissen wollt!
|
||||||
|
|
||||||
|
[Are we web yet? http://www.arewewebyet.org/](http://www.arewewebyet.org/)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Quellen
|
# Quellen
|
||||||
|
@ -333,6 +512,7 @@ Kommt gerne auf mich zu wenn ihr mehr wissen wollt!
|
||||||
- [Rocket documentation / Getting started guide](https://rocket.rs/guide/)
|
- [Rocket documentation / Getting started guide](https://rocket.rs/guide/)
|
||||||
- [Diesel documentation](http://diesel.rs/guides/getting-started/)
|
- [Diesel documentation](http://diesel.rs/guides/getting-started/)
|
||||||
- [Mozilla Hacks Blog](https://hacks.mozilla.org/2018/04/javascript-to-rust-and-back-again-a-wasm-bindgen-tale/)
|
- [Mozilla Hacks Blog](https://hacks.mozilla.org/2018/04/javascript-to-rust-and-back-again-a-wasm-bindgen-tale/)
|
||||||
|
- [Wookiepedia](http://starwars.wikia.com/wiki/Main_Page)
|
||||||
|
|
||||||
# Kontakt
|
# Kontakt
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue