mobile-development

Original source / Raw SKILL.md

---
name: mobile-development
description: Build modern mobile applications with React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose. Covers mobile-first design principles, performance optimization (battery, memory, network), offline-first architecture, platform-specific guidelines (iOS HIG, Material Design), testing strategies, security best practices, accessibility, app store deployment, and mobile development mindset. Use when building mobile apps, implementing mobile UX patterns, optimizing for mobile constraints, or making native vs cross-platform decisions.
license: MIT
version: 1.0.0
---

# Mobile Development Skill

Production-ready mobile development with modern frameworks, best practices, and mobile-first thinking patterns.

## When to Use

- Building mobile applications (iOS, Android, or cross-platform)
- Implementing mobile-first design and UX patterns
- Optimizing for mobile constraints (battery, memory, network, small screens)
- Making native vs cross-platform technology decisions
- Implementing offline-first architecture and data sync
- Following platform-specific guidelines (iOS HIG, Material Design)
- Optimizing mobile app performance and user experience
- Implementing mobile security and authentication
- Testing mobile applications (unit, integration, E2E)
- Deploying to App Store and Google Play

## Technology Selection Guide

**Cross-Platform Frameworks:**
- **React Native**: JavaScript expertise, web code sharing, mature ecosystem (121K stars, 67% familiarity)
- **Flutter**: Performance-critical apps, complex animations, fastest-growing (170K stars, 46% adoption)

**Native Development:**
- **iOS (Swift/SwiftUI)**: Maximum iOS performance, latest features, Apple ecosystem integration
- **Android (Kotlin/Jetpack Compose)**: Maximum Android performance, Material Design 3, platform optimization

See: `references/mobile-frameworks.md` for detailed framework comparisons

## Mobile Development Mindset

**The 10 Commandments of Mobile Development:**

1. **Performance is Foundation, Not Feature** - 70% abandon apps >3s load time
2. **Every Kilobyte, Every Millisecond Matters** - Mobile constraints are real
3. **Offline-First by Default** - Network is unreliable, design for it
4. **User Context > Developer Environment** - Think real-world usage scenarios
5. **Platform Awareness Without Platform Lock-In** - Respect platform conventions
6. **Iterate, Don't Perfect** - Ship, measure, improve cycle is survival
7. **Security and Accessibility by Design** - Not afterthoughts
8. **Test on Real Devices** - Simulators lie about performance
9. **Architecture Scales with Complexity** - Don't over-engineer simple apps
10. **Continuous Learning is Survival** - Mobile landscape evolves rapidly

See: `references/mobile-mindset.md` for thinking patterns and decision frameworks

## Reference Navigation

**Core Technologies:**
- `mobile-frameworks.md` - React Native, Flutter, Swift, Kotlin, framework comparison matrices, when to use each
- `mobile-ios.md` - Swift 6, SwiftUI, iOS architecture patterns, HIG, App Store requirements, platform capabilities
- `mobile-android.md` - Kotlin, Jetpack Compose, Material Design 3, Play Store, Android-specific features

**Best Practices & Development Mindset:**
- `mobile-best-practices.md` - Mobile-first design, performance optimization, offline-first architecture, security, testing, accessibility, deployment, analytics
- `mobile-debugging.md` - Debugging tools, performance profiling, crash analysis, network debugging, platform-specific debugging
- `mobile-mindset.md` - Thinking patterns, decision frameworks, platform-specific thinking, common pitfalls, debugging strategies

## Key Best Practices (2024-2025)

**Performance Targets:**
- App launch: <2 seconds (70% abandon if >3s)
- Memory usage: <100MB for typical screens
- Network requests: Batch and cache aggressively
- Battery impact: Respect Doze Mode and background restrictions
- Animation: 60 FPS (16.67ms per frame)

**Architecture:**
- MVVM for small-medium apps (clean separation, testable)
- MVVM + Clean Architecture for large enterprise apps
- Offline-first with hybrid sync (push + pull)
- State management: Zustand (React Native), Riverpod 3 (Flutter), StateFlow (Android)

**Security (OWASP Mobile Top 10):**
- OAuth 2.0 + JWT + Biometrics for authentication
- Keychain (iOS) / KeyStore (Android) for sensitive data
- Certificate pinning for network security
- Never hardcode credentials or API keys
- Implement proper session management

**Testing Strategy:**
- Unit tests: 70%+ coverage for business logic
- Integration tests: Critical user flows
- E2E tests: Detox (React Native), Appium (cross-platform), XCUITest (iOS), Espresso (Android)
- Real device testing mandatory before release

**Deployment:**
- Fastlane for automation across platforms
- Staged rollouts: Internal → Closed → Open → Production
- Mandatory: iOS 17 SDK (2024), Android 15 API 35 (Aug 2025)
- CI/CD saves 20% development time

## Quick Decision Matrix

