Scaling Productivity - How we have improved our dev experience

Transcript

1. Scaling Productivity How we improved our dev experience
2. Hannes Dorfmann Gabriel Ittner @gabrielittner @sockeqwe
3. How do we measure Engineering Productivity? • You can't improve what you can't measure • Google: DORA • It depends! For Freeletics: • Reduce time to write testable and maintainable code • PR review time • Rework Rate / Number of bugs • Repetitive tasks • Time to onboard new joiners • Time to create a new mobile app release • Build times / CI cost
4. Approach • Lean start up principles • Discovery • User interviews • Ship increments • Test things out in front of real users • Part time model: feature development + engineering productivity team member to feel real world pain
5. The code base • 600 Gradle modules in a monorepo • Unidirectional data flows • Compose for anything new • Dagger + Anvil • AndroidX Navigation • Fragments because of legacy
6. StateMachine Composable Navigator
7. StateMachine Composable Navigator
8. StateMachine Composable Action Navigator
9. StateMachine Composable Action Navigator
10. StateMachine Composable Action Navigator Events State
11. StateMachine Composable Action Navigator Events State ViewModel Fragment
12. StateMachine Composable Action Navigator Events State ViewModel Fragment Dagger
13. Repetitive tasks • each new module requires a lot of classes Time to onboard new • di ff erent structure in modules • hard to navigate our code base Observations and opportunities Time to onboard Repetitive tasks
14. Tooling
15. droid new module /feature/example
17. class ExampleStateMachine @Inject constructor( ) : FlowReduxStateMachine<ExampleState, ExampleAction>() { init { spec { } } } class ExampleNavigator @Inject constructor() : NavEventNavigator() { } @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) { }
18. Learnings • Start with simple easy to built tools • Developers will give feedback and want more when using it • Example for tools • Formatting • IDE templates • Taking screenshots/gifs from a device • Shorthands for common commands or Gradle tasks
19. Repetitive tasks • developer still write lot of code to glue classes together Rework rate • prone to simple bugs (i.e. lifecycle) Observations and opportunities Rework Rate Repetitive tasks
20. Eliminating boilerplate
21. @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) class ExampleStateMachine : FlowReduxStateMachine<ExampleState, ExampleAction>() Set up code
22. @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) class ExampleStateMachine : FlowReduxStateMachine<ExampleState, ExampleAction>() Set up code
23. @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) class ExampleStateMachine : FlowReduxStateMachine<ExampleState, ExampleAction>() How do they communicate? Set up code
24. @Composable fun ExampleUiScreen(…): Unit { val state = produceState<ExampleState?>(initialValue = null) { stateMachine.state.collect { value = it } } if (state.value != null) { ExampleUi(state.value) { action -> coroutineScope.launch { stateMachine.dispatch(action) } } } } Set up code
25. @Composable fun ExampleUiScreen(…): Unit { val state = produceState<ExampleState?>(initialValue = null) { stateMachine.state.collect { value = it } } if (state.value != null) { ExampleUi(state.value) { action -> coroutineScope.launch { stateMachine.dispatch(action) } } } } Set up code
26. @Composable fun ExampleUiScreen(…): Unit { val state = produceState<ExampleState?>(initialValue = null) { stateMachine.state.collect { value = it } } if (state.value != null) { ExampleUi(state.value) { action -> coroutineScope.launch { stateMachine.dispatch(action) } } } } Set up code
27. @Composable fun ExampleUiScreen(…): Unit { val state = produceState<ExampleState?>(initialValue = null) { stateMachine.state.collect { value = it } } if (state.value != null) { ExampleUi(state.value) { action -> coroutineScope.launch { stateMachine.dispatch(action) } } } } Set up code
28. @Composable fun ExampleUiScreen(…): Unit { val state = produceState<ExampleState?>(initialValue = null) { stateMachine.state.collect { value = it } } if (state.value != null) { ExampleUi(state.value) { action -> coroutineScope.launch { stateMachine.dispatch(action) } } } } Set up code
29. @Composable fun ExampleUiScreen(…): Unit { val state = produceState<ExampleState?>(initialValue = null) { stateMachine.state.collect { value = it } } if (state.value != null) { ExampleUi(state.value) { action -> coroutineScope.launch { stateMachine.dispatch(action) } } } } Set up code
30. Observations and opportunities Rework rate • Common Fragment issues like issues with lifecycle • Tying logic to system components Rework Rate
31. public class ExampleUiFragment : Fragment() { public override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View { return ComposeView(requireContext()).apply { setContent { ExampleUiScreen(...) } } } } Fragments
32. public class ExampleUiFragment : Fragment() { public override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View { return ComposeView(requireContext()).apply { setContent { ExampleUiScreen(...) } } } } Fragments
33. public class ExampleUiFragment : Fragment() { public override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View { return ComposeView(requireContext()).apply { setContent { ExampleUiScreen(...) } } } } Fragments
34. 😕 Problems • Code that came from the template is hard to update afterwards • Parts of the template that are not meant to be modified will end up being modified anyways
35. @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) Template
36. @ComposeFragment( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) Template → Codegen
37. @ComposeFragment( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) Codegen
38. @ComposeFragment( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) Codegen
39. @ComposeFragment( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) @Composable fun ExampleUi( state: ExampleState, sendAction: (ExampleAction) -> Unit, ) Codegen
40. Codegen for Views
41. class ExampleRenderer( binding: ExampleViewBinding ): ViewRenderer<ExampleState, ExampleAction>(binding) { init { binding.button.setOnClickListener { sendAction(ExampleAction.ButtonClicked) } } override fun renderToView(state: ExampleState) { } } Codegen for Views
42. class ExampleRenderer( binding: ExampleViewBinding ): ViewRenderer<ExampleState, ExampleAction>(binding) { init { binding.button.setOnClickListener { sendAction(ExampleAction.ButtonClicked) } } override fun renderToView(state: ExampleState) { } } Codegen for Views
43. class ExampleRenderer( binding: ExampleViewBinding ): ViewRenderer<ExampleState, ExampleAction>(binding) { init { binding.button.setOnClickListener { sendAction(ExampleAction.ButtonClicked) } } override fun renderToView(state: ExampleState) { } } Codegen for Views
44. class ExampleRenderer( binding: ExampleViewBinding ): ViewRenderer<ExampleState, ExampleAction>(binding) { init { binding.button.setOnClickListener { sendAction(ExampleAction.ButtonClicked) } } override fun renderToView(state: ExampleState) { } } Codegen for Views
45. class ExampleRenderer( binding: ExampleViewBinding ): ViewRenderer<ExampleState, ExampleAction>(binding) { init { binding.button.setOnClickListener { sendAction(ExampleAction.ButtonClicked) } } override fun renderToView(state: ExampleState) { } } Codegen for Views
46. @RendererFragment( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) class ExampleRenderer( binding: ExampleViewBinding ): ViewRenderer<ExampleState, ExampleAction>(binding) { init { binding.button.setOnClickListener { sendAction(ExampleAction.ButtonClicked) } } override fun renderToView(state: ExampleState) { } } Codegen for Views
47. Updating the generated code
48. Updating the generated code Relative build time 100% 0% 50%
49. Easy migrations
50. @ComposeFragment( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) Easy migrations
51. @ComposeScreen( scope = ExampleScope::class, parentScope = AppScope::class, stateMachine = ExampleStateMachine::class, ) Easy migrations
52. Eliminating all the boilerplate
53. StateMachine Composable Navigator Events ViewModel Fragment Dagger Action State
54. StateMachine Composable Navigator Events ViewModel Fragment Dagger Action State
55. StateMachine Composable Action Navigator Events State ViewModel Fragment Dagger
56. @ScopeTo(ExampleScope::class) @ContributesSubcomponent( scope = ExampleScope::class, parentScope = AppScope::class, ) interface ExampleComponent { val stateMachine: ExampleStateMachine @ContributesSubcompont.Factory interface Factory { fun create(): ExampleComponent } @ContributesTo(AppScope::class) interface ParentComponent { fun exampleComponentFactory(): Factory } }
57. @ScopeTo(ExampleScope::class) @ContributesSubcomponent( scope = ExampleScope::class, parentScope = AppScope::class, ) interface ExampleComponent { val stateMachine: ExampleStateMachine @ContributesSubcompont.Factory interface Factory { fun create(): ExampleComponent } @ContributesTo(AppScope::class) interface ParentComponent { fun exampleComponentFactory(): Factory } }
58. @ScopeTo(ExampleScope::class) @ContributesSubcomponent( scope = ExampleScope::class, parentScope = AppScope::class, ) interface ExampleComponent { val stateMachine: ExampleStateMachine @ContributesSubcompont.Factory interface Factory { fun create(): ExampleComponent } @ContributesTo(AppScope::class) interface ParentComponent { fun exampleComponentFactory(): Factory } } @ComposeFragment( scope = ExampleScope::class, parentScope = AppScope::class, )
59. @ScopeTo(ExampleScope::class) @ContributesSubcomponent( scope = ExampleScope::class, parentScope = AppScope::class, ) interface ExampleComponent { val stateMachine: ExampleStateMachine @ContributesSubcompont.Factory interface Factory { fun create(): ExampleComponent } @ContributesTo(AppScope::class) interface ParentComponent { fun exampleComponentFactory(): Factory } }
60. class ExampleViewModel( parentComponent: ExampleComponent.ParentComponent, ) : ViewModel() { val component: ExampleComponent = parentComponent.exampleComponentFactory().create() }
61. Surviving config changes
62. class ExampleStateMachine @Inject constructor( ) : FlowReduxStateMachine<ExampleState, ExampleAction>() { init { spec { } } } class ExampleNavigator @Inject constructor() : NavEventNavigator() { } Surviving config changes
63. @ScopeTo(ExampleScope::class) class ExampleStateMachine @Inject constructor( ) : FlowReduxStateMachine<ExampleState, ExampleAction>() { init { spec { } } } @ScopeTo(ExampleScope::class) class ExampleNavigator @Inject constructor() : NavEventNavigator() { } Surviving config changes
64. @ScopeTo(ExampleScope::class) class ExampleStateMachine @Inject constructor( ) : FlowReduxStateMachine<ExampleState, ExampleAction>() { init { spec { } } } @ScopeTo(ExampleScope::class) class ExampleNavigator @Inject constructor() : NavEventNavigator() { } Surviving config changes
65. Anvil
66. @Module object ExampleModule { @Provides fun provideExampleApi(retrofit: Retrofit): ExampleApi = retrofit.create(ExampleApi::class) } interface ExampleRepository class RealExampleRepository @Inject constructor( api: ExampleApi ) : ExampleRepository Anvil
67. @Module @ContributesTo(ExampleScope::class) object ExampleModule { @Provides fun provideExampleApi(retrofit: Retrofit): ExampleApi = retrofit.create(ExampleApi::class) } interface ExampleRepository class RealExampleRepository @Inject constructor( api: ExampleApi ) : ExampleRepository Anvil
68. @Module @ContributesTo(ExampleScope::class) object ExampleModule { @Provides fun provideExampleApi(retrofit: Retrofit): ExampleApi = retrofit.create(ExampleApi::class) } interface ExampleRepository @ContributesBinding(ExampleScope::class, ExampleRepository::class) class RealExampleRepository @Inject constructor( api: ExampleApi ) : ExampleRepository Anvil
69. @Module @ContributesTo(ExampleScope::class) object ExampleModule { @Provides fun provideExampleApi(retrofit: Retrofit): ExampleApi = retrofit.create(ExampleApi::class) } interface ExampleRepository @ContributesBinding(ExampleScope::class, ExampleRepository::class) class RealExampleRepository @Inject constructor( api: ExampleApi ) : ExampleRepository Anvil
71. Dagger interactions
72. @Inject @ScopeTo(ExampleScope::class) @ContributesBinding(ExampleScope::class, ...) @Module @ContributesTo(ExampleScope::class) Dagger interactions
73. Learnings • Start with simple easy to built tools • Iterate after trying out and seeing what works well • Isolating system components and code generation make updates easy
74. Observations and opportunities PR Review Time • Domain layer logic is hard to read Rework rate • async. code is hard (i.e. cancelation, race conditions, ... ) • testing code is hard • building reusable logic is hard to get right • fragile code, edge cases PR review time Rework Rate
75. ...
76. ...
77. Countdown Do Exercise 
 
 tick countdown over RepetitionExercise Rest ... tick click on screen click skip
