Die Wahl des besten Frameworks zur Entwicklung einer Anwendung ist eine anspruchsvolle Aufgabe. Dennoch ist dies eine entscheidende Entscheidung, die vor Beginn der Entwicklung Ihres nächsten Projekts getroffen werden muss. Derzeit ist die plattformübergreifende Softwareentwicklung eine äußerst beliebte Methode in der Softwareentwicklung. Was ist plattformübergreifende Entwicklung? Dies ist ein Ansatz, der es ermöglicht, Code zwischen verschiedenen Betriebssystemen wie iOS und Android oder macOS und Windows wiederzuverwenden. Diese Methode der App-Entwicklung ist vor allem kosten- und zeiteffizient. In vielen Fällen stellt sie eine bessere Alternative zur nativen App-Entwicklung dar. Wenn Sie diesen Ansatz verfolgen möchten, um Kosten zu senken und Apps schneller zu entwickeln, benötigen Sie ein plattformübergreifendes Framework wie Flutter, React Native oder Qt. Aber welches sollten Sie wählen? In diesem Artikel vergleichen wir Flutter, React Native und Qt, um Ihnen bei dieser Entscheidung zu helfen.

Welche Aspekte betrachten wir? Welche Punkte sind uns wichtig?

• Reife der Technologie

• Unterstützte Plattformen

• Erfahrungen und allgemeine Eindrücke der Entwickler

• Funktionen und Module der Frameworks

• Engagement der Community

• Leistung

• Lernkurve

• Lizenzierung

Der Hauptbereich der Expertise von Scythe Studio liegt in der plattformübergreifenden Softwareentwicklung mit dem Qt-Framework. Als Qt-QML-Beratungsunternehmen machen wir kein Geheimnis daraus, dass wir Fans dieser Technologie sind. Wir haben unser Bestes getan, um diesen Vergleich fair zu gestalten, und alle Meinungen zu Qt und anderen Frameworks basieren auf den Erfahrungen unserer Entwickler sowie externer Spezialisten.

In der Zwischenzeit können Sie sich unsere Qt-Entwicklungsdienste ansehen.

 

Flutter vs React Native vs Qt – Eigenschaften der Frameworks

Beginnen wir diesen Vergleich von Flutter, React Native und Qt, indem wir die Geschichte, Eigenschaften, Anwendungsbeispiele und einen Codeausschnitt für jedes dieser Frameworks vorstellen. Ziel ist es, eine umfassende Beschreibung der Stärken und Schwächen jeder Technologie zu geben. Mobile Apps sind der Schnittpunkt der von jedem Framework unterstützten Plattformen. Dennoch hatten wir beim Vergleich eine breitere Perspektive im Blick als nur die Entwicklung mobiler Apps.

 

Einführung in Flutter

Beginnen wir unsere Überlegungen zum besten Framework mit einer Beschreibung von Flutter. Die erste stabile Version dieses Frameworks wurde 2018 veröffentlicht. Damit ist es die am wenigsten ausgereifte Technologie auf unserer Liste. Die Lösung wird hauptsächlich von Google entwickelt und ist eines ihrer absoluten Vorzeigeprojekte.

Flutter-Apps werden in der Programmiersprache Dart geschrieben. Dart ist eine objektorientierte Sprache, die sehr verständlich erscheinen kann, wenn Sie bereits C++, Java oder andere C-basierte Sprachen kennen. Es sollte hervorgehoben werden, dass Flutter eine großartige Programmiererfahrung bietet, insbesondere für Anfänger. Sie können Flutter-Apps mit Android Studio, IntelliJ IDEA, Visual Studio Code und Emacs entwickeln, die alle offizielle Flutter-Plugins unterstützen.

 

Von Flutter unterstützte Plattformen

Die primären und ersten Plattformen, die von Flutter unterstützt werden, sind mobile Plattformen – Android und iOS. Obwohl die Technologie noch recht unausgereift ist, muss erwähnt werden, dass sie sich ständig weiterentwickelt. Zum Zeitpunkt des Schreibens dieses Artikels (Juli 2022) gibt es 210 offene Pull-Requests im Flutter-GitHub-Repository. Diese schnelle Weiterentwicklung des Frameworks hat Unterstützung für die Webentwicklung mit Flutter und kürzlich auch für Desktops gebracht. Allerdings ist die Desktop-Unterstützung derzeit noch etwas instabil und zwischen den Plattformen ungleichmäßig. Zum Beispiel können Sie zum jetzigen Zeitpunkt das Firebase SDK – die wichtigste Lösung von Google – nicht unter Windows verwenden. Die Entwicklung mobiler Apps ist weitaus populärer als die Entwicklung von Desktop-Apps.

 

Flutter-Eigenschaften

Im Gegensatz zu React Native rendert Flutter keine nativen UI-Elemente, sondern malt sie eigenständig. Dadurch sehen die UI-Steuerelemente standardmäßig nicht wie native Elemente aus. Vielmehr wird den Benutzern das Material Theme Design nahegelegt, das Googles Standard für grafische Benutzeroberflächen darstellt. Dies hat Vorteile, wie beispielsweise die Tatsache, dass die App auf allen Geräten gleich aussieht, selbst auf älteren Modellen.

Beginnen wir unsere Überlegungen zum besten Framework mit einer Beschreibung von Flutter. Die erste stabile Version dieses Frameworks wurde 2018 veröffentlicht. Damit ist es die am wenigsten ausgereifte Technologie auf unserer Liste. Die Lösung wird hauptsächlich von Google entwickelt und ist eines ihrer absoluten Vorzeigeprojekte.

Flutter-Apps werden in der Programmiersprache Dart geschrieben. Dart ist eine objektorientierte Sprache, die sehr verständlich erscheinen kann, wenn Sie bereits C++, Java oder andere C-basierte Sprachen kennen. Es sollte hervorgehoben werden, dass Flutter eine großartige Programmiererfahrung bietet, insbesondere für Anfänger. Sie können Flutter-Apps mit Android Studio, IntelliJ IDEA, Visual Studio Code und Emacs entwickeln, die alle offizielle Flutter-Plugins unterstützen.

 

Von Flutter unterstützte Plattformen

Die primären und ersten Plattformen, die von Flutter unterstützt werden, sind mobile Plattformen – Android und iOS. Obwohl die Technologie noch recht unausgereift ist, muss erwähnt werden, dass sie sich ständig weiterentwickelt. Zum Zeitpunkt des Schreibens dieses Artikels (Juli 2022) gibt es 210 offene Pull-Requests im Flutter-GitHub-Repository. Diese schnelle Weiterentwicklung des Frameworks hat Unterstützung für die Webentwicklung mit Flutter und kürzlich auch für Desktops gebracht. Allerdings ist die Desktop-Unterstützung derzeit noch etwas instabil und zwischen den Plattformen ungleichmäßig. Zum Beispiel können Sie zum jetzigen Zeitpunkt das Firebase SDK – die wichtigste Lösung von Google – nicht unter Windows verwenden. Die Entwicklung mobiler Apps ist weitaus populärer als die Entwicklung von Desktop-Apps.

 

Flutter-Eigenschaften

Im Gegensatz zu React Native rendert Flutter keine nativen UI-Elemente, sondern malt sie eigenständig. Dadurch sehen die UI-Steuerelemente standardmäßig nicht wie native Elemente aus. Vielmehr wird den Benutzern das Material Theme Design nahegelegt, das Googles Standard für grafische Benutzeroberflächen darstellt. Dies hat Vorteile, wie beispielsweise die Tatsache, dass die App auf allen Geräten gleich aussieht, selbst auf älteren Modellen.

Das Material Theme ist für Android-Apps natürlich passend, aber für iOS ist es weniger geeignet. Auf Apples Plattform wirkt es schlichtweg nicht harmonisch. Daher haben Flutter-Entwickler an iOS-App-Entwickler gedacht und ein Cupertino-Paket erstellt. Dieses Paket bietet eine Sammlung von iOS-Style-Widgets, die großartig aussehen. Möchten Sie jedoch eine App für beide Plattformen veröffentlichen und gleichzeitig ein natives Erscheinungsbild erreichen, benötigen Sie zwei getrennte UI-Codebasen.

Es sollte erwähnt werden, dass Flutter eine erstklassige Entwickler-Onboarding-Erfahrung sowie exzellente Dokumentation und Referenzmaterialien bietet. Zudem ist die Community äußerst engagiert in das Projekt eingebunden.

 

Was bietet Flutter?

Das Flutter-Framework selbst ist recht schlank. Es gibt nicht so viele Module wie bei Qt, aber Googles „Kind“ verfügt über eine starke und stetig wachsende Community, die zum offenen Paket-Repository pub.dev beiträgt. Dort finden Sie zahlreiche Open-Source-Bibliotheken von Drittanbietern, was für Flutter-Entwickler äußerst nützlich ist.

Es sollte jedoch beachtet werden, dass es ein gewisses Risiko birgt, sich bei Wartung und Updates dieser Pakete auf externe Entwickler zu verlassen. Die Unterstützung dieser Community-Bibliotheken ist zwischen den Plattformen oft sehr unterschiedlich.

 

TODO-App mit Flutter

Um Ihnen die Unterschiede zwischen den einzelnen Frameworks zu verdeutlichen, haben wir eine einfache TODO-App entwickelt. Diese App ruft Aufgaben von einem simulierten Webserver ab, zeigt sie in einer Liste an und bietet Funktionen zum Hinzufügen neuer Aufgaben sowie zum Abschließen bestehender. Die Funktionalität und das Erscheinungsbild der Anwendung bleiben unabhängig von der verwendeten Technologie gleich.

