Multiplatformní vývoj - Web, iOS i Android z jednotného vývojového prostředí

React Native

React Native framework od Meta (Facebook) umožňuje vytvářet nativní mobilní aplikace pomocí technologií známých z webového prostředí – Reactu a JavaScriptu (nebo TypeScriptu). Cílem je psát většinu logiky a komponent jednou a nasadit je na iOS, Android i web.

Základní myšlenkou React Native je využít stejné Reactové paradigma (komponenty, stav, JSX)k tvorbě nativních rozhraní. Místo HTML se používají univerzální komponenty jako <View>, <Text> nebo <Image>, které jsou při kompilaci mapovány na skutečné nativní UI prvky každé platformy.

🧩 Architektura

React Native běží ve dvou hlavních vláknech:

• JavaScript Thread – vykonává aplikační logiku a React komponenty,
• Native Thread – obsluhuje skutečné UI a nativní API.

Mezi nimi probíhá komunikace přes JSI / Fabric (od verze 0.73) + TurboModules, které zajišťuje synchronizaci mezi React stromy a nativními views. Díky tomu se zachovává nativní výkon a přístup k platformním API, i když aplikační logika běží v JavaScriptu.

🌐 React Native Web a Next.js

Pomocí knihovny react-native-web lze stejný kód používat i pro web. Komponenty jako <View> nebo <Text> jsou mapovány na standardní HTML elementy (<div>, <span> apod.), takže se aplikace chová jako klasický React web.

Pro plnohodnotné webové nasazení se React Native Web často kombinuje s frameworkem Next.js, který přidává:

• SSR (Server-Side Rendering) – generování HTML na serveru pro SEO a rychlé načtení,
• Routing – systém stránek (pages/ nebo app/ router),
• Optimalizaci výkonu – lazy loading, image optimization, cache revalidaci, apod.

Tato kombinace umožňuje vyvíjet projekt, kde se o UI komponenty stará React Native, logika se sdílí mezi mobilními i webovými verzemi a Next.js zajišťuje SEO-ready webový rendering.

📦 Struktura projektu

/src/
├── components/       ← sdílené UI komponenty (React Native)
├── screens/          ← logika jednotlivých obrazovek
├── hooks/            ← sdílené React hooky
├── app/              ← Next.js App Router (pro web)
├── android/          ← Android nativní projekt
├── ios/              ← iOS nativní projekt
└── package.json      ← společné závislosti (React, RN, Next.js)

Typická kombinace pro multiplatformní projekt dnes bývá:

• React Native – mobilní aplikace (Android, iOS)
• React Native Web + Next.js – webová verze (SSR, SEO)
• Expo / React Native CLI – build nástroje pro vývoj a nasazení

Tato kombinace umožňuje sdílet až 90 % kódu mezi webem a mobilem při zachování nativního uživatelského zážitku. React Native je tak ideální pro projekty, které chtějí jednotný React stack, vysokou flexibilitu a efektivní multiplatformní vývoj.

Kotlin Multiplatform

Kotlin je jazyk, který se prostřednictvím Kotlin compiler (kotlinc) překládá do několika jazyků / architektur:

Kotlin Multiplatform (KMP) je tool navržený tak, aby sdílel business logiku, datové modely, API klienty a utilitní kód mezi platformami Android, iOS, Web a Desktop. Vývojář si poté určuje, co se má sdílet a co má být platform-specific.

/shared         ← společná logika (Kotlin Common code)
/androidApp     ← Android UI (Compose)
/iosApp         ← iOS UI (SwiftUI)

🌐 Kotlin a Web

Kotlin Multiplatform umí dodat logiku na web, ovšem "neumí" web vykreslit (neposkytuje webové UI frameworky) – UI se musí dělat zvlášť.

• Kotlin/JS - Kotlin/JS překládá Kotlin kód do JavaScriptu (ES5/ES6). Pro tvorbu webového UI je možné využít React wrappers (kotlin-wrappers), které umožňují psát React komponenty v Kotlinu. Nicméně, používá se málo (většina vývojářů zůstává u TS/JS).
• Jetpack Compose for Web - JetBrains (tvůrce Kotlin) rozšiřuje Jetpack Compose pro web, kdy vykreslení webu funguje podobně jako Flutter Web – všechno se renderuje do Canvasu (WebGL), ne do DOMu. Zatím jde o experimentální, neplnohodnotné, řešení pro produkční weby.