78. DSL
79. class WorkoutStateMachine: FlowReduxStateMachine<WorkoutState, WorkoutAction>() { init { spec { inState<CountdownState>{ onEnter{ state -> decreaseCountdownTimer(state) } } inState<RepetitionExercise>(){ on<ClickAction>(){ state -> moveToNextExercise(state) } } inState<RestingState>{ onEnter{ decreaseRestTimer() } on<SkipClickedAction>{ state -> moveToNextExercise(state) } } } } } github.com/freeletics/FlowRedux
80. class WorkoutStateMachine: FlowReduxStateMachine<WorkoutState, WorkoutAction>() { init { spec { inState<CountdownState>{ onEnter{ state -> decreaseCountdownTimer(state) } } inState<RepetitionExercise>(){ on<ClickAction>(){ state -> moveToNextExercise(state) } } inState<RestingState>{ onEnter{ decreaseRestTimer() } on<SkipClickedAction>{ state -> moveToNextExercise(state) } } } } } github.com/freeletics/FlowRedux
81. class ExampleStateMachineTest { @Test fun `countdown decreases`() = runTest { val workout : Workout = ... val initialState = CountdownState(timeLeft = 3) val stateMachine = WorkoutStateMachine(workout, state) stateMachine.state.test { // Turbine assertEquals( CountdownState(3), awaitItem() ) assertEquals( CountdownState(2), awaitItem() ) assertEquals( CountdownState(1), awaitItem() ) assertEquals( RepetitionExerciseState(workout.exercises[0]), awaitItem() ) } } } github.com/cashapp/turbine
82. How do we know that the DSL is good? User interviews!
83. spec { inState<CountdownState>{ onEnter{ getState, setState -> decreaseCountdown() } } suspend fun decrementCountdown(getState : GetState, setState : SetState){ val state : CountdownState = getState() delay(1_000) setState( state.copy(timeLeft = state.timeLeft - 1) ) }
84. 👩💻 Not intuitive!
85. spec { inState<CountdownState>{ onEnter{ state : CountdownState -> decrementCountdown(state) } } suspend fun decrementCountdown( state: CountdownState ): ChangedState<WorkoutState> { delay(1_000) 
 return MutateState<CountdownState, WorkoutState> { this.copy(timeLeft = this.timeLeft - 1) } }
86. spec { inState<CountdownState>{ onEnter{ state : CountdownState -> decrementCountdown(state) } } suspend fun decrementCountdown( state: State<CountdownState> ): ChangedState<WorkoutState> { delay(1_000) 
 return state.mutate { this.copy(timeLeft = this.timeLeft - 1) } }
87. Take away • DSL are useful • Iterate! • User Interviews • Write docs
88. • Navigation is hard to scale Time to onboard • Hard to know how to navigate to another teams feature Observations and opportunities Time to onboard
89. Navigation
90. • type safety • efficiently navigate in modularised code base 😕 Problems
91. safe-args
92. data class TweetFragmentArgs( val itemId: Long = -1L ) { fun toBundle(): Bundle { } companion object { @JvmStatic fun fromBundle(bundle: Bundle): TweetFragmentArgs { } } } safe-args
93. safe-args feature:feed feature:tweet feature:profile
94. safe-args feature:feed feature:tweet feature:profile
95. safe-args feature:feed feature:tweet feature:profile
96. safe-args feature:feed feature:tweet feature:profile
97. safe-args feature:feed feature:tweet feature:profile TweetArgs ProfileArgs
98. safe-args feature:feed feature:tweet feature:profile Circular dependency TweetArgs ProfileArgs
99. nav modules feature:feed feature:tweet feature:profile TweetArgs ProfileArgs
100. nav modules feature:feed feature:tweet feature:profile TweetArgs ProfileArgs feature:feed:nav feature:tweet:nav feature:profile:nav
101. nav modules feature:feed feature:tweet feature:profile feature:feed:nav feature:tweet:nav feature:profile:nav TweetArgs ProfileArgs
102. nav modules feature:feed feature:tweet feature:profile feature:feed:nav feature:tweet:nav feature:profile:nav TweetArgs ProfileArgs
103. nav modules feature:feed feature:tweet feature:profile feature:feed:nav feature:tweet:nav feature:profile:nav TweetArgs ProfileArgs
104. nav modules feature:feed feature:tweet feature:profile feature:feed:nav feature:tweet:nav feature:profile:nav TweetArgs ProfileArgs
105. nav modules feature:feed feature:tweet feature:profile feature:feed:nav feature:tweet:nav feature:profile:nav TweetArgs ProfileArgs
106. Why not just one core module? feature:feed feature:tweet feature:profile core:nav TweetArgs ProfileArgs
107. Why not just one core module? feature:feed feature:tweet feature:profile core:nav TweetArgs ProfileArgs
108. Why not just one core module? feature:feed feature:tweet feature:profile core:nav TweetArgs ProfileArgs
109. Why not just one core module? feature:feed feature:tweet feature:profile core:nav TweetArgs ProfileArgs
110. Why not just one core module? feature:feed feature:tweet feature:profile core:nav core:foo core:bar
111. Boilerplate?
112. data class TweetFragmentArgs( val itemId: Long = -1L ) { fun toBundle(): Bundle { } companion object { @JvmStatic fun fromBundle(bundle: Bundle): TweetFragmentArgs { } } } Boilerplate?
113. @Parcelize data class TweetFragmentRoute( val itemId: Long = -1L ) : NavRoute Boilerplate?
114. @Parcelize data class TweetFragmentRoute( val itemId: Long = -1L ) : NavRoute Boilerplate?
115. @Parcelize data class TweetFragmentRoute( val itemId: Long = -1L ) : NavRoute Boilerplate?
116. @Parcelize data class TweetFragmentRoute( val itemId: Long = -1L ) : NavRoute Boilerplate?
117. @Parcelize data class TweetFragmentRoute( val itemId: Long = -1L ) : NavRoute Boilerplate?
118. Boilerplate? fun NavController.navigateTo(route: NavRoute) { val args = Bundle().putParcelable("route", route) // call actual navigate } fun <T : NavRoute> Fragment.requireRoute() { return requireArguments().getParcelable<T>("route") }
119. Learnings • Sometimes code gen is not the solution
120. github.com/freeletics/flowredux github.com/freeletics/mad Thank you! @gabrielittner @sockeqwe