| Need | Choose |
|------|--------|
| JavaScript team, web code sharing | React Native |
| Performance-critical, complex animations | Flutter |
| Maximum iOS performance, latest features | Swift/SwiftUI native |
| Maximum Android performance, Material 3 | Kotlin/Compose native |
| Rapid prototyping | React Native + Expo |
| Desktop + mobile | Flutter |
| Enterprise with JavaScript skills | React Native |
| Startup with limited resources | Flutter or React Native |
| Gaming or heavy graphics | Native (Swift/Kotlin) or Unity |

## Framework Quick Comparison (2024-2025)

| Criterion | React Native | Flutter | Swift/SwiftUI | Kotlin/Compose |
|-----------|--------------|---------|---------------|----------------|
| **Stars** | 121K | 170K | N/A | N/A |
| **Adoption** | 35% | 46% | iOS only | Android only |
| **Performance** | 80-90% native | 85-95% native | 100% native | 100% native |
| **Dev Speed** | Fast (hot reload) | Very fast (hot reload) | Fast (Xcode Previews) | Fast (Live Edit) |
| **Learning Curve** | Easy (JavaScript) | Medium (Dart) | Medium (Swift) | Medium (Kotlin) |
| **UI Paradigm** | Component-based | Widget-based | Declarative | Declarative |
| **Community** | Huge (npm) | Growing | Apple ecosystem | Android ecosystem |
| **Best For** | JS teams, web sharing | Performance, animations | iOS-only apps | Android-only apps |

## Implementation Checklist

**Project Setup:**
- Choose framework → Initialize project → Configure dev environment → Setup version control → Configure CI/CD → Team standards

**Architecture:**
- Choose pattern (MVVM/Clean) → Setup folders → State management → Navigation → API layer → Error handling → Logging

**Core Features:**
- Authentication → Data persistence → API integration → Offline sync → Push notifications → Deep linking → Analytics

**UI/UX:**
- Design system → Platform guidelines → Accessibility → Responsive layouts → Dark mode → Localization → Animations

**Performance:**
- Image optimization → Lazy loading → Memory profiling → Network optimization → Battery testing → Launch time optimization

**Quality:**
- Unit tests (70%+) → Integration tests → E2E tests → Accessibility testing → Performance testing → Security audit

**Security:**
- Secure storage → Authentication flow → Network security → Input validation → Session management → Encryption

**Deployment:**
- App icons/splash → Screenshots → Store listings → Privacy policy → TestFlight/Internal testing → Staged rollout → Monitoring

## Platform-Specific Guidelines

**iOS (Human Interface Guidelines):**
- Native navigation patterns (tab bar, navigation bar)
- iOS design patterns (pull to refresh, swipe actions)
- San Francisco font, iOS color system
- Haptic feedback, 3D Touch/Haptic Touch
- Respect safe areas and notch

**Android (Material Design 3):**
- Material navigation (bottom nav, navigation drawer)
- Floating action buttons, material components
- Roboto font, Material You dynamic colors
- Touch feedback (ripple effects)
- Respect system bars and gestures

## Common Pitfalls to Avoid

1. **Testing only on simulators** - Real devices show true performance
2. **Ignoring platform conventions** - Users expect platform-specific patterns
3. **No offline handling** - Network failures will happen
4. **Poor memory management** - Leads to crashes and poor UX
5. **Hardcoded credentials** - Security vulnerability
6. **No accessibility** - Excludes 15%+ of users
7. **Premature optimization** - Optimize based on metrics, not assumptions
8. **Over-engineering** - Start simple, scale as needed
9. **Skipping real device testing** - Simulators don't show battery/network issues
10. **Not respecting battery** - Background processing must be justified

## Performance Budgets

**Recommended Targets:**
- **App size**: <50MB initial download, <200MB total
- **Launch time**: <2 seconds to interactive
- **Screen load**: <1 second for cached data
- **Network request**: <3 seconds for API calls
- **Memory**: <100MB for typical screens, <200MB peak
- **Battery**: <5% drain per hour of active use
- **Frame rate**: 60 FPS (16.67ms per frame)

## Resources

**Official Documentation:**
- React Native: https://reactnative.dev/
- Flutter: https://flutter.dev/
- iOS HIG: https://developer.apple.com/design/human-interface-guidelines/
- Material Design: https://m3.material.io/
- OWASP Mobile: https://owasp.org/www-project-mobile-top-10/

**Tools & Testing:**
- Detox E2E: https://wix.github.io/Detox/
- Appium: https://appium.io/
- Fastlane: https://fastlane.tools/
- Firebase: https://firebase.google.com/

**Community:**
- React Native Directory: https://reactnative.directory/
- Pub.dev (Flutter packages): https://pub.dev/
- Awesome React Native: https://github.com/jondot/awesome-react-native
- Awesome Flutter: https://github.com/Solido/awesome-flutter


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### references/mobile-frameworks.md

