Redux with JavaFX. Michael Heinrichs & Manuel Mauky

Transcription

1 Redux with JavaFX Michael Heinrichs & Manuel Mauky

2 Michael Heinrichs Manuel Mauky

3 Functional Reactive Programming

4 Functional Programming Declarative Immutable data No side effects Avoid state changes

5 Active Communication Reactive Communication listen Button calls Controller Button fire event notify Controller Controller

6 Reactive Hell Component Component Component Component Component Component Component Component

7 Reactive Streams Publisher Event Publisher Event Processor Event Processor Event Subscriber Event Subscriber

8 Functional Reactive Programming immutable Publisher dirty Event Processor Event pure Processor Event Subscriber dirty

9 Overview

10 Event Action Creator Framework Action Reducer Virtual SceneGraph View Creator State Application

11 Redux with Java

12 o m e D

13 Actions

14 Event Action Creator Framework Action Reducer Virtual SceneGraph View Creator State Application

15 Event Framework MouseEvent KeyEvent ActionEvent ChangeEvent Action Creator Action class SetFilterAction { Filter value; }

16 o m e D

17 State

18 Event Framework Action Creator Action Reducer State

19 state new Todo todo1 filter todos todo2...

20 class State { final String newtodo; final Filter filter; final Vector<Item> todos; } class Item { final int id; final String text; final boolean completed; }

21 o m e D

22 Reducer

23 State calcnewstate(state currentstate, Action action) Initial state Action Reducer state_0 state_1 = calcnewstate(state_0, action_0) state_2 = calcnewstate(state_1, action_1)... State

24 State calcnewstate(state currentstate, Action action) state_0 state_1 = calcnewstate(state_0, action_0) state_2 = calcnewstate(state_1, action_1)... Stream actions = Stream.of(action_0,..., action_n) State state_n = actions.reduce(state_0, calcnewstate)

25 o m e D

26 State calcnewstate(state state, Action action) { if (action instanceof SetFilterAction) { SetFilterAction filteraction = (SetFilterAction) action; return state.withfilter(filteraction.getfilter()); }... return state; }

27 state new Todo todo1 filter todos todo2...

28 State calcstate(state state, Action action) { return State.build().withNewTodo( calcnewtodostate(state.newtodo, action) ).withtodos( calctodosstate(state.todos, action) ).withfilter( calcfilterstate(state.filter, action) ).create(); }

29

30

31 Virtual SceneGraph

32 Action Framework Reducer Virtual SceneGraph View Creator State

33 class VNode { private final Class<?> nodeclass; private final Map<String, Array<VNode>> childrenmap; private final Map<String, VNode> singlechildmap; private final Map<String, VProperty> properties; private final Map<VEventType, VEventHandler> eventhandlers;... }

34 myvbox : VNode nodeclass = VBox.class properties = { spacing = 20 } myvbox : VNode mybutton : VNode nodeclass = Label.class properties = { prefwidth = 210, text = You... } nodeclass = Button.class properties = { text = Click Me } eventhandlers = { }

35 public VNode view(state state) { return VBox().spacing(20).children( Label().text(String.format( "You clicked the button %d times", state.getcounter() )), Button().text("Click Me!"),.onAction(e -> Actions.incCounter()); ); }

36 Event Action Creator Framework Action Reducer Virtual SceneGraph View Creator State Application

37 Redux with FXML

38 Why FXML? Pros: - well-known by JavaFX developers - SceneBuilder Cons: - Stateful hard to integrate in a functional approach like redux

39 FXML <VBox fx:controller="hellocontroller"> <children> <Label fx:id="hellolabel"/> <Button text="greet" onaction="#greetings" /> </children> </VBox> public class HelloController private Label hellolabel; public void greetings() { hellolabel.settext( "Hello Sir or Madame"); } }

40 Let's see how others are doing it! Angular + Redux.JS

41 Idea - don't rerender whole UI on every update - keep UI stateful - connect to redux store and just update UI on changes

42 Angular

43 @Component({ selector: 'app-hello', template: ' <div> <p>{{ hellolabel }}</p> </div> ' }) class HelloComponent { public hellolabel: String } Angular Component (Controller)

44 @Component({ selector: 'app-hello', template: ' <div> <p>{{ hellolabel }}</p> </div> ' }) class HelloComponent { Change Type to "Observable" (Rx) public hellolabel: Observable<String> }

45 @Component({ selector: 'app-hello', template: ' <div> <p>{{ hellolabel }}</p> </div> ' }) class HelloComponent { Framework magic: Connect observable to redux => state.getgreeting()) public hellolabel: Observable<String> }

46 @Component({ selector: 'app-hello', template: ' <div> <p>{{ hellolabel }}</p> </div> ' }) class HelloComponent { selector function: which value from the store should be => state.getgreeting()) public hellolabel: Observable<String> }

47 @Component({ selector: 'app-hello', template: ' <div> <p>{{ hellolabel async}}</p> </div> ' }) class HelloComponent => state.getgreeting()) public hellolabel: Observable<String> } bind field to template

48 Adopt this for JavaFX

49 public class HelloController private Label hellolabel; }

50 public class HelloController private Label private Selector<AppState> selector; } Selector is a framework utility

51 public class HelloController private Label private Selector<AppState> selector; JavaFX ObservableValue public void initialize() { ObservableValue<String> value = selector.select( state -> state.getgreeting() ); } }

52 public class HelloController private Label private Selector<AppState> selector; public void initialize() { ObservableValue<String> value = selector.select( state -> state.getgreeting() ); hellolabel.textproperty().bind(value); }

53 Debugging / DevTool

54 Debugging with Redux - whole application state at one specific location easy to find out "what's the current state of the app" - each interaction within the app is explicit by using actions actions can be recorded to see what happened

55 Redux-Javafx-Devtool Github: - current state of the application - all actions - time-travel through action history

56 Bug error source User interaction Are the correct actions created? no ActionCreator / UI component yes no Is the state correct? reducer yes no Does the selector yields correct values? selector yes rendering of the UI component

57 ReduxFX: Redux JavaFX DevTool: