in english

Die Idee

Willkommen auf der Webseite des freiberuflichen Software Entwicklers Martin Hartnagel. Sie können mit Klick auf den grünen Bürotacker mit dem freiberuflichen Software Entwickler Kontakt aufnehmen.
Dynamische Desktopanwendungen erfordern ein breites Hintergrundwissen über die Frameworks, die enthaltenen Komponenten und Erfahrungen zur Bedienbarkeit. Darüber hinaus soll jede Anwendung in modernen Webbrowser funktionieren, sich ähnlich verhalten und vom Aussehen nicht unterscheiden.

Single Page Applications (SPA)

Wenn eine Webseite alle Seiten vorher schon lädt, ist dies noch lange keine SPA. Auch ist ein Laden von nutzergeneriertem Content nicht entscheidendes Merkmal, um von einer SPA zu sprechen. Genauso wenig ist ein responsive Verhalten ausschlaggebend, um als SPA eingeordnet zu werden. Wenn sich alles nur auf einer einzigen Seite abspielt, dann nähert man sich einer SPA. Trifft das dann auch auf die Bereiche Dokumentation, zum Fehlerhandling und für Supportanfragen zu?

Folgende Bereiche müssen bei den meisten SPA beachtet werden und sind oft vernachlässigt:

• Routing
• Statemanagement (ggf. mit SSR)
• Performance, insbesonders die Core Web Vitals
• Suchmaschinen (SEO)
• User Experience
• Login, Logout
• Internationalisierung
• Dokumentation
• Online Hilfe
• Fehlerhandling
• Supportanfragen
• Offlineverhalten
• Onlinedetection
• Speichermanagement
• Cachingverhalten
• Update der SPA, wenn Browser Cache dies verhindert
• Daten Synchronisierung, Export, Import und Backup
• DSG-VO kritische Daten

Progressive Web Anwendung (PWA)

Eine PWA kann über den Webbrowser als App auf einem Smartphone installiert werden. Eine SPA und App in einem zu bauen spart vor allem Kosten in der Entwicklung. Auch benötigt man nicht das Bereitstellen der App in App Stores, hat dann aber auch nicht die Vorteile eines solchen Marktplatzes.

Zwangsläufig sollte man sich auch hier (neben den SPA Bereichen) mit folgenden Themen beschäftigen:

• Vertrauen schaffen (ähnlich wie im App Store) bezüglich Sicherheit für den Endkunden
• Update einer installierten App in einer älteren Version
• Daten Synchronisierung zwischen mehreren Geräten, Export, Import und Backup
• Vermarktung (auch wenn kostenlos müssen die Endkunden doch dazu bewegt werden die SPA auf ihrem Smartphone zu öffnen)
• Zielgeräte und Verhalten beim Öffnen auf anderen Geräten
• Zugriff auf native Gerätefunktionen, Teileinschränkungen dieser und ab wann die App ohne essentielle Freigaben dazu unbenutzbar ist.
• Android Package (APK) erzeugen und doch App Stores verwenden

Dokumentation mit Markdown

Dokumentation sollte schnell erfasst und flüssig wartbar sein, wenig zusätzlichen Aufwand erfordern und auch nach längerer Pause keine lange Einarbeitungszeit wieder erfordern. Markdown ist hier zum quasi Standard geworden. Mit Remark und Rehype ist die Generierung von schicken Webseiten mit smarten Zusatzfunktionen schnell gemacht und erlaubt viel zusätzliche Flexibilität im Nachhinein. Zum Beispiel machen generierte Inhaltsverzeichnisse, verlinkbare Überschriften und automatische Stichwortverlinkung das Lesen der Dokumentation sehr viel angenehmer - so wie auch hier auf dieser Webseite eingesetzt. Markdown ist über Git gut versionierbar und Änderungen können so leicht gemerged werden. Von HTML, Word-Dokumenten oder PDF kann man das nicht unbedingt behaupten.

Begriffe in Markdown automatisch in HTML Links umwandeln

Ein Beispiel, wie man mit Unified, Remark und Rehype automatisch Suchbegriffe in Markdown mit Links anreichern kann:

// ...
import { fromHtml } from 'hast-util-from-html'

const replacements = [
  { s: "React", l: "https://react.dev/", t: "React: The library for web and native user interfaces" },
  { s: "Ohrenschmauss Verlag", l: "https://ohrenschmauss.de", t: "Hörbücher im Ohrenschmauss Verlag, Genuss und Spannung für die Ohren" },
];

const replaceWithLinks = (parent, i, node) => {
  if (['p', 'li', 'td'].includes(parent?.tagName) && node.type === 'text') {
    let v = node.value;
    let changes = false;
    replacements.forEach((r) => {
      if (v.match(r.s)) {
        v = v.replace(r.s, '<a href="'+r.l+'" title="'+r.t+'">'+r.s+'</a>');
        changes = true;
      }
    });
    if (changes) {
      parent.children.splice(i, 1, fromHtml(v, { fragment: true }));
    }
  } else {
    node.children?.forEach((n, i) => replaceWithLinks(node, i, n));
  }
};

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeStringify, { allowDangerousHtml: true })
  .use(() => (tree) => { replaceWithLinks(undefined, 0, tree); })
  .process(`# some title where React and Ohrenschmauss Verlag are left untouched\n\n
  paragraph with React and Ohrenschmauss Verlag automatically replaced links.`);
console.log(String(file));

Ausgabe:

<h1>some title where React and Ohrenschmauss Verlag are left untouched</h1>
<p>paragraph with <a href="https://react.dev/" title="React: The library for web and native user interfaces">React</a> and <a href="https://ohrenschmauss.de" title="Hörbücher im Ohrenschmauss Verlag, Genuss und Spannung für die Ohren">Ohrenschmauss Verlag</a> automatically replaced links.</p>

Beauftragen

Benötigen Sie in Ihrem Unternehmen diese Expertise? Sind Sie schon dabei so etwas umzusetzen und kommen nicht weiter? Vielleicht kann der freiberufliche Software Entwickler dieser Seite Ihnen weiterhelfen. Ja genau, auf den grünen Bürotacker klicken ...