Wie verwendet man Qt und QML mit Visual Studio Code und WSL?
Qt und QML bieten ein leistungsstarkes Framework zur Entwicklung moderner, plattformübergreifender Anwendungen mit einer eleganten und reaktionsschnellen Benutzeroberfläche. Während Qt […]
Der aktuelle Stand von Flutter, React Native, Qt und Lynx JS
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 vs Lynx JS– 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 (Aktualisierung April 2025) gibt es 233chatcha 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.
Einführung in Lynx JS
Erweitern wir unseren Vergleich um einen relativ neuen, aber ambitionierten Akteur auf diesem Gebiet – Lynx JS. Dieses Open-Source-Projekt hat sich zum Ziel gesetzt, eine wirklich native Leistung mit einer Entwicklererfahrung aus der Webwelt zu bieten. Das Framework basiert auf JavaScript, aber im Gegensatz zu React Native oder Flutter verlässt es sich nicht auf die Laufzeitinterpretation von JS oder das Rendern benutzerdefinierter UI-Bäume – stattdessen kompiliert es JavaScript direkt in nativen Code, was insbesondere auf Mobilgeräten und Desktops eine bessere Leistung und Effizienz ermöglicht.
Von Lynx JS unterstützte Plattformen
Lynx JS legt den Fokus auf Leistung und minimalen Laufzeitaufwand und unterstützt deshalb die native App-Entwicklung auf Android, iOS, Windows und macOS. Es gibt Pläne zur Erweiterung auf Linux und Embedded-Plattformen, was Lynx JS zu einer wirklich vielseitigen Technologie machen würde – insbesondere für leichtgewichtige native Apps.
Merkmale von Lynx JS
Eines der bemerkenswertesten Merkmale von Lynx JS ist seine deklarative UI-Syntax, ähnlich wie JSX, kombiniert mit statischer Typisierung durch TypeScript. Anders als bei React Native wird das UI jedoch nicht mittels JavaScript gerendert. Stattdessen generiert das Framework native UI-Komponenten zur Kompilierzeit, was den Laufzeitaufwand reduziert und die Leistung verbessert. Entwickler können modernen, reaktiven Code schreiben und gleichzeitig native Leistung liefern.
Was Lynx JS besonders auszeichnet, ist seine Zero-Bridge-Architektur – JavaScript wird nur zur Build-Zeit verwendet, und das Ergebnis ist vollständig nativ. Das bedeutet: keine JS-Engine zur Laufzeit, keine Brückenverzögerungen und keine Speicherduplikation. Dies führt auch zu deutlich kleineren App-Größen.
Was bietet Lynx JS?
Lynx JS befindet sich zwar noch in einem frühen Stadium, bietet aber bereits:
- Unterstützung für TypeScript und JSX-ähnliche Syntax.
- Integration mit nativen APIs durch deklarative Bindings.
- Schnelles Build-System.
- Geringen Speicherverbrauch und kleine Binärdateien.
- Eine moderne Entwicklungsumgebung mit Hot Reload, statischer Analyse und IDE-Unterstützung.
Es ist wichtig zu beachten, dass das Ökosystem noch nicht so ausgereift ist wie das von Flutter oder React Native. Community-Pakete sind noch begrenzt, und einige plattformspezifische Integrationen erfordern manuelle Anpassungen. Doch das Projekt entwickelt sich schnell weiter und gewinnt an Aufmerksamkeit unter Entwicklern, die Leistung suchen, ohne auf JavaScript zu verzichten.
TODO-App mit Lynx JS
lx.app(() => {
let task = lx.state("");
let tasks = lx.state([]);
const API_URL = "http://62766064bc9e46be1a160ec4.mockapi.io/api/v1/tasks";
const getTasks = async () => {
try {
const res = await fetch(API_URL);
if (res.status === 200) {
const data = await res.json();
tasks.set(data);
} else {
tasks.set([]);
}
} catch (err) {
console.log("fetch error", err);
tasks.set([]);
}
};
const handleAddingTask = async () => {
if (!task.get()) return;
try {
await fetch(API_URL, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ task: task.get() }),
});
task.set("");
getTasks();
} catch (err) {
console.log("Error adding task", err);
}
};
const completeTask = async (id) => {
try {
await fetch(`${API_URL}/${id}`, { method: "DELETE" });
getTasks();
} catch (err) {
console.log("Error deleting task", err);
}
};
lx.effect(() => {
getTasks();
}, []);
return lx.view({
style: {
flex: 1,
backgroundColor: "#EBEBEB",
padding: 20,
paddingTop: 80,
},
children: [
lx.text({
text: "Your tasks",
style: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 20,
},
}),
lx.list({
items: tasks,
renderItem: (item) =>
lx.button({
text: item.task,
onPress: () => completeTask(item.id),
style: {
backgroundColor: "#fff",
padding: 10,
marginBottom: 10,
borderRadius: 8,
},
}),
}),
lx.view({
style: {
flexDirection: "row",
marginTop: 30,
},
children: [
lx.input({
value: task,
placeholder: "Enter task",
onChangeText: (text) => task.set(text),
style: {
flex: 1,
borderColor: "#ccc",
borderWidth: 1,
borderRadius: 8,
padding: 10,
backgroundColor: "#fff",
marginRight: 10,
},
}),
lx.button({
text: "Add",
onPress: handleAddingTask,
style: {
paddingVertical: 10,
paddingHorizontal: 20,
backgroundColor: "#4CAF50",
color: "#fff",
borderRadius: 8,
},
}),
],
}),
],
});
});
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, Lynx JS 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.
>Lynx JS ist eine vielversprechende Wahl, insbesondere für JavaScript- oder TypeScript-Entwickler. Es verwendet standardmäßig eine JSX-ähnliche Syntax und TypeScript, was es für Entwickler mit Webentwicklungshintergrund sehr vertraut macht. Da der Code in nativen Code kompiliert wird, gibt es keine JavaScript-Laufzeitumgebung, die gelernt oder debuggt werden muss. Auch wenn das Framework sich noch in der Entwicklung befindet und nicht über die umfangreichen Lernressourcen von Flutter oder React Native verfügt, sorgt seine Einfachheit und vertraute Syntax für einen relativ reibungslosen Einstieg.
Flutter vs React Native vs Qt vs Lynx JS – 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.
Lynx JS ist ebenfalls vollständig Open Source und unter der MIT-Lizenz lizenziert, was bedeutet, dass es sowohl in privaten als auch in kommerziellen Projekten kostenlos verwendet werden kann. Die Lizenzierung ist einfach und freizügig, ähnlich wie bei React Native.
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.
Lynx JS lässt sich gut mit modernen JavaScript-Tools integrieren und bietet ein eigenes CLI-basiertes Gerüstwerkzeug zur Erstellung nativer Projekte. Es unterstützt außerdem Hot Reload und TypeScript standardmäßig, was die Entwicklungserfahrung für Webentwickler vertraut macht.
Abschließend folgt eine Vergleichstabelle der besten Frameworks für die plattformübergreifende App-Entwicklung.
Flutter vs React Native vs Qt vs Lynx JS im Jahr 2025 – 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.
Obwohl Lynx JS das jüngste Mitglied der Gruppe ist, stellt es eine spannende Option für Entwickler dar, die native Leistung mit einer webähnlichen Syntax suchen. Dank der Kompilierung von JavaScript/TypeScript in nativen Code vermeidet es Laufzeit-Overhead und liefert leichte, effiziente Apps. Auch wenn das Ökosystem noch im Aufbau ist, ist es eine überzeugende Wahl für Early Adopters, die Wert auf Einfachheit und minimale Laufzeitabhängigkeiten legen. Wie bei allen neuen Technologien muss man jedoch damit rechnen, an einem bestimmten Punkt auf Einschränkungen zu stoßen.
>Ich persönlich bin ein Fan des „Choose Boring Technology“-Ansatzes, daher probiere ich nicht jedes neue JS-Framework aus, das veröffentlicht wird :D.
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.
Hilfreich? Mit Freunden teilen!
Brauchen Sie Qt QML-Entwicklungsdienste?
Kommen wir zur Sache: Es ist eine Herausforderung, Top-Qt-QML-Entwickler zu finden. Helfen Sie sich selbst und starten Sie die Zusammenarbeit mit Scythe Studio – echten Experten im Qt C++ Framework.
Entdecken Sie unsere Fähigkeiten!Neueste Artikel
Testen von Software für Medizinprodukte: Standards, Strategien und Tools
Die Entwicklung von Software für Medizinprodukte erfordert rigorose Tests, um die Patientensicherheit und die Einhaltung gesetzlicher Vorschriften zu gewährleisten. Solche […]
Visualisierung von Gesundheitsdaten
Da die Gesundheitsbranche immer mehr Daten generiert, liegt die Herausforderung nicht mehr nur in der Datensammlung, sondern in der Interpretation. […]
