JavaScript: mga batayan ng wika, React Native at pagpapaunlad ng mobile app

Ano ang JavaScript?

JavaScript (JS) — isang high-level programming language na may dynamic typing, prototypal inheritance, at functions bilang first-class objects. Nilikha ni Brendan Eich noong 1995 sa loob ng 10 araw. Ito ay isa sa tatlong pangunahing wika ng web technologies (HTML, CSS, JS) at batayan ng server platform Node.js (2009), na nagpapahintulot sa JS na lumabas lampas sa browser.

Sa mobile development, ang JavaScript ay ginagamit sa tatlong paradigms: native compilation (React Native na may Hermes/JSC), WebView containers (Ionic, Cordova) at server JS (Node.js + Express para sa backend ng mobile apps). Ang React Native — ang dominanteng teknolohiya: ayon sa Statista (2025), 38% ng cross-platform projects ay gumagamit ng React Native, pumapangalawa lamang sa Flutter (46%).

Ang pangunahing katangian ng JavaScript — single-thread execution model na may non-blocking I/O. Ang event loop ay nagpapahintulot sa pagproseso ng libu-libong asynchronous operations sa isang thread nang hindi lumilikha ng OS threads. Ginagawa nitong mahusay ang JS para sa I/O-intensive applications (network requests, database work), ngunit nangangailangan ng pag-iingat sa CPU-intensive computations.

Mga pamantayan ng JavaScript: ES5, ES6, ES2025

Pamantayan ng ECMAScript (ES) ay tumutukoy sa specification ng JavaScript. Ipinakilala ng ES6 (2015) ang let/const, arrow functions, classes, modules, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Ang mga modernong engine na Hermes (React Native) at V8 (Node.js) ay sumusuporta sa ES2022+. Ang React Native Hermes ay sumusuporta sa ES2020+ na may mga limitasyon sa Proxy at Symbol.

Syntax ng JavaScript: mga uri, function at prototypes

Syntax ng JavaScript — parang C, dynamic na naka-type. Ang uri ng variable ay natutukoy ng halaga at maaaring magbago sa runtime. Ang let at const (ES6) ay pumalit sa var para sa block-level scope. Mga primitive na uri: string, number, boolean, null, undefined, symbol, bigint. Lahat ng iba pa ay object (object, array, function, date, regexp).

Function bilang first-class objects

JavaScript — isang wika na may higher-order functions. Ang mga function ay maaaring italaga sa variables, ipasa bilang arguments, ibalik mula sa iba pang function. Ang mga arrow function (=>) ay walang sariling this — minamana nila ang this mula sa panlabas na konteksto. Ang closure — isang function na naaalala ang mga variable mula sa scope kung saan ito nilikha.

// Mga uri ng data at function sa JavaScript
// Mga primitive na uri
const name = 'React Native';
let version = 0.71;
var isActive = true; // lumang var

// Mga object at array
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Higher-order function
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Closure
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Spread operator para sa pagkopya ng mga object
const newApp = { ...app, version: 16 };

Ang spread operator ... ay lumilikha ng isang shallow copy ng object. Ang destructuring (const { platform, version } = app) ay kumukuha ng mga field papunta sa variables. Ang arrow function sa filterByVersion ay mas maikli kaysa sa function expression at hindi lumilikha ng sariling this — ito ay kritikal sa React Native components kung saan ang this ay tumutukoy sa class ng component.

Prototypal inheritance

JavaScript ay gumagamit ng prototypal inheritance, hindi class-based tulad ng Java o C#. Ang mga class (ES6) — syntactic sugar sa ibabaw ng prototypes. Ang bawat object ay may internal [[Prototype]] reference sa ibang object. Kapag ina-access ang property na wala sa object, hinahanap ito ng JS sa prototype chain. Ang class syntax (extends, super) ay nagpapabasa ng code, ngunit sa ilalim ay nananatili ang prototypes.

// Mga class sa JavaScript — syntactic sugar
class PlatformService {
  // Pribadong field (ES2022)
  #apiKey;

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

  // Static method
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Asynchronous method
  async initialize() {
    return await this.#validateKey();
  }

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

// Inheritance
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Ang mga private field #apiKey (ES2022) ay nagbibigay ng tunay na encapsulation, hindi maaabot gamit ang _underscore conventions. Ang static method na getPlatforms ay kabilang sa class, hindi sa instance. Ang getter info ay kinakalkula kapag ina-access. Ang async/await ay ginagawang linear ang asynchronous code. Ang React Native Hermes ay sumusuporta sa private fields mula bersyon 0.71.

Asynchrony sa JavaScript: Event Loop at Promise

Asynchrony ng JavaScript ay batay sa event loop — isang walang katapusang loop na sumusuri sa call stack at task queues. Call stack — synchronous code, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Ang event loop ay kumukuha ng mga task mula sa microtask muna, pagkatapos mula sa macrotask. Ang pag-block ng call stack (walang katapusang loop) ay humihinto sa buong UI.

Promise — isang object na kumakatawan sa isang future value. Ang Promise ay maaaring pending (naghihintay), fulfilled (tagumpay), rejected (error). Ang chain na .then().catch().finally() ay nagpoproseso ng asynchronous na resulta. Ang async/await (ES8) — syntactic sugar: ang async function ay nagbabalik ng Promise, ang await ay nagsususpindi ng execution hanggang sa ma-resolve ang promise, nang hindi nagba-block ng thread.

// Asynchronous na pag-load ng data sa 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>
  );
}

