10% CODE - 100% APP - felgo.com · // 10% CODE - 100% APP // 2 Although the Qt framework is C++...
Transcript of 10% CODE - 100% APP - felgo.com · // 10% CODE - 100% APP // 2 Although the Qt framework is C++...
10% CODE - 100% APP
PDF - light version
// 10% CODE - 100% APP // 2
Although the Qt framework is C++ based, you can
also code with QML and JavaScript. In fact, you can
create full apps without even touching C++. This is
going to save you a ton of time and make it easier to
develop your projects.
This guide shows you how you can save up to 90%
of code by choosing QML as your main language.
It holds many best practices and tips for creating
QML-driven apps that offer the same performance as
pure Qt C++ applications. This comprehensive QML
development guide summarizes all the knowledge
we gathered from creating more than 100 QML-
based mobile apps for enterprises, startups and own
projects.
How to rule Qt with QML & JS
Here’s a case study from the 2019 Qt Summit in Berlin
& Tokyo. Naturally, we tackled this project using the
Qt framework, specifically the Felgo SDK. We ended
up using 90% less code compared to a plain Qt proj-
ect.
Felgo developed the conference app within a week.
This was possible thanks to the “Felgo Conference”
app template - ready to use for all kinds of confer-
ences and events.
It comes with ready-made connections to a variety of
APIs like Felgo SocialView, Push Notifications or Of-
fline Mode. Participants also enjoyed a cutting-edge,
custom UI & UX when browsing the schedule or look-
ing at detailed information for all talks and speakers.
Make sure you check out the open-source code on
GitHub, which will show you just how useful QML is.
Case Study Summit Conference App: 90% less code vs. Qt:
QML
QML C++
C++
LINES OF CODE 1 910
LINES OF CODE 23 200
// 10% CODE - 100% APP // 3
In case you have never heard of Qt: It is a powerful
and feature-rich C++ framework used in many differ-
ent industries. It supports development of apps for
desktop, mobile platforms and embedded systems –
all from a single code base.
One of the best things about Qt is QML, a reactive
programming language (sometimes also referred to
as a declarative language) that extends JavaScript. It
allows developers to create stunning apps that save
up to 90% of code compared to native development
for iOS or Android. With less code and a single code
base for iOS, Android and desktop, your maintenance
costs decrease dramatically. You can release updates
to different platforms faster and have a single team
sharing the knowledge.
Why use QML for iOS or Android Apps?
Try it now!
import Felgo 3.0import QtQuick 2.0
App { NavigationStack { Page { title: “My First App” AppText { text: “Hello World!” anchors.centerIn: parent } } }}
https://felgo.com/web-editor?snippet=d0846f61
// 10% CODE - 100% APP // 4
Custom Rendering and QML Item Trees
In contrast to many other cross-platform solutions,
Qt offers an architecture that does not rely on native
platform rendering or a web view. It moves all con-
trols and the rendering into the app itself. To show
items on the device screen, it only requires a native
view with a canvas to draw onto.
This architecture breaks away from the so-called
“cookie cutter” apps that have been common in the
past. Instead of the native platform renderer, Qt uses
app-driven custom rendering.
This allows for a unified renderer and app experience
across all supported platforms.
But don’t let the fact that Qt relies on C++ mislead
you. Since the introduction of QML and JavaScript for
rapid UI development, you can create item trees in a
customizable and extensible way. You can combine
and nest individual QML Items to form a tree that de-
scribes your UI. There’s no need to dive into complex
C++ code!
// 10% CODE - 100% APP // 5
Native Performance and Compilation of View Code
Native Performance and Compilation of View Code
In the background, each QML Item uses a performant
native C++ implementation. When the Qt runtime
parses your QML code, it creates all QML Items as
C++ objects. With your QML markup and JavaScript
logic, you can control and combine them. This makes
it easy to build your UI.
There’s no need to create your UI with C++ widgets.
Apps created with QML offer the same performance.
Qt compiles your QML tree as soon as it parses the
code the first time. You get this Just-in-Time (JIT)
compilation of QML apps out-of-the-box.
With the Qt Quick Compiler, you can also compile
your QML code Ahead-of-Time (AOT). It transforms
your QML and JavaScript directly into bytecode. This
architecture makes apps powered by QML super fast
and performant.
// 10% CODE - 100% APP // 6
Qt MVC: Models and Views in QML
import Felgo 3.0import QtQuick 2.0
App { // data model ListModel { id: fruitModel ListElement { name: “Banana” cost: 1.95 } ListElement { name: “Apple” cost: 2.45 } ListElement { name: “Orange” cost: 3.25 } } // list page NavigationStack { Page { title: “List Page” AppListView { anchors.fill: parent model: fruitModel delegate: SimpleRow { text: name detailText: “cost: “+cost } } // AppListView } // Page } // NavigationStack} // App
https://felgo.com/web-editor?snippet=4c2ba057
For most apps, it is a basic task to populate UI views
based on some application data. Qt offers a built-in
separation into model, view and delegate compo-
nents. The following example visualizes a set of data
records in a list.
The AppListView presents you with a scrollable list
view. For each ListElement in your ListModel, the
view instantiates the delegate Item to visualize each
element in your list. In this case, a SimpleRow item
represents each list element.
// 10% CODE - 100% APP // 7
Why Choose a QML ListModel instead of a Qt C++ Model?
The ListModel type is actually a C++ QAbstractList-
Model implementation exposed to QML. The above
code does not only create a UI tree of C++ objects.
It also handles the list data in a C++ data structure –
pretty nice!
It’s exceptionally fast to develop user interfaces
this way, and since C++ is actually used under the
hood, there are no drawbacks in performance. Still,
for long-running, heavyweight and data-intensive
calculations it does make sense to move away from
QML. In such cases, C++ will outperform JavaScript.
For more examples on mixing both languages and
when it’s worth the extra effort, read on as we’ve got
you covered with details on combining C++ code
with QML!
When using QML, many Qt developers tend to be-
lieve they should at least code the model in C++. This
is not the case. QML is optimized to integrate seam-
lessly with C++.
All QML code gets compiled to native code with
native performance. And when using the Qt Quick
Compiler, this already happens during compilation
of the app. The QML ListModel offers a simple API
and perfectly works together with view types like
ListView, GridView or Repeater.
QML Best Practice: Use REST Services and JSON for your ListView
https://felgo.com/web-editor/?snippet=d5ad7af6
There is another big advantage of using QML and
JavaScript as your main coding language: It is super
easy to work with REST services and JSON data.
The application logic for QML gets written in JavaS-
cript. QML thus has built-in support to handle variant
data types like JSON structures. With a simple HTTP
request, you can fetch JSON data and use it in your
views.
The following code snippet retrieves and shows a list
of todo entries from a REST service:
import Felgo 3.0import QtQuick 2.0
App { // on app start: fetch data from REST api Component.onCompleted: { HttpRequest.get(“https://json-placeholder.typicode.com/todos”) .timeout(5000) .then(function(res) { dataFetched(res.body) }) .catch(function(err) { console.err(“Fetch failed:”+err) }); } // dataFetched gets called on suc-cess of http request function dataFetched(jsonData) { listView.model = jsonData // set retrieved json data as model for list }
// list page NavigationStack { Page { title: “Todo List” AppListView { id: listView anchors.fill: parent delegate: SimpleRow { text: modelData.title } } } }}
Instead of a ListModel, QML also allows you to assign
JSON data structures as the model. This is very con-
venient when working with REST services. You can
directly use the retrieved JSON result to display your
data.
// 10% CODE - 100% APP // 9
Drawbacks of Using JSON data for the ListView Model
A JSON structure is no ListModel and thus no QAb-
stractListModel implementation. You do not have
the benefits of a performant C++ model in this case.
Also, a JSON array is a variant type. The list can thus
not expect a defined data structure to create its ele-
ments.
This results in performance and usability drawbacks.
For example, when you change or replace the JSON
data. The view then parses the whole model again
and redraws all items from scratch. This full redraw
can take a while and is noticeable by the user. You
also lose the current scroll position, and advanced
features like transition animations are not supported.
At this point, you might think: Let’s create a ListMod-
el and fill it with the JSON data. While this solves the
performance problem, another issue quickly pops
up: How do you update the model when you fetch
new data from the API at a later point?
If you re-create the ListModel from scratch, the view
again requires a full redraw. To avoid this, we could
compare each entry of the latest JSON data with the
current state of the ListModel.
This allows us to only synchronize changed or new
data entries to the model.
However, such manual synchronization requires a lot
of extra effort. It also comes with some overhead, es-
pecially when you start to compare large data sets.
JavaScript and QML are not well suited to perform
such data-intense operations.
But here’s the good news: the next section introduces
a QML component that covers exactly this synchroni-
zation. The JsonListModel is a special ListModel im-
plementation that can handle JSON data and there-
fore make QML the right choice, even in the case of
data-intensive applications.
// 10% CODE - 100% APP // 10
How Does the JsonListModel Work?
The JsonListModel offers an easy way to transform
JSON data into a QML ListModel for usage with e.g.
an AppListView.
This is how you can use the model for our todo list
example:
import Felgo 3.0import QtQuick 2.0
App { // on app start: fetch data from REST api Component.onCompleted: { HttpRequest.get(“https://json-placeholder.typicode.com/todos”) .timeout(5000) .then(function(res) { dataFetched(res.body) }) .catch(function(err) { console.err(“Fetch failed:”+err) }); } // dataFetched gets called on suc-cess of http request function dataFetched(jsonData) { listView.jsonData = jsonData // set retrieved json data as model for list } }}
// list page NavigationStack { Page { title: “List Page” AppListView { anchors.fill: parent model: fruitModel delegate: SimpleRow { text: name detailText: “cost: “+cost } } // AppListView } // Page } // NavigationStack} // App
https://felgo.com/web-editor?snippet=0427bb7e
// 10% CODE - 100% APP // 11
JsonListModel
The JsonListModel holds a local copy of the specified
JSON data. Whenever the JSON source changes, the
data gets compared to the local copy of the list mod-
el. To identify each unique data record, it is import-
ant to specify the keyField of your data objects. After
diffing the old and new data sets, the JsonListModel
applies all detected changes individually. It thus syn-
chronizes the model with the changed JSON data
step by step.
The JsonListModel type implements the full QML
ListModel API and fires separate events for all chang-
es. The list view can thus only update relevant entries
or apply transition animations. This is super useful, as
you can e.g. fetch new data and simply replace the
old JSON. The JsonListModel will detect all changes,
and the ListView updates changed items accordingly
– without a full redraw.
// 10% CODE - 100% APP // 12
Benefits of JsonListModel
Json Model: The list jumps to the top after a model update.
JsonListModel: The list keeps its scroll position.
You thus get a much better performance and scrolling stays smooth when the list updates:
// 10% CODE - 100% APP // 13
Summary
Fetch JSON data from REST APIs with QML and JavaScript.
Pass your JSON to the model, which synchronizes the data to a ListModel and pre-pares it for usage in your view.
Show the model data in your QML view, which now only updates items that changed.
You do not require to create a custom model in C++
when working with REST APIs and JSON data.
The JsonListModel itself is your C++ model. It is fully
usable from QML and can work with JSON objects of
any format
JsonListModel
Apart from list views, the JsonListModel also sup-
ports the GridView and Repeater types to display
model data. It is based on QSyncable, a syncable C++
model implementation by Ben Lau. You can find his
full project on GitHub.
The JsonListModel is also available with the free Fel-
go SDK. The Felgo Apps module used in the above
example holds many such useful components. Felgo
focuses on making mobile app development with
Qt as easy as possible. For example, the HttpRequest
type for networking or UI types like NavigationStack
are also part of the SDK.
Dynamically Sort or Filter Data with SortFilterProxyModel
To sort and filter list models, C++ Qt offers the QSort-
FilterProxyModel class. In the same way, you can
use the SortFilterProxyModel QML type with any list
model in QML. It also works in conjunction with the
JsonListModel:
This example shows a list of different fruit and meat
entries. The list entries get sorted by type with the
SortFilterProxyModel. You can also change the sort-
ing order by pressing the AppButton.
Similar to JsonListModel, the SortFilterProxyModel is
a C++ type exposed to QML. So for this simple QML
example, all data and model-related tasks are actual-
ly performed by C++ types. When working with REST
services and JSON data, you can fully handle all mod-
el and view code in QML!
https://felgo.com/web-editor?snippet=e19aeb5d
// 10% CODE - 100% APP // 15
import Felgo 3.0import QtQuick 2.0
App { Page { id: page
// property with json data property var jsonData: [ { “id”: 1, “title”: “Apple”, “type”: “Fruit” }, { “id”: 2, “title”: “Ham”, “type”: “Meat” }, { “id”: 3, “title”: “Bacon”, “type”: “Meat” }, { “id”: 4, “title”: “Banana”, “type”: “Fruit” } ]
// list model for json data JsonListModel { id: jsonModel source: page.jsonData keyField: “id” fields: [“id”, “title”, “type”] }
// SortFilterProxyModel for sorting or filtering lists SortFilterProxyModel { id: sortedModel // use the Component.onCom-pleted handler to configure SortFil-terProxyModel for JsonListModel Component.onCompleted: source-Model = jsonModel // add a sorter to sort the list by type sorters: StringSorter { id: typeSorter; roleName: “type”; as-cendingOrder: true } }
// list view AppListView { anchors.fill: parent model: sortedModel delegate: SimpleRow { text: model.title } section.property: “type” section.delegate: SimpleSec-tion { } }
// Button change the sorting or-der AppButton { anchors.horizontalCenter: par-ent.horizontalCenter anchors.bottom: parent.bottom
text: “Change Order” onClicked: typeSorter.ascend-ingOrder = !typeSorter.ascendin-gOrder } } // Page}
Dynamically Sort or Filter Data with SortFilterProxyModelhttps://felgo.com/web-editor?snippet=e19aeb5d
// 10% CODE - 100% APP // 16
Offline Caching, File Downloads and Native Integrations for your Mobile
App
As QML and C++ integrate seamlessly, it is possible to
expose any native feature for usage with QML. Avail-
able Qt components already allow to work with sen-
sors, SQLite databases and much more. And the Fel-
go SDK offers lots of additional features. For example
to fetch assets at runtime with the DownloadableRe-
source item. It allows you to keep the initial app size
small and dynamically load content if required – all
with QML.
You can create your own C++ components and regis-
ter them with QML as well. For iOS and Android apps,
you can even add components that weave-in native
iOS code with Obj-C or run Java Android code over
JNI.
Please note that such native code requires custom
implementations for each platform then. Felgo al-
ready has you covered with the NativeUtils compo-
nent. It offers lots of features like native dialogs, cam-
era and image picker or sharing.
The SDK also comes with many Felgo Plugins that in-
tegrate 3rd party frameworks for:
- server-triggered or local notifications
- in-app purchases and monetization
- analytics and crash reporting
- Firebase authentication and database
- ...and much more.
There is no limit to what you can do – it’s possible to
manage your full app logic purely with QML. You can
even perform calculations in different threads with a
WorkerScript.
It is very simple to create stunning views and handle application data with QML. But why stop there? Let’s take it one step further!
// 10% CODE - 100% APP // 17
App Example with JsonListModel and Offline Caching
https://felgo.com/web-editor?snippet=39223058
Mobile apps have to work properly even without in-
ternet access. The Storage component allows cach-
ing data in a simple key-value store. It can save full
JSON structures as well. The data gets serialized and
converted to string format automatically.
You can thus use the Storage to initialize the JsonList-
Model with previously cached JSON data. This way,
your app can show the latest state of the data even if
a fetch request fails.
In addition to fetched data, you can locally cache
new entries as well. As soon as the app has internet
connection again, save them to your server and re-
move the local entries.
We prepared a full demo app for you, which allows
browsing and creating todo list entries. You can find
the full example with caching, local draft entries, list
filtering and more on GitHub.
// 10% CODE - 100% APP // 18
App Example with JsonListModel and Offline Caching
https://felgo.com/web-editor?snippet=39223058
import Felgo 3.0import QtQuick 2.0
App { // on app start: fetch data Component.onCompleted: { fetchData() } // list page NavigationStack { Page { title: “Todo List” AppListView { id: listView anchors.fill: parent // property for json data, used as source for JsonListModel property var jsonData: [] // use JsonListModel as mod-el model: JsonListModel { source: listView.jsonData keyField: “id” fields: [“id”, “title”] } // delegate delegate: SimpleRow { text: title } } } }
// storage for caching Storage { id: cache } // fetch data from cache or from api function fetchData() { // check cached value first var cachedData = cache.getVal-ue(“todos”) if(cachedData) listView.jsonData = cachedData // load new data from api HttpRequest.get(“https://json-placeholder.typicode.com/todos”) .timeout(5000) .then(function(res) { dataFetched(res.body) }) .catch(function(err) { console.err(“Fetch failed:”+err) }); } // dataFetched gets called on suc-cess of http request function dataFetched(jsonData) { // cache new data before updat-ing the model cache.setValue(“todos”, jsonDa-ta) listView.jsonData = jsonData // set retrieved json data as model for list }}
// 10% CODE - 100% APP // 19
When Should You Use C++ and When QML
Coding in QML has several advantages over develop-
ment with C++:
Coding with QML + JavaScript is very easy to learn
and makes a great reduction in the required amount
of code possible.
Language concepts like states, signals or property
bindings are a huge time-saver.
QML makes adding animations simple. You can ani-
mate every property of your QML types with simple
Animation components.
QML is extensible and flexible. For example, you can
extend objects with new properties and features in-
line. No need to create a new reusable type for small
extensions.
The QML Rendering Engine offers great performance.
The renderer uses C++ Qt and relies on a hardware
accelerated scene graph. This makes it fast enough to
power even high-performance games.
Qt app development with C++ has advantages as
well. For some scenarios, you might need features
that are only available with Qt C++. Also, C++ is fast
and type-safe. This provides the best possible perfor-
mance for long-running and data-intensive calcula-
tions.
For the following examples, you would choose C++
over QML:
Native C++ code is the right choice for data-inten-
sive operations. It will outperform interpreted QML/
JavaScript code.
C++ code is type-safe and compiled into object code.
For parts where stability and security are important,
using C++ helps to make your app less error-prone.
The Qt C++ components offer different, and in some
cases more features than the QML types. For exam-
ple, advanced networking features.
It is also possible to mix C++ with native code for An-
droid (over JNI) or iOS (Obj-C or Swift). This provides
native functionality for QML as well.
Occasionally, you might need a 3rd party library that
is only available in C++, or have existing code in C++
which you’d like to reuse.
It is possible to code most parts of the application
without the need to touch C++. The Felgo SDK and
Qt have many QML components available. For a start-
ing point to integrate Qt C++ or make native features
available for QML, you can see the guide How to Ex-
pose a Qt C++ Class with Signals and Slots to QML.
Application Development with QML is simple and powerful. But Qt C++ can be more performant, offers many features and is less error-prone. So it’s important to know
when to use which.
QML MVC: App Architecture BestPractices and Design Patterns
With all this knowledge and QML benefits in mind,
we will use QML for more than only view code. We
handle data-related tasks and application logic as
well. It thus becomes very important to think about
a clean app architecture and component structure
for such QML-driven apps. We want to keep our
code clean, maintainable and extensible.
The ease and flexibility of QML can lead to certain
problems. When using signals and property bind-
ings a simple value change can affect many com-
ponents. Properties that rely on other properties
update automatically. They handle the signal and
update their value as well. This is even possible
across multiple QML Items:
This doesn’t look complex now. But imagine that we
add a few new components with different proper-
ties and cross-dependencies.
Why care about separation of concerns?
QML MVC: App Architecture Best Practices and Design Patterns
Different connections between all the items start to
form. You can no longer say for sure what effect a
single property change may have for directly or indi-
rectly connected components. In the worst case, this
can result in circular dependencies or loops. If you
face such issues, this is an indicator for bad compo-
nent architecture.
This problem gets worse and worse the more your
project grows. Each component should thus have a
clean interface and only manage its own data. This is
what separation of concerns means.
Why care about separation of concerns?
A bad component architecture can quickly lead to
unwanted side-effects or corrupted data. Imagine
lots of signals firing and event handlers running in
unknown order. Your code at different parts of the
app changes data seemingly random or with dupli-
cated code. This is a nightmare for debugging, main-
tenance or refactoring.
For most design patterns, the golden rule is: Keep the
code that displays data (view) separate from the code
that reads or modifies data (model).
Design Patterns like MVC, MVVM or Flux (React Native)
The DataModel is your central storage for application
data. Pages can only access application data with the
DataModel. It manages your data in a way that makes
sense for your use-case and views. For different views
and use-cases, the usage of several DataModel com-
ponents is possible.
For the app logic, you will also add many functions
and signal handlers to your view or model. If not
done properly, this results in a lot of fragmented code
spread across view items. Once your application gets
more complex, it also gets more difficult to maintain
your code clean and testable. It gets hard to decide
where to perform which action, and duplicate code
spread across pages is inevitable.
With the above architecture, the data flow between
model and page is bi-directional. This means, pages
do not only show model data, but can also write to
the model directly. Modern application frameworks
like React Native use a different approach. For exam-
ple, the Flux architecture designed by Facebook fa-
vors an unidirectional data flow.
Each content view of a Felgo app is usually com-
posed as a Page. The Page type is a view controller,
which provides and displays data for the user. By
introducing a DataModel component, we can move
data handling away from the view:
Model-View Separation in QML
With Flux, each user interaction propagates the
action through a central dispatcher. The dispatcher
forwards the action to various stores that hold appli-
cation data and business logic:
Create a clean Data Flow: QML Architecture inspired by Flux
You can read more about the quite sophisticated im-
plementation of such a pattern for QML in this post
by Ben Lau: Revised QML Application Architecture
Guide with Flux
It’s hard to say if the overhead of a complex solution
is worth the effort. For most mobile app projects, a
more relaxed implementation with the same advan-
tages is sufficient.
Doing a lot of work in QML can quickly result in un-
readable and fragmented code. With a clean compo-
nent architecture and clear responsibilities, you can
avoid this. Using an architecture like above helps
to provide a consistent app structure that simplifies
testing and refactoring.
With the principles shown in this guide, you can cre-
ate well-structured apps that handle app logic, da-
ta-related tasks and view code purely with QML.
Simple Flux-like Example for Model View Controller Separation in QML
// 10% CODE - 100% APP // 24
Felgo offers many demos and examples you can use to build a first prototype of your project
Not sure how to get started?
We will help you out with Qt Trainings and App Development Workshops to get your team started!
We can help!
// 10% CODE - 100% APP // 25
Qt Trainings & Workshops Qt Software Development Services
Qt Consulting Services Qt for iOS & Android Services
The Felgo team is here to support you! We can cover the whole process from the first idea up to the release of your app in the stores. Take advantage of our Mobile App Development Services and join
the ranks of satisfied Felgo customers:
Do you already have a project or app in mind?
The Felgo SDK is free to use, so make sure to check it out!Join more than 50.000 Felgo Users