Download to read offline
Uploaded byBen Lau
Using Web Software Architecture in Traditional Desktop App Development
The document discusses the adaptation of Flux/Redux architecture in traditional desktop app development using Qt/QML. It outlines the evolution of web and desktop development, the introduction of MVC and MVVM patterns, and the creation of QuickFlux, a Qt/QML implementation of Redux. The author emphasizes the benefits of this approach, including rapid development and a clear separation of concerns between view and application logic.
Using Web Software Architecture in Traditional Desktop App Development
- 1. Using Web Software Architecturein Traditional Desktop App Development How Flux/Redux was ported to Qt/Qml
- 2. Ben Lau Open SourceDeveloper https://github.com/benlau
- 3. Ben Lau Qt Champion2016&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.0for X11/Linux JavaScript Netscape Navigator 2.0 beta 20th Apr 1995 4th Dec 1995
- 7. Mostly Inline EventCallback 2000
- 8. Server Side Renderingis the Main Stream 2000
- 9. Qt 3.0/Embedded, UserInterface Designer 2001
- 10. ~2000 Web andDesktop Development are Completely Different
- 11. GWT: Compile Java-> JavaScript 2006
- 12. jQuery - Reinventthe JavaScript 2006
- 13. The Growth ofJavaScript Frameworks Past Present Future
- 14. License: GPL =>LGPL 2008
- 15. QML:Declarative User InterfaceMarkup Lang 2010 Callback in JavaScript
- 16. ~2010 Web andDesktop Development are Getting Closer
- 17.
- 18. MVC: Model ViewController A concept that you must learn to write GUI application Model 2
- 19. MVC is nota Design Pattern Different idea, various way of implementation models
- 20. The original MVC Model1 - The original proposal Model 2
- 21.
- 22.
- 23. MVVM: Model -View - ViewModel By Microsoft for use with Windows Presentation Foundation 2005
- 24. The Event Flowof MVC/MVVM Like playing a Pong Game
- 25. Schrödinger's MVC’s Cat Ina 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 FluxArchitecture A Simplified CQRS (Command Query Responsibility Segregation) Architecture 2013
- 27. Queries and UpdatesSeparation ~ Model Read-Only Updates by Action
- 28.
- 29. Is it suitablefor Desktop Application?
- 30. 1st Attempt: Clonethe API of Facebook Flux Project
- 31. 2nd Attempt: ShareMy Experience
- 32. Problem: The officialFlux implementation is too simple. Only solved few problems
- 33.
- 34. 2016: Quick Fluxv1.0 Released
- 35. Enquiry 1: CanI use React in Qt?
- 36. Enquiry 2: CanI use Redux in Qt?
- 37. Redux is aModified 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 - AQt/QML port of Redux 2016
- 39. QuickFlux v1.1 Released 2017Pure Component Async I/O
- 40. Finally, I gota almost perfection software architecture for desktop application
- 41. Only depends onStore (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: Canyou help me to port my application to use your QuickFlux?
- 44.
- 45. Thank you Twitter @benlaud| Github @benlau