複雑なステート管理をらくにするステートマシンを使ったアプローチ

モバイルアプリのステート管理に役立つステートマシンの紹介をします。

Transcript

1. potatotips #80 - 2022.12.22
   @tomorrowkey
   

   View Slide

2. /
   STORES
   STORES <- <-
   Android
   @tomorrowkey
   

   View Slide

3. STORES
   

   View Slide

4. https://www.st.inc/news/2022-12-19-brandedapp-shopify
   

   View Slide

5. WebView
   

   View Slide

6. WebView
   (Native/HTML/Javascript )
   WebView
   

   View Slide

7. WebView
   (Native/HTML/Javascript )
   WebView
   

   View Slide

8. WebView
   viewDidLoad(), onCreate()
   API …
   

   View Slide

9. WebView
   viewDidLoad(), onCreate()
   API …
   Web
   Web
   API JavaScript
   

   View Slide

10. View Slide

11. Web
    

    View Slide

12. View Slide

13. View Slide

14. Event.LoginPageShown
    Event.LoginPageShown
    Event.LoginScriptExecuted
    Event.TopPageShown
    Event.LoadingObserverLaunched
    Event.LoginPageShown
    Event.CheckInButtonClicked Event.CheckOutButtonClicked
    CheckInScriptExecuted
    Event.ClockShown
    Event.ErrorShown
    Event.ClockShown
    State.Init
    State.WaitForLogin
    State.WaitForAuth
    State.WaitForLoadingObserverLaunch
    State.WaitForCheckIn
    State.WaitForCheckInScriptExecuted
    State.CheckInLoading
    State.ErrorShown
    

    View Slide

15. StateMachine.create {
    initialState(Init)
    state {
    on { transitionTo(WaitForLogin) }
    }
    state {
    on { transitionTo(WaitForLogin) }
    on { transitionTo(WaitForAuth) }
    }
    state {
    on { transitionTo(WaitForLoadingObserver
    on { transitionTo(WaitForLogin) }
    }
    state {
    on { transitionTo(WaitForChec
    Tinder/StateMachine
    

    View Slide

16. View Slide

17. View Slide