Native is nu de toekomst van mobile bij Shopify (2026)

In 2020 besloten we volledig in te zetten op React Native, en die weddenschap is uiterst succesvol geweest. We bespaarden veel tijd door functies slechts één keer te bouwen, stelden ontwikkelaars zonder mobiele achtergrond in staat om bij te dragen aan onze apps en bevrijdden onszelf van de constante jacht op feature-parity (gelijkwaardigheid van functies tussen platformen).

In januari 2025 schreef ik dat de toekomst van React Native rooskleurig was en dat Shopify van plan was om hierin te blijven investeren. Dat was waar op basis van wat we toen wisten. React Native werkte goed voor ons en blijft een uitstekend framework. Maar sindsdien zijn coderingsmodellen drastisch verbeterd. Voor onze apps en ons team brengt het bouwen van dezelfde functie in Swift en Kotlin niet langer de kosten met zich mee die het voorheen deed.

We houden niet vast aan een beslissing enkel omdat deze op dat moment succesvol was. Wanneer een kernaanname verandert, zijn we bereid om terug te kijken en ons af te vragen of het nog steeds de juiste keuze is. LLM's (Large Language Models) hebben een van de kernaannames achter ons besluit uit 2020 veranderd, waardoor we onze mobiele stack vanuit eerste principes opnieuw hebben geëvalueerd.

Wat we ontdekten, leidde ons terug naar native.

Waarom terugkeren naar native?

We besloten in 2020 over te stappen van native naar React Native om drie redenen:

  • Stoppen met het tweemaal bouwen van dezelfde functies.
  • Ontwikkelaars in staat stellen om over de gehele stack te werken.
  • Minder tijd besteden aan het najagen van feature-parity en meer tijd aan het leveren van waarde.

React Native leverde deze voordelen consequent. We merkten dat we aanzienlijke tijd en middelen besteedden aan het optimaliseren van prestaties, het verbeteren van cruciale fundamentele gebieden in React Native en het bijhouden van framework-updates en externe afhankelijkheden, maar dit waren acceptabele compromissen. De voordelen van het gebruik van React Native wogen ruimschoots op tegen de investeringen die we in deze gebieden moesten doen.

Shopify gebruikt al sinds 2021 LLM's om software te bouwen (een jaar vóór ChatGPT!). In eerste instantie gebruikten we ze om functies te implementeren, bugs te onderzoeken en op te lossen, en code te reviewen. Naarmate de modellen verbeterden, nam ook de complexiteit van het werk dat we ze toevertrouwden toe. Eind 2025 hielpen ze ons niet meer alleen om sneller code te schrijven; ze waren in staat ons te laten twijfelen aan de aanname dat het tweemaal bouwen van software nog steeds betekende dat er tweemaal zoveel werk verricht moest worden.

We besloten onze mobiele tech-stack opnieuw te evalueren en begonnen met prototypen om te zien of onze technologische keuzes nog steeds standhielden. Met behulp van LLM's herbouwden we verschillende kernonderdelen van onze grootste apps in Swift en Kotlin, en we waren verrast door hoe goed dit werkte. Agents konden:

  • Een functie op Android implementeren met de iOS-versie als referentie, en vice versa.
  • Ontwikkelaars helpen om snel op snelheid te komen en effectief bij te dragen buiten hun primaire stack.
  • De kosten voor het behouden van parity tussen platformen drastisch verlagen door gedeelde specificaties, tests en review-checkpoints.

Native betekent nog steeds dat software op twee platformen moet worden gebouwd en onderhouden; die kosten zijn niet verdwenen. Wat is veranderd, is dat agents nu genoeg van het implementatie-, vertaal-, test- en reviewwerk kunnen doen, waardoor het niet langer de doorslaggevende factor is die het in 2020 was.

React Native-apps kunnen snel zijn, en die van ons zijn dat ook. We maken deze wijziging omdat agents de voordelen van een gedeelde implementatie hebben verminderd, terwijl de voordelen van het bouwen voor elk platform behouden blijven. Native houdt ons dichter bij de platformmogelijkheden en first-party tooling, met minder framework- en afhankelijkheidslagen tussen onze code en het platform.

De toekomst van onze open-source React Native-libraries

Voordat we ingaan op hoe we migreren, willen we ervoor zorgen dat we deze transitie netjes uitvoeren. Vanaf het begin wilden we bijdragen aan React Native om het beter te maken. We hebben open-source libraries gepubliceerd die de topkeuze zijn geworden in hun respectievelijke categorieën. We zijn dankbaar voor de geweldige ontvangst vanuit de community en we zetten ons in voor een soepele overgang zonder verrassingen.

