Using Web Software
Architecture in Traditional
Desktop App Development
How Flux/Redux was ported to Qt/Qml
Ben Lau
Open Source Developer
https://github.com/benlau
Ben Lau
Qt Champion 2016&2017
Cross-Platform
SDK
Windows / Mac / Linux Android / iOS
Internet of Things /
Embedded Devices
Gaming and 3D
Application
Linux Desktop - Gtk Vs Qt
VS
C
Python
C++/JavaScript
Python
1st Public Release
1995
Qt
v0.9.0 for X11/Linux
JavaScript
Netscape Navigator 2.0
beta
20th Apr 1995
4th Dec 1995
Mostly Inline Event Callback
2000
Server Side Rendering is the Main Stream
2000
Qt 3.0/Embedded, User Interface Designer
2001
~2000 Web and Desktop Development
are Completely Different
GWT: Compile Java -> JavaScript
2006
jQuery - Reinvent the JavaScript
2006
The Growth of JavaScript Frameworks
Past
Present
Future
License: GPL => LGPL
2008
QML:Declarative User Interface Markup Lang
2010
Callback in JavaScript
~2010 Web and Desktop Development
are Getting Closer
A Common Challenge
MVC: Model View Controller
A concept that you must learn to write GUI application
Model 2
MVC is not a Design Pattern
Different idea, various way of implementation models
The original MVC
Model 1 - The original proposal Model 2
Explicitly Declared Controller
Non-Explicitly Declared Controller
MVVM: Model - View - ViewModel
By Microsoft for use with Windows Presentation Foundation
2005
The Event Flow of MVC/MVVM
Like playing a Pong Game
Schrödinger's MVC’s Cat
In a Game with a Cat
Somebody calls “LegView.remove()”
A leg cannot remove itself. Emit removeRequest signal
BodyView.legRemoved(index) => CatView.meow()
Emit meowSignal()
1
3
CatView.meowSignal() => OwnerView.pet(cat)4
LegView.removeRequest() => BodyView.removeLeg(index)
Emit legRemoved(index)
2
ReactJS and Flux Architecture
A Simplified CQRS (Command Query Responsibility Segregation) Architecture
2013
Queries and Updates Separation
~ Model
Read-Only
Updates by
Action
Unidirectional Data Flow
Is it suitable for
Desktop Application?
1st Attempt: Clone the API of Facebook
Flux Project
2nd Attempt: Share My Experience
Problem: The official Flux
implementation is too simple.
Only solved few problems
Too Many Implementations
2016: Quick Flux v1.0 Released
Enquiry 1: Can I use React in Qt?
Enquiry 2: Can I use Redux in Qt?
Redux is a Modified Flux Architecture
1. Use Reducers to update
Store
2. Reducer is a pure function
3. A pure function always
returns the same output for
a set of inputs
4. A pure function could not
handle random value and
asynchronous I/O
5. Uses Middleware to handle
async I/O
2015 https://staltz.com/unidirectional-user-interface-architectures.html
QRedux - A Qt/QML port of Redux
2016
QuickFlux v1.1 Released
2017 Pure Component Async I/O
Finally, I got a almost perfection
software architecture for desktop
application
Only depends on Store (Data Model) and
Actions
No knowledge of application logic and
system components
Only send actions on user events
01
02
03
Fast Development04
Perfection Separation of View and Logic
Saved in Store. It is pure and
deterministic
Decoupled from System Components
It doesn’t need a Mock object for writing
tests.
01
02
03
Fast Development04
Application Logic
Enquiry 3: Can you help me to port my
application to use your QuickFlux?
Q & A
Thank you
Twitter @benlaud | Github @benlau

Using Web Software Architecture in Traditional Desktop App Development