Flutter

Flutter je open-source framework vyvíjený společností Google. Je postaven na jazyce Dart a umožňuje kompilaci do nativního ARM kódu pro mobilní zařízení i do JavaScriptu pro web.

Flutter používá vlastní renderovací engine (Skia), který zajišťuje, že aplikace vypadá a chová se stejně na všech platformách. Namísto využívání nativních UI komponent (jako u React Native nebo MAUI) Flutter vykresluje každý pixel sám – texty, tlačítka, animace i layout.

🌐 Flutter a Web

Při cílení na web Flutter nepoužívá HTML ani DOM. Celé uživatelské rozhraní se renderuje do jednoho <canvas> prvku, kde je pomocí CanvasKit (WebGL) vykreslován obsah. Prohlížeč tedy nevidí žádný HTML text, pouze výsledný obraz aplikace.

📦 Struktura projektu

/lib              ← hlavní Dart kód (společný)
/web              ← webové entry pointy (main.dart.js)
/android, /ios    ← platform-specific konfigurace
/assets           ← obrázky, fonty, statické zdroje

Jedním kódem tak lze vytvořit aplikaci pro mobilní zařízení, desktop i web. Flutter je ideální volbou pro startupy a projekty, které potřebují rychle vyvíjet vizuálně jednotné a interaktivní aplikace napříč platformami, bez nutnosti psát nativní kód pro každou platformu zvlášť.

.NET MAUI

.NET MAUI (Multi-platform App UI) je framework vyvíjený společností Microsoft jako nástupce Xamarin.Forms. Umožňuje vytvářet nativní aplikace pro iOS, Android, Windows a macOS pomocí jazyka C# a frameworku .NET z jediné codebase.

MAUI sjednocuje přístup k nativním API a komponentám napříč platformami. Pro tvorbu uživatelského rozhraní používá jazyk XAML (deklarativní popis UI) nebo čistý C#. K dispozici je i Blazor Hybrid, který umožňuje kombinovat nativní logiku a webové rozhraní v jedné aplikaci.

🌐 MAUI a Web (Blazor)

Pro webové aplikace využívá MAUI technologii Blazor, která může běžet ve dvou režimech:

• Blazor Server – HTML se generuje na serveru (podporuje SSR), UI se aktualizuje přes SignalR spojení.
• Blazor WebAssembly – kód běží kompletně v prohlížeči, renderuje do DOMu, ale bez SSR (využívá client-side rendering).

📦 Struktura projektu

/MauiProgram.cs    ← inicializace aplikace
/MainPage.xaml      ← definice UI v XAML
/Platforms/
├── Android       ← konkrétní nastavení pro Android
├── iOS           ← konkrétní nastavení pro iOS
└── Windows       ← WinUI projekt
/wwwroot/          ← Blazor HTML a statické soubory

.NET MAUI je vhodné zejména pro vývojáře, kteří již znají ekosystém .NET a chtějí vytvářet multiplatformní aplikace z jediného prostředí. Přináší silnou integraci s Visual Studio, jednotné API pro nativní komponenty a možnost kombinovat C# logiku s webovým rozhraním pomocí Blazoru.

Unity

Unity je multiplatformní herní engine, který umožňuje vytvářet 3D i 2D aplikace pro široké spektrum platforem — od mobilních zařízení přes web až po VR a AR. Primárním jazykem je C# a logika se kompiluje do nativního kódu pomocí IL2CPP (Intermediate Language to C++).

Unity poskytuje vlastní renderovací engine, fyzikální simulaci, animace, UI systém a pokročilé nástroje pro vizuální efekty. Aplikace jsou kompilovány do nativního kódu, díky čemuž poskytují vysoký výkon, ale také vyšší nároky na hardware a velikost výsledných buildů.

🌐 Unity a Web (WebGL export)

Při exportu na web Unity převádí projekt do WebAssembly a JavaScript loaderu, který inicializuje běhové prostředí v prohlížeči. Veškeré vykreslování probíhá přes <canvas> element a WebGL, takže obsah není založen na HTML elementech, ale na rasterizovaném výstupu. Tento přístup poskytuje vysoký výkon, ale bez možnosti SEO a SSR.

📦 Struktura projektu

