React NEXUS Day 2: Building Crash-Resistant React Native Apps
This document, titled "React NEXUS Day 2," is a comprehensive technical compendium presented by Suneel, featuring talks from various speakers on advanced React Native development and AI integration. The key themes revolve around building robust applications, optimizing performance, and leveraging AI for development and user experiences.
Key Topics and Speakers:
-
Building Crash-Resistant React Native Apps:
- Speaker: Nikhil Soni (Engineering Manager, Quince)
- Problem: The presentation details the journey of an e-commerce application that experienced a significant increase in production crashes after scaling up. Initial issues stemmed from memory accumulation due to deep navigation stacks and image buffer explosions where uncompressed image RAM usage was underestimated. Persistent launch crashes related to the Hermes JavaScript engine were also identified.
- Solutions: The team implemented strategies such as partial unmounting of deep screens, scheduled cache cleanup for images, dynamic native cache capping, and a thread targeting patch to ensure module registration on the correct thread. These fixes drastically reduced crash rates and memory warnings, achieving "All Green Again" status with a 0.01% final crash rate.
-
Load Testing Real React Applications:
- Speaker: Mohammed Zubair Ahmed (Senior Software Design Engineer, Mattermost)
- Focus: This section discusses production performance analysis of a high-scale ChatOps platform, identifying server and client bottlenecks (e.g., high CPU, input micro-lag, memory saturation). It covers profiling techniques, engineering interventions like Redux refactoring and bundle splitting, and a distributed load testing framework.
-
Frontend Observability:
- Speaker: Gaurav Tewari (Software Engineer, signoz.io)
- Core Idea: Differentiates between traditional monitoring (answering known questions) and observability (answering unknown questions) by deeply analyzing environmental context. It outlines the Four Pillars of Front-End Observability: Real User Monitoring (RUM), Core Web Vitals, Error Tracking, and Browser Tracing.
-
Automated Debugging of Media Performance Issues:
- Speaker: Harshit Budhraja (Senior Software Engineer, ImageKit.io)
- Approach: Details an automated architecture using Chrome DevTools Model Context Protocol (MCP) and ImageKit MCP to remediate media asset regressions. The process involves diagnostics, target isolation, transformation generation, and component implementation.
-
Real-Time React: Building WebSocket Apps:
- Speaker: Prakhar Goel (Founding / Platform Engineer, Adalat Al)
- Challenges: Addresses asynchronicity in
send()and desynchronization ofws.close()vsonclosein browser WebSocket APIs. It also highlights native vulnerabilities likenavigator.onLineunreliability and timer throttling. - Solution: Proposes application-level heartbeats and lossless sequencing mechanics for zero data loss and connection stability.
-
Orchestrating AI Workflows with Temporal and React:
- Speaker: Aqsa Aqeel (Software Engineer, DigitalOcean)
- Concept: Advocates for Durable Workflows over stateless APIs for managing complex AI orchestrations, ensuring guaranteed execution state persistence. It also covers real-time state-reflective UI integration.
-
Running LLMs in React with WebGPU:
- Speaker: Harsh Pathak (SDE, Groww)
- Focus: Explores running Large Language Models (LLMs) directly in the browser using WebGPU. Discusses hardware constraints, model quantization (e.g., INT4), KV cache memory allocations, and a multi-thread worker core setup.
-
Security and Authentication (ThunderID):
- Speaker: Jerad Rutnam (Senior Technical Lead, WSO2)
- Product: Introduces ThunderID, an open-source identity provider built on modern protocols, designed to simplify authentication across humans, devices, and AI agents.
-
Live Event Photography Platform:
- Speaker: Sumanth B A (Senior Software Engineer, smallcase)
- Architecture: Details a cloud architecture (Pixel Machha) for real-time event photography, leveraging FTP transfers from camera bodies to an Express server on EC2, with serverless orchestration using AWS Lambda and client-side browser manipulation via HTML5 Canvas and Konva.
-
Building Immersive Experiences with AI (XR):
- Speaker: Mohit Kumar Toshniwal (Senior Software Engineer, Ethos)
- Topic: Discusses current XR entry barriers and an Autonomous AI-Driven Testing & Development System that uses the Immersive Web SDK (IWSDK) and AI models to generate and test 3D code.
-
Local AI Workflows in the Browser:
- Speaker: Megha Pathak (UI 2, Flipkart)
- Problem: Addresses the prompt regression dilemma in AI features, where traditional assertions fail due to LLM's free-form output.
- Solution: Proposes a Local In-Browser Evaluation Architecture using lightweight models and WebLLM workers, with advanced optimization strategies like Chain-of-Thought forcing and Ensemble Voting for accurate local testing.
-
Structured Data and Schema Markup:
- Speaker: G Sriram (SDE - III, HighLevel)
- Benefit: Explains how Schema Markup (specifically JSON-LD) transforms search results into interactive rich snippets, improving SEO and data accessibility for web crawlers and AI agents.
-
Making UI Agent-Ready (WebMCP):
- Speaker: Adnan Arif Sait (Lead UI Engineer, MiQ Digital)
- Concept: Discusses the shift in web traffic towards automated bot/agent traffic and introduces WebMCP (Model Context Protocol) for enabling AI agents to interact with web features securely and efficiently, moving away from DOM scraping.
-
Fixing AI's Blind Spot (Browser Debugging):
- Speaker: Janardhan Y (Staff Engineer, Oracle)
- Challenge: Highlights the difficulty of frontend debugging for AI agents due to visual errors and interactive states.
- Solution: Introduces DevTools MCP integration and programmatic visual regression scripting to provide AI agents with structured JSON context for accurate debugging and self-correction.
-
Autonomous E2E Test Suite Triage (Playwright + MCP):
- Speaker: Santosh Selvasundar (Founding Engineer, Brackett Al)
- Application: Details how Playwright MCP can be used for autonomous test suite repair and initial test bootstrapping, addressing challenges like selector changes and automated self-correction loops.
-
Agentic Voice AI Career Counselor:
- Speaker: Mohith Kumar (Software Engineer, Edstruments)
- System: Describes a voice processing ingestion pipeline with on-device wake word infrastructure (Picovoice Porcupine) and real-time tool-calling via LiveKit RPC over WebRTC.
-
Building Agentic Experiences in React (UX vs. AX):
- Speaker: Ashita Prasad (SDE / Developer Advocate, AWS)
- Paradigm: Contrasts User Experience (UX) with Agentic Experience (AX), emphasizing the shift towards declarative configurations for AI agents. It covers exposing application capabilities via WebMCP.
-
Realtime UI Generation:
- Speaker: Zahle Khan (Founding Engineer, Thesys)
- Approach: Introduces the Generative UI Solution, which dynamically shifts layout assembly in real-time based on user prompts, rendering components tailored to the immediate context using a Component-to-Schema Engine.
The presentation concludes with a wrap-up, encouraging attendees to save the post and follow for more content.