162 lines
2.7 KiB
ReStructuredText
162 lines
2.7 KiB
ReStructuredText
==========================
|
|
Seed - Webfrontend in Rust
|
|
==========================
|
|
|
|
.. rjs-section::
|
|
:center:
|
|
:notitle:
|
|
|
|
.. image:: img/seed_logo.svg
|
|
:width: 30%
|
|
|
|
.. rjs-title:: 4
|
|
Webfrontend in Rust
|
|
|
|
|
|
Das Projekt
|
|
===========
|
|
|
|
.. rjs-div:: grid grid-cols-2 gap-8
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl
|
|
|
|
.. rjs-fragments:: fade-right
|
|
|
|
- 👨🏻💻 Entwickler: Martin Kavik
|
|
- ⚖️ MIT-Lizenz
|
|
- 📅 Erstes Release: 2019
|
|
|
|
.. image:: img/martin_kavik.png
|
|
|
|
|
|
Architektur
|
|
===========
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl text-center
|
|
|
|
.. image:: img/diagram.svg
|
|
:width: 60%
|
|
|
|
|
|
Code
|
|
=====
|
|
|
|
Beispielprojekt: Zähler
|
|
|
|
.. rjs-effect::
|
|
|
|
Model (Zustand der Anwendung)
|
|
|
|
.. code-block:: rust
|
|
:linenos:
|
|
|
|
struct Model {
|
|
counter: i32,
|
|
}
|
|
|
|
fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
|
|
Model { counter: 0 }
|
|
}
|
|
|
|
.. rjs-effect::
|
|
|
|
View (Stellt die Anwendung dar)
|
|
|
|
.. code-block:: rust
|
|
:linenos:
|
|
|
|
fn view(model: &Model) -> Node<Msg> {
|
|
div![
|
|
C!["counter"],
|
|
"This is a counter: ",
|
|
button![model.counter, ev(Ev::Click, |_| Msg::Increment),],
|
|
]
|
|
}
|
|
|
|
.. rjs-effect::
|
|
|
|
Msg (Ändert den Zustand der Anwendung)
|
|
|
|
.. code-block:: rust
|
|
:linenos:
|
|
|
|
enum Msg {
|
|
Increment,
|
|
}
|
|
|
|
fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
|
|
match msg {
|
|
Msg::Increment => model.counter += 1,
|
|
}
|
|
}
|
|
|
|
|
|
Tooling
|
|
=======
|
|
|
|
.. rjs-section::
|
|
:background-iframe: https://trunkrs.dev
|
|
:light:
|
|
|
|
Trunk (Web application bundler für Rust)
|
|
|
|
|
|
Setup
|
|
=====
|
|
|
|
.. rjs-fragments:: fade-right
|
|
|
|
#. Rust installieren (https://rustup.rs)
|
|
#. WebAssembly-Target: ``rustup target install wasm32-unknown-unknown``
|
|
#. Trunk installieren: ``cargo install --locked trunk``
|
|
#. Anwendung mit ``trunk serve`` kompilieren und live im Browser anzeigen
|
|
#. Anwendung mit ``trunk build --release`` im Releasemodus kompilieren
|
|
|
|
.. rjs-effect::
|
|
|
|
.. rjs-div:: grid grid-cols-3 gap-8 mt-16
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl text-center
|
|
|
|
Rust-Code
|
|
|
|
.. image:: img/rust_code.png
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl text-center
|
|
|
|
WASM
|
|
|
|
.. image:: img/wasm_code.png
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl text-center
|
|
|
|
Webbrowser
|
|
|
|
.. image:: img/web_app.png
|
|
|
|
|
|
Ende
|
|
====
|
|
|
|
.. rjs-section::
|
|
:center:
|
|
:notitle:
|
|
|
|
.. image:: img/seed_logo.svg
|
|
:width: 30%
|
|
|
|
.. rjs-div:: grid grid-cols-2 gap-8
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl
|
|
|
|
Webseite von Seed
|
|
|
|
https://seed-rs.org
|
|
|
|
.. rjs-box:: bg-gray-700 rounded-3xl
|
|
|
|
Quellcode zu diese Präsentation
|
|
|
|
https://code.thetadev.de/HSA/seed-presentation
|
|
|
|
|