JavaScript: základy jazyka, React Native a vývoj mobilních aplikací

Co je JavaScript?

JavaScript (JS) — vysokoúrovňový programovací jazyk s dynamickým typováním, prototypovou dědičností a funkcemi jako objekty první třídy. Vytvořen Brendanem Eichem v roce 1995 za 10 dní. Je jedním ze tří hlavních jazyků webových technologií (HTML, CSS, JS) a základem serverové platformy Node.js (2009), která umožnila JS vystoupit mimo prohlížeč.

V mobilním vývoji je JavaScript používán ve třech paradigmatech: nativní kompilace (React Native s Hermes/JSC), WebView kontejnery (Ionic, Cordova) a serverový JS (Node.js + Express pro backend mobilních aplikací). React Native — dominantní technologie: podle Statista (2025) používá 38%跨platformních projektů React Native, zaostávající pouze za Flutterem (46%).

Klíčová vlastnost JavaScriptu — jednovláknový model provádění s neblokujícím I/O. Event loop umožňuje zpracovávat tisíce asynchronních operací v jednom vlákně bez vytváření vláken OS. To činí JS efektivním pro I/O náročné aplikace (síťové požadavky, práce s databází), ale vyžaduje opatrnost při CPU-intenzivních výpočtech.

Standardy JavaScriptu: ES5, ES6, ES2025

Standard ECMAScript (ES) definuje specifikaci JavaScriptu. ES6 (2015) zavedl let/const, arrow funkce, třídy, moduly, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Moderní enginy Hermes (React Native) a V8 (Node.js) podporují ES2022+. React Native Hermes podporuje ES2020+ s určitými omezeními na Proxy a Symbol.

Syntaxe JavaScriptu: typy, funkce a prototypy

Syntaxe JavaScriptu — podobná C, dynamicky typovaná. Typ proměnné je určen hodnotou a může se změnit za běhu. let a const (ES6) nahradily var pro blokovou viditelnost. Primitivní typy: string, number, boolean, null, undefined, symbol, bigint. Vše ostatní je objekt (object, array, function, date, regexp).

Funkce jako objekty první třídy

JavaScript — jazyk s funkcemi vyššího řádu. Funkce lze přiřazovat proměnným, předávat jako argumenty, vracet z jiných funkcí. Arrow funkce (=>) nemají vlastní this — dědí this z vnějšího kontextu. Uzávěr (closure) — funkce, která si pamatuje proměnné z rozsahu, ve kterém byla vytvořena.

// Datové typy a funkce v JavaScriptu
// Primitivní typy
const name = 'React Native';
let version = 0.71;
var isActive = true; // zastaralý var