Aus diesem Grund folgen wir beim Design der Flutter-App nicht dem Material Theme, das eine Art Standard für dieses Framework darstellt.

 

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'input_section.dart';
import 'task_widget.dart';
import 'task.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Future<List<Task>> futureTasks;

  @override
  void initState() {
    super.initState();
    futureTasks = getTasks();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TODO",
        home: Scaffold(
          backgroundColor: const Color(0xFFEBEBEB),
          body: Padding(
            padding: const EdgeInsets.only(left: 20, right: 20, top: 80),
            child: Stack(
              children: <Widget>[
                Column(
                  children: [
                    const Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        'Your tasks',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 24),
                      ),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                    Expanded(
                      child: FutureBuilder<List<Task>>(
                        future: futureTasks,
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            List<Task> data = snapshot.requireData;
                            return ListView.builder(
                                itemCount: data.length,
                                itemBuilder: (BuildContext context, int index) {
                                  return TaskWidget(
                                    text: data[index].title,
                                    id: data[index].id,
                                    onPressed: () {
                                      deleteTask(data[index].id);
                                    },
                                  );
                                });
                          }

                          return const CircularProgressIndicator();
                        },
                      ),
                    ),
                  ],
                ),
                InputSection(
                  onAddClicked: ((taskText) => addTask(taskText)),
                ),
              ],
            ),
          ),
        ));
  }

  Future<List<Task>> getTasks() async {
    final response = await http.get(
        Uri.parse('http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks'));

    if (response.statusCode != 200) {
      throw Exception('Couldn\'t get tasks');
    }

    var tasksJson = jsonDecode(response.body) as List;
    return tasksJson.map((taskJson) => Task.fromJson(taskJson)).toList();
  }

  void deleteTask(String id) async {
    final response = await http.delete(Uri.parse(
        'http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks/$id'));

    if (response.statusCode != 200) {
      return;
    }

    setState(() {
      futureTasks.then((value) => value.removeWhere((item) => item.id == id));
    });
  }

  void addTask(String taskText) async {
    final response = await http.post(
      Uri.parse('http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'task': taskText,
      }),
    );

    if (response.statusCode != 201) {
      return;
    }

    setState(() {
      futureTasks = getTasks();
    });
  }
}

Oben sehen Sie die Datei main.dart, in der sich der Großteil des Codes dieser App befindet. Wie Sie erkennen können, ähnelt Dart anderen C-ähnlichen Programmiersprachen. Der Aufbau der Benutzeroberfläche basiert auf UI-Elementen, die als Widgets bezeichnet werden. Diese Widgets verfügen über vordefinierte Parameter, die Sie einstellen können, um deren Erscheinungsbild anzupassen. Flutter wird oft für die zahlreichen Verschachtelungsebenen kritisiert, die als nachteilig für die Lesbarkeit des Codes angesehen werden.

Sie werden außerdem feststellen, dass im Screenshot der Flutter-App keine Emojis vorhanden sind, während sie in den Screenshots der Qt- und React Native-Apps sichtbar sind. Der Grund dafür ist, dass Flutter keine besonders gute Unterstützung für Unicode bietet. Um Emojis zu verwenden, ist eine etwas knifflige Lösung erforderlich.

Den Code jeder in diesem Artikel verwendeten Demo-App finden Sie im GitHub-Profil von Scythe Studio.

 

Einführung in React Native

Werfen wir nun einen Blick auf ein weiteres Framework – React Native. Es handelt sich um ein plattformübergreifendes Entwicklungsframework, das aus den Bemühungen der Entwickler von Facebook (heute Meta Platforms Inc.) hervorging, den Aufwand zu reduzieren, dieselbe Funktionalität doppelt implementieren zu müssen.

React Native ist das Ergebnis eines internen Hackathons, der 2013 von Meta organisiert wurde. Nach mehreren Entwicklungsmonaten wurde das Framework schließlich 2015 veröffentlicht. Heute ist es ebenfalls Open Source, erhält jedoch weiterhin wichtige Beiträge von den Software-Ingenieuren von Meta.

 

Von React Native unterstützte Plattformen

Ursprünglich war React Native ausschließlich für mobile Plattformen wie iOS und Android gedacht. Es ist jedoch nur halb wahr, dass derselbe Code für Webprojekte verwendet werden kann. React Native ist nicht dasselbe wie ReactJS. Zwar ähneln sich Aufbau und Syntax des Codes, doch für Web- und Mobile-Frontends wird unterschiedlicher Code benötigt. Teile der Logik können jedoch gemeinsam genutzt werden.

Es gibt auch einige noch unausgereifte Versuche, React Native für Windows und macOS nutzbar zu machen.

 

Eigenschaften von React Native

Die Idee hinter React Native ist es, Entwicklern die Möglichkeit zu geben, nativ aussehende Anwendungen mit JavaScript zu erstellen. Die verwendeten Steuerelemente ähneln daher den nativen Komponenten, abhängig von der Plattform, auf der die App ausgeführt wird. Dies kann nützlich sein, wenn das Ziel darin besteht, eine Benutzeroberfläche zu entwickeln, die zum Betriebssystem passt.

Aus unserer Erfahrung bevorzugt jedoch die Mehrheit der App-Besitzer ein individuell angepasstes UI, das auf ihre Marke zugeschnitten ist. Nachfolgend finden Sie einen Vergleich derselben Anwendung, die auf iOS und Android läuft.

