Using Web Software Architecture in Traditional Desktop App Development
0 likes377 views
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 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
- 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
- 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
- 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
- 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