Building a Mobile App for Real-Time Collaborative Spreadsheets with CRDT

We regularly receive requests to implement collaborative spreadsheet editing in a mobile app. A spreadsheet is not text. It has a structure: rows, columns, cells, formulas, and dependencies between cells. Synchronization algorithms that work for text documents (Y.js YText, CRDT for sequences) apply differently here. Concurrently editing cell B3 and simultaneously changing the formula =SUM(B1:B5) in C1 – these are two independent events with data dependency. We offer a turnkey solution using CRDT.

How to ensure data consistency during concurrent editing?

Data model: not an array of rows, but a Map of cells

A spreadsheet in CRDT representation is a Y.Map (or equivalent) where the key is a "row:col" string and the value is a cell object. Y.js YMap supports concurrent operations at the individual key level: two users edit different cells simultaneously – no conflict. Two edit the same cell – the last write wins (Last-Write-Wins semantics). This is confirmed by Y.js documentation.

const ycells = ydoc.getMap('cells');
ycells.set('3:2', { value: '=SUM(A1:A3)', formatted: '15', style: { bold: true } });

ycells.observe(event => {
  event.changes.keys.forEach((change, key) => {
    if (change.action === 'update' || change.action === 'add') {
      const [row, col] = key.split(':').map(Number);
      recalculateAffectedFormulas(row, col);
      rerenderCell(row, col);
    }
  });
});

Last-Write-Wins for cells is acceptable in most scenarios. For critical data (financial spreadsheets), a conflict detector and UI for manual resolution are needed.

Adding and deleting rows/columns: structural changes

This is more complex than a cell change. Inserting a row before row 5 should shift all references in formulas: =B5 becomes =B6. Concurrent row insertion by two users – the order of insertion affects the final structure.

Y.js YArray for a list of rows with YMap for each row is a classic scheme. When inserting into YArray, CRDT guarantees deterministic merge order (based on clientId and clock). Y.js with YMap handles simultaneous changes faster than OT solutions with operation logs, on average 2x faster, with the same reliability. Formulas after structural changes need to be recalculated via a dependency graph.

Formula recalculation is a separate topic. HyperFormula (hyperformula.js) – an open-source formula engine (similar to Excel), runs in JavaScript. Supports 400+ functions. Integrates with Y.js: when a CRDT update arrives, we apply it to HyperFormula via setSheetContent() and get recalculated values.

Which tools to choose for a mobile spreadsheet editor?

Mobile table rendering

FlashList (React Native) with 2D scrolling – a non-standard case. The standard FlatList / ScrollView is not optimized for large tables with frozen headers and cell virtualization. React Native with FlashList provides smoother scrolling than standard FlatList, roughly 2-3 times.

Solutions:

• react-native-table-component – simple, no virtualization, not for large tables.
• react-native-spreadsheet – exists but hasn't been updated for a long time.
• Custom renderer using react-native-gesture-handler + react-native-reanimated – full control, manual virtualization.

On native Android: RecyclerView with GridLayoutManager, built-in virtualization. On iOS: UICollectionView with UICollectionViewCompositionalLayout for 2D scrolling with variable cell sizes.

Custom cell editor: TextInput with formula support (starts with = – switch mode). On iOS autocorrect breaks formulas (=SUM becomes =Sum or gets underlined). Need autocorrectionType = .no and spellCheckingType = .no for cells in formula mode.

Range selection: B2:D5

When entering a formula, the user should tap a cell and drag to select a range – classic Excel UX. On mobile: a custom gesture recognizer over the table that tracks pan gestures and calculates the cell range from coordinates. Need hitTest to determine the cell from the touch point.

Multiple users can select ranges simultaneously – show using Awareness Protocol (like cursors in a text editor), but with color coding per user.

Synchronization via WebSocket: optimistic updates

A local cell change is applied to the UI immediately (optimistic update). In parallel, Y.js encodes the operation into an update binary and sends it to the server. The server broadcasts the update to other clients. If a conflicting update arrives – Y.js merge applies, UI rerenders.

For large tables (1000+ rows), it's important not to rerender the entire table on each remote update. We track event.changes.keys in the observer and rerender only the changed cells plus dependent formulas.

What the work includes

• Architecture and prototype: stack selection, data schema, CRDT structures
• Integration of Y.js + HyperFormula with native modules
• Implementation of a custom renderer with virtualization
• WebSocket server setup and traffic optimization
• Load testing (up to 50 concurrent users)
• Documentation and team training
• Post-deployment support (1 month)

Our experience includes developing over 10 mobile apps with CRDT synchronization. We have 5+ years of mobile development experience and guarantee deadline adherence.

Estimation

MVP with Y.js + HyperFormula on React Native (up to 100 rows, basic formulas, 2–3 concurrent users) – 10–16 weeks. A full-fledged Google Sheets-like mobile editor with thousands of rows, complex formulas, and structural changes – 6–12 months.

Contact us for a project evaluation. Get a consultation on architecture and timeline – it takes no more than 2 working days.

How to Start Integrating API into a Mobile App?

The request goes out, the response doesn't come, timeout — 30 seconds. The user stares at the spinner. No network — mobile card in the subway. Or the network is there, but the server returns 200 with an HTML error page instead of JSON — and the app crashes on JSONDecoder.decode(). We see such cases on every second project. So integrating API into a mobile app is not just calling an endpoint, but designing a reliable network layer: error handling, caching, offline mode, certificate pinning. Order an audit of your current network layer — we will evaluate the project in 1 day. Our team guarantees a thorough analysis and provides a detailed roadmap.

Standard libraries like URLSession and OkHttp provide basic HTTP clients, but for production you need retries with exponential backoff, status code validation, typed deserialization, and network state monitoring. Without this, the app loses data and users. We have been doing mobile development for 5 years and implemented more than 30 projects with API integration on iOS, Android, and Flutter — from startups to enterprise solutions.

How to Choose a Protocol for API Integration?

REST remains the standard for most projects. But when a profile screen needs 5 fields out of 40, GraphQL eliminates over-fetching and reduces traffic by 30–60%. gRPC is justified for thousands of requests per minute (trading, IoT) — binary serialization is 3–5 times faster than JSON. WebSocket is the only choice for real-time without polling (messages, notifications).

Practical example: For a fintech app, we replaced REST (40 fields) with GraphQL — response size dropped from 12 KB to 2.5 KB, screen render time decreased by 70%. Traffic savings were significant. Our certified iOS and Android developers have deep experience with all these protocols — you can rely on proven solutions.

How to Ensure Reliable Connection and Offline-First?

Users lose network in the subway, elevator, tunnel. A mobile app must work without internet — at least in read-only mode. We implement the offline-first pattern:

1. On screen open, first show data from the local cache (Core Data / Room).
2. Simultaneously perform a network request, update UI after response.
3. If network is unavailable — show cached data and a 'no connection' label.
4. When network is restored, automatically synchronize changes.

For HTTP response caching we use URLCache (iOS) and OkHttp Cache (Android) with Cache-Control support. For structured data — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback monitor network state and trigger updates.

REST and Client Library Selection

Alamofire (iOS) — de facto standard for Swift projects. On top of URLSession it adds request chaining, response validation, automatic retry, certificate pinning via ServerTrustManager. AF.request() with .validate() returns an error for any status code outside 200–299. Without .validate(), Alamofire considers 404 and 500 as successful responses. With Swift Concurrency — async version via serializingDecodable.

Retrofit (Android) — annotation-based HTTP client on top of OkHttp. An interface with annotations compiles into implementation. @GET, @POST, @Path, @Query, @Body — declarative API description. OkHttp under the hood: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — logging in debug builds. Authenticator — automatic token refresh on 401.

Ktor (KMM/Flutter) — multiplatform HTTP client. On iOS it works via Darwin engine (URLSession), on Android — via OkHttp. Single code for both platforms with KMM architecture.

GraphQL: When REST Falls Short

REST returns a fixed structure. A profile screen needs name, avatar, email — the server sends 40 fields. Over-fetching. GraphQL solves this: the client requests exactly the needed fields. This is critical for mobile where traffic and parsing time are real constraints. Apollo iOS and Apollo Kotlin generate typed classes from schema: schema.graphql + query files → strict types at compile time. Subscriptions via WebSocket — real-time without polling. Limitation: GraphQL is harder to cache at the HTTP level. Apollo uses a normalized in-memory cache InMemoryNormalizedCache — requests with overlapping data update the cache without duplication.

WebSocket: Real-Time Without Extra Traffic

Polling (setInterval every 5 seconds) — battery and traffic waste. WebSocket is a persistent bidirectional connection. iOS: URLSessionWebSocketTask (native, iOS 13+). Android: OkHttp WebSocket. Mandatory reconnect handling: on onFailure — exponential backoff (1s → 2s → 4s → 8s → max 60s). Socket.IO is an overlay with automatic reconnect, but for new projects native WebSocket is preferable (fewer dependencies).

gRPC: For High-Load Services

gRPC with protobuf — binary serialization: smaller size, faster parsing. grpc-swift for iOS, grpc-kotlin for Android. The protobuf schema compiles to typed classes. Streaming (server-side, client-side, bidirectional) is a native feature. Application threshold: high request frequency (trading, IoT) or critical latency. For regular CRUD, REST is simpler to debug and monitor.

Certificate Pinning and Security

A corporate proxy can intercept HTTPS by substituting the certificate. Certificate pinning prevents this: the app accepts only a specific certificate or public key. Alamofire: ServerTrustManager with PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner with SHA-256 hash. Apple's App Transport Security documentation recommends pinning certificates for sensitive data. Operational complexity: on certificate rotation, older app versions stop working. Solution — pinning to the CA public key or support multiple pins with a grace period.

What Is Included in the Work

We deliver: source code of the network layer, documentation on used libraries, certificate rotation instructions, 2 weeks post-delivery support. Our experience guarantees that the solution will be stable and maintainable.

Timeline and Cost

Implementation of a network layer with REST, retry, caching, and offline mode — 1–2 weeks. Adding GraphQL or WebSocket — another 1–2 weeks. gRPC — 2–3 weeks, including code generation. The cost is calculated individually after analyzing the API and offline behavior requirements. We will evaluate the project in 1 day — contact us for a consultation. Get a reliable API integration with guaranteed quality.