Mobile App Architecture, Lifecycle, and Performance Questions

Clarify requirements / goals

• 20MB RAM budget, 200MB disk, concurrent reads, fast eviction, progressive thumbnail→full, low CPU/battery.

High-level architecture

• LRU in-memory cache (fixed-size by bytes) for bitmaps/decoded images.
• Disk cache stores compressed bytes (WebP/JPEG/AVIF) in segmented files; index/metadata in a lightweight SQLite or mmaped manifest for quick lookup.
• Fetcher pipeline: request -> memory hit -> return; else disk async decode -> return thumbnail first if available -> fetch remote if miss.

Memory cache (LRU)

• Size-based LRU by byte cost; store decoded image + small ref to origin key.
• Use weak/soft references (Android) or NSCache (iOS) to respect OS pressure.
• Evict oldest LRU until under budget; prefer evicting largest entries first when tied.

Disk cache strategy

• Two-tier disk: thumbnails (small) and full images in separate namespaces. Keep per-file metadata: lastAccess, size, etag/last-modified.
• Compaction thread: background low-priority job that deletes LRU until total <= 200MB; coalesce small files occasionally to reduce inode overhead.

Concurrency model

• Read-mostly: concurrent reads via immutable buffers; use read-write lock for manifest. Use thread pool with limited size (2-4) for disk I/O and decoding to avoid CPU/battery spikes.
• Deduplicate concurrent downloads/decodes with in-flight map (promises/futures) so multiple callers share work.

Progressive loading

• Store and serve thumbnails immediately from disk/memory.
• When requesting full image, return thumbnail quickly and upgrade client with full when ready. Use partial HTTP (range) or progressive JPEG/webp when supported to stream higher-quality progressively.

Cache keying & validation

• Key = sha1(url + transformation_params + resize + format). Store ETag/Last-Modified in metadata.
• On remote fetch, use conditional GET (If-None-Match / If-Modified-Since) to avoid re-downloading.

Invalidation & remote updates

• On 304 response: update metadata timestamp, keep cached bytes.
• If server indicates changed (200 with different ETag): replace disk entry atomically (write temp + rename), update memory cache entry.
• Provide app-level hooks to force invalidation (user refresh, logout). Use versioned keys if content changes semantically.

Battery/CPU optimizations

• Decode on background threads at target display size to avoid extra memory and CPU.
• Throttle background compaction and remote refreshes when device is low-power or on cellular.
• Use native optimized decoders and hardware bitmaps where available.

Trade-offs

• Storing decoded images in memory speeds UI but uses RAM; storing compressed bytes saves RAM but costs CPU to decode. Balance by keeping thumbnails decoded, full images decoded on-demand.

Approach — high level

• Create a ReactContextBaseJavaModule in Kotlin that registers a SensorEventListener with SensorManager and emits events via RCTDeviceEventEmitter.
• Handle lifecycle by implementing LifecycleEventListener to start/stop sensors on resume/pause.
• Check permissions (BODY_SENSORS if needed; accelerometer usually no runtime permission) and runtime API guards.
• Control sampling via SensorManager.registerListener with chosen delay and throttle/batch before emitting to JS to avoid flooding.

Key code pieces (Kotlin)

class AccelerometerModule(private val reactContext: ReactApplicationContext)
  : ReactContextBaseJavaModule(reactContext), LifecycleEventListener {

  private val sensorManager by lazy { reactContext.getSystemService(Context.SENSOR_SERVICE) as SensorManager }
  private val sensor by lazy { sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER) }
  private var lastEmit = 0L
  private val minIntervalMs = 50L // sampling throttle

  private val listener = object: SensorEventListener {
    override fun onSensorChanged(e: SensorEvent) {
      val now = SystemClock.elapsedRealtime()
      if (now - lastEmit < minIntervalMs) return // simple throttle
      lastEmit = now

      val payload = Arguments.createMap().apply {
        putDouble("x", e.values[0].toDouble())
        putDouble("y", e.values[1].toDouble())
        putDouble("z", e.values[2].toDouble())
        putDouble("timestamp", e.timestamp.toDouble())
      }
      reactContext
        .getJSModule(RCTDeviceEventEmitter::class.java)
        .emit("AccelerometerData", payload) // batch/queue if needed
    }
    override fun onAccuracyChanged(s: Sensor?, accuracy: Int) {}
  }

  override fun getName() = "AccelerometerModule"

  @ReactMethod fun start() {
    // no runtime permission usually needed, but check if required for specific OEMs
    sensor?.let { sensorManager.registerListener(listener, it, SensorManager.SENSOR_DELAY_GAME) }
  }
  @ReactMethod fun stop() {
    sensorManager.unregisterListener(listener)
  }

  override fun onHostResume() { start() }
  override fun onHostPause() { stop() }
  override fun onHostDestroy() { stop() }
}

Lifecycle & lifecycle listener

• Use LifecycleEventListener to start/stop when app backgrounded to save battery.
• Also expose start/stop to JS so screen-specific components can control subscription.

Sampling rate & throttling

• Choose SensorManager constants (SENSOR_DELAY_UI / GAME / FASTEST) depending on accuracy.
• Apply JS-side or native-side throttling: native-side reduces JS thread work and serialization cost.
• For heavy rates, batch values into a single object array and emit periodically (e.g., every 50–200 ms).

Avoid flooding JS

• Throttle at native level (as shown).
• Batch multiple samples into one event payload.
• Use a background worker for aggregation if needed (HandlerThread) to avoid blocking UI.
• Debounce or drop events under backpressure; consider dropping if JS acknowledgements aren't implemented.

Edge cases & best practices

• Unregister on destroy to avoid leaks.
• Use HandlerThread for sensor processing if doing heavy computation.
• Test on low-end devices and measure JS queue/bridge latency; tune minIntervalMs accordingly.

Clarify requirements & constraints

• Mobile-first: low memory, varying device density, intermittent networks. Must support progressive JPEG/ETag, prioritized prefetching, memory+disk caches with LRU/size-based eviction, and a simple async API for Android/iOS.

High-level data flow

1. Client requests URL + target size/density → 2. Request Coordinator (decides cache keys, priority) → 3. Memory Cache lookup → 4. Disk Cache lookup → 5. Fetcher (network, with range/progressive support & network-aware throttling) → 6. Decoder (streaming/progressive decode, downsample to target) → 7. Transformer (optional effects) → 8. Memory cache store → 9. UI callback.

Component responsibilities

• Request Coordinator: normalize requests, choose downsample scale by device density & requested view size, manage priorities and cancellation.
• Fetcher: HTTP client with Range/ETag, progressive streaming, retry/backoff, exposes progressive bytes to decoder, integrates network-status adapter for prefetch tuning.
• Decoder: incremental/progressive decode (JPEG/WebP), auto-downsample using target dims and sample-size algorithms (in-sample for Android, CGImage/CIImage scale for iOS), produce memory-efficient bitmap.
• Transformer: resize, crop, rounded corners, color transforms; pure functional to enable caching of transformed result keys.
• Cache: Memory LRU with cost = pixel bytes; Disk LRU with content-addressed keys + metadata (ETag, quality). Eviction: size and age policies; support partial-file temp writes for progressive reads.

Network-aware prefetching

• Prefetcher subscribes to connectivity/WWAN vs Wi‑Fi and battery; adaptive concurrency and only prefetch when on Wi‑Fi or user-allowed, prioritize visible/nearby screens, respect host rate limits.

Cross-platform reuse strategy

• Core engine in shared native library: write pipeline core in Kotlin Multiplatform (KMM) or C++ (for extreme reuse) exposing small idiomatic wrappers to Swift/Kotlin. Keep platform-specifics thin:
  • Shared: request coordinator, cache logic, keying, eviction policies, prefetch heuristics.
  • Android: native fetcher using OkHttp, Bitmap decoder using BitmapFactory with inSampleSize.
  • iOS: fetcher using URLSession, decoder using Image I/O / Core Graphics.
• Expose a simple async API: load(url, targetSize, options, callback) and declarative prefetch(urls).

Trade-offs

• KMM speeds development; C++ yields max reuse/perf. Progressive decoding complexity differs per platform—wrap platform decoders behind a shared decoder interface.

This design balances memory, network efficiency, and a small, cross-platform surface API for mobile developers.

Approach (high level)

• Shard the cache into N independent segments to reduce lock contention (e.g., 16 shards).
• Each shard holds a fixed-capacity LRU implemented with a ConcurrentHashMap-like array + a custom doubly-linked list of Node objects. Nodes are preallocated per-shard and recycled via a simple free-list to minimize per-entry allocation.
• Use a single ReentrantLock per shard (or synchronized) to protect that shard’s list and freelist; map ops use ConcurrentHashMap for fast lookups without allocations.

Why this fits Android

• Reduces GC pressure (node reuse, limited allocations).
• Sharding minimizes pauses from contention on main threads.

Core Kotlin (simplified)

import java.util.concurrent.locks.ReentrantLock
import kotlin.concurrent.withLock