Es ist eine Tatsache, dass React Native einige bedeutende Schwachstellen aufweist. Dazu gehören komplexe Navigation, aufwendige Übergänge, komplexe Animationen und die Handhabung von Gesten. Daher wird React Native häufig in Anwendungen eingesetzt, die weniger komplexe Anforderungen haben, wie z. B. Apps für Endverbraucher (soziale Netzwerke, Newsfeed-Apps, E-Commerce-Apps usw.).

Diese hauptsächlich leistungsbezogenen Probleme resultieren größtenteils aus der Architektur von React Native. Die aktuelle Architektur basiert auf dem Bridge-Konzept, das erforderlich ist, um native Module mit dem App-Code zu verbinden. Dies führt zu grundlegenden Problemen, wie der unnötigen Duplizierung (anstatt der gemeinsamen Nutzung) von Daten und der Einbindung nativer Funktionen.

Wenn wir die Architektur jedes in diesem Artikel behandelten Frameworks beschreiben wollten, müssten wir für jedes einen separaten Beitrag schreiben. Deshalb werden wir hier nicht zu sehr ins Detail gehen. Dennoch ist die Rendering-Engine, die für das Zeichnen der Benutzeroberfläche verantwortlich ist, das Herzstück jedes Frameworks. Es sollte hervorgehoben werden, dass ein neuer C++-basierter Renderer namens Fabric derzeit aktiv eingeführt wird. Viele der erwähnten Schwachstellen werden in den kommenden React Native-Versionen verbessert.

 

TODO-App mit React Native

Das Ziel dieses Artikels ist es nicht, Ihnen beizubringen, wie man in einer bestimmten Technologie programmiert. Dennoch ist es hilfreich, einen Blick auf ein Stück Code zu werfen, um zu sehen, was besser zu Ihnen passt und wie sich die Technologien voneinander unterscheiden. Unten finden Sie die Hauptdatei App.js der React Native-TODO-Liste.

 

import React, {useEffect, useState} from 'react';
import { StyleSheet, Text, View, Keyboard, TouchableOpacity } from 'react-native';
import InputSection from './components/InputSection';
import Task from './components/Task';


export default function App() {

  const [task, setTask] = useState();
  const [tasks, setTasks] = useState([]);

  const getTasks = async () => {
    fetch('http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks', {
        method: 'GET',
    })
    .then(response => { return response.status == 200 ? response.json() : []})
    .then(responseData => { return responseData })
    .then(responseData => {
      if (responseData) {
        setTasks(responseData)
      } else {
        setTasks([])
      }
    })
    .catch(err => {
        console.log("fetch error" + err);
    });
  }

  const handleAddingTask = () => {
    Keyboard.dismiss()
    if (task) {
      fetch('http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          task: task,
        })
      })
      .then(() => { getTasks()})
      setTask(null)
    }
  }

  const completeTask = (id) => {
    fetch('http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks/' + id, {
        method: 'DELETE'
    })
    .then(() => { getTasks()})
  }

  useEffect(() => {
    getTasks();
  }, []);

  return (
    <View style={styles.container}>

    {/* Tasks section */}
    <View style={styles.tasksSection}>
      <Text style={styles.tasksSectionTitle}>Your tasks</Text>

      <View style={styles.tasks}>
        {
         tasks.map((taskItem) => {
          return (
            <TouchableOpacity key={taskItem.id} onPress={() => {completeTask(taskItem.id)}}>
              <Task text={taskItem.task}/>
            </TouchableOpacity>
          )
         })
        }
      </View>
    </View>

    {/* Input section */}
    <InputSection
      style={styles.inputSection}
      onChangeText={text => setTask(text)}
      onAddClicked={handleAddingTask()} text={task}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EBEBEB',
  },
  tasksSection: {
    paddingTop: 80,
    paddingHorizontal: 20,
  },
  tasksSectionTitle: {
    fontSize: 24,
    fontWeight: 'bold',
  }, 
  tasks: {
    marginTop: 30,
  },
});
Wie Sie sehen können, ist die Syntax v

Wie Sie sehen können, ist die Syntax von der in ReactJS verwendeten Syntax nicht zu unterscheiden. React Native basiert auf einer JavaScript-Syntaxerweiterung namens JSX. Diese sollte für die meisten Webentwickler natürlich oder leicht zu erlernen sein, was tatsächlich ein Vorteil von React Native ist, da Sie Entwickler aus der großen JavaScript-Community finden können. Unten sehen Sie einen Screenshot der React Native-Anwendung, die das Ergebnis des Ausführens dieses Codes ist.

Diesen Code sowie weitere in diesem Artikel verwendete Beispiele finden Sie auf Scythe Studio GitHub.

 

Einführung in das Qt-Framework

Fahren wir mit dem Vergleich der besten plattformübergreifenden Entwicklungsframeworks mit dem Qt-Framework fort. Die erste stabile Veröffentlichung dieses auf der C++-Sprache basierenden Frameworks erfolgte 1996. Ursprünglich wurde diese Technologie für die Programmierung von Desktop-Anwendungen verwendet und zählt zu den 4 besten Frameworks für plattformübergreifende Desktop-Entwicklung.

