Correct UI logic with state machines

Throwing together a screen is easy but as your product grows, business requirements and team members change, maintaining correct functionality in real-life scenarios can be challenging. Test maintenance costs rise with ever more mocks and abstractions. The proposed state machine implementation makes fragile mutable state explicit, easy to understand, to change, and to test.

Presented as a 5 min lightning talk @ App Builders 2019.

Read more at github.com/trafi/states

Transcript

1. Correct UI logic with state machines
3. Correct UI logic?
5. After entering their phone number, the user receives an SMS with a code. In this screen they manually enter the 4-digit code. If possible,
6. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If
7. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown.
8. private fun beginVerification(isFirstVerification: Boolean = false) { countDownTimer = object : CountDownTimer(10000, 1000) { override fun onTick(millisUntilFinished: Long) { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT_WITH_TIME, (millisUntilFinished / 1000).toString()) } override fun onFinish() { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT) resend_button.isEnabled = true } }.also { it.start() } resend_button.isEnabled = false progressModal.show(childFragmentManager) accountService.verifyPhone(VerifyPhoneNumberParameters( phoneNumber = phoneNumber, template = messageTemplateStart + messageTemplateEnding )).apply { enqueue(callback( onSuccess = { userStore.user = it if (isForeground()) { progressModal.dismiss() if (!isFirstVerification) { snack_bar_target.showSnackBar(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_TOAST_MESSAGE_SENT) } code_input.showKeyboard() } }, onError = { if (isForeground()) { progressModal.dismiss() countDownTimer?.cancel() countDownTimer?.onFinish() ErrorModal.newInstance(context, it).show(childFragmentManager, if (isFirstVerification) { BEGIN_FIRST_VERIFICATION_MODAL_TAG } else { BEGIN_VERIFICATION_MODAL_TAG }) } } )) } } override fun onPrimaryButtonClick(tag: String) { when (tag) { BEGIN_FIRST_VERIFICATION_MODAL_TAG -> navigator.navigateBack() } } Code with good intentions
9. Correct UI logic?
10. private fun beginVerification(isFirstVerification: Boolean = false) { countDownTimer = object : CountDownTimer(10000, 1000) { override fun onTick(millisUntilFinished: Long) { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT_WITH_TIME, (millisUntilFinished / 1000).toString()) } override fun onFinish() { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT) resend_button.isEnabled = true } }.also { it.start() } resend_button.isEnabled = false progressModal.show(childFragmentManager) accountService.verifyPhone(VerifyPhoneNumberParameters( phoneNumber = phoneNumber, template = messageTemplateStart + messageTemplateEnding )).apply { enqueue(callback( onSuccess = { userStore.user = it if (isForeground()) { progressModal.dismiss() if (!isFirstVerification) { snack_bar_target.showSnackBar(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_TOAST_MESSAGE_SENT) } code_input.showKeyboard() } }, onError = { if (isForeground()) { progressModal.dismiss() countDownTimer?.cancel() countDownTimer?.onFinish() ErrorModal.newInstance(context, it).show(childFragmentManager, if (isFirstVerification) { BEGIN_FIRST_VERIFICATION_MODAL_TAG } else { BEGIN_VERIFICATION_MODAL_TAG }) } } )) } } override fun onPrimaryButtonClick(tag: String) { when (tag) { BEGIN_FIRST_VERIFICATION_MODAL_TAG -> navigator.navigateBack() } }
11. ?
12. how are decisions made?
13. how are decisions made? where can errors happen?
14. how are decisions made? where can errors happen? who is responsible?!
15. private fun beginVerification(isFirstVerification: Boolean = false) { countDownTimer = object : CountDownTimer(10000, 1000) { override fun onTick(millisUntilFinished: Long) { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT_WITH_TIME, (millisUntilFinished / 1000).toString()) } override fun onFinish() { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT) resend_button.isEnabled = true } }.also { it.start() } resend_button.isEnabled = false progressModal.show(childFragmentManager) accountService.verifyPhone(VerifyPhoneNumberParameters( phoneNumber = phoneNumber, template = messageTemplateStart + messageTemplateEnding )).apply { enqueue(callback( onSuccess = { userStore.user = it if (isForeground()) { progressModal.dismiss() if (!isFirstVerification) { snack_bar_target.showSnackBar(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_TOAST_MESSAGE_SENT) } code_input.showKeyboard() } }, onError = { if (isForeground()) { progressModal.dismiss() countDownTimer?.cancel() countDownTimer?.onFinish() ErrorModal.newInstance(context, it).show(childFragmentManager, if (isFirstVerification) { BEGIN_FIRST_VERIFICATION_MODAL_TAG } else { BEGIN_VERIFICATION_MODAL_TAG }) } } )) } } override fun onPrimaryButtonClick(tag: String) { when (tag) { BEGIN_FIRST_VERIFICATION_MODAL_TAG -> navigator.navigateBack() } } Code with good intentions
16. Let’s digest this..
17. Let’s digest this..
18. Let’s digest this..
19. Let’s digest this..
20. Let’s digest this..
21. Let’s digest this..
22. Let’s digest this..
23. Let’s digest this..
24. After entering their phone number, the user receives an SMS with a code. In this screen they manually enter the 4-digit code. If possible,
25. After entering their phone number, the user receives an SMS with a code. In this screen they manually enter the 4-digit code. If possible,
26. After entering their phone number, the user receives an SMS with a code. In this screen they manually enter the 4-digit code. If possible, codeEntered(code)
27. After entering their phone number, the user receives an SMS with a code. In this screen they manually enter the 4-digit code. If possible, c
28. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c
29. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c
30. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c smsReceived(msg)
31. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c s
32. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s
33. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s
34. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. codeVerified c s
35. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. codeVerified codeRejected c s
36. codeEntered(code) smsReceived(msg) codeVerified codeRejected
40. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If
41. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If
42. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If checkCode(code)
43. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c
44. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c
45. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c showProgress
46. the 4-digit code. If possible, the code is automatically prefilled. The code is checked immediately as soon as 4 digits have been entered. The user cannot edit the code while it is being checked. If c s
47. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s
48. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s
49. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s showError(msg)
50. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s s
51. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s s
52. while it is being checked. If the correct code is entered, the phone number is verified and the screen closes. Otherwise, an error dialog is shown. c s s close
53. checkCode(code) showProgress showError(msg) close
54. private fun beginVerification(isFirstVerification: Boolean = false) { countDownTimer = object : CountDownTimer(10000, 1000) { override fun onTick(millisUntilFinished: Long) { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT_WITH_TIME, (millisUntilFinished / 1000).toString()) } override fun onFinish() { resend_button.text = getString(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_RESEND_TEXT) resend_button.isEnabled = true } }.also { it.start() } resend_button.isEnabled = false progressModal.show(childFragmentManager) accountService.verifyPhone(VerifyPhoneNumberParameters( phoneNumber = phoneNumber, template = messageTemplateStart + messageTemplateEnding )).apply { enqueue(callback( onSuccess = { userStore.user = it if (isForeground()) { progressModal.dismiss() if (!isFirstVerification) { snack_bar_target.showSnackBar(R.string.ACCOUNTS_EDIT_PROFILE_ADD_NUMBER_STEP2_TOAST_MESSAGE_SENT) } code_input.showKeyboard() } }, onError = { if (isForeground()) { progressModal.dismiss() countDownTimer?.cancel() countDownTimer?.onFinish() ErrorModal.newInstance(context, it).show(childFragmentManager, if (isFirstVerification) { BEGIN_FIRST_VERIFICATION_MODAL_TAG } else { BEGIN_VERIFICATION_MODAL_TAG }) } } )) } } override fun onPrimaryButtonClick(tag: String) { when (tag) { BEGIN_FIRST_VERIFICATION_MODAL_TAG -> navigator.navigateBack() } } Code with good intentions
55. ?
56. ?
57. ?
58. ?
60. codeEntered(code) smsReceived(msg) codeVerified codeRejected
61. enum Event { case codeEntered(code: String) case smsReceived(msg: String) case codeVerified case codeRejected }
62. checkCode(code) showProgress showError(msg) close
63. { var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
64. { var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
65. { enum Event {/* */} var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
66. struct PhoneVerifState { enum Event {/* */} var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
67. struct PhoneVerifState { }
68. struct PhoneVerifState { static func reduce( state: PhoneVerifState, e: Event) -> PhoneVerifState { /.. } }
69. why bother?
70. easy to glance
71. struct PhoneVerifState { enum Event {/* */} var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
72. fun reduce(e: Event) = when (e) { is codeEntered -> checkCode(e.code) // .. }
73. fun reduce(e: Event) = when (e) { // .. is smsReceived -> { e.msg.parseCode() ?.let { checkCode(it) } ?: copy() } // .. }
74. fun reduce(e: Event) = when (e) { // .. codeVerified -> copy(close = true) // .. }
75. fun reduce(e: Event) = when (e) { // .. codeRejected -> copy( showError = Error("Code rej.")) // .. }
77. easy to change
78. If they get the code wrong, the user can tap on resend to send a new SMS.
79. If they get the code wrong, the user can tap on resend to send a new SMS.
80. enum Event { case codeEntered(code: String) case smsReceived(msg: String) case codeVerified case codeRejected }
81. enum Event { case codeEntered(code: String) case smsReceived(msg: String) case codeVerified case codeRejected case resendTapped }
82. struct PhoneVerifState { var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
83. struct PhoneVerifState { var checkCode: Code? var showProgress: Bool var showError: Error? var close: Bool? }
84. struct PhoneVerifState { var checkCode: Code? var sendSms: String? var showProgress: Bool var showError: Error? var close: Bool? }
85. fun reduce(e: Event) = when (e) { // .. resendTapped -> copy(sendSms = true) // .. }
87. But, we must not let users send SMS more than once every 10s to avoid abuse.
88. But, we must not let users send SMS more than once every 10s to avoid abuse.
89. enum Event { case codeEntered(code: String) case smsReceived(msg: String) case codeVerified case codeRejected case resendTapped }
90. enum Event { case codeEntered(code: String) case smsReceived(msg: String) case codeVerified case codeRejected case resendTapped case secondPassed }
91. struct PhoneVerifState { var checkCode: Code? var sendSms: String? var showProgress: Bool var showError: Error? var close: Bool? }
92. struct PhoneVerifState { var checkCode: Code? var sendSms: String? var showProgress: Bool var showError: Error? var close: Bool? }
93. struct PhoneVerifState { var checkCode: Code? var sendSms: String? var showProgress: Bool var showError: Error? var resendEnabled: Bool var close: Bool? }
94. fun reduce(e: Event) = when (e) { // .. secondPassed -> copy( waitSeconds = maxOf(0, waitSeconds - 1)) // .. }
95. fun reduce(e: Event) = when (e) { // .. resendTapped -> copy( sendSms = true, waitSeconds = 10) // .. }
97. easy to test
98. var state = .initial()
99. var state = .initial() state = reduce(state, .codeEntered("1234"))
100. var state = .initial() state = reduce(state, .codeEntered("1234")) assert( state.checkCode == Code("1234") )
102. easy to share
103. enum Event { case codeEntered(code: String) case smsReceived(msg: String) case codeVerified case codeRejected }
104. sealed class Event { class codeEntered(val code: Strin class smsReceived(val msg: String object codeVerified: Event() object codeRejected: Event() }
107. functional core
108. functional core
109. functional core
110. functional core
111. /trafi/states
112. /trafi/states @justasm