==========================
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