Server Driven UI with Jetpack Compose

Features

• Tooltips
• Compose navigation by
• Macrobenchmark test
• KSP processor

Art Gallery is based on Server Driven UI, only provide a JSON and UI definition.

The SDUI allows you send new features and create reusable componentes as possible.

Definition

1. Each JSON component must follow the following definition:

   1. render is an enum of RenderType and is the record of each component in the list.
   2. index is the component's position in the list and must not be duplicated.
   3. resource is a JSON object and therefore can be converted to some data class.

2. You must create a model capable of containing all these components, for example DataContentModel, here the header and body of our JSON are specified.

Do it!

To create a new UI component you must follow the following steps:

1. In the RenderType class you must register the name of the new component

2. Create a model specific to the resource you need to convert

3. Add the @RenderModel annotation to the model and pass the new render type you created as a parameter

4. Create a render factory class that extends DynamicListFactory and that will take care of managing the component

   1. The class asks for a list of compatible renders, add the one you created.
   2. If that component has an onboarding tooltip then add hasShowCaseConfigured = true
   3. In the CreateComponent function add your composable element
   4. In the CreateSkeleton function create a plain copy of your composable element, this is a skeleton!
   5. Do not forget annotate it with @ComponentFactory

5. On the main screen add the ContextView component as follows

   1. title is the title of the screen
   2. viewModel you must create a ViewModel that extends from ContextViewModel that contains the screen information
   3. destinationsNavigator is a navigation instance
      1. dynamicListRequestModel here goes a DynamicListRequestModel object or via rememberDynamicListRequestState

Used libraries

• Compose Destinations - Its a great navigation compose library
• Hilt - Dependency injection
• Coil - Image loader for compose
• Lottie - Lottie animations for compose
• Moshi - JSON Serialization/Deserializaton
• DataStore - Modern Android preferences
• Room - Data persistence
• Jetpack Compose - Modern Android UI development