```markdown
# Mobile Frameworks Reference

Comprehensive guide to mobile development frameworks: React Native, Flutter, and native development.

## Framework Overview (2024-2025)

### React Native
- **Language**: JavaScript/TypeScript
- **Stars**: 121,000+ on GitHub
- **Adoption**: 35% of mobile developers, 67% familiarity
- **Performance**: 80-90% native performance
- **Architecture**: Bridge-based (legacy) → New Architecture (JSI, Fabric, Codegen)
- **Rendering**: Native components
- **Hot Reload**: Yes
- **Community**: Huge (npm ecosystem, 3M+ downloads/week)

### Flutter
- **Language**: Dart
- **Stars**: 170,000+ on GitHub (fastest-growing)
- **Adoption**: 46% of mobile developers
- **Performance**: 85-95% native performance
- **Architecture**: "Everything is a widget"
- **Rendering**: Custom Impeller rendering engine (eliminates jank)
- **Hot Reload**: Yes (fastest in industry)
- **Community**: Growing rapidly (23,000+ packages on pub.dev)

### Native iOS (Swift/SwiftUI)
- **Language**: Swift
- **Performance**: 100% native
- **UI Framework**: SwiftUI (declarative) or UIKit (imperative)
- **Latest**: Swift 6 with compile-time data race detection
- **Tooling**: Xcode 16, Swift Package Manager
- **Concurrency**: async/await, actors, @MainActor

### Native Android (Kotlin/Jetpack Compose)
- **Language**: Kotlin
- **Performance**: 100% native
- **UI Framework**: Jetpack Compose (declarative) or Views (imperative)
- **Latest**: Kotlin 2.1, Compose 1.7
- **Tooling**: Android Studio Hedgehog+
- **Coroutines**: Kotlin coroutines for async

## React Native Deep Dive

### Core Concepts

**New Architecture (0.82+ Mandatory)**
- **JSI (JavaScript Interface)**: Direct JS-to-native communication, eliminating bridge
- **Fabric**: New rendering system with synchronous layout
- **Codegen**: Static type safety between JS and native code
- **Turbo Modules**: Lazy-loaded native modules

**Performance Optimizations**
- **Hermes Engine**: 30-40% faster startup, reduced memory
- **Native Driver Animations**: Offloaded to UI thread (60 FPS)
- **FlatList Virtualization**: Renders only visible items
- **Image Optimization**: FastImage library, progressive loading

### Best Practices

**Project Structure (Feature-Based)**
```
src/
├── features/
│   ├── auth/
│   ├── profile/
│   └── dashboard/
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
├── navigation/
├── services/
└── stores/
```

**State Management (2024-2025)**
1. **Zustand** (Rising Star): Minimal boilerplate, 3KB, excellent TypeScript
2. **Redux Toolkit**: Enterprise apps, time-travel debugging, DevTools
3. **Recoil**: Meta-built, atom-based, experimental
4. **Context API**: Simple apps, avoid prop drilling

**Navigation**
- **React Navigation**: Industry standard, 80%+ adoption
- Type-safe navigation with TypeScript
- Deep linking configuration
- Tab, stack, drawer navigators

**TypeScript Adoption**
- 85%+ of new React Native projects use TypeScript
- Type safety prevents 15% of runtime errors
- Better IDE support and autocomplete

### Testing Strategy

**Unit Testing**
- **Jest**: Default test runner
- **React Native Testing Library**: Component testing, best practices
- Target: 70-80%+ code coverage

**E2E Testing**
- **Detox**: Gray-box testing, fast, reliable (recommended)
- **Appium**: Cross-platform, WebDriver-based
- **Maestro**: New player, simple YAML-based tests

**Example (React Native Testing Library)**
```javascript
import { render, fireEvent, waitFor } from '@testing-library/react-native';

