Skip to content

Modernize tutorials #1316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 30, 2025
Merged

Modernize tutorials #1316

merged 2 commits into from
May 30, 2025

Conversation

rjrjr
Copy link
Contributor

@rjrjr rjrjr commented May 15, 2025

At long last, the Tutorial catches up with the current release.

  • Big picture discussion of our navigation story (see the end of Tutorial2.md)

  • Use AndroidScreen and drop ViewRegistry

  • Better, more consistent use of BackStackScreen

  • Use View.setBackHandler

  • Use TextController

  • Use RequestContext.eventHandler

  • Delete a lot of // Exactly what the function name and the code say comments

  • Hint at the existance of ComposeWorkflow and Overlay without turning this into a complete rewrite

  • More consistent naming, code style for actions and event handlers in Screen renderings

    • Event handler fields are named onVerbPhrase, like onBackPressed
    • Action names are verb phrases describing the action that is being taken, not the event that is being handled
    • Output names are generally in terms of the semantic event being reported to the parent, rather than describing what the parent will do

Thus:

return TodoListScreen(
  onRowPressed = { context.actionSink.send(reportSelection(it)) }
  private fun reportSelection(index: Int) = action {
    // Tell our parent that a todo item was selected.
    setOutput(TodoSelected(index))
  }

(Although most of these are inlined as eventHandler("…") {} calls.)

I've mainly focussed on updating what exists, not extending its coverage further. Once this is merged I'd like to follow up and do more:

  • Introduce Overlay properly
    • How about move TodoEditScreen to a BottomSheetDialog?
    • Could be too noisy, BottomSheetDialog is a bastard.
    • If that's the case create a separate sample for it.
  • Introduce Compose.
    • I think the way to go is add a sixth step that updates TodoListScreen, talk about getting rid of that RecyclerView.
    • Could point out that the existing workflows and tests are unchangedn

@rjrjr rjrjr requested review from zach-klippenstein and a team as code owners May 15, 2025 19:16
@rjrjr rjrjr force-pushed the ray/tutorial-update branch 2 times, most recently from c5676e6 to 549a127 Compare May 15, 2025 20:39
@rjrjr rjrjr marked this pull request as draft May 15, 2025 21:58
@rjrjr rjrjr force-pushed the ray/tutorial-update branch 3 times, most recently from 1c3247f to 8a04e34 Compare May 16, 2025 01:12
@rjrjr rjrjr force-pushed the ray/tutorial-update branch 10 times, most recently from aa77bc6 to 175ce28 Compare May 29, 2025 15:14
@rjrjr rjrjr changed the title wip: Modernize tutorial final code Modernize tutorials May 29, 2025
@rjrjr rjrjr marked this pull request as ready for review May 29, 2025 15:15
```kotlin
val renderings: StateFlow<Any> by lazy {
val renderings: Flow<Screen> by lazy {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dropped all the StateFlow declarations because WorkflowLayout.take only requires a Flow, and that's what the navigation logger I add downstream produces.

@rjrjr rjrjr force-pushed the ray/tutorial-update branch 3 times, most recently from 43150f1 to ee0b0d8 Compare May 29, 2025 19:45
@@ -4,7 +4,7 @@ import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
buildscript {
ext {
kotlin_version = '2.0.21'
workflow_version = "1.12.1-beta04"
workflow_version = "1.18.0"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Requires 1.19.0, fix and wait for that release

@rjrjr rjrjr force-pushed the ray/tutorial-update branch from ee0b0d8 to 309f059 Compare May 29, 2025 19:56
Our templates were out of date, and our `install.sh` script doesn't work any more.
Replaced with an IDE-produced zip file that the IDE is willing to import.

Replaces `Layout Runner (ViewBinding)` with `Android Screen (ViewBinding)`:

```kotlin
package ${PACKAGE_NAME}

import com.squareup.workflow1.ui.AndroidScreen
import com.squareup.workflow1.ui.ScreenViewFactory
import com.squareup.workflow1.ui.ScreenViewRunner
import com.squareup.workflow1.ui.ViewEnvironment
import com.squareup.workflow1.ui.WorkflowUiExperimentalApi

@OptIn(WorkflowUiExperimentalApi::class)
data class $Name(
  // TODO: add properties needed to update $VIEW_BINDING_TYPE
) : AndroidScreen<$Name> {

  override val viewFactory =
    ScreenViewFactory.fromViewBinding($VIEW_BINDING_TYPE::inflate, ::${Name}Runner)
}

@OptIn(WorkflowUiExperimentalApi::class)
private class ${Name}Runner(
  private val viewBinding: $VIEW_BINDING_TYPE
) : ScreenViewRunner<$Name> {

  override fun showRendering(
    rendering: $Name,
    environment: ViewEnvironment
  ) {
    TODO("Update viewBinding from rendering")
  }
}
```
At long last, the Tutorial catches up with the current release.

- Big picture discussion of our navigation story (see the end of Tutorial2.md)

- Use `AndroidScreen` and drop `ViewRegistry`

- Better, more consistent use of `BackStackScreen`

- Use `View.setBackHandler`

- Use `TextController`

- Use `RequestContext.eventHandler`

- Delete a lot of `// Exactly what the function name and the code say` comments

- Hint at the existance of `ComposeWorkflow` and `Overlay` without turning this into a complete rewrite

- More consistent naming, code style for actions and event handlers in `Screen` renderings
  - Event handler fields are named `onVerbPhrase`, like `onBackPressed`
  - Action names are verb phrases describing the action that is being taken, not the event that is being handled
  - Output names are generally in terms of the semantic event being reported to the parent, rather than describing what the parent will do

Thus:

```kotlin
return TodoListScreen(
  onRowPressed = { context.actionSink.send(reportSelection(it)) }
```

```kotlin
  private fun reportSelection(index: Int) = action {
    // Tell our parent that a todo item was selected.
    setOutput(TodoSelected(index))
  }
```

(Although most of these are inlined as `eventHandler("…") {}` calls.)

I've mainly focussed on updating what exists, not extending its coverage further. Once this is merged I'd like to follow up and do more:

- Introduce `Overlay` properly
  - How about move `TodoEditScreen` to a `BottomSheetDialog`?
  - Could be too noisy, `BottomSheetDialog` is a bastard.
  - If that's the case create a separate sample for it.
- Introduce `Compose`.
  - I think the way to go is add a sixth step that updates `TodoListScreen`, talk about getting rid of that `RecyclerView`.
  - Could point out that the existing workflows and tests are unchangedn
@rjrjr rjrjr force-pushed the ray/tutorial-update branch from 309f059 to 471d1d7 Compare May 30, 2025 14:51
@rjrjr rjrjr merged commit 0354751 into main May 30, 2025
79 of 86 checks passed
@rjrjr rjrjr deleted the ray/tutorial-update branch May 30, 2025 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants