Fluxing Up Your .NET Apps

Learn about the Flux design pattern and how to implement it in your C# client applications like UWP, Xamarin, and all the other platforms .NET is touching now. We'll compare Flux and Uni-Directional data flows to the existing tools and directions development takes us in C# client apps and talk about all the pros and cons that come with both. We'll take an existing Xamarin.Forms app using MVVM and "Flux it Up" to migrate to a more 1-direction flow of data and actions. When you leave, you'll have a solid understanding of Flux and some of its existing implementations such as Redux and be confident in implementing it yourself in C#!

Now with a Bonus Comet Demo

Transcript

2. Who is Alex Dunn - Online @Suave_Pirate @SuavePirate @SuavePirate https://alexdunn.org
3. Helps to know…. • Knowledge of building client apps with .NET • Familiarity with XAML • Familiarity with MVVM and Bindings • Knowledge of building client apps with React.js • Familiarity with Flux/Redux • Object Oriented JavaScript OR
4. Resources • Code: https://github.com/SuavePirate/Xamarin.Flux • Library: https://github.com/SuavePirate/FluxToolkit • Flux Docs: https://facebook.github.io/flux/docs/overview.html#content • Flux Demos and Examples: https://github.com/facebook/flux • Original Xamarin University Guest Lecture: https://www.youtube.com/watch?v=CmEtXjfdroY
5. Common Application Design Patterns
6. MVC – Model View Controller Model Controller Send Data View Receive Data
7. MVP – Model View Presenter Model Presenter Send Data View Receive Data
8. MVVM – Model View ViewModel Model ViewModel Send Data View Receive Data
9. Common Problems
10. 1. Bi-directional Data Flows ViewModel Send Data View Receive Data
11. 2. Cross-Base Communication ViewModel Send Data View Receive Data ViewModel Send Data View Receive Data ViewModel Send Data View Receive Data
12. 2. Cross-Base Communication ViewModel Send Data View Receive Data ViewModel Send Data View Receive Data ViewModel Send Data View Receive Data
13. 2. Cross-Base Communication ViewModel ViewModel ViewModel ViewModel
14. 3. Loose Rules Service Layer ViewModel ViewModel View View
15. 3. Loose Rules Service Layer ViewModel ViewModel View View Dependency Injection
16. 3. Loose Rules Service Layer ViewModel ViewModel View View Dependency Injection Data Access Layer
17. 4. Difficult Testing / Debugging ViewModel ViewModel View View
18. 4. Difficult Testing / Debugging Service Layer ViewModel ViewModel Biz Logic
19. Fluxing It Up
20. Overview • Client-side Application Architecture / Design Pattern • Designed by Facebook • Used for building robust data-driven User Interfaces • Focus on flow of data and separation of concerns • Unidirectional data flows • Built for React.js
21. From React.jS to C# + Xamarin React.js • Component Render • Component State • Component Props • Component Lifecycle C# + Xamarin • XAML/C# Page/View • ViewModel • View Properties • Page Lifecycle and two way binding
22. Flux Structure Action Dispatcher Store View An action does some business logic and communicates data to the dispatcher Dispatcher takes data from action and dispatches it to subscribed stores Takes message from dispatcher and updates data. Emits changes down to observing views View takes updated data from store and updates UI
23. Flux Structure Action Dispatcher Store View Action Dispatcher Store View Action Dispatcher Store View Action Dispatcher Store View Action Dispatcher Store View Action Dispatcher Store View Action Dispatcher Store View Action Dispatcher View Action Dispatcher View on Dispatcher re Dispatcher Store View Action Dispatcher View Action Store View
24. Structure Adjusted for .NET and MVVM Action Dispatcher Store ViewModel View
25. Structure Adjusted for .NET and MVVM Action Dispatcher Store ViewModel View MVVM Flux
26. Solving Problems with Flux
27. Uni-direction Data flow Solutions from Flux Trickle Down Control Single Source of Truth Plays well with other UI patterns Plays well with architecture patterns
28. Complex Data flows – Trickle Down Views Stores Actions Action 1 Store 1 View 1 View 2 Store 2 View 3
29. Complex Data Flows - Trickle Down Views Stores Actions Views View 1 Action 1 Store 1 View 2 View 1 Store 2 Action 2
30. Views aren’t the only thing that can execute actions
31. Background Actions Action Dispatcher Store ViewModel View Background Event
32. Background Actions Action Dispatcher Store ViewModel View Websocket event received
33. Background Actions Action Dispatcher Store ViewModel View Location Update Event
34. Background Actions Action Dispatcher Store ViewModel View Accelerometer event
35. Views/ViewModels aren’t the only thing that can subscribe to stores
36. Background Actions Action Dispatcher Store ViewModel View Background Task
37. Background Actions Action Dispatcher Store ViewModel View Remote Data Sync
38. Background Actions Action Dispatcher Store ViewModel View Update local database
39. Xamarin.Forms: Flux + MVVM + IoC/DI Source Code: https://github.com/SuavePirate/Xamarin.Flux
40. Project structure Xamarin.Forms XAML netstandard Template
41. Project Structure • Flux Specific Components • TodoActions.cs • TodoActionTypes.cs (event identifiers) • TodoStore.cs • Dispatcher (using MessagingCenter from Xamarin.Forms) • MVVM Specific Components • TodoListPageViewModel.cs • TodoListPage.xaml • IoC/DI Specific Components • IoCConfig.cs • ViewModelLocator.cs • Other files are mostly for keeping a clean codebase and maintaining best C# practices
42. Running the App – Create Item
43. Running The App – Viewing item
44. Running the app – Updating an item
45. Running the app – Viewing data
46. Running the app – Deleting an item
47. Running the app – Deleting all completed items
48. Running the app – Toggling all items
49. Building It Let’s look at some code.
50. ☄Bonus Demo ☄ Comet + Flux
51. Running Comet + Flux on iOS https://github.com/SuavePirate/Comet.Flux http://github.com/clancey/comet
52. Thank you!