test('login button should be enabled when form is valid', async () => {
  const { getByTestId } = render(<LoginScreen />);
  const emailInput = getByTestId('email-input');
  const passwordInput = getByTestId('password-input');
  const loginButton = getByTestId('login-button');

  fireEvent.changeText(emailInput, '[email protected]');
  fireEvent.changeText(passwordInput, 'password123');

  await waitFor(() => {
    expect(loginButton).not.toBeDisabled();
  });
});
```

### When to Choose React Native

**✅ Best For:**
- JavaScript/TypeScript expertise in team
- Code sharing with web (React)
- Rapid prototyping and MVPs
- Strong community support needed
- npm ecosystem integration
- Commercial apps (12.57% market share)

**❌ Not Ideal For:**
- Heavy graphics/gaming (use native or Unity)
- Maximum performance critical
- Deep platform-specific integrations
- Team unfamiliar with JavaScript

## Flutter Deep Dive

### Core Concepts

**"Everything is a Widget"**
- UI built from composable widgets
- Immutable widget tree
- Reactive updates with setState/state management

**Rendering Engine**
- **Impeller**: New rendering engine (iOS stable, Android preview)
- Eliminates shader jank
- 120 FPS capable on capable devices
- Custom Skia-based rendering (full control)

**Performance Features**
- **Const widgets**: Compile-time optimization
- **RepaintBoundary**: Isolate expensive repaints
- **ListView.builder**: Lazy loading for long lists
- **Cached network images**: Image optimization

### Best Practices

**Project Structure (Feature-First)**
```
lib/
├── features/
│   ├── auth/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   └── profile/
├── core/
│   ├── theme/
│   ├── utils/
│   └── widgets/
├── routing/
└── main.dart
```

**State Management (2024-2025)**
1. **Riverpod 3**: Modern, compile-safe, recommended by Flutter team
2. **Bloc**: Enterprise apps, event-driven, predictable state
3. **Provider**: Beginners, simple apps
4. **GetX**: All-in-one (state + routing + DI), opinionated

**Navigation**
- **GoRouter**: Official recommendation (2024+), declarative routing
- Type-safe routes with code generation
- Deep linking built-in
- Replaces Navigator 2.0 for most use cases

**Priority Levels (Official)**
1. **P0**: Fix immediately (crashes, data loss)
2. **P1**: Fix within days (major features broken)
3. **P2**: Fix within weeks (annoyances)
4. **P3**: Nice to have

### Testing Strategy

**Unit Testing**
- **flutter_test**: Built-in testing package
- **Mockito**: Mocking dependencies
- Target: 80%+ code coverage

**Widget Testing**
- **WidgetTester**: Test UI and interactions
- **Golden Tests**: Visual regression testing

**Integration Testing**
- **integration_test**: End-to-end testing
- Run on real devices or emulators

**Example (Widget Testing)**
```dart
testWidgets('Counter increments', (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());

  expect(find.text('0'), findsOneWidget);
  expect(find.text('1'), findsNothing);

  await tester.tap(find.byIcon(Icons.add));
  await tester.pump();

  expect(find.text('0'), findsNothing);
  expect(find.text('1'), findsOneWidget);
});
```

### When to Choose Flutter

**✅ Best For:**
- Performance-critical applications
- Complex animations and custom UI
- Multi-platform (mobile, web, desktop)
- Consistent UI across platforms
- Growing team/startup (fastest development)
- Apps with heavy visual requirements

**❌ Not Ideal For:**
- Team unfamiliar with Dart
- Heavy reliance on native platform features
- Existing large JavaScript/native codebase
- Small app size critical (<20MB)

## Native iOS (Swift/SwiftUI)

### Core Concepts

**Swift 6 (2024-2025)**
- Compile-time data race detection
- Enhanced concurrency: async/await, actors, @MainActor
- Powerful macro system
- Move semantics for performance

**SwiftUI vs UIKit**
- **SwiftUI**: Declarative, 40% less code, iOS 13+, modern approach
- **UIKit**: Imperative, fine-grained control, legacy support, complex customizations
- Both work together in same project

### Architecture Patterns

**MVVM (Most Popular)**
```swift
// ViewModel (ObservableObject)
class LoginViewModel: ObservableObject {
    @Published var email = ""
    @Published var password = ""
    @Published var isLoading = false

    func login() async {
        isLoading = true
        // Login logic
        isLoading = false
    }
}

// View
struct LoginView: View {
    @StateObject private var viewModel = LoginViewModel()

    var body: some View {
        VStack {
            TextField("Email", text: $viewModel.email)
            SecureField("Password", text: $viewModel.password)
            Button("Login") {
                Task { await viewModel.login() }
            }
        }
    }
}
```

**TCA (The Composable Architecture)**
- Growing adoption (v1.13+)
- Excellent for complex apps
- Steeper learning curve
- Predictable state management

### When to Choose Native iOS

**✅ Best For:**
- iOS-only applications
- Maximum performance required
- Latest Apple features (WidgetKit, Live Activities, App Clips)
- Deep iOS ecosystem integration
- Team with Swift/iOS expertise

## Native Android (Kotlin/Jetpack Compose)

### Core Concepts

**Kotlin 2.1 (2024-2025)**
- Null safety by design
- Coroutines for async
- Sealed classes for type-safe states
- Extension functions

**Jetpack Compose**
- Declarative UI (like SwiftUI/React)
- 60% adoption in top 1,000 apps
- Material Design 3 integration
- Compose compiler with Kotlin 2.0+

### Architecture Patterns

**MVVM + Clean Architecture**
```kotlin
// ViewModel
class LoginViewModel(
    private val loginUseCase: LoginUseCase
) : ViewModel() {
    private val _uiState = MutableStateFlow(LoginUiState())
    val uiState: StateFlow<LoginUiState> = _uiState.asStateFlow()

    fun login(email: String, password: String) {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            loginUseCase(email, password)
                .onSuccess { /* Navigate */ }
                .onFailure { /* Show error */ }
            _uiState.update { it.copy(isLoading = false) }
        }
    }
}

