Trendyol’s Seller Center is a React Native platform where sellers manage products, orders, stores, and finances. As the organization grew, multiple teams sharing a large codebase and pipeline faced different development and testing practices, unclear ownership, and difficulty isolating changes.
React Native MicroApp Architecture
Speakers
Dilara Kırnapcı, a software developer on Trendyol’s Seller Center Mobile Core team, and Batuhan Tozun, an engineering team lead on its Seller Center Web Core team, explain their micro-app architecture at React Native EU 2022.
The architecture divides the application into a core app and team-owned micro-apps. The core app contains the Android and iOS projects, native libraries, and entry point; it loads micro-apps from a config file. Micro-apps contain JavaScript business logic and UI, and use the core as a dependency.
Each micro-app exports items such as navigation stacks, tabs, deep links, components, and methods through a `microapp.js` contract. The core collects the routing structure, and micro-apps can access one another’s exported methods through the core. Shared components and utilities are published as npm packages, while core-provided debug builds let teams develop alongside other modules; Dilara reports iOS app load time dropping from over a minute to under 10 seconds.
Each micro-app has a separate Jest and React Native Testing Library environment. Dilara compares almost 350 seconds to run tests in the monolithic app with almost 50 seconds for the account app. Teams run tests in a pipeline, mark modules ready for testing or deployment, build the main application with selected modules, and distribute it for internal review or store beta testing before QA smoke tests and release.
Trendyol had 15 product teams, with JavaScript developers building features using shared infrastructure APIs. A platform team maintained the infrastructure while product teams focused on features. Dilara says the approach sped up development cycles and made builds and tests faster.
Takeaways
- Give each team clear ownership of a bounded module and its development process.
- Keep native capabilities and shared infrastructure in a core platform so feature teams can work in JavaScript.
- Use explicit module contracts for routing and cross-module methods.
- Run tests per module to shorten feedback loops; the account app’s tests took almost 50 seconds versus almost 350 seconds for the monolith.
- Let teams validate modules together in a composed app before beta distribution and release.
Mentioned in this talk
Search inside this talk
What was claimed 15
- role atDilara Kırnapcı is software developer, Seller Center Mobile Core team at Trendyol
“I have been a member of the Seller Center Mobile Core team.”
YouTube Unverified1 source· Talk
- works atDilara Kırnapcı works at Trendyol
“I have been working at Trendyol as a software developer for a year.”
YouTube Unverified1 source· Talk
- role atBatuhan Tozun is engineering team lead, Seller Center Web Core team at Trendyol
“I am an engineering team lead on the Seller Center Web Core team.”
YouTube Unverified1 source· Talk
- works atBatuhan Tozun works at Trendyol
“I have been working at Trendyol for about five years.”
YouTube Unverified1 source· Talk
- featureTrendyol: Seller Center lets sellers track products and finances and manage products, orders, and stores.
“With Seller Center, our sellers can track information on dashboards ... and manage their products, orders, and stores.”
YouTube Unverified1 source· Talk
- builtSeller Center built React Native
“Seller Center is a big platform ... written with React Native.”
YouTube Unverified1 source· Talk
- feature
Core: Entry point that loads micro-apps from a config file and provides shared native infrastructure.
“The core application is the app's entry point ... It loads and runs micro-apps from a config file.”
YouTube Unverified1 source· Talk
- uses
“We use React Navigation for routing in the application.”
YouTube Unverified1 source· Talk
- metricMicro-app architecture: IOS app load time is less than 10 seconds, compared with more than a minute for the monolithic application.
“The monolithic application's load time takes more than a minute ... the time takes less than 10 seconds.”
YouTube Unverified1 source· Talk
- integrates withMicro-app architecture integrates with
“It communicates with the core application through this file.”
YouTube Unverified1 source· Talk
- uses
“We use CodePush for deployment.”
YouTube Unverified1 source· Talk
- metricMicro-app architecture: Monolithic test run takes almost 350 seconds; the account application test run takes almost 50 seconds.
“Running test cases in our monolithic application takes almost 350 seconds ... for the account application almost 50 seconds.”
YouTube Unverified1 source· Talk
- uses
“For testing, we use Jest and React Native Testing Library.”
YouTube Unverified1 source· Talk
- uses
“For testing, we use Jest and React Native Testing Library.”
YouTube Unverified1 source· Talk
- metricTrendyol: 15 product teams
“We have 15 product teams with many developers.”
YouTube Unverified1 source· Talk