Im Jahr 2013 veröffentlichte Qt eine neue Version mit offizieller Unterstützung für die Plattformen Android und iOS. Seitdem wird es als eine wirklich hervorragende plattformübergreifende Lösung anerkannt, die nicht nur Desktops, sondern auch mobile Anwendungen und eingebettete Systeme hervorragend unterstützt. Dank Qt for WebAssembly können Sie Ihre Anwendung mittlerweile auch als Teil Ihrer Website bereitstellen.

 

Von Qt unterstützte Plattformen

Im Gegensatz zu Flutter und React Native sind Desktops in diesen Frameworks nicht wirklich gut unterstützt. Die Desktop-Unterstützung in diesen Frameworks ist noch relativ neu und experimentell, weshalb sie nicht wirklich stabil ist. Qt hingegen unterstützt Desktop-Plattformen seit über 20 Jahren.

Qt bietet im Vergleich zu anderen Frameworks die beste Unterstützung für verschiedene Plattformen. Es bietet hervorragenden Support für eine breite Palette eingebetteter Geräte und unterstützt offiziell iOS und Android bereits seit langem. Deshalb bezeichnen wir Qt als ein wirklich plattformübergreifendes Framework.

Qt ist möglicherweise nicht die beste Wahl für die reguläre Frontend-Entwicklung von Websites, aber mit dem bereits erwähnten Qt for WebAssembly ist dies inzwischen möglich. Da Qt eine vielseitige Technologie ist, können Sie es auch verwenden, um einen Backend-REST-API-Dienst zu entwickeln, wenn Sie bereits C++ beherrschen.

 

Eigenschaften des Qt-Frameworks

Wie bereits erwähnt, ist Qt ein Framework der Programmiersprache C++, das viele neue Funktionen hinzufügt. C++ wird oft als veraltete Programmiersprache kritisiert. Tatsächlich ist die Programmierung in C++ jedoch komfortabel, da sich die Sprache weiterentwickelt und neue Standards eingeführt werden. Es gibt Lösungen und Techniken, um die Speicherverwaltung in C++ zu vereinfachen, aber es bleibt wichtig, daran zu denken, diese auch anzuwenden.

Moderne Qt-Anwendungen bestehen aus zwei Elementen: der Benutzeroberfläche, die mit QML implementiert wird, und der Anwendungslogik, die in C++ geschrieben ist. Dieser Ansatz ermöglicht eine klare Trennung zwischen diesen beiden Aspekten jeder Anwendung.

Darüber hinaus profitieren Sie von der Leistung der Programmiersprache C++, wenn schwere Berechnungen und die Logik der Anwendung auf der C++-Seite liegen. In einem unserer früheren Beiträge können Sie lernen, wie Sie QML und C++ integrieren.

 

import QtQuick
import QtQuick.Controls

Window {
  id: root

  width: 400
  height: 200
  visible: true

  title: qsTr("Say Hello to Qt World")
  color: "darkgreen"

  Button {
    id: button

    anchors.centerIn: parent
    text: qsTr("Change background color")

    onClicked: {
      root.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
    }
  }
}

Wie Sie im obigen Codeausschnitt sehen können, ähnelt die QML-Syntax einer Mischung aus JSON und CSS. Dennoch verfügen QML-Elemente über eine andere Menge an Eigenschaften im Vergleich zu CSS-Attributen. QML ist ein Beispiel für eine deklarative Programmiersprache, was bedeutet, dass Sie lediglich definieren, was Sie erreichen möchten, ohne den Ablauf beschreiben zu müssen.

QML verwendet JavaScript für das Skripting. Wenn Sie oder Ihr Team diese Programmiersprache bereits kennen, können Sie einige Ihrer Kenntnisse nutzen, um die Qt-Entwicklung zu beschleunigen.

Qt verfügt über eine ausgezeichnete Dokumentation. Allerdings sollte erwähnt werden, dass sie sich etwas zu sehr auf die API konzentriert und weniger auf die Umsetzung praktischer Lösungen.

 

Was bietet Qt?

Das Framework basiert auf Modulen, die spezifische Funktionalitäten bereitstellen. Die wichtigsten Module gehören zur Kategorie Framework Essentials. Sie bilden das Rückgrat und die Basis des Qt-Frameworks.

Unter den wichtigsten Modulen finden sich Komponenten wie Qt Core, das nicht-grafische Klassen bereitstellt, sowie Module, die eine umfangreiche Benutzeroberflächen-Implementierung ermöglichen – sowohl mit den Programmiersprachen C++ als auch QML.

Qt bietet eine Vielzahl zusätzlicher Funktionen, die direkt im Framework enthalten sind. Die obige Grafik zeigt nur einen Teil der zahlreichen Qt Framework Add-Ons. All diese Add-Ons werden zusammen mit dem Qt-Framework ausgeliefert, sodass Sie darauf zurückgreifen können, um unkonventionelle Funktionen zu implementieren, wie z. B. 3D-Zeichnen, den Zugriff auf Bluetooth- oder NFC-Hardware oder die Nutzung von Gerätesensoren. Eine vollständige Liste der Qt-Framework-Funktionen finden Sie auf der offiziellen Website. Dank der Vielzahl an Modulen ist es oft nicht notwendig, nativen Code zu verwenden.