// Composable
@Composable
fun LoginScreen(viewModel: LoginViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsState()

    Column {
        TextField(
            value = uiState.email,
            onValueChange = { /* update */ }
        )
        Button(onClick = { viewModel.login() }) {
            Text("Login")
        }
    }
}
```

### When to Choose Native Android

**✅ Best For:**
- Android-only applications
- Maximum performance required
- Material Design 3 implementation
- Deep Android ecosystem integration
- Team with Kotlin/Android expertise

## Framework Comparison Matrix

| Feature | React Native | Flutter | Native iOS | Native Android |
|---------|--------------|---------|------------|----------------|
| **Language** | JavaScript/TS | Dart | Swift | Kotlin |
| **Learning Curve** | Easy | Medium | Medium | Medium |
| **Performance** | 80-90% | 85-95% | 100% | 100% |
| **Hot Reload** | Yes | Yes (fastest) | Previews | Live Edit |
| **Code Sharing** | Web (React) | Web/Desktop | No | No |
| **Community Size** | Huge | Growing | iOS only | Android only |
| **UI Paradigm** | Components | Widgets | Declarative | Declarative |
| **Third-party** | npm (3M+) | pub.dev (23K+) | SPM | Maven |
| **App Size** | 40-50MB | 15-20MB | 10-15MB | 10-15MB |
| **Build Time** | Medium | Fast | Slow (Xcode) | Medium |
| **Debugging** | Chrome/Safari | DevTools | Xcode | Android Studio |
| **Platform Feel** | Needs work | Needs work | Native | Native |
| **Startup Time** | Medium | Fast | Fastest | Fastest |
| **Best For** | JS teams | Performance | iOS-only | Android-only |

## Migration Paths

### React Native → Flutter
- **Effort**: High (complete rewrite)
- **Timeline**: 3-6 months for medium app
- **Benefits**: Better performance, smaller app size
- **Challenges**: New language (Dart), different ecosystem

### Flutter → React Native
- **Effort**: High (complete rewrite)
- **Timeline**: 3-6 months for medium app
- **Benefits**: Larger community, web code sharing
- **Challenges**: Lower performance, larger app size

### Cross-Platform → Native
- **Effort**: Very High (separate iOS and Android apps)
- **Timeline**: 6-12 months for medium app
- **Benefits**: Maximum performance, platform features
- **Challenges**: Maintain two codebases, 2x team size

### Native → Cross-Platform
- **Effort**: High (consolidate to one codebase)
- **Timeline**: 4-8 months for medium app
- **Benefits**: Single codebase, faster development
- **Challenges**: Performance tradeoffs, platform differences

## Decision Framework

### Start Here: Do you need native performance?
- **No** → Cross-platform (React Native or Flutter)
- **Yes** → Native (Swift or Kotlin)

### If Cross-Platform: Does team know JavaScript?
- **Yes** → React Native
- **No** → Flutter

### If Native: iOS-only or Android-only?
- **iOS-only** → Swift/SwiftUI
- **Android-only** → Kotlin/Compose
- **Both** → Reconsider cross-platform

### Additional Factors:
- **Existing codebase**: Use same technology
- **Web app exists**: React Native (code sharing)
- **Desktop needed**: Flutter (multi-platform)
- **Budget constrained**: Cross-platform
- **Performance critical**: Native
- **Complex animations**: Flutter or Native
- **Commercial focus**: React Native (larger market share)

## Resources

**React Native:**
- Official Docs: https://reactnative.dev/
- New Architecture: https://reactnative.dev/docs/the-new-architecture/landing-page
- Expo: https://expo.dev/ (recommended framework)
- Directory: https://reactnative.directory/

**Flutter:**
- Official Docs: https://flutter.dev/
- Pub.dev: https://pub.dev/
- Codelabs: https://flutter.dev/codelabs
- Widget Catalog: https://flutter.dev/widgets

**Native iOS:**
- Swift Docs: https://swift.org/documentation/
- SwiftUI Tutorials: https://developer.apple.com/tutorials/swiftui
- iOS HIG: https://developer.apple.com/design/human-interface-guidelines/

**Native Android:**
- Kotlin Docs: https://kotlinlang.org/docs/home.html
- Compose Docs: https://developer.android.com/jetpack/compose
- Material 3: https://m3.material.io/
- Android Guides: https://developer.android.com/guide

```

### references/mobile-mindset.md

```markdown
# Mobile Development Mindset & Thinking Patterns

Essential thinking patterns and decision-making frameworks for successful mobile development.

## The 10 Commandments of Mobile Development

### 1. Performance is Foundation, Not Feature
- **Reality**: 70% users abandon apps >3s load time
- **Mindset**: Optimize from day one, not "later"
- **Action**: Set performance budgets before writing code

### 2. Every Kilobyte, Every Millisecond Matters
- **Reality**: Mobile = constrained environment (battery, memory, network)
- **Mindset**: Desktop assumptions don't apply
- **Action**: Profile real devices, not simulators

### 3. Offline-First by Default
- **Reality**: Network is unreliable (elevators, tunnels, airplanes, poor signal)
- **Mindset**: Design for offline, sync when online
- **Action**: Local persistence first, cloud sync second

### 4. User Context > Developer Environment
- **Reality**: Users on trains, walking, one-handed, bright sunlight
- **Mindset**: Test in real-world scenarios
- **Action**: Real device testing mandatory

### 5. Platform Awareness Without Platform Lock-In
- **Reality**: iOS and Android users expect different patterns
- **Mindset**: Respect conventions, but keep logic portable
- **Action**: Platform-specific UI, shared business logic

### 6. Iterate, Don't Perfect (2024-2025 Survival Strategy)
- **Reality**: Mobile landscape changes rapidly
- **Mindset**: Ship, measure, improve cycle
- **Action**: MVP → User feedback → Iterate

### 7. Security and Accessibility by Design
- **Reality**: Not afterthoughts, but core requirements
- **Mindset**: Build trust and inclusivity from start
- **Action**: Security audit + accessibility testing in every sprint

### 8. Test on Real Devices
- **Reality**: Simulators lie about performance, battery, network
- **Mindset**: Simulators for speed, devices for truth
- **Action**: CI/CD with real device farms

### 9. Architecture Scales with Complexity
- **Reality**: Over-engineering kills simple apps
- **Mindset**: Start simple, refactor when needed
- **Action**: MVVM for small apps, Clean Architecture when complexity demands

### 10. Continuous Learning is Survival
- **Reality**: 85% developers use AI tools (2024), frameworks evolve constantly
- **Mindset**: Embrace change, allocate learning time
- **Action**: 1+ hour weekly for new tech/patterns

## Mobile-Specific Constraints & Thinking

### Small Screens (Constraint → Design Parameter)

**Constraint:**
- 5-7 inch screens, thumb-reach zones, fat finger problem

**Thinking Shift:**
- Embrace minimalism: "What can we remove?"
- Priority-based hierarchy: Most important action front and center
- Progressive disclosure: Hide complexity behind layers

**Practical Targets:**
- 44x44px minimum touch targets (iOS)
- 48x48px minimum touch targets (Android)
- Primary actions within thumb reach (bottom 1/3)
- Maximum 3-4 items in bottom navigation

**Example Decision:**
```
❌ Bad: 8-column data table on mobile
✅ Good: Card view with 3 key metrics, "View more" for details
```

### Limited Resources (Every KB/ms Matters)

**Constraint:**
- Battery drain, memory pressure, thermal throttling

**Thinking Shift:**
- Resource consciousness in every decision
- Measure before optimizing (don't guess)
- Graceful degradation on low-end devices

**Practical Targets:**
- <100MB memory for typical screens
- <5% battery drain per hour active use
- <50MB initial download, <200MB total
- 60 FPS (16.67ms per frame)

**Example Decision:**
```
❌ Bad: Load all 1000 items in list
✅ Good: Virtualized list (10 items visible + buffer)
```

### Intermittent Connectivity (Offline-First)

**Constraint:**
- Network unreliable: elevators, tunnels, poor signal, airplane mode

**Thinking Shift:**
- Local-first data architecture
- Optimistic UI updates
- Sync conflict resolution strategy

**Practical Approaches:**
- **Write-through cache**: Write local, sync background
- **Hybrid sync**: Push (realtime) + Pull (periodic)
- **Conflict resolution**: Last-write-wins with timestamps or CRDT

**Example Decision:**
```
❌ Bad: Show spinner while posting comment
✅ Good: Show comment immediately (optimistic), sync background, handle conflicts
```

## Platform-Specific Thinking

### iOS Mental Model

**Philosophy**: Consistent, polished, opinionated
- Users expect iOS patterns (tab bar, navigation bar, swipe back)
- Design reviews reject non-standard UIs
- "It just works" expectation = zero tolerance for crashes

**Fragmentation**: LOW
- 90%+ on iOS 16+ (2024)
- Only ~50 device models to test
- Predictable hardware specs

**Design Thinking**:
- Follow Human Interface Guidelines religiously
- Native navigation patterns non-negotiable
- Haptic feedback for important actions
- Respect safe areas (notch, Dynamic Island)

**When to Go Native iOS:**
- App Store is primary revenue channel
- Need latest Apple features (WidgetKit, Live Activities)
- Target affluent user base (iOS users spend 2.5x more)

### Android Mental Model

**Philosophy**: Flexible, customizable, democratic
- Users expect Material Design but tolerate variations
- Extreme fragmentation = defensive programming
- "Back button" = fundamental navigation expectation

**Fragmentation**: HIGH
- 24,000+ device models
- Android 6-14 in active use (8 years of OS versions)
- Wide range of hardware specs (512MB to 12GB RAM)

**Design Thinking**:
- Material Design 3 as baseline
- Test on low-end devices (1GB RAM minimum)
- Respect system navigation (gesture vs 3-button)
- Handle back button properly

**When to Go Native Android:**
- Global market focus (72% market share)
- Emerging markets (Android dominates)
- Enterprise/B2B (customization needs)

## Performance Mindset (Every Millisecond Matters)

### Critical Metrics (User Perception)

| Metric | Threshold | User Perception |
|--------|-----------|-----------------|
| **Launch time** | <2s | Acceptable |
| **Launch time** | 2-3s | Noticeable delay |
| **Launch time** | >3s | 70% abandon |
| **Screen load** | <1s | Instant (cached) |
| **Screen load** | 1-3s | Acceptable (network) |
| **Screen load** | >3s | Frustrating |
| **Animation** | 60 FPS | Smooth |
| **Animation** | 30-60 FPS | Noticeable jank |
| **Animation** | <30 FPS | Unusable |

### Performance Budget Example

**Mobile App Performance Budget:**
```
Launch Time
├─ Cold start: <2s (target 1.5s)
├─ Warm start: <1s
└─ Hot start: <0.5s

Screen Load
├─ Cached data: <500ms
├─ Network data: <2s
└─ Heavy computation: <3s

Memory
├─ Typical screen: <100MB
├─ Heavy screen (images): <150MB
└─ Peak usage: <200MB

Network
├─ Initial bundle: <2MB
├─ Per screen: <500KB
└─ Images: <200KB each

Battery
├─ Active use: <5% per hour
├─ Background: <1% per hour
└─ Idle: <0.1% per hour
```

### Optimization Decision Tree

**Is it slow?**
1. **Measure first** (Xcode Instruments, Android Profiler)
2. **Find bottleneck** (CPU, memory, network, disk I/O)
3. **Fix biggest impact** (80/20 rule)
4. **Measure again** (verify improvement)

**Common Culprits:**
- Synchronous main thread operations
- Unoptimized images (too large, wrong format)
- N+1 query problem (fetch in loop)
- Memory leaks (retain cycles, listeners)
- Re-renders without memoization

## Mobile Development Workflow

### Iterative Development Cycle (Agile)

**Sprint Structure (2 weeks):**
```
Week 1: Build + Test
├─ Day 1-2: Design + plan
├─ Day 3-4: Implement core
└─ Day 5: Code review + tests

Week 2: Polish + Ship
├─ Day 6-7: Bug fixes + polish
├─ Day 8: QA testing
├─ Day 9: Staging deployment
└─ Day 10: Production release (staged)
```

**Daily Workflow:**
1. Pull latest code
2. Run tests locally
3. Develop feature/fix
4. Write/update tests
5. Local testing on device
6. Code review
7. CI/CD validation
8. Merge to develop

**CI/CD Impact:**
- 20% reduction in development time
- 50% fewer production bugs
- 3x faster deployment

### Common Pitfalls & Avoidance

#### 1. Testing Only on Simulators
**Problem**: Simulators don't show real performance (battery, memory, network)
**Solution**: Real device testing mandatory before every release
**Impact**: 40% of bugs only appear on real devices

#### 2. Ignoring Platform Conventions
**Problem**: Custom navigation confuses users
**Solution**: Follow iOS HIG and Material Design
**Impact**: 30% lower engagement with non-standard UIs

#### 3. No Offline Handling
**Problem**: Network failures = blank screens, errors
**Solution**: Offline-first architecture, cached data
**Impact**: 50% of users experience network issues daily

#### 4. Poor Memory Management
**Problem**: Memory leaks → crashes, poor performance
**Solution**: ARC/GC understanding, profile regularly
**Impact**: Memory issues = #1 crash cause (35%)

#### 5. Hardcoded Credentials
**Problem**: Security vulnerability, API key exposure
**Solution**: Environment variables, secure storage
**Impact**: 23% of apps leak sensitive data (OWASP)

#### 6. No Accessibility
**Problem**: Excludes 15%+ of users (disability, situational)
**Solution**: VoiceOver/TalkBack testing, semantic labels
**Impact**: Accessibility = 1.3B global market

#### 7. Premature Optimization
**Problem**: Wasted time optimizing non-bottlenecks
**Solution**: Measure first, optimize biggest impact
**Impact**: 80% of performance issues = 20% of code

#### 8. Over-Engineering
**Problem**: Complex architecture for simple apps
**Solution**: Start simple, scale when needed
**Impact**: 3x longer development for no user benefit

#### 9. Skipping Real Device Testing
**Problem**: Missed battery drain, thermal issues
**Solution**: Device farm in CI/CD, manual testing
**Impact**: 25% of performance issues device-specific

#### 10. Not Respecting Battery
**Problem**: Background processing drains battery
**Solution**: Batch operations, respect Doze Mode
**Impact**: Battery drain = #1 uninstall reason

## Debugging Strategies & Tools (2024-2025)

### iOS Debugging (Xcode 16)

**Tools:**
- **Instruments**: Profiling (Time, Allocations, Leaks, Network)
- **Memory Graph**: Visual retain cycles
- **View Hierarchy**: UI debugging
- **Network Link Conditioner**: Simulate poor network
- **Console**: System logs, os_log

**AI-Driven:**
- Xcode 16 AI crash analysis
- Automatic memory leak detection
- Performance suggestions

**Process:**
1. Reproduce bug on device
2. Attach debugger / capture crash log
3. Symbolicate crash report
4. Fix root cause (not symptom)
5. Add test to prevent regression

### Android Debugging (Android Studio Giraffe+)

**Tools:**
- **Profiler**: CPU, Memory, Network, Energy
- **Layout Inspector**: 3D view hierarchy
- **Database Inspector**: SQLite/Room debugging
- **Network Inspector**: API call monitoring
- **Logcat**: System logs with filters

**AI-Driven:**
- Android Vitals: Crash clustering, ANR analysis
- Firebase Crashlytics: AI-powered issue grouping
- Play Console insights: User-reported bugs

**Process:**
1. Reproduce on emulator/device
2. Check Logcat for stack traces
3. Use Android Profiler for performance
4. Fix and verify with instrumented tests
5. Monitor Play Console vitals post-release

### Cross-Platform Debugging

**React Native:**
- Chrome DevTools / Safari Web Inspector
- Flipper (meta debugger: network, layout, logs)
- Reactotron (state inspection)

**Flutter:**
- Flutter DevTools (Inspector, Timeline, Memory, Network)
- Dart Observatory (VM debugging)
- Widget Inspector (UI debugging)

## Progressive Enhancement & Graceful Degradation

### Progressive Enhancement (Build Up)

**Strategy**: Start with baseline, enhance for capable devices

**Example: Image Loading**
```
Baseline (all devices):
├─ Show placeholder immediately
├─ Load low-res image (10KB)
└─ Display with smooth fade-in

Enhancement (modern devices):
├─ Check network (fast = high-res)
├─ Check memory (ample = cache)
└─ Progressive JPEG rendering
```

**Benefits:**
- Works on all devices
- Optimal experience on modern devices
- No user left behind

### Graceful Degradation (Strip Down)

**Strategy**: Build for best, degrade for constraints

**Example: Animation**
```
Best (flagship devices):
├─ Complex particle effects
├─ 120 FPS animations
└─ Parallax scrolling

Degraded (budget devices):
├─ Simple fade transitions
├─ 60 FPS target
└─ Disable parallax (GPU load)
```

**Detection:**
```javascript
// React Native
const isLowEndDevice =
  DeviceInfo.getTotalMemory() < 2000000000; // <2GB

if (isLowEndDevice) {
  // Disable heavy animations
  // Reduce concurrent operations
  // Lower image quality
}
```

**Benefits:**
- Optimized for all hardware tiers
- Prevents crashes on low-end devices
- Better user experience across spectrum

## Native vs Cross-Platform Decision Framework

### Decision Tree

**Q1: Do you need 100% native performance?**
- **Yes** → Native (Swift/Kotlin)
- **No** → Continue

**Q2: Is team comfortable with JavaScript?**
- **Yes** → React Native
- **No** → Continue

**Q3: Need desktop or web versions too?**
- **Yes** → Flutter
- **No** → Continue

**Q4: Complex animations or custom UI?**
- **Yes** → Flutter
- **No** → React Native (easier for standard UIs)

**Q5: Existing codebase to share?**
- **React web app** → React Native
- **No existing code** → Flutter (cleaner slate)

### Hybrid Approach (Best of Both Worlds)

**Strategy**: Cross-platform for most features, native for critical paths

**Example Architecture:**
```
React Native / Flutter (90%)
├─ UI and business logic
├─ Standard features
└─ API integration

Native Modules (10%)
├─ Performance-critical (video processing)
├─ Platform-specific (HealthKit, Android Auto)
└─ Third-party SDKs (payment, analytics)
```

**When to Use:**
- Best: Leverage cross-platform speed + native power
- Complexity: Maintain native module knowledge
- Team: Need both cross-platform and native developers

## Architecture Decision-Making

### Complexity-Based Architecture Selection

**Simple App (1-5 screens, basic CRUD)**
- **Architecture**: MVVM (no Clean Architecture)
- **State**: Local state (useState, setState)
- **Reasoning**: Over-engineering adds complexity without benefit

**Medium App (5-20 screens, moderate logic)**
- **Architecture**: MVVM with clear separation
- **State**: Global state management (Zustand, Riverpod)
- **Reasoning**: Scalability without over-engineering

**Complex App (20+ screens, enterprise logic)**
- **Architecture**: Clean Architecture (domain, data, presentation)
- **State**: Advanced state management + dependency injection
- **Reasoning**: Maintainability and testability critical

### Architecture Evolution

**Start Simple:**
```
v1.0: MVVM, local state, single module
└─ Focus: Ship fast, validate idea

v2.0: Add global state when needed
└─ Trigger: Props drilling becomes painful

v3.0: Add Clean Architecture when scaling
└─ Trigger: Team grows, features multiply

v4.0: Extract microservices if justified
└─ Trigger: Independent deployment needs
```

**Key Principle:** Refactor when pain > refactoring cost, not before

## Resources & Continuous Learning

**Weekly Learning Targets (2024-2025):**
- 1 hour: New framework features
- 30 min: Performance optimization techniques
- 30 min: Security updates (CVEs, OWASP)
- 30 min: Community articles/videos

**Top Resources:**
- iOS: Apple WWDC videos, Swift by Sundell
- Android: Android Dev Summit, Medium Android Dev
- React Native: React Native Blog, Expo Blog
- Flutter: Flutter Engage, Medium Flutter
- Mobile DevOps: Bitrise Blog, Fastlane guides

**Communities:**
- Stack Overflow (mobile tags)
- Reddit (r/iOSProgramming, r/androiddev, r/reactnative, r/FlutterDev)
- Discord (React Native, Flutter official)
- Twitter: Follow framework creators and contributors

**AI Tools (85% adoption in 2024):**
- GitHub Copilot: Code completion, boilerplate
- ChatGPT/Claude: Architecture questions, debugging
- Tabnine: Context-aware suggestions
- Average time saved: 1+ hour weekly

**Key Mindset:** Continuous learning is not optional, it's survival in mobile development

```