Memo · From the keyboard
Vega. First boot,
Vega. First boot,
on our own code.
The same login screen we shipped to Web and Android TV — now rendering on the Vega dev kit. Two days and nights fighting the Metro resolver to pipe it in: Vega's SDK, node_modules topology, and Kepler SDK resolution all diverge from our defaults.
Where
Berlin office
When
2024
Cost
2 engineers, 2 days, 2 nights
{icon}
{title}
{items.map((it, i) => (
{it.icon}
{it.text}
))}
One test suite, every platform.
{/* The problem */}
{''} Playwright-style tests▼
Universal System
Test Framework
Test Framework
▼
WebWebDriver
Android TVAppium
Apple TVAppium
VegaAppium
Shared fixtures & helpers
Write the test once. Route execution per platform. Keep differences inside helpers.
The Product.
Zattoo is a streaming company, and we make streaming easy, on whatever device or technology you bring.
![The Zattoo product across TV, tablet, phone, laptop, and speaker]({"assets/product-hero-cropped.jpg"})
In practice
Meeting people in the moments they live
Bigscreen
Mobile
Automotive
Anywhere
{moments.map((m, i) => (
))}
{m.title} {m.body}
{items.map((d, i) => (
);
return (
{d.el}
))}
{d.name}
Niche expertise
We ship to every screen that can stream media.
Most of our viewing lives in the living room.
Mobile
Bigscreen
Complexity
Three platforms, multiplied
into hundreds of apps to ship.
Platforms · 3
Apple
Android
Web
Clients · multiple
tvOS, iOS
Android TV, Android Mobile, FireOS TV, STB, Tablets
Chrome, Safari, Firefox, webOS, Tizen, VIDAA, Panasonic…
Tenants · dozens
Zattoo
1&1
Waoo
Salt
+ many more (white-label)
Every new platform multiplied our effort
instead of extending it.
?
);
default: return null;
}
};
const rows = ['Existing app', 'App Logic', 'Tests', 'Own tech', 'Own team'];
const fireRows = ['New app', 'To build', 'To build', 'Own tech', 'To define'];
const platforms = [
{ kind: 'apple', name: 'Apple' },
{ kind: 'android', name: 'Android' },
{ kind: 'web', name: 'Web' },
{ kind: 'tv', name: 'Smart TV' },
];
// Chip color per row (matches reference: existing=green, logic/tests=red, tech/team=blue)
const rowColors = [
{ bg: 'rgba(46,160,67,0.18)', text: '#7ee08a', dot: '#3fb950' }, // Existing app
{ bg: 'rgba(248,81,73,0.16)', text: '#ff8d85', dot: null }, // App Logic
{ bg: 'rgba(248,81,73,0.16)', text: '#ff8d85', dot: null }, // Tests
{ bg: 'rgba(88,166,255,0.18)', text: '#9ec5ff', dot: null }, // Own tech
{ bg: 'rgba(88,166,255,0.18)', text: '#9ec5ff', dot: null }, // Own team
];
const fireRowColors = [
{ bg: 'rgba(217,119,87,0.20)', text: '#ffb58a', dot: 'var(--z-accent-primary)' }, // New app (orange)
{ bg: 'transparent', border: '1px dashed rgba(217,119,87,0.55)', text: 'rgba(217,119,87,0.92)' },
{ bg: 'transparent', border: '1px dashed rgba(217,119,87,0.55)', text: 'rgba(217,119,87,0.92)' },
{ bg: 'rgba(88,166,255,0.18)', text: '#9ec5ff' },
{ bg: 'rgba(88,166,255,0.18)', text: '#9ec5ff' },
];
const Chip = ({ label, color, icon }) => (
{icon}
{label}
);
const Check = ({ color }) => (
);
const Plus = ({ color }) => (
);
return (
Organisation
Platform-centric development: high duplication.
Each platform has its own app logic, tests, technology, and team.
{/* Bracket headers */}
{/* Platform columns */}
{/* Impact panel */}
Existing apps
Existing apps
New app to build
New app to build
{platforms.map((p, idx) => (
{p.name}
New Platform
A new platform adds another separate implementation, technology stack, and team ownership.
Impact
-
{[
'Repeated implementation',
'Slower delivery',
'Higher maintenance cost',
'New platform means more duplicated work',
'Coordination overhead',
].map((t, i) => (
- {t} ))}
15 people in a planning meeting just to align one feature. That was the cost of different "companies" trying to ship one product.
Failed attempts
PWA 2019–2020.
PWA looked like the future of cross-platform delivery, but it worked well only in selected cases.
{cards.map((c, i) => (
))}
{c.icon}
{c.title}
-
{c.bullets.map((b, bi) =>
- {b} )}
Failed attempts
Cross-platform candidates 2021 – 2022.
About a year or two after the PWA rollout, we started looking closely at cross-platform frameworks.
{candidates.map((c, i) => (
))}
{c.logo}
{c.name}
{c.meta}
-
{c.bullets.map((b, bi) =>
- {b} )}
{c.verdict}
Late 2022 · Berlin
An invitation from
Amazon called us in alongside a handful of streaming developers to a demo at their Berlin office. They laid out the vision. Mind-blowing.
The shift
Away from Android-based Fire OS
The new platform
Vega on Linux & C++ native layer
The framework
React Native is primary UI framework, bundled into the OS
Aftermath
React Native: SWOT.
Honest reflection on strength, weakness, opportunities and threats.
{quadrants.map((q, i) => (
))}
{q.icon}
{q.title}
-
{q.items.map((t, ti) =>
- {t} )}
Partnership
Some saw a chance to build for Amazon.
We saw a chance to build with them.
The partnership gave us a platform we could grow into. The technology underneath was exactly what we needed — across Apple, Android, and Web too.
For Amazon
We earned the invitation.
Engaged early adopters, giving real feedback as Amazon built the operating system. Active community members on the React-Native-for-TV side. And a known product already in the Fire TV app portfolio.
For us
Vega became the starting point for multiplatform.
Fire TV is the biggest chunk of our German viewers. The same foundation we’d build for Vega could carry across our whole stack.
Connecting the dots
One team is only one team
when it ships one codebase.
Otherwise it's just engineers sitting in the same channel, still shipping three different apps.
The squeeze
Strategic importance was clear,
but the roadmap was full,
and engineering capacity was already allocated.
February 2023
One engineer. Two sprints. Our existing codebase.
We proceeded with the suggestion — narrow on purpose. Time-boxed so it wouldn’t compete with ongoing work.
-
One engineer
Someone who had never written a line of React Native. If they could get there, the rest of the team could too.
-
A couple of sprints
Time-boxed so it wouldn’t compete with ongoing work or commit headcount.
-
Existing codebase
Not a fresh project. Could our existing investment carry into this new world?
The slice
Login, navigation, playback. Targeting Android TV, tvOS, and Web — built by someone learning React Native as they went.
PoC · Two sprints · One engineer
It actually worked.
A small slice of the stream app — built in two sprints, running on Web and Android TV.
{screens.map((s, i) => (
))}
{s.label}
{s.caption}
Starting before ready · The real signal
Not just that we could build on RN.
That we could build on RN starting from where we already were.
✓ Carried over
API, session state, core business logic — the platform-agnostic layers
✓ Carried over
Web was easy. Android TV was quite easy.
— Stayed behind
Things tied to the web runtime — exactly as expected
April 2023
The new CTO called the front-end stack
"Resource Intensive Frontend."
The prototype turned into a CTO-level answer — UTV launched for real.
Migration · Technology · Monorepo
UTV started as just another project.
Existing apps stayed live and shipping the whole time. UTV piped into the same shared lib/ rather than growing its own copy.
{`monorepo/
├── lib/ `}{`shared config & business logic`}{`
└── projects/
├── app/ `}{`existing web app`}{`
├── tv-app/ `}{`existing TV app`}{`
├── ...
└── `}{`utv/`}{` `}{`new universal project`}{`
`}{`same lib/, no fork`}
Principle
Pipe in. Don’t fork.
Nothing already running had to change for UTV to begin. Migrations don’t have to mean reset.
What it bought us
- Existing projects kept shipping
- Shared lib stayed shared
- UTV could grow without freezing the org
Migration · The spine of the project
Build-time overrides — not runtime branches.
When something must differ per platform, the difference lives in a sibling file. The resolver picks the right one at bundle time.
{`ui/input-field/
├── `}index.jsx{` `}default{`
├── `}index.android.jsx{` `}bundled on Android{`
├── `}index.apple.jsx{` `}bundled on Apple{`
└── `}index.vega.jsx{` `}bundled on Vega
Resolution priority
- Platform-specific
- .native (any non-web)
- Universal .js
In practice
The wrong platform’s code isn’t just dead — it’s never loaded.
Migration · Native layer
Escape hatches, kept small.
{`projects/utv/
├── `}android/{` `}Android TV / Fire TV{`
│ ├── cast-connect/
│ ├── sso/
│ └── amazon-iap/
├── `}apple/{` `}tvOS{`
│ ├── Source/ `}TurboModules{`
│ └── TopShelfExtension/ `}tvOS Top Shelf{`
├── `}vega/{` `}Vega{`
│ ├── metro.config.js `}custom Metro{`
│ └── node_modules/ `}isolated Amazon SDK{`
└── `}web/{` `}Web{`
└── webpack.config.js`}
The bridge
A focused set of modules — different on each platform — bridging the universal JS layer to platform-specific capabilities.
Outcome
The entire Vega-specific surface lives in roughly one file — playback, wrapping Amazon’s video APIs. Everything else is shared.
Product look on migration.
We deliberately separated technical migration from product redesign: keep the Zattoo experience familiar, improve where it mattered, and preserve existing features.
{tiles.map((t, i) => (
))}
{t.icon}
{t.title}
{t.body}
{items.map((it, i) => (
);
}
// ─── S23i3 · Two teams + enabling (interim split) ─────────────────
function S23i3_TwoTeams() {
const dims = [
{label: 'Platform', color: 'rgba(232,74,107,0.10)'},
{label: 'Features', color: 'rgba(245,192,70,0.10)'},
{label: 'Video', color: 'rgba(232,74,107,0.10)'},
{label: 'Technology', color: 'rgba(102,214,203,0.10)'},
];
const teams = [
{name: 'Nova', color: TT_COLORS.stream, sub: 'Cross-functional'},
{name: 'Luna', color: TT_COLORS.stream, sub: 'Cross-functional'},
];
return (
{it.label}
))}
2024
Mitosis.
UTV split into two stream-aligned squads, Nova and Luna, supported by a Principal Engineers enabling team.
{dims.map((d, i) =>
{teams.map((t, i) => (
{d.label}
)}
{t.name}
{t.sub}
Principal
engineers
engineers
Enabling team
2023
Humble Start.
One team handled platform, feature, video, and technology together — no specialisation yet.
{dims.map((d, i) =>
{d.label}
)}
UTV Team
Cross-functional team
2025
Scale & Learn.
Balance device complexity, feature parity, functional excellence, and scalability.
{rows.map((r, i) => (
))}
{r.tag}
{r.shapes.map((s, si) => (
{s.kind === 'pill' && {s.label}}
{s.kind === 'diamond' && {s.label}}
{s.kind === 'rect' && {s.label}}
{s.sub}
))}
Principal
engineers
engineers
Enabling team
2026
As of today.
Clear ownership and interfaces lead to operational efficiency.
{streams.map((s, i) => (
))}
{s.label}
{s.team}
Stream-aligned
{s.items.map((it, ii) => (
{it}
))}
Platform
{chapters.map((c, i) => (
{c}
Complicated subsystem
))}
{platform.map((p, i) => {p})}
Technology
Frontend Technology Chapter
Platform team
{frontend.map((p, i) => {p})}
Principal
Engineers
Team
Engineers
Team
Enabling team
2023 → 2025
The journey.
The organisation evolved step by step: start small, add expertise, scale with mentorship and platform support, then align teams to product domains.
{stages.map((s, i) => (
))}
{s.date}
{s.title}
{s.body}
TEAM
TOPOLOGIES
Organizing
business and
technology
teams for
fast flow
business and
technology
teams for
fast flow
Foreword by
RUTH
MALAN
RUTH
MALAN
MATTHEW SKELTON
and MANUEL PAIS
and MANUEL PAIS
Team Topologies.
Team Topologies offers a strategic framework for modern organisational design, helping software teams improve flow, clarity, and delivery.
Source
Skelton, M. & Pais, M., Team Topologies — Organizing Business and Technology Teams for Fast Flow, IT Revolution Press, 2019.
Transforming the organisation.
We chose to transform our org and operating model building UTV while still supporting the native apps.
{tiles.map((t, i) => (
))}
{t.icon}
{t.title}
{t.body}
The migration was not only a technology shift, it was an organisational transformation: keep the people, grow the skills, and carry both worlds until the new one was ready.
Some improvements we couldn't resist.
Migration kept the UX familiar — but a few pain points were too painful to leave alone. Typing a password on a TV remote was one of them.
Typing on a TV remote was painful, so we hung an exit door on the screen.
→
Scan the QR code, finish recovery on your phone. Done in seconds.
Beta users share their experiences.
69.4% same or better
vs
30.6% worse
Representative beta feedback grouped into positive, neutral, and negative themes.
{quotes.map((q, i) => (
{q.text}
))}
Migration · Architecture
Organised by domain, not by platform.
{`src/
├── `}app/{` `}store, nav, focus, i18n{`
├── `}commercial/{` `}auth, IAP, restrictions{`
├── `}discovery/{` `}EPG, VOD, search{`
├── `}playback/{` `}player, stream mgmt{`
├── `}watch/{` `}live, replay, OSD{`
├── `}user/{` `}settings, recordings{`
└── `}ui/{` `}shared components
Same shape on
{['Android', 'Apple', 'Vega', 'Web'].map(p => (
{p}
))}
Conway’s Law
“Any organisation that designs a system will produce a design whose structure is a copy of the organisation’s communication structure.”
— Melvin E. Conway, 1968
The code mirrors the org — so we organised the code by domain to let the org reshape around it.
{children}
);
return (
Organisation
End-to-End Ownership.
Move from platform-based feature ownership to clear ownership in end-to-end teams.
{/* Current model */}
{/* Arrow */}
{/* Bottom callout */}
Current model
{currentRows.map((r) => (
| {r.q} |
{platforms.map((p, i) => (
{r.label} |
))}
))}
{platforms.map((p) => (
{p.icon}
))}
{p.name}
Same features are owned separately by each platform team
Unclear ownership and higher cognitive load
→
{/* Target model */}
Target model
{[0, 1, 2].map((row) => (
targetCols.map((col, i) => {
const v = col.features[row];
if (v === 'New' && row === 2) {
return
New
;
}
return {v}
;
})
))}
{targetCols.map((c) => (
{c.team.split(' ').map((word, idx) => (
{word}{idx === 0 ?
: null}{' '}
))}
))}
: null}{' '}
Features are owned by end-to-end teams across all platforms
Clear ownership and lower cognitive load
End-to-end teams own a feature domain across all platforms, reducing duplication and making ownership clear.
Migration · An unexpected outcome
Vega and Web are closer than they look.
Both render JS directly
Vega via Hermes + Fabric onto a Linux/C++ surface. Web via react-native-web to the DOM. Neither passes through a native view system.
The headache lives elsewhere
On Android and Apple, where the native view bridges need more care. Abstract first, override only where you must stops being a discipline and becomes the natural shape of the work.
What we learned · The verdict
The bet paid off.
{stats.map((s, i) => (
))}
{s.num}
{s.label}
The surprise
Native surface ended up small enough that a single engineer can keep all of it in their head.
Product
Product learnings.
The win is that we can now move faster.
{cols.map((c, i) => (
))}
{c.icon}
{c.title}
{c.items.map((it, ii) => (
{it}
))}
The product win was not dramatic change for customers — it was stability, consistency, and the ability to move faster afterward.
{n}
);
return (
{t}
{d}
In hindsight
Three decisions we’d defend without hesitation.
The architecture decisions that reduced long-term complexity were worth it. Next time, we would strengthen the foundations earlier.
{worked.map((it, i) =>
{harder.map((it, i) =>
What we learned · A pattern
RN treats "iOS" and "Android" as the world. They aren’t — they’re slices.
Apple is iOS plus tvOS, watchOS, visionOS. Android is phones plus TV, automotive, Fire OS, Vega. Step off the mobile path and you’re on your own.
Apple beyond iOS
No first-class RN core support. tvOS lives in the community react-native-tvos fork.
Android beyond mobile
Ships, but TV-specific concerns — focus management, remote-control input, leanback — aren’t owned by the framework.
Beyond either
Web via community react-native-web. Vega via Amazon’s Kepler SDK. Neither sits in RN’s mental model.
Room to widen the conversation from "iOS and Android" to "Apple, Android, Web, Vega" — as platforms.
Production reality
From vision to operational reality.
What began as Amazon’s mysterious invitation has become Zattoo’s operational reality.
Sep 2025 · Live
Android TV
First RN production app.
Oct 2025 · Live
Amazon Vega
Pilot-partner commitment fulfilled.
Apr 2026 · Live
Amazon Fire OS
Existing Fire TV install base.
Jun 2026 · Beta
Apple tvOS
Plus active dev: Samsung, LG, Panasonic, Vidaa.
Fall 2026 · In dev
Web TV
webOS, Tizen, Vidaa.
Next
Web & Mobile
Responsive strategy.
The 80% rule
Not aiming for 100% reuse between big screen and mobile. 80% shared, 20% platform-specific where UX demands it. Pragmatic over pure.
Continuous evolution
The squad+chapter model evolves as our platform footprint grows. Annual review of org design.
Our story, told by Amazon
Success story.
Featured as a case study on the Vega Developer Portal.
