Slide 1

Slide 1 text

Why declarative UI frameworks? Thomas Künneth, Snapp Mobile Sven Mieke https://unsplash.com/photos/fteR0e2BzKo

Slide 2

Slide 2 text

Ibrahim Boran https://unsplash.com/photos/iYkqHp5cGQ4 What‘s wrong with existing UI frameworks?

Slide 3

Slide 3 text

Provide an app frame Build a component tree Update UI based on data

Slide 4

Slide 4 text

Define state Modify state and update UI Create and configure components

Slide 5

Slide 5 text

Define state Modify state Update UI based on state Connect code to the UI tree

Slide 6

Slide 6 text

Declare a tree of components Define parts of visual appearance Connect UI elements to code

Slide 7

Slide 7 text

• Separation of UI definition and interaction handling ... • ... unclutters the code, making it easier to read and maintain • ... allows designers to create (parts of) the UI • Became popular in many UI frameworks

Slide 8

Slide 8 text

• User interface still represented as a (component) tree ... • ... loaded at program startup • ... kept during execution • UI changes still implemented through … • … modifying properties • … changing the structure of the tree

Slide 9

Slide 9 text

• Changing the UI necessary • when data shown to the user changes • upon navigation • Data and component tree live on their own • Important to keep both in sync Larisa Birta https://unsplash.com/photos/slbOcNlWNHA

Slide 10

Slide 10 text

Claudio Schwarz https://unsplash.com/photos/qjX0QBtDXto Almos Bechtold https://unsplash.com/photos/AJ_Mou1FUS8 manually with magic

Slide 11

Slide 11 text

• To modify components, references must be maintained • Change may occur in different layers of the app (or on a different thread) • All this can lead to • difficult to find and fix bugs • spaghetti code • ... • Design patterns help mitigate such effects (MVC, MVVM, MVP, ...) Paolo Chiabrando https://unsplash.com/photos/3jt-1Va2eZo

Slide 12

Slide 12 text

• UI frameworks learned to sync app and UI data through a binding mechanism • Read-only components just need one way bindings • Components with user interaction require two way binding zip_code Zip code

Slide 13

Slide 13 text

Any change to the UI must be explicitly coded, either by changing component properties, or by modifying the tree itself Levi Meir Clancy https://unsplash.com/photos/KbPVj7knbTU

Slide 14

Slide 14 text

Ryunosuke Kikuno https://unsplash.com/photos/KnQ980sdlqU Works well in small projects, but doesn‘t really scale

Slide 15

Slide 15 text

George Rosema https://unsplash.com/photos/yg8pLPTAY8M Declarative UI frameworks

Slide 16

Slide 16 text

Tell React to render a component The component is based on state Declaration of the UI is based on state State changes are wrapped inside setState()

Slide 17

Slide 17 text

A property wrapper Declaration of the UI is based on state State changes have no special syntax

Slide 18

Slide 18 text

State is created and remembered Declaration of the UI is based on state State changes have no special syntax

Slide 19

Slide 19 text

Based upon stateless or stateful widgets Stateless widgets declare UI inside build() Stateful widgets createState()

Slide 20

Slide 20 text

• Declaration of the UI is based on state • Can be extracted into other methods for better reuse and readability State changes are wrapped inside setState() Stateless widgets have build(), too

Slide 21

Slide 21 text

Declaration of the UI is based on state Simple styling based on parameters Complex styling based on composition over inheritance

Slide 22

Slide 22 text

• User interface is declared based on state • No need to modify (transform) the existing component tree • UI updates itself upon state changes

Slide 23

Slide 23 text

Alen Jacob https://unsplash.com/photos/wdxb9OOMQOs • Frameworks maintain internal representation of the user interface • Must make sure that state changes trigger updates • (Should be) irrelevant for the application developer • ... it is most of the time ...

Slide 24

Slide 24 text

Composition over inheritance

Slide 25

Slide 25 text

• Traditional UI frameworks are based on components • A component has a fixed set of properties to configure appearance and behaviour • Inheritance is used to modify or expand both • Several parents possible only with multiple inheritance

Slide 26

Slide 26 text

• Declarative UI fromeworks may rely on components, too • They may even rely on properties to define appearance and behavior • But they favour combining small, reusable building blocks over inheritance

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Markus Spiske https://unsplash.com/photos/uqeaZXZkquw • UI is declared based on state • No need to keep references to UI elements to change properties or the tree • Composition over inheritance

Slide 30

Slide 30 text

Markus Spiske https://unsplash.com/photos/uqeaZXZkquw • A lot of magic under the hood • No easy way to inspect UI hierarchy during runtime • Larger UIs lead to large amounts of code

Slide 31

Slide 31 text

Markus Spiske https://unsplash.com/photos/uqeaZXZkquw • Declarative UIs still require careful coding • We still required established patterns to organize the code base • It is fun using them

Slide 32

Slide 32 text

Thank you! [email protected] @tkuenneth @tkuenneth https://www.thomaskuenneth.eu/ @tkuenneth