| title | React Native is the best way to build desktop apps | ||||
|---|---|---|---|---|---|
| aspectRatio | 58140 | ||||
| width | 1920 | ||||
| height | 1080 | ||||
| transition | fade | ||||
| template | ./TalkTemplate.tsx | ||||
| theme |
|
||||
| presenter |
|
import { Text, View } from "react-native" import { Scene, BigStatement, Frameworks, BenchmarkChart, ChatIllustration, GlassChatControls, DataPath } from "./Scene" import { CodePanel, SidebarGallery, NativeLayers } from "./Content" import { snippets } from "./snippets" import { GlassCaption } from "./GlassCaption" import { AgentDeviceScan } from "./packs/automation" import { NativeOrbitLottie } from "./packs/animation" import { BenchmarkArrival } from "./packs/charts" import { ChromeConveyor } from "./packs/comparison" import { NativeDataWindow, gpuConstellation, gpuConstellationCount, gpuInterfaceReveal, gpuInterfaceRevealCount } from "./packs/data" import { InfiniteDesktop } from "./packs/depth" import { prismaticTear, subtleFaultTiming } from "slides:materials/Distortion" import { chatGlassUniforms, glassTimeline, liquidGlass, MaterialSampler } from "./packs/glass" import { MagneticCursor } from "./packs/interaction" import { PhysicsLayout } from "./packs/motion" import { FrameBudget, LatencyRace, MemoryGravity, ThreadPressure } from "./packs/performance" import { ComponentXRay, FocusSpotlight, NativeLayerPeel } from "./packs/reveal" import { CodeToPixels, CodeToUI, PlatformMetamorphosis } from "./packs/transform" import { WindowPortal } from "./packs/transitions" import { ShaderTypography } from "./packs/typography" import { SpotlightDemo, FreezeDemo, ProgressiveDemo, WipeDemo, CalloutDemo, CodeDemo, LayersDemo, SwapDemo } from "./PresentingDemos"
- macOS — React Native on top of AppKit.
- Windows — A native Windows implementation.
- Your skills — React, TypeScript, components, state.
- Same content — Matching normalized digests. Images disabled.
- Real builds — Production apps. Fresh processes. Warm filesystem cache.
- Repeated runs — 2 warmups + 10 measurements. Rotating app order.
SwiftUI wins initial memory. React Native is still very competitive.
- React Native — 17.0 MB bundle
- Electron — 286.1 MB bundle
- Tauri — 11.3 MB bundle
<Scene eyebrow="Recreating native materials" title={} footer="Convincing first. Comically over-engineered by the end."> <View style={{ height: 580, width: 1680 }}> {(step) => ( = 1} strength={96} speed={1} previewTime={glassTimeline.peak} uniforms={chatGlassUniforms}> )}
Taste is optional. The rendering capability is real.
- Composition — Components, Hooks, state, TypeScript.
- Iteration — Edit UI and see the result quickly.
- Reuse — Share logic, tests and compatible libraries.
- UI changes — Fast Refresh for the React Native app.
- Native changes — Build and relink the native code.
- This deck — Local MDX compilation, then a Slides update.
- TypeScript — UI, application logic, orchestration.
- C++ — Parsing, native ownership, shared libraries.
- Platform code — Swift / Objective-C++ on macOS. Kotlin on Android.
eyebrow: "Verification" footer: "agent-device · macOS app-scoped sessions · evidence you can review"
- Observe — Read accessibility state. Capture the app window.
- Act — Select a known history. Wait for the expected content.
- Verify — Check the result. Keep screenshots and failure evidence.
- Keyboard + focus — Shortcuts, tab order, selection, visible focus.
- Windows + files — Resize well, restore state, handle real documents.
- Accessibility — Names, roles, state and usable interactions.
- Share — Data models, business rules, state and useful components.
- Adapt — Menus, windows, input and platform materials.
- Check — Library support and native setup on each target.
- Toolchains — Xcode or Windows build tools, signing and packaging.
- Dependencies — Check desktop compatibility before committing to a library.
- Integration — Some platform features need native code.
- A responsive app — Fastest first content in this comparison; competitive footprint.
- Native integration — Platform containers and services, with custom graphics when useful.
- A familiar workflow — React skills, TypeScript, native modules and agent verification.
- Start small — Build one useful desktop screen.
- macOS — microsoft.github.io/react-native-macos
- Windows — microsoft.github.io/react-native-windows
<Scene eyebrow="Effect gallery / TypeGPU" title="1,024 fragments become visible rows" footer={${gpuConstellationCount} particles · one instanced draw · shader-driven motion}>
<Scene eyebrow="Effect gallery / TypeGPU" title="4,096 particles become an interface" footer={${gpuInterfaceRevealCount} particles · one instanced draw · shader-driven assembly}>
- It answers — How these implementations handle these large histories.
- It controls — Content parity, launch procedure, cache conditions and repetition.
- It does not isolate — Renderer cost, scroll FPS, developer time or every possible architecture.
- Web runtimes — DOM / CSS workflows and browser integrations.
- SwiftUI / AppKit — Direct Apple platform development.
- Flutter / GPUI — Different rendering and language ecosystems.
- React Native — React composition with native integration.
- Keep ownership clear — Large native resources stay behind a small interface.
- Render what matters — Virtualize long content and load rows lazily.
- Measure the path — Discovery, parsing, crossings, layout and paint.
- Native desktop — microsoft.github.io/react-native-macos microsoft.github.io/react-native-windows
- Graphics — shopify.github.io/react-native-skia docs.swmansion.com/TypeGPU
- Native + agents — nitro.margelo.com github.com/callstack/agent-device
{(step) => ( = 1} blur={24} refraction={8} duration={700} overlay={The details can wait. Focus on what matters.}> )}
{(step) => ( )}
{(step) => ( )}
{(step) => ( )}
{(step) => ( )}
{(step) => ( )}
{(step) => ( )}
{(step) => ( )}
{(step) => ( )}