Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Droidcon SF 2019: Architecture Agnostic UI Development

vinaygaba
November 25, 2019

Droidcon SF 2019: Architecture Agnostic UI Development

Over the course of the last few years, we have seen a host of different architectures being used & recommended in our ecosystem. With each iteration of these recommended patterns, we often end up spending valuable development cycles in migrating our apps to the latest and greatest. Wouldn’t it be great if you could make your UI agnostic of who’s driving it without having it attached to any kind of architecture? In this talk we will go through how we can leverage UI objects, sealed classes and state machine to make your UI easier to write, much more testable and predictable, where you can easily switch architectures and even UI frameworks (Jetpack Compose anyone?) without changing much of the core implementation of you UI code.

vinaygaba

November 25, 2019
Tweet

More Decks by vinaygaba

Other Decks in Programming

Transcript

  1. M A R C O S DA M A S

    C E N O S R . A N D R O I D E NG I N E E R T I N D E R @marcospaulosd V I N AY G A BA S R . A N D R O I D E NG I N E E R A I R B N B @vinaygaba Architecture Agnostic UI Development
  2. • Managing apps became harder • Code wasn’t readable •

    Codebase lacked consistency As the complexity grew…
  3. • Managing apps became harder • Code wasn’t readable •

    Codebase lacked consistency • Testing wasn’t easy As the complexity grew…
  4. Wouldn’t it be nice if we could just focus on

    core principles and not worry about implementation details?
  5. MVC

  6. • Managing state and keeping it in sync is challenging

    • We often encounter hard-to-reproduce bugs Challenges with UI Development
  7. • Managing state and keeping it in sync is challenging

    • We often encounter hard-to-reproduce bugs • Testing UI requires effort Challenges with UI Development
  8. What if we could represent all the possible states &

    state changes in a single class?
  9. • Imagine a class that works like a router States

    & state changes in a single class
  10. • Imagine a class that works like a router •

    It receives commands and delegates responsibility States & state changes in a single class
  11. • Imagine a class that works like a router •

    It receives commands and delegates responsibility • All you have to do is to plug and play the right classes to handle the right responsibilities States & state changes in a single class
  12. A device which can be in one of a set

    number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
  13. A device which can be in one of a set

    number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
  14. A device which can be in one of a set

    number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
  15. A device which can be in one of a set

    number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
  16. A device which can be in one of a set

    number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
  17. A consequence of a state transition or of an event

    passed to a state machine. State Machine - SideEffects
  18. Better declarative code Makes the UI testable Single source of

    truth for UI Events and States State Machine
  19. M A R C O S DA M A S

    C E N O S R . A N D R O I D E NG I N E E R T I N D E R @marcospaulosd V I N AY G A BA S R . A N D R O I D E NG I N E E R A I R B N B @vinaygaba Architecture Agnostic UI Development http://bit.ly/ArchitectureAgnosticUI