Ang useEffect hook na may async function na fetchUser ay nagsasagawa ng HTTP request kapag nagmo-mount ang component. Ang cancelled flag ay pumipigil sa setState pagkatapos mag-unmount — isang karaniwang problema sa React Native. Ang Optional Chaining user?.name at Nullish Coalescing ?? ay humahawak ng undefined nang walang error. Ang ActivityIndicator ay ipinapakita habang naglo-load — isang asynchronous pattern na pamilyar sa bawat JS developer.

React Native: JavaScript sa mga mobile platform

React Native — isang framework mula sa Meta (Facebook) para sa paggawa ng native mobile apps sa JavaScript. Hindi tulad ng WebView approach, ang React Native ay nagre-render ng tunay na native components (UIView para sa iOS, ViewGroup para sa Android). Ang JS code ay isinasagawa sa isang hiwalay na thread (Hermes o JSC) at nakikipag-usap sa native UI thread sa pamamagitan ng Bridge (lumang architecture) o JSI (bagong Fabric architecture).

Arkitektura ng React Native

React Native ay binubuo ng JS thread (iyong code), native thread (UI) at Bridge/JSI para sa kanilang interaksyon. Sa lumang architecture (Bridge) ang JSON messages ay ise-serialize at ipinapadala nang asynchronous — ito ay lumilikha ng mga pagkaantala sa mabilis na mga animation. Ang bagong Fabric architecture (React Native 0.68+) ay gumagamit ng JSI (JavaScript Interface) — direktang interaksyon ng JS sa C++ objects nang walang serialization.

// React Native component na may native 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>
  );
}

Ang component na LocationTracker ay nagpapakita ng paggawa gamit ang native geolocation API. Ang Platform.OS ay nag-iiba ng Android at iOS. Ang PermissionsAndroid.request — ang native permission dialog ng Android. Ang Geolocation.getCurrentPosition — ang module na @react-native-community/geolocation, na ikinokonekta sa pamamagitan ng npm. Ang React Native ay nagbibigay ng JS interfaces para sa camera, Bluetooth, accelerometer at iba pang sensor.

Ionic at Cordova: mga WebView container

Ionic — isang framework para sa hybrid mobile apps, na gumagamit ng WebView para sa rendering ng HTML/CSS/JS. Hindi tulad ng React Native, ang Ionic ay hindi lumilikha ng native components — ang app ay tumatakbo sa loob ng isang web container (WebView) sa iOS (WKWebView) at Android (Android WebView). Ito ay nagbibigay ng 100% reusability ng web code, ngunit nililimitahan ang performance ng mga kumplikadong animation.

Apache Cordova — ang batayan ng Ionic, na nagbibigay ng access sa native APIs sa pamamagitan ng JavaScript plugins. Camera, GPS, contacts, file system — lahat ay accessible sa pamamagitan ng cordova-plugin-*. Ang Ionic 7+ ay gumagamit ng Capacitor — ang kahalili ng Cordova na may mas mahusay na performance, suporta sa ESM at direktang access sa iOS/Android SDK sa pamamagitan ng Swift at Kotlin.

Mga tool ng JavaScript developer

Mga tool ng JS developer para sa mobile apps ay kinabibilangan ng Node.js, npm/yarn, Expo, React Native CLI at Metro bundler. Node.js — JS runtime environment sa labas ng browser, batayan ng ecosystem. npm (Node Package Manager) — package manager na may 2+ milyong libraries. npx — utility para sa pagpapatakbo ng npm packages nang walang pag-install.

Ecosystem ng mga tool

Expo — isang layer sa ibabaw ng React Native na nagpapasimple ng development: hindi nangangailangan ng Xcode/Android Studio para magsimula, nagbibigay ng Managed Workflow na may pre-installed na libraries. Expo Application Services (EAS) — pagbuo at pag-publish sa cloud. Metro — ang bundler ng React Native, na nagtitipon ng JS code at dependencies sa isang file. Hermes — JS engine mula sa Meta, na-optimize para sa mobile devices na may AOT compilation.

// package.json — configuration ng React Native project
{
  "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"
  }
}

Ang file na package.json — ang batayan ng bawat JS project. Ang mga script na start, android, ios ay nagpapatakbo ng Metro bundler at build. Ang dependencies ay nahahati sa dependencies (runtime) at devDependencies (tests, linters). React Navigation — standard router. Jest — testing framework. ESLint — static analyzer na sumusuri ng code style at potensyal na error.