/Assets/           ← herní scény, modely, skripty (C#)
/ProjectSettings/   ← konfigurace projektu
/Packages/          ← knihovny a moduly Unity
/Builds/            ← exportované buildy (např. WebGL, Android, Windows)

Unity je ideální volbou pro hry, simulace, VR/AR projekty nebointeraktivní vizualizace, kde je klíčový výkon a vizuální kvalita. Pro klasické webové aplikace ale není vhodné, protože nepoužívá HTML DOM a neumožňuje SSR ani SEO optimalizaci.

Výkonové srovnání

Výkon aplikace ovlivňuje několik faktorů – způsob vykonávání kódu, technologie pro renderování uživatelského rozhraní a to, kde probíhá zpracování dat. Každý framework přistupuje k těmto oblastem jinak. Zatímco React Native používá běhové prostředí JavaScriptu a propojuje se s nativními komponentami přesJSI (JavaScript Interface),Flutter i Kotlin Multiplatform překládají kód přímo do nativních binárek.

⚙️ Obecné principy výkonu

Webové aplikace běží uvnitř prohlížeče v sandboxovaném prostředí, které je omezené bezpečnostními pravidly a strukturou DOMu (Document Object Model). Výkon je zde závislý na efektivitě JavaScriptového enginu a prohlížeče.

Naproti tomu nativní aplikace (včetně React Native, Flutter nebo Kotlin Multiplatform) běží přímo v prostředí operačního systému a mají přístup k nativním vláknům, GPU a systémovým rozhraním. To umožňuje efektivnější využití hardwaru a zajišťuje plynulejší animace, rychlejší odezvu a stabilní FPS.

🌐 Výkon v prohlížeči (web)

Při běhu v prohlížeči jsou všechny technologie omezeny stejným základem – JavaScriptovým enginem (V8, SpiderMonkey, WebKit) a strukturou DOM. Každá změna v rozhraní znamená manipulaci s HTML elementy, což je náročné na CPU i paměť. Frameworky jako Flutter či React Native pro web tento problém obcházejí tím, že renderují do Canvas nebo WebAssembly místo DOMu.

➡️ Na webu je největším limitem DOM a JavaScript runtime. Každý re-render nebo animace prochází vrstvou interpretace a bezpečnostních kontrol. Technologie, které používají Canvas nebo WebAssembly (např. Flutter Web), mají díky tomu vyšší FPS a nižší latenci.

📱 Výkon v aplikaci (nativní běh)

Při spuštění jako nativní aplikace už žádný prohlížeč ani DOM neexistuje. Kód běží v prostředí operačního systému (Android, iOS, Windows, macOS) a komunikuje přímo s GPU. React Native používá Hermes VM a JSI pro propojení JavaScriptu s nativními API, Flutter využívá Skia engine a Dart runtime pro přímé vykreslení, a Kotlin Multiplatform kompiluje do LLVM / JVM bytecode.

➡️ Všechny frameworky vykreslují přímo do GPU nebo nativní vrstvy systému. Výkon je srovnatelný s nativními aplikacemi – nejlépe si vedou Flutter (vlastní rendering engine) a Kotlin Multiplatform (přímý nativní kód). React Native se díky nové architektuře (JSI + Fabric) výkonnostně přibližuje nativním řešením.

🔬 Proč je výkon rozdílný

• DOM overhead (web): Každý vizuální prvek je HTML element s vlastním stromem stylů a událostí. Manipulace s DOMem je největší brzda výkonu.
• Sandbox prohlížeče: JavaScript nemá přímý přístup k systému ani GPU – musí vše řešit přes API prohlížeče.
• Nativní rendering (app): Frameworky jako React Native, Flutter nebo Kotlin vykreslují přímo na GPU, bez prostředníků.
• Multithreading: Nativní runtime může běžet na více vláknech, zatímco web běží převážně jednovláknově (Main Thread + Web Workers).
• Hermes, JSI, Skia: Nové runtime vrstvy (React Native Hermes, Flutter Skia) minimalizují overhead a maximalizují FPS.

⚡ Výkon logiky a zpracování dat

Výkon samotného vykreslení je jen část příběhu. V moderních aplikacích často většinu práce dělá server – výpočty, AI modely, filtrování a agregace dat. Klient pak slouží především jako vizualizační vrstva. Rozdíly ve výkonu se proto nejvíce projeví v rychlosti renderování a odezvě uživatelského rozhraní, nikoli ve výpočetní logice.

💡 Kde probíhá zpracování dat

Moderní architektura aplikací odděluje zpracování dat od prezentace. Ať už jde o React Native, Flutter nebo Kotlin, ve většině případů je ideální provádět veškeré výpočty, AI logiku a transformace dat na serveru, a na klienta posílat už jen hotová nebo agregovaná data. Tím se dosáhne konzistentního výkonu napříč platformami.

🚀 Proč zpracovávat data na serveru

• 💾 Konzistentní výkon – nezáleží na výkonu uživatelského zařízení.
• 🔐 Bezpečnost – citlivé výpočty a AI modely nejsou distribuovány klientům.
• ⚙️ Jednodušší aktualizace logiky – měníš backend, nepublikuješ nové buildy.
• 📊 Predikovatelné výsledky – stejný výpočetní model pro všechny platformy.
• ⚡ Rychlejší UX – klient jen vizualizuje data, nepočítá je.

🧠 Server-driven architektura

Moderní přístup označovaný jako Server-driven UI posouvá hranici mezi frontendem a backendem – server nejen poskytuje data, ale i informace o tom, jak je má klient zobrazit. To umožňuje dynamicky měnit vzhled nebo strukturu rozhraní bez nutnosti aktualizovat aplikaci.

[ Databáze / AI Modely ]
			↓
[ Backend API (Next.js / Node.js) ]
			↓
🔄 GraphQL / REST / WebSocket
			↓
[ React Native / Flutter / Web klient ]
			↓
Prezentace dat (grafy, texty, chaty)

Tento model se v praxi osvědčuje zejména u datových a AI aplikací, kde klienty (mobilní i webové) pouze interpretují výsledky z backendu. Výkon i bezpečnost tak zůstávají plně pod kontrolou serveru.

🧩 Shrnutí

Přístup k hardwaru a systémovým datům

Schopnost aplikace pracovat s nativními senzory, úložišti a daty systémuje zásadní rozdíl mezi webovou aplikací a nativním řešením. Zatímco web je omezen bezpečnostním sandboxem prohlížeče, nativní aplikace (React Native, Flutter, Kotlin Multiplatform nebo .NET MAUI) mají přímý přístup k rozhraním systému a mohou využívat kamery, GPS, Bluetooth, biometrické senzory či lokální databáze.

🌐 Webové aplikace

Webové aplikace jsou provozovány v sandboxovaném prostředí prohlížeče, které z bezpečnostních důvodů omezí přímý přístup k systémovým zdrojům. Přístup je umožněn jen k vybraným rozhraním přes tzv. Web API. Tato API poskytují standardizovaný, ale omezený přístup k některým funkcím zařízení.

Webové technologie tedy pokrývají základní interakce, ale nemají přístup k systémovým datům jiných aplikacíani k chráněným rozhraním, jako jsou zdravotní údaje, kontakty nebo senzorické přístroje (např. gyroskop, HRM, NFC). Tyto možnosti jsou dostupné až z nativní vrstvy.

📱 Nativní aplikace (React Native, Flutter, Kotlin, .NET MAUI)

Nativní aplikace běží mimo sandbox prohlížeče a mají přímý přístup k Native API dané platformy. Všechny multiplatformní frameworky zprostředkovávají tento přístup buď přímo (Flutter, Kotlin), nebo pomocí bridge vrstev (React Native, .NET MAUI).

Tyto frameworky tedy dokážou nabídnout plnohodnotný přístup ke komponentám zařízení – od kamer a mikrofonu až po přímou integraci s Apple Health, Google Fit nebo senzory v chytrých hodinkách. React Native využívá pro propojení JSI (JavaScript Interface), Flutter komunikuje přímo přes MethodChannels, a Kotlin Multiplatform sdílí nativní API mezi platformami pomocí expect/actual konstrukcí.

🧠 Bezpečnost a oprávnění

Každá interakce s hardwarem podléhá oprávněním uživatele. Webová aplikace musí žádat o povolení (např. přístup ke kameře), ale prohlížeč tato oprávnění striktně hlídá a odepírá dlouhodobé přístupy. Naproti tomu nativní aplikace může žádat o trvalé oprávnění (např. sledování polohy na pozadí), což je zásadní pro funkce jako notifikace, fitness tracking nebo IoT senzory.

🧩 Shrnutí