The development experience of desktop and web application is different, but their gap is getting closer. A modern JavaScript application also needs a build script for “compilation" for deployment like a desktop application. At the same time, the desktop environment is adopting the web technology. Qt, being one of the most popular cross-platform development frameworks, introduced a language called QML in its 4.7 version. It provides a declarative way to design the user interface and handle user response by JavaScript. It is a solution to speed up the development time of making a user interface. What happens if more web technology is being used on desktop development? The speaker is going to share his experience in porting Flux/Redux to QML, promise chaining to C++, and his vision on future desktop development technology.

1. Using Web Software
Architecture in Traditional
Desktop App Development
How Flux/Redux was ported to Qt/Qml

2. Ben Lau
Open Source Developer
https://github.com/benlau

3. Ben Lau
Qt Champion 2016&2017

4. Cross-Platform
SDK
Windows / Mac / Linux Android / iOS
Internet of Things /
Embedded Devices
Gaming and 3D
Application

5. Linux Desktop - Gtk Vs Qt
VS
C
Python
C++/JavaScript
Python

6. 1st Public Release
1995
Qt
v0.9.0 for X11/Linux
JavaScript
Netscape Navigator 2.0
beta
20th Apr 1995
4th Dec 1995

7. Mostly Inline Event Callback
2000

8. Server Side Rendering is the Main Stream
2000

9. Qt 3.0/Embedded, User Interface Designer
2001

10. ~2000 Web and Desktop Development
are Completely Different

11. GWT: Compile Java -> JavaScript
2006

12. jQuery - Reinvent the JavaScript
2006

13. The Growth of JavaScript Frameworks
Past
Present
Future

14. License: GPL => LGPL
2008

15. QML:Declarative User Interface Markup Lang
2010
Callback in JavaScript

16. ~2010 Web and Desktop Development
are Getting Closer

17. A Common Challenge

18. MVC: Model View Controller
A concept that you must learn to write GUI application
Model 2

19. MVC is not a Design Pattern
Different idea, various way of implementation models

20. The original MVC
Model 1 - The original proposal Model 2

21. Explicitly Declared Controller

22. Non-Explicitly Declared Controller

23. MVVM: Model - View - ViewModel
By Microsoft for use with Windows Presentation Foundation
2005

24. The Event Flow of MVC/MVVM
Like playing a Pong Game

25. 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

26. ReactJS and Flux Architecture
A Simplified CQRS (Command Query Responsibility Segregation) Architecture
2013

27. Queries and Updates Separation
~ Model
Read-Only
Updates by
Action

28. Unidirectional Data Flow

29. Is it suitable for
Desktop Application?

30. 1st Attempt: Clone the API of Facebook
Flux Project

31. 2nd Attempt: Share My Experience

32. Problem: The official Flux
implementation is too simple.
Only solved few problems

33. Too Many Implementations

34. 2016: Quick Flux v1.0 Released

35. Enquiry 1: Can I use React in Qt?

36. Enquiry 2: Can I use Redux in Qt?

37. 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

38. QRedux - A Qt/QML port of Redux
2016

39. QuickFlux v1.1 Released
2017 Pure Component Async I/O

40. Finally, I got a almost perfection
software architecture for desktop
application

41. 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

42. 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

43. Enquiry 3: Can you help me to port my
application to use your QuickFlux?

44. Q & A

45. Thank you
Twitter @benlaud | Github @benlau