Zusätzlich gibt es viele Drittanbieter-Bibliotheken für C++, die Sie in Ihrem Projekt verwenden können.

 

TODO-App mit Qt QML

Unten finden Sie die Datei main.qml, die das Herzstück der für diesen Artikel erstellten Qt TODO-Anwendung darstellt.

 

import QtQuick

Window {
  id: root
  visible: true

  color: "#EBEBEB"

  Item {
    id: tasksSection

    anchors {
      fill: parent
      margins: 20
      topMargin: 80
      bottomMargin: 0
    }

    Text {
      id: tasksSectionTitle

      font {
        bold: true
        pointSize: 24
      }

      text: qsTr("Your tasks")
    }

    ListView {
      id: tasksListView

      anchors {
        top: tasksSectionTitle.bottom
        topMargin: 30
        bottom: parent.bottom
      }
      width: parent.width

      model: tasksModel

      spacing: 20

      delegate: Task {
        width: tasksSection.width
        height: 54

        text: title

        onClicked: {
          restApiClient.sendDeleteTaskRequest(id)
        }
      }
    }
  }

  InputSection {
    id: inputSection

    anchors {
      bottom: parent.bottom
      left: parent.left
      right: parent.right
      margins: 20
      bottomMargin: 30
    }

    onAddClicked: function (task) {
      restApiClient.sendPostTaskRequest(task)
    }
  }

  Component.onCompleted: {
    restApiClient.sendGetTasksRequest()
  }
}

Sie werden feststellen, dass wir auf restApiClient und tasksModel verweisen, die hier in QML nicht deklariert sind. Das liegt daran, dass wir Ihnen einen kurzen Überblick über die Integration von QML und C++ geben wollten. Ziel war es, die Logik (Kommunikation mit dem Webserver und Datenoperationen) zu trennen, da dies die wichtigste Best Practice für Qt QML ist, die Sie befolgen sollten.

 

void RestApiClient::sendGetTasksRequest()
{
    QNetworkRequest request(k_endpointUrl);
    QNetworkReply *reply = m_networkManager->get(request);

    connect(reply, &QNetworkReply::finished, this, [=]() {
        if (reply->error() == QNetworkReply::NoError) {
            parseGetTasksResponse(reply->readAll());
        }
        reply->deleteLater();
    });
}

Oben sehen Sie, wie eine der aus QML ausgeführten C++-Funktionen aussieht. C++ ist ein hervorragender Ort, um native Komponenten zu verwenden. Wenn Sie also nativen Code schreiben oder darauf zugreifen müssen, werden Sie dies in C++ tun.

 

RestApiClient restApiClient;
TasksModel tasksModel;

Object::connect(&restApiClient, &RestApiClient::tasksReady, &tasksModel, &TasksModel::synchronize);
QObject::connect(&restApiClient, &RestApiClient::taskRemoved, &tasksModel, &TasksModel::onTaskRemoved);

engine.rootContext()->setContextProperty("restApiClient", &restApiClient);
engine.rootContext()->setContextProperty("tasksModel", &tasksModel);

Diese Demo zeigt viele weitere Qt-Funktionen, wie Signals & Slots und das Model/View-Programmierung. Besuchen Sie gerne das GitHub-Profil von Scythe Studio, um sich mit diesen Konzepten vertraut zu machen.

 

 

Flutter vs React Native vs Qt – Leistungsvergleich

Wir haben ernsthaft überlegt, ob wir einen Leistungsvergleich zwischen Qt, Flutter und React Native in diesen Artikel aufnehmen sollen. Es ist offensichtlich, dass C++ die besten Ergebnisse bei umfangreichen Berechnungen erzielt, die eine hohe CPU-Auslastung erfordern. Allerdings wollten wir etwas testen, das in der Praxis relevanter ist, da rechenintensive Aufgaben bei mobilen Apps nicht häufig vorkommen.

Unser Ziel war es, etwas zu testen, das den Endnutzer tatsächlich betrifft. Daher haben wir uns entschieden, das Rendering zu testen, da die Benutzeroberfläche etwas ist, mit dem der Nutzer ständig interagiert.

Zu diesem Zweck haben wir drei identische einfache Anwendungen implementiert, die 200 Bilder in einem Raster rendern und diese in einer Schleife rotieren. Dieser Test ist zwar nicht perfekt, simuliert jedoch Szenarien mit mehreren Animationen auf dem Bildschirm.

 

Der Leistungsvergleich von Flutter, React Native und Qt wurde mit folgendem Setup durchgeführt:

• Smartphone: Huawei Mate 20 Lite

• Android-Version: 10

• Profiling-Software: GameBench

