Data Bind Everything - Speaker Deck

Slide 1

Slide 1 text

@slodge Data-Bind Everything…

Slide 2

Slide 2 text

@slodge fun we’ve had extending data-binding in MvvmCross

Slide 3

Slide 3 text

@slodge MvvmCross

Slide 4

Slide 4 text

@slodge MvvmCross • C# • Microsoft, Xamarin and beyond! • PCL • IoC • Convention-Based Mvvm • Data-Binding

Slide 5

Slide 5 text

@slodge MvvmCross • C# • Microsoft, Xamarin and beyond! • PCL • IoC • Convention-Based Mvvm • Data-Binding

Slide 6

Slide 6 text

@slodge • Building a Data-Binding Engine • MvvmCross v1/v2 Data-Binding • MvvmCross v3 - Rio and Tibet • The Dark Side?

Slide 7

Slide 7 text

@slodge • Building a Data-Binding Engine • MvvmCross v1/v2 Data-Binding • MvvmCross v3 - Rio and Tibet • The Dark Side?

Slide 8

Slide 8 text

@slodge Data-Binding in Xaml/C#

Slide 9

Slide 9 text

@slodge Data-Binding in Xaml/C# ViewModel INotifyPropertyChanged Control TextProperty DependencyProperty DependencyObject Values BindingOperations FirstName C# Property PropertyChanged C# Event

Slide 10

Slide 10 text

@slodge … in Android and iOS UIKit? ViewModel INotifyPropertyChanged Control TextProperty DependencyProperty DependencyObject Values BindingOperations FirstName C# Property PropertyChanged C# Event

Slide 11

Slide 11 text

@slodge … in Android and iOS UIKit? ViewModel INotifyPropertyChanged Control TextProperty DependencyProperty DependencyObject Values BindingOperations FirstName C# Property PropertyChanged C# Event Text TextChanged OurBindingEngine

Slide 12

Slide 12 text

@slodge What’s a Binding Engine do 1. Initially copy values ViewModel -> View 2. When ViewModel changes, update View 3. When View changes, update ViewModel 4. Don’t loop! 5. When the View disappears, dispose the bindings

Slide 13

Slide 13 text

@slodge Creating a Binding Engine…

Slide 14

Slide 14 text

@slodge • Building a Data-Binding Engine • MvvmCross v1/v2 Data-Binding • MvvmCross v3 - Rio and Tibet • The Dark Side?

Slide 15

Slide 15 text

Slide 16

Slide 16 text

@slodge Syntax – Xaml/C# Text=“ {Binding Customer.Gender, Converter={StaticResource FormalGreeting}, FallbackValue=‘Mr’}”

Slide 17

Slide 17 text

@slodge Syntax - Json { “Text”: { “Path”:”Customer.Gender”, “Converter”:”FormalGreeting”, “FallbackValue”:”Mr” } }

Slide 18

Slide 18 text

@slodge Syntax – “Swiss” Text Customer.Gender, Converter=FormalGreeting, FallbackValue=’Mr’

Slide 19

Slide 19 text

@slodge Syntax - Fluent set.Bind(label) .For(t => t.Text) .To(vm => vm.Customer.Gender) .WithConversion(“FormalGreeting”) .WithFallback(“Mr”)

Slide 20

Slide 20 text

@slodge Binding Parts • Path • Mode • Converter • ConverterParameter • FallbackValue

Slide 21

Slide 21 text

@slodge Path • Simple FirstName • Chained Customer.FirstName • Indexed Customers[0].FirstName Customers[“Fred”].FirstName • Whole Object .

Slide 22

Slide 22 text

@slodge Mode • One Way • Two Way • One Way To Source • One Time • … and Default

Slide 23

Slide 23 text

@slodge Converters

Slide 24

Slide 24 text

@slodge Converters • Basic Conversion • FallbackValue • UnsetValue • DoNothing

Slide 25

Slide 25 text

@slodge Core Demos

Slide 26

Slide 26 text