React Native Skia

Shopify blijft dit sponsoren tot het einde van 2026, en William Candillon zal daarna doorgaan met het werk. Hij zal de repo in de komende maanden forken en de library onder een nieuwe naam publiceren. De originele repo zal worden gearchiveerd zodra deze transitie is voltooid. We zullen updates plaatsen zodat iedereen voldoende tijd heeft om te migreren. Als uw app afhankelijk is van deze library, overweeg dan om deze te sponsoren.

FlashList

Deze library heeft ongeveer 2 miljoen downloads per week en is de standaardmanier geworden om high-performance lijsten in React Native te renderen. Gezien het belang voor het ecosysteem, zal Shopify kritieke problemen die de compatibiliteit verbreken, blijven oplossen. We zijn momenteel in gesprek met verschillende bedrijven over het overnemen van het beheer van FlashList op de lange termijn.

Restyle

Restyle heeft een kleinere gebruikersgroep dan onze andere libraries, dus we archiveren deze repo. We houden het werkend tot het einde van 2026 en stoppen daarna met het onderhoud. Iedereen is welkom om het te forken en verder te brengen; we helpen graag bij de overdracht als een team dit wil oppakken.

Hoe we migreren

Shopify heeft verschillende grote apps (Shopify, Shop, Point of Sale, Inbox). Miljoenen handelaren en kopers over de hele wereld vertrouwen hier dagelijks op.

We hebben gedebatteerd tussen een geleidelijke migratie naar native (brownfield) of het volledig vanaf nul herbouwen (greenfield). In het verleden, toen we naar React Native migreerden, kozen we voor de brownfield-aanpak voor sommige van onze grootste apps, omdat het jaren zou duren om ze te herschrijven en we nieuwe functies zouden moeten stopzetten tijdens het proces.

Deze keer was greenfield echter de overduidelijke winnaar om de volgende redenen:

  • LLM's zijn goed in het bouwen van functies in Swift en Kotlin door de React Native-versie als referentie te gebruiken.
  • Het geeft ons een schone lei om op de best mogelijke manier herbouw te werken, zonder eerdere beperkingen.
  • Onze prototypes toonden aan dat we deze apps aanzienlijk sneller konden herbouwen dan mogelijk was vóór de komst van coding agents.

De Shop-app is de eerste die wordt gemigreerd. Met behulp van AI was het team in staat om in slechts 12 weken van een proof of concept naar een volledig herbouwde native app in de app stores te gaan. De migratie van de Shopify-app (onze grootste, met meer dan 300 schermen, widgets voor het start- en vergrendelscherm, Apple Watch-app, complications, Siri Shortcuts, etc.) is ook gaande en zal later dit jaar worden uitgerold. De rest van onze apps volgen spoedig.

Het voorkomen van 'slop'

Het is verleidelijk om een LLM simpelweg naar de React Native-codebase te wijzen en te proberen in één keer dezelfde functies in native te genereren, maar dat werkt niet. Zelfs als je vraagt om eerst alle informatie te verzamelen, dit te fixeren in specificaties en taakbestanden en het dan te implementeren, eindig je met een enorme hoeveelheid ononderhoudelijke code die niet verscheept kan worden.

Om dit probleem op te lossen, hebben we een systeem gebouwd genaamd Helix, dat een geleidelijkere aanpak hanteert. Het verwacht niet dat de eerste output direct correct is, en bouwt een loop waarin een imperfecte poging simpelweg niet verder kan gaan totdat het een goed resultaat is.

De ontwikkelaar wijst Helix naar een scherm. Helix leest de React Native-code en stelt een reeks checkpoints voor (kleine, geordende stukken werk) die in enkele minuten kunnen worden gereviewd. Vervolgens bouwt het, checkpoint per checkpoint: elk onderdeel moet zijn gedrag bewijzen met tests, overeenkomen met de draaiende app in een visuele review, twee kritische code-reviewers overleven en een menselijke goedkeuring krijgen voordat het wordt gecommited en het volgende onderdeel start. Feedback van elke review wordt onthouden, waardoor de loop autonomer wordt naarmate de migratie vordert.

Het mogelijk maken van snelle feedbackloops