class LruCacheShard<K,V>(private val capacity:Int){
  private data class Node<K,V>(var key:K?, var value:V?, var prev:Node<K,V>?, var next:Node<K,V>?)
  private val map = java.util.HashMap<K, Node<K,V>>(capacity*2)
  private var head:Node<K,V>? = null
  private var tail:Node<K,V>? = null
  private val freeList = ArrayDeque<Node<K,V>>()
  private val lock = ReentrantLock()

  init {
    repeat(capacity){ freeList.add(Node<K,V>(null,null,null,null)) }
  }

  fun get(key:K):V? = lock.withLock {
    val n = map[key] ?: return null
    moveToHead(n)
    return n.value
  }

  fun put(key:K, value:V) = lock.withLock {
    val existing = map[key]
    if(existing != null){
      existing.value = value
      moveToHead(existing); return
    }
    val node = if(freeList.isEmpty()) Node(key,value,null,null) else freeList.removeFirst().apply { this.key=key; this.value=value }
    insertHead(node)
    map[key]=node
    if(map.size>capacity) evictTail()
  }

  private fun moveToHead(n:Node<K,V>){
    if(n===head) return
    // unlink
    n.prev?.next = n.next
    n.next?.prev = n.prev
    if(n===tail) tail = n.prev
    // insert head
    n.prev = null; n.next = head
    head?.prev = n; head = n
  }

  private fun insertHead(n:Node<K,V>){
    n.prev = null; n.next = head
    head?.prev = n; head = n
    if(tail==null) tail = n
  }

  private fun evictTail(){
    val t = tail ?: return
    map.remove(t.key)
    tail = t.prev
    if(tail==null) head = null else tail?.next = null
    // clear and recycle
    t.key = null; t.value = null; t.prev = null; t.next = null
    freeList.addLast(t)
  }
}

Sharded wrapper

• Hash key, route to shard. Each shard capacity = totalCapacity / shards.

Concurrency & trade-offs

• Per-shard lock keeps critical sections small; lookups are constant-time. Using HashMap inside shard avoids global allocations from ConcurrentHashMap buckets. ReentrantLock vs synchronized: both fine; use tryLock for async-friendly eviction if needed.

Complexity

• get/put: O(1) amortized. Memory: O(capacity).

Answer (structured, role perspective)

Situation: Android Activity can be destroyed/recreated (rotation, low-memory/process kill). Goal: restore JS app state and navigation without flashes or inconsistent UI.

Approach summary

• Persist app state to durable storage (AsyncStorage / MMKV) with redux-persist.
• Persist navigation state separately (React Navigation) and supply it as initialState on startup.
• Block UI rendering until rehydration completes (PersistGate or custom splash) to avoid flashes.
• For native process death, ensure native -> JS bridge recreates RN instance and passes saved initial params if needed.

Example: redux-persist + Navigation

// store.js
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
const persistConfig = { key: 'root', storage: AsyncStorage, whitelist: ['auth','prefs'] };
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

// App.js
import { PersistGate } from 'redux-persist/integration/react';
import { NavigationContainer } from '@react-navigation/native';
const [navState, setNavState] = useState();
useEffect(()=> { loadNavStateFromStorage().then(s=>setNavState(s)); }, []);
return (
  <Provider store={store}>
    <PersistGate loading={<Splash/>} persistor={persistor}>
      <NavigationContainer initialState={navState} onStateChange={persistNavState}>
         <RootStack/>
      </NavigationContainer>
    </PersistGate>
  </Provider>
);

Key details and reasoning

• Rehydration timing: use PersistGate or a native splash to prevent mounting UI until redux-persist finishes. If Navigation mounts before state, you get flicker to default route.
• Persist only necessary slices (whitelist) to limit size and speed up rehydrate.
• Use fast storage (MMKV) for large apps or sensitive timing.
• For process death: Android recreates Activity but RN creates a fresh JS VM. Persisted state is the single source of truth; rehydration restores UI. If native needs to pass intent params, use a NativeModule to deliver params on start before rendering.
• Rotation: prefer preserving JS instance by handling configChanges in AndroidManifest (orientation, keyboardHidden) only when safe; otherwise rely on rehydration.

Edge cases & trade-offs

• Long rehydrate delays: show native splash and timeout with fallback to avoid blocking forever.
• Cryptography: encrypt persisted storage for sensitive data.
• Race conditions: ensure navigation persistence reads/writes are atomic; debounce onStateChange to reduce writes.

Outcome
This ensures consistent UI and navigation after Activity recreation, minimizes flashes, and gives predictable app resume behavior.