@slodge Binding Targets • It just works TM • When it doesn’t just work: – Inheritance – Intermediate – Custom Bindings

Slide 27

Slide 27 text

@slodge Inheritance Android.Views.View MyShapeView TheShape TheShapeChanged

Slide 28

Slide 28 text

@slodge Intermediate Map MapMarkerHelper ItemsSource

Slide 29

Slide 29 text

@slodge Custom binding Button “Favorite” CustomBinding OurBindingEngine

Slide 30

Slide 30 text

@slodge Composite Binding Sources • Collections • Commands • I18n • Dialogs

Slide 31

Slide 31 text

@slodge Collections

Slide 32

Slide 32 text

@slodge Commands

Slide 33

Slide 33 text

@slodge Internationalisation

Slide 34

Slide 34 text

@slodge Dialogs View ViewModel Command fired Show confirmation “MessageBox” Yes/No result

Slide 35

Slide 35 text

@slodge Dialogs

Slide 36

Slide 36 text

@slodge Composite Demos

Slide 37

Slide 37 text

@slodge • Building a Data-Binding Engine • MvvmCross v1/v2 Data-Binding • MvvmCross v3 - Rio and Tibet • The Dark Side?

Slide 38

Slide 38 text

@slodge JavaScript envy • ko.observable • ko.computedValue • functions

Slide 39

Slide 39 text

@slodge Tibet Binding extensions • MultiBinding • Literals • + - concatenation • Function-like ValueConversion • Recursive evaluation • ValueCombiners (MultiValueConverters) • If, Format, &&, ||, <, >, ==, …

Slide 40

Slide 40 text

@slodge Syntax – “Tibet”

Slide 41

Slide 41 text

@slodge Syntax – “Tibet”

Slide 42

Slide 42 text

@slodge Syntax – “Tibet”

Slide 43

Slide 43 text

@slodge Rio Extensions • Fody integration • Field Binding • Method Bindings • Extensible – interfaces and plugins

Slide 44

Slide 44 text

@slodge Fody

Slide 45

Slide 45 text

@slodge Fody

Slide 46

Slide 46 text

@slodge Field Binding

Slide 47

Slide 47 text

@slodge Method Binding

Slide 48

Slide 48 text

@slodge All available in Xaml too

Slide 49

Slide 49 text

@slodge Tibet & Rio

Slide 50

Slide 50 text

@slodge • Building a Data-Binding Engine • MvvmCross v1/v2 Data-Binding • MvvmCross v3 - Rio and Tibet • The Dark Side?

Slide 51

Slide 51 text

@slodge Benefits • Code sharing • Designer-friendly • Testability • Coder friendly

Slide 52

Slide 52 text

@slodge Some gaps/differences? • RelativeSource • ElementName • Validation and Trigger • Multi-Binding • ICommand

Slide 53

Slide 53 text

@slodge “Overkill” • For small throwaway apps…

Slide 54

Slide 54 text

@slodge The Call Stack

Slide 55

Slide 55 text

@slodge Performance everyone (at least, more or less experienced developer) knows that reflection is performance's "evil".

Slide 56

Slide 56 text

@slodge "We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil" Performance

Slide 57

Slide 57 text

@slodge Performance Analysis Simple UI test: – ViewModel: 10000 * “Value = Value+1” – View: TextView bound “Text Value”

Slide 58

Slide 58 text

@slodge Performance Results Baseline 2116 OneWay 2378 INotifyChanged 2066 TwoWayBaseline 6216 TwoWay 7092

Slide 59

Slide 59 text

@slodge • Building a Data-Binding Engine • MvvmCross v1/v2 Data-Binding • MvvmCross v3 - Rio and Tibet • The Dark Side?

Slide 60

Slide 60 text

@slodge Awesomeness

Slide 61

Slide 61 text

@slodge

Slide 62

Slide 62 text

@slodge Thanks for listening! https://github.com/mvvmcross https://github.com/reactiveUI https://github.com/MacawNL https://github.com/Fody @slodge @mvvmcross