De agentische controle over simulators was een bottleneck. We merkten dat we ze constant in de gaten moesten houden omdat ze niet betrouwbaar konden bouwen, testen en itereren. We bouwden tooling om agents in staat te stellen bugs autonoom te reproduceren, op te lossen en te verifiëren, maar dit was traag en fragiel. React Native's hot module reload helpt, maar lost het probleem niet op omdat simulatorcontrole traag is. Dit komt primair door de afhankelijkheid van de toegankelijkheidsboom (accessibility tree) of screenshots om de staat van de app te bepalen, acties uit te voeren en resultaten te verifiëren. Agents kunnen code-wijzigingen in seconden maken, maar het duurt minuten om de output te testen.

We lossen dit op door onze app-architectuur zo te ontwerpen dat deze werkt voor zowel mensen als agents. Het kernprincipe is dat de bedrijfslogica volledig moet zijn ontkoppeld van de UI en headless op de desktop moet kunnen draaien. We maken dit beschikbaar voor agents via een CLI, waardoor ze in milliseconden in plaats van minuten kunnen itereren zonder simulators te betrekken.

De CLI stelt agents in staat om de staat van de app te inspecteren, tussen verschillende secties te navigeren en acties uit te voeren zonder de UI aan te raken. Dit maakt extreem snelle feedbackloops mogelijk en stelt agents in staat om urenlang autonoom te werken. Wanneer simulator-interactie nodig is, kan de CLI verbinden via een remote-modus en de UI aansturen via commando's, zonder de layout of de toegankelijkheidsboom te hoeven inspecteren. Dit zorgt voor razendsnelle prestaties en E2E-tests.

Wat volgt

We gaan al onze mobiele apps migreren naar Swift en Kotlin, waarbij AI gedurende het hele proces wordt ingezet. Shop is al verscheept als volledig native app, de Shopify-app is in uitvoering en de rest volgt snel. We bewegen ons snel, maar niet door de lat lager te leggen. Elke herbouw moet voldoen aan of beter zijn dan de prestaties, stabiliteit, toegankelijkheid en productkwaliteit die mensen vandaag verwachten. Dit zijn niet simpelweg dezelfde apps herschreven in andere talen; we bouwen ze zo om dat zowel mensen als agents ze snel kunnen begrijpen, testen en wijzigen.

De migratie is niet de finishlijn. Succes betekent dat onze teams betere ervaringen voor handelaren en kopers sneller kunnen leveren dan voorheen. We zullen dat meten via product-snelheid, app-kwaliteit en de hoeveelheid werk die agents autonoom kunnen voltooien.

We zullen delen wat we onderweg leren, inclusief diepere analyses van Helix, onze agent-adresseerbare architectuur en hoe we mobiele apps bouwen met agents. We waren open over wat we leerden van React Native, en we zijn van plan net zo open te zijn over deze transitie.

Dit is een van de meest ambitieuze mobile engineering-projecten die we ooit zijn aangegaan.

Dankwoord

Native is nu de juiste keuze voor Shopify, maar React Native was de juiste keuze voor Shopify in 2020. Dat succes was alleen mogelijk dankzij de mensen die het hebben laten werken.

Meta Bedankt aan het React Native-team bij Meta voor het uitmuntend beheren van het framework, het luisteren naar onze feedback en de nauwe samenwerking door de jaren heen. React Native is aanzienlijk beter geworden dankzij jullie investeringen in architectuur, prestaties, tooling en community.

William Candillon Bedankt voor het creëren van React Native Skia en het verder brengen ervan dan we ooit hadden gedacht. Je hebt hergedefinieerd wat mogelijk is voor graphics en animatie in React Native.

Software Mansion Bedankt voor al jullie werk aan Reanimated, voor het luisteren naar onze feedback en voor het helpen oplossen van enkele van de moeilijkste animatie- en prestatieproblemen in onze apps.

Shopify-engineers Honderden engineers hebben bijgedragen aan de adoptie van React Native, het migreren van onze apps, het bouwen van gedeelde fundamenten, het verbeteren van prestaties en het bijdragen aan het ecosysteem. Velen van jullie zijn opnieuw een beginner geworden, hebben langgekoesterde aannames uitgedaagd en de transitie succesvol gemaakt terwijl ze bleven leveren voor handelaren en kopers. Dank jullie wel.

De React Native-community Bedankt aan iedereen die onze open-source libraries heeft gebruikt, code heeft bijgedragen, problemen heeft gemeld, onze beslissingen heeft uitgedaagd en heeft gedeeld wat ze hebben geleerd. Jullie bijdragen en feedback, inclusief de pittige varianten, hebben ons werk beter gemaakt.