2 · Aufbau eines Programms

Ganz links, ohne Einrückung, dürfen genau neun Dinge stehen. Mehr gibt es nicht — das ist die ganze oberste Ebene.

Die Reihenfolge ist frei. Üblich und gut lesbar ist: app, design, Models, menue, fusszeile, dann die Seiten.

app

app Kleiner Laden

Steht im Browser-Tab, in der Kopfzeile und im Namen der Datendatei. Ein Name darf Leerzeichen enthalten und braucht keine Anführungszeichen.

seite

seite /            als "Start"
seite /ueber       als "Über uns"
seite /profil/:nutzer

Der Pfad beginnt mit /. als "…" gibt der Seite einen Titel; ohne das heißt sie wie die App.

Ein Doppelpunkt macht einen Platzhalter: :nutzer bedeutet, dass an dieser Stelle die Kennung eines Datensatzes steht. Innerhalb der Seite gibt es dann eine Variable nutzer mit genau diesem Datensatz:

seite /beitrag/:beitrag
  titel beitrag.titel
  text beitrag.inhalt

Der Modelname wird aus dem Platzhalternamen erschlossen: :beitrag sucht in Beitrag. Gibt es den Datensatz nicht, oder darf der Betrachter ihn nicht sehen, kommt eine 404 — nicht eine halbleere Seite.

Feste Pfade gewinnen gegen Platzhalter: /profil/mich schlägt /profil/:nutzer, auch wenn beides passen würde.

modell

modell Beitrag
  titel    text
  inhalt   langtext
  bild     bild optional
  gelesen  zahl = 0
  am       zeit = jetzt
  autor    Nutzer = ich

Models werden groß geschrieben, alles andere klein. Ausführlich in Daten.

daten

daten lokal              # alles im Gerät, kein Server nötig
daten hier               # auf dem Server (Vorgabe)
daten von "https://…"    # von einem anderen Fibel-Server

daten lokal heißt: der Browser rechnet selbst, die Daten liegen im Browserspeicher, und fibel baue --out app erzeugt eine Anwendung, die auch ohne Server läuft. Gut für Werkzeuge, die niemand teilt — eine Einkaufsliste, ein Zähler, ein Rechner.

Ohne diese Zeile gilt hier: der Server rechnet, alle sehen dieselben Daten.

zugang

zugang passwort   # Name und Passwort (Vorgabe, sobald es Daten zu teilen gibt)
zugang offen      # es reicht ein Name, kein Passwort

offen ist für Demos und Kurse gedacht. Wer echte Daten hat, lässt die Zeile weg und bekommt passwort.

menue

menue
  verweis "Start" -> /
  verweis "Neu" -> /neu
  verweis "Mein Profil" -> /profil/mich

Erscheint oben auf jeder Seite. Ein Verweis, der den Betrachter in eine Absage führen würde, wird gar nicht erst gezeigt. Einer auf eine Seite, die nur eine Anmeldung verlangt, bleibt dagegen auch für Gäste sichtbar — dahinter wartet keine Absage, sondern die Anmeldung. Seiten mit nur <bedingung> bleiben Gästen verborgen.

Ohne diese Unterscheidung konnte es passieren, dass kein einziger Verweis zur Registrierung führt: wenn alle sichtbaren Seiten öffentlich sind und nur die Seiten für Angemeldete ausgeblendet werden.

Auf dem Telefon steckt dasselbe Menü hinter einem Knopf in der Kopfzeile.

fusszeile

fusszeile
  spalten
    haupt
      untertitel "Kleiner Laden"
      hinweis "Handgemachtes aus der Nachbarschaft."
    seitenleiste
      verweis "Impressum" -> /impressum
      verweis "Datenschutz" -> /datenschutz

Darin sind dieselben Bausteine erlaubt wie in einer Seite.

design und stil

design
  akzent  #0f766e
  modus   automatisch
  breite  gross

stil ".f-card:hover { transform: translateY(-2px) }"

Ausführlich in Gestaltung. Kurz: design ist der geprüfte Weg, stil der ungeprüfte. Was in stil steht, sieht die Prüfung nicht an.

Ein vollständiges kleines Programm

app Merkzettel

daten lokal

design
  akzent #4f46e5
  breite klein

modell Punkt
  was      text
  erledigt janein = nein
  am       zeit = jetzt

seite / als "Merkzettel"
  titel "Merkzettel"

  formular neu Punkt
    feld was "Was ist zu tun?"
    absenden "Hinzufügen"

  fuer punkt in Punkt sortiert am absteigend
    karte
      reihe getrennt
        wenn punkt.erledigt
          hinweis punkt.was gedaempft
        sonst
          fett punkt.was
        knopf "Weg" -> loesche punkt
  sonst
    hinweis "Nichts zu tun." mitte

Zwölf Zeilen Kern, und es ist eine funktionierende App mit Datenhaltung, Formular, Liste, Bedingung und Löschen — die ohne Server läuft.

Weiter: Bausteine