Managing State in Apps

Explains this post to me so that even Java developer could understand:

Now let me try to explain RSC:

Every app (web or otherwise) fundamentally has a couple of ways to store the state:

• ephemeral state on device (think hover state of a button)
• local state on device (think saved draft of a tweet)
• local cache of server state (think your profile avatar)
• ephemeral server state (think request IP address)
• server state specific to the instance (think of new uploaded avatar saved in memory or on volatile disk)
• persistent server state (think user name stored in DB)
• server cache of DB state (think a list of top10 trending topics)
• server queues (think waiting for seconds or days to get email/sms verification code)

And every app fundamentally limited by how it can talk to those state stores:

• some of the interactions have to be instant and never fail (think rendering a new frame in the game)
• some should be very fast and reliable (think writing into text input)
• some are expected to be fast on the fast Internet and slower on the slow one (think position of the enemy in Counter Strike)
• some can be slightly slower and tolerate slight inconsistencies (think auto saving drafts in Gmail)
• some can be even slower as long as it "feels deliberate" (think pressing "calculate my taxes" button)
• some are expected to start some real life process with different expectations for "I see that it started" and "I see that it's finished" (think of the "search for new game lobby" button)

Now let's make this way more complicated, what about the time when you want to upload your new avatar. How many of those places do you want to store that avatar in? How many of those places will get out of sync? What kind of feedback do users expect for each? What are the failure modes?

Keep in mind that users get accustomed to good things and what was considered good interaction today, would be considered slow and clunky tomorrow.

I'll leave it as an exercise for the reader to figure out where terms like "client side navigation", "full page navigation", "local first", "progressive enchantment", "optimistic updates", etc. are falling onto those two lists and how different frameworks are trying to lie to you that you only need a couple of those points figured out to deliver either passable or great experience 🙃

This post is about understanding the complexity of managing state in applications, particularly web apps, and how this relates to user experience. To make it more relatable to a Java developer, let's break it down:

1. Types of State in an App:

   • Ephemeral state on device: Temporary, like the hover state of a button.
   • Local state on device: Data stored locally, like a saved draft.
   • Local cache of server state: Cached data like your profile picture.
   • Ephemeral server state: Temporary server data, like the IP address of a request.
   • Server state specific to the instance: Data in memory or on temporary storage, like a newly uploaded avatar.
   • Persistent server state: Data stored long-term, like a username in a database.
   • Server cache of DB state: Cached database data, like top trending topics.
   • Server queues: For processes that aren't instant, like sending a verification code.

2. Interactions with State Stores:

   • Some interactions need to be instant (like rendering a game frame).
   • Some should be fast and reliable (like typing in a text input).
   • Some depend on internet speed (like updating an enemy's position in a game).
   • Some can tolerate slight delays/inconsistencies (like auto-saving emails).
   • Some can be deliberately slow (like a "calculate taxes" button).
   • Some start real-life processes with different start/end expectation times (like searching for a game lobby).

3. Complexity in Actions Like Uploading an Avatar:

   • Deciding where to store the avatar (local cache, server memory, database, etc.).
   • Handling the potential for data to become out-of-sync across different storage locations.
   • Understanding user expectations for feedback during the process.
   • Considering various failure modes.

4. Evolving User Expectations:

   • Users become accustomed to good performance and UI/UX, raising the bar for what's considered acceptable.

5. Relating to Development Concepts:

   • Understanding where concepts like "client-side navigation," "full-page navigation," "local first," "progressive enhancement," and "optimistic updates" fit in this framework of state management.

6. Frameworks and Simplification:

   • Different frameworks try to simplify this complex state management, but the reality is that addressing all these aspects is crucial for either a passable or great user experience.

As a Java developer, you can relate to these concepts as they mirror the challenges you face in managing state in server-side applications, dealing with database interactions, caching, session management, and ensuring responsive, reliable user interactions.