Nach dem Start der Anwendungen waren keine klar erkennbaren Rendering-Probleme sichtbar. Trotz der anspruchsvollen Aufgabe verhielten sich alle Apps einwandfrei. Unten finden Sie die GameBench-Profiling-Ergebnisse. Diese sind einander ähnlich, die Unterschiede resultieren aus den unterschiedlichen Ansätzen der Frameworks. Die niedrige CPU-Auslastung von Qt verdient dabei besondere Erwähnung.

Flutter vs React Native vs Qt Performance comparison
Framework	Median FPS	Average CPU usage	Average memory usage	Average GPU usage
Qt	40	1.95%	83 MB	40.64%
Flutter	31	9.41%	71 MB	18.50%
React Native	53	25.43%	91 MB	31.85%

Die für die Benchmarks verwendeten Apps finden Sie im GitHub-Profil von Scythe Studio.

 

Welche Plattform ist einfacher zu erlernen: Flutter, React Native oder Qt?

Was ist das einfachste plattformübergreifende Entwicklungsframework zum Lernen? Eine einfache Antwort darauf gibt es nicht, da dies stark vom Hintergrund des jeweiligen Entwicklers abhängt. Heutzutage beginnen die meisten Anfänger, die das Programmieren erlernen möchten, mit der Programmiersprache JavaScript. Das gibt React Native einen großen Vorteil, da sein Vorläufer – React.js – ein JavaScript-Framework für das Web ist. JavaScript-Kenntnisse sind auch von Vorteil, wenn Sie überlegen, Qt zu lernen, da JavaScript als Skriptsprache in QML verwendet wird.

 

Wie Sie bereits aus diesem Artikel erfahren haben, ist Qt ein Framework für C++. C++ existiert seit langer Zeit auf dem Markt und wird kontinuierlich mit neuen, modernen Funktionen weiterentwickelt. Es ist jedoch eine Tatsache, dass C++ im Vergleich zu JavaScript keine der einfachsten Sprachen ist, die man lernen kann. Mit Qt ist es jedoch tatsächlich sehr bequem zu verwenden. Wenn Sie andere Programmiersprachen bevorzugen, können Sie Qt trotzdem mit ihnen nutzen. Wie? Qt bietet Bindings zu vielen anderen Sprachen, darunter Rust, Go, Java und Python. Besonders Qt for Python ist recht beliebt.

Wie Sie in den obigen Codeausschnitten sehen konnten, hat QML eine lesbare und leicht zu erlernende Syntax. Es ist ebenfalls recht einfach zu erlernen. Flutter hingegen verfolgt den spezifischsten Ansatz zur Definition von Benutzeroberflächen, was am Anfang eine Herausforderung sein kann. Allerdings verfügt Flutter, wie andere Frameworks, über ausgezeichnete Dokumentation und Lernmaterialien, sodass Sie es dennoch schaffen sollten, es zu lernen. Ein wichtiger Punkt, den Sie bedenken sollten, ist, dass Dart (die Programmiersprache von Flutter) außerhalb des Frameworks nur selten verwendet wird. Aus diesem Grund könnten Ihre Dart-Programmierkenntnisse wenig nützlich sein, wenn sie nicht mit Flutter kombiniert werden.

 

Flutter vs React Native vs Qt – Vergleich der besten plattformübergreifenden Entwicklungsframeworks

Mit all dem, was Sie bisher gelernt haben, sollten Sie einen guten Überblick darüber haben, wie diese drei Frameworks im Vergleich abschneiden. Wir haben die Leistung, die Unterstützung für bestimmte Plattformen, die Reife und die Funktionalitäten behandelt. Ein weiterer wichtiger Punkt, den wir ansprechen sollten, ist die Release-Politik. Seit der ersten stabilen Version im Jahr 2018 hat Flutter bereits zwei neue Hauptversionen veröffentlicht. Das stellt ein Problem für langfristige Projekte dar, deren Lebenszyklus oft in Jahren gemessen wird. Jede Hauptversion bringt bedeutende Änderungen am Framework mit sich, die Entwickler bewältigen müssen, was die Wartungskosten erhöht. Ganz zu schweigen von den Abhängigkeitsproblemen, die ebenfalls an spezifische Framework-Versionen gebunden sind.

Die Release-Politik des Qt-Frameworks ist in diesem Zusammenhang ein goldener Standard. Qt bietet eine hochwertige Abwärtskompatibilität, und alle drei Nebenversionen (normalerweise gibt es etwa zwei Nebenversionen pro Jahr) wird eine Long Term Support (LTS) Version veröffentlicht. Diese speziellen Versionen erhalten über drei Jahre hinweg Verbesserungen und Fehlerbehebungen, was besonders für Unternehmen mit langfristigen Projektzyklen von großer Bedeutung ist.

 

