development

ADR › Svelte als Framework für NativeScript

status	accepted
date	2023-04-17
deciders	Finn Gedrath, Patrick Lang
informed

Kontext und Problemstellung

In ADR-003 wurde entschieden, dass eine native App für Android und iOS mit Hilfe einer Cross-Platform-Lösung entwickelt werden soll. Dieses ist Framework unabhängig. In diesem ADR wird nun das Web-Framework für die Entwicklung der App festgelegt.

Entscheidungstreiber

Teilweise wurde Dimensionen aus Vargas et. al. (2020) übernommen¹:

• bestehendes Wissen in der Gruppe, um eine zu erwartende Lernkurve zu minimieren (→ Ökonomie)
• Performance der Technologie
• Dokumentation und Community
• Bestehende Plugins und Libraries, die zusammen mit der Grundtechnologie (siehe ADR-003) verwendet werden können.
• Usability (Ease-of-Use, Lernkurve, …)

In Betracht gezogene Optionen

• Svelte
• React
• Vue

Ergebnis der Entscheidung

Gewählte Option: “Svelte”, weil am besten ausfällt (siehe unten) und Motivation besteht Technologie auszuprobieren.

Pro und Kontra der Optionen

Svelte

Svelte ist ein junges Framework (bekannt seit: 2019²) entwickelt von Rich Harris. Es basiert syntaktisch auf HTML und JavaScript. Als Compiler, ist teilweise eigene Svelte Syntax möglich. Teilweise bestehen Ähnlichkeiten zu Mustache.

• Svelte Dokumentation
• Svelte Playground
• NativeScript + Svelte
• Capacitor + Svelte

Beispiel-Syntax einer Komponente:

<script>
let count = 1;
$: doubled = count * 2;

function handleClick() { count += 1; }
</script>

<button on:click={handleClick}> {count} </button>

<p>{count} * 2 = {doubled}</p>

• 🟢 Gut, weil geringer Boilerplate-Code, da Reaktivität und State-Verwaltung direkt in der Komponente möglich ist.

• 🟢 Gut, denn hohe technische Reaktivität bei State-Veränderung innerhalb einer Komponente und über mehrere Komponenten hinweg.

• 🟢 Gut, da Svelte-Playground vorhanden ist, um Svelte-Code direkt auszuprobieren, und die Svelte-Syntax erlernt werden kann.
• 🟢 Gut, da Svelte-Syntax ähnlich zu bekannten Templating-Engines wie Mustache ist.

• 🟡 Neutral, weil Wissen innerhalb der Gruppe über Svelte teilweise vorhanden ist.

• 🟡 Neutral, weil Svelte aktiv weiterentwickelt wird und die Major-Releases in kurzen Abständen erscheinen.
• 🔴 Schlecht, weil Svelte noch relativ neu ist und es noch nicht viele Plugins gibt.

React

React ist ein von Facebook entwickeltes Framework. Templates werden in JSX geschrieben (Erweiterung von JS um HTML-Elemente).

• React Dokumentation
• React Playground
• NativeScript + React
• Capacitor + React

Beispiel-Syntax einer Komponente:

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>
      <p>{count} * 2 = {count * 2}</p>
    </div>
  );
}

• 🟢 Gut, weil große Community und viele Plugins vorhanden sind.
• 🔴 Schlecht, weil hoher Boilerplate-Code, da Reaktivität und State-Verwaltung nicht direkt in der Komponente möglich ist. Stattdessen muss ein zusätzlicher State-Manager verwendet werden.
• 🔴 Schlecht, weil Browser-APIs wegabstrahiert und konzeptioniert werden (z.B. fetch, DOM, etc.)

Vue

Vue.js ist ein Framework von Evan You. Vue Projekte können als eigenständige Single-File-Componenten entwickelt werden. Templates werden in HTML mit einer Mustach-ähnlichen Syntax geschrieben.

• Vue Dokumentation
• Vue Playground
• NativeScript + Vue
• Capacitor + Vue

Beispiel-Syntax einer Komponente:

<template>
  <button @click="count++">You clicked me 8 times.</button>

  <p> 8 * 2 =  </p>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    double() {
      return this.count * 2;
    },
  },
};
</script>

• 🟢 Gut, weil große Community und viele Plugins vorhanden sind.
• 🟢 Gut, weil von kleinen bis zu großen Projekten verwendet wird.

1. Larios Vargas, Enrique, Maurício Aniche, Christoph Treude et al. (2020). „Selecting Third-Party Libraries: The Practitioners’ Perspective“. In: ESEC/FSE 2020. Virtual Event, USA: Association for Computing Machinery, S. 245–256. ISBN: 9781450370431. DOI: 10.1145/3368089.3409711 ↩

2. Greif, Sacha und Raphaël Benitte (2020). State of JavaScript Trend Report. Technologies: Front-end Frameworks. Letzter Zugriff: 10. August 2021. URL: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/. ↩

This site is open source. Improve this page.