// Objekty a pole
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// Funkce vyššího řádu
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Uzávěr (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// Spread operátor pro kopírování objektů
const newApp = { ...app, version: 16 };

Spread operátor ... vytváří mělkou kopii objektu. Destrukturalizace (const { platform, version } = app) extrahuje pole do proměnných. Arrow funkce ve filterByVersion je kratší než function výraz a nevytváří vlastní this — to je kritické v React Native komponentách, kde this odkazuje na třídu komponenty.

Prototypová dědičnost

JavaScript používá prototypovou dědičnost, nikoli třídní jako Java nebo C#. Třídy (ES6) — syntaktický cukr nad prototypy. Každý objekt má interní odkaz [[Prototype]] na jiný objekt. Při přístupu k vlastnosti, která v objektu neexistuje, JS ji hledá v řetězci prototypů. Třídní syntaxe (extends, super) činí kód čitelnějším, ale pod kapotou zůstávají prototypy.

// Třídy v JavaScriptu — syntaktický cukr
class PlatformService {
  // Soukromé pole (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // Statická metoda
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // Getter
  get info() {
    return `${this.name} SDK`;
  }

  // Asynchronní metoda
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// Dědičnost
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Soukromá pole #apiKey (ES2022) zajišťují skutečnou enkapsulaci, nedosažitelnou s _underscore konvencemi. Statická metoda getPlatforms patří třídě, nikoli instanci. Getter info se vypočítá při přístupu. async/await činí asynchronní kód lineárním. React Native Hermes podporuje soukromá pole od verze 0.71.

Asynchronnost v JavaScriptu: Event Loop a Promise

Asynchronnost JavaScriptu je založena na event loop — nekonečné smyčce, která kontroluje zásobník volání (call stack) a fronty úkolů. Call stack — synchronní kód, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop bere úkoly nejprve z microtask, poté z macrotask. Blokování call stack (nekonečná smyčka) zastaví celé UI.

Promise — objekt představující budoucí hodnotu. Promise může být pending (čekající), fulfilled (úspěch), rejected (chyba). Řetězec .then().catch().finally() zpracovává asynchronní výsledek. async/await (ES8) — syntaktický cukr: funkce async vrací Promise, await pozastaví provádění do vyřešení promise, aniž by blokoval vlákno.

// Asynchronní načítání dat v React Native
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('Fetch failed:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

Hook useEffect s async funkcí fetchUser provádí HTTP požadavek při montování komponenty. Příznak cancelled zabraňuje setState po odmontování — běžný problém v React Native. Optional Chaining user?.name a Nullish Coalescing ?? zpracovávají undefined bez chyb. ActivityIndicator se zobrazuje během načítání — asynchronní vzor známý každému JS vývojáři.

React Native: JavaScript na mobilních platformách

React Native — framework od Meta (Facebook) pro vytváření nativních mobilních aplikací v JavaScriptu. Na rozdíl od přístupu WebView, React Native renderuje skutečné nativní komponenty (UIView pro iOS, ViewGroup pro Android). JS kód je prováděn v odděleném vlákně (Hermes nebo JSC) a komunikuje s nativním UI vláknem přes Bridge (stará architektura) nebo JSI (nová architektura Fabric).

Architektura React Native

React Native se skládá z JS vlákna (váš kód), nativního vlákna (UI) a Bridge/JSI pro jejich interakci. Ve staré architektuře (Bridge) jsou JSON zprávy serializovány a přenášeny asynchronně — to vytváří zpoždění při rychlých animacích. Nová architektura Fabric (React Native 0.68+) používá JSI (JavaScript Interface) — přímou interakci JS s C++ objekty bez serializace.

// React Native komponenta s nativním API
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

Komponenta LocationTracker demonstruje práci s nativním API geolokace. Platform.OS rozlišuje Android a iOS. PermissionsAndroid.request — nativní dialog oprávnění Androidu. Geolocation.getCurrentPosition — modul @react-native-community/geolocation, připojený přes npm. React Native poskytuje JS rozhraní pro kameru, Bluetooth, akcelerometr a další senzory.

Ionic a Cordova: WebView kontejnery

Ionic — framework pro hybridní mobilní aplikace, který používá WebView pro rendering HTML/CSS/JS. Na rozdíl od React Native, Ionic nevytváří nativní komponenty — aplikace běží uvnitř webového kontejneru (WebView) na iOS (WKWebView) a Androidu (Android WebView). To poskytuje 100% znovupoužití webového kódu, ale omezuje výkon složitých animací.

Apache Cordova — základ Ionicu, poskytující přístup k nativním API přes JavaScriptové pluginy. Kamera, GPS, kontakty, souborový systém — vše dostupné přes cordova-plugin-*. Ionic 7+ používá Capacitor — nástupce Cordovy s lepším výkonem, podporou ESM a přímým přístupem k iOS/Android SDK přes Swift a Kotlin.

Nástroje vývojáře JavaScriptu

Nástroje JS vývojáře pro mobilní aplikace zahrnují Node.js, npm/yarn, Expo, React Native CLI a Metro bundler. Node.js — běhové prostředí JS mimo prohlížeč, základ ekosystému. npm (Node Package Manager) — správce balíčků s 2+ miliony knihoven. npx — nástroj pro spouštění npm balíčků bez instalace.

Ekosystém nástrojů

Expo — vrstva nad React Native, zjednodušující vývoj: nevyžaduje Xcode/Android Studio pro začátek, poskytuje Managed Workflow s předinstalovanými knihovnami. Expo Application Services (EAS) — sestavení a publikování v cloudu. Metro — bundler React Native, shromažďující JS kód a závislosti do jednoho souboru. Hermes — JS engine od Meta, optimalizovaný pro mobilní zařízení s AOT kompilací.

// package.json — konfigurace projektu React Native
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

Soubor package.json — základ každého JS projektu. Skripty start, android, ios spouštějí Metro bundler a sestavení. Závislosti jsou rozděleny na dependencies (runtime) a devDependencies (testy, lintery). React Navigation — standardní router. Jest — framework pro testování. ESLint — statický analyzátor, kontrolující styl kódu a potenciální chyby.