Ein weiterer Punkt ist die Frage, unter welcher Lizenz die einzelnen Frameworks verfügbar sind. Flutter wird unter der New BSD-Lizenz vertrieben, die die Nutzung des Frameworks kostenfrei ermöglicht, mit minimalen Einschränkungen. React Native verwendet eine MIT-Lizenz, die ebenfalls sehr liberal ist und eine kostenlose Nutzung erlaubt. Qt hingegen ist die einzige Lösung mit mehreren Lizenztypen, einschließlich einer kommerziellen Lizenz. Einige weniger übliche Module sind in der kostenlosen Open-Source-Version nicht verfügbar. Dies liegt daran, dass Qt ein anderes Geschäftsmodell hat: Im Gegensatz zu Google bietet Qt keine Dienstleistungen an und erzielt Einnahmen durch den Verkauf von Lizenzen.

Ein weiterer wichtiger Aspekt ist das Tooling. Sowohl React Native als auch Flutter haben eine hervorragende Unterstützung in verschiedenen IDEs. Die beste Qt-Entwicklungserfahrung bietet der Qt Creator IDE, aber es gibt auch Plugins, um Qt in Visual Studio oder Visual Studio Code zu nutzen. Einige Entwickler richten CLion für die Qt-Entwicklung ein.

Das Qt-Framework bietet ein Werkzeug, das die Lücke zwischen Designern und Entwicklern schließt: Qt Design Studio. Es handelt sich um einen WYSIWYG-Designer, der von UX/UI-Designern bedient werden kann. Es generiert QML-Code, der dann in der tatsächlichen Anwendung verwendet wird. Qt bietet außerdem ein Plugin, mit dem sich Designs aus Figma mit nur wenigen Klicks exportieren lassen.

Abschließend folgt eine Vergleichstabelle der besten Frameworks für die plattformübergreifende App-Entwicklung.

 

 

Flutter vs React Native vs Qt im Jahr 2022 – Was soll man wählen?

In vielen Fällen ist plattformübergreifende Entwicklung eine effektivere Lösung als die native Entwicklung. Der Entwicklungsprozess für native Anwendungen dauert länger und ist teurer. Daher besteht ein wachsender Bedarf an plattformübergreifender Entwicklung. Lassen Sie uns die Frage beantworten, welches Framework – Flutter, React Native oder Qt – für die plattformübergreifende App-Entwicklung am besten geeignet ist.

Qt hat das breiteste Spektrum unterstützter Geräte. Es ist auch die umfassendste Lösung in der heutigen Liste, da es zahlreiche integrierte Module bietet. Mit Qt können Sie außerdem von Tausenden Open-Source-Bibliotheken in reinem C und C++ profitieren, was ebenfalls ein großer Vorteil ist.

React Native wird von einem Giganten – Meta Inc. – unterstützt und befindet sich derzeit in einer umfassenden Neustrukturierung, die die Leistung dieses Frameworks verbessern und andere Schwachstellen beheben soll. Es ist außerdem ein JavaScript-Framework, was Ihnen zugutekommt, da Sie von der enormen Popularität von JavaScript profitieren können, wenn Sie nach Entwicklern für Ihr Projekt suchen.

Flutter, in das Google stark investiert und über das die Community sehr begeistert ist, hat definitiv eine großartige Zukunft vor sich. Alle diese Frameworks haben viel Potenzial. Bevor Sie jedoch das beste Framework für Ihr Projekt auswählen, sollten Sie sich folgende drei Fragen stellen.

 

Welche Funktionen benötigt Ihre Anwendung?

Tatsächlich gibt es keine wesentlichen Gemeinsamkeiten in Bezug auf die Funktionalität dieser Frameworks. Dennoch sollten alle in diesem Artikel genannten Technologien gut für den gängigen Anwendungsfall funktionieren, nämlich das Anzeigen und Verarbeiten von Daten, die von einem Webserver abgerufen werden.

Wenn Sie jedoch ungewöhnliche Funktionen wie 3D, Sensoren, Bluetooth oder NFC benötigen, sollten Sie einen genaueren Blick auf Qt werfen.

 

 

Welche Plattformen müssen Sie wirklich in Ihrer Anwendung unterstützen?

vDie Unterstützung für iOS und Android ist bei Flutter, React Native und Qt gleichermaßen gut. Wenn Sie ausschließlich eine mobile Anwendung entwickeln, sind React Native und Flutter großartige Optionen, da sie in diesem Bereich häufiger verwendet werden.

Wenn Sie jedoch ein produktreifes Framework für Desktop- oder Embedded-Systeme benötigen, ist Qt die beste Wahl.

 

Was ist Ihr Hintergrund als Entwickler oder als Unternehmen?

In der Softwareentwicklungsbranche ist Zeit eine wertvolle Ressource. Aus diesem Grund sollten Sie (es sei denn, Sie haben keine Eile oder möchten etwas Neues lernen) eine Technologie in Betracht ziehen, die am besten zu Ihrem aktuellen Tech-Stack als Entwickler oder zu den Fähigkeiten der Softwareingenieure in Ihrem Unternehmen passt.

Nachdem Sie diese Fragen ehrlich beantwortet haben, sollten Sie eine Vorstellung davon haben, was Sie für Ihr nächstes Projekt benötigen. Denken Sie daran, regelmäßig unseren Blog zu besuchen, um über Neuigkeiten aus der Welt der plattformübergreifenden Softwareentwicklung auf dem Laufenden zu bleiben.