JavaScript: βασικές αρχές γλώσσας, React Native και ανάπτυξη εφαρμογών για κινητά

Τι είναι η JavaScript;

JavaScript (JS) — γλώσσα προγραμματισμού υψηλού επιπέδου με δυναμική τυποποίηση, πρωτοτυπική κληρονομικότητα και συναρτήσεις ως αντικείμενα πρώτης τάξης. Δημιουργήθηκε από τον Brendan Eich το 1995 σε 10 ημέρες. Είναι μία από τις τρεις κύριες γλώσσες τεχνολογιών ιστού (HTML, CSS, JS) και η βάση της πλατφόρμας διακομιστή Node.js (2009), που επέτρεψε στην JS να βγει πέρα από το πρόγραμμα περιήγησης.

Στην ανάπτυξη για κινητά, η JavaScript χρησιμοποιείται σε τρία παραδείγματα: εγγενής μεταγλώττιση (React Native με Hermes/JSC), κοντέινερ WebView (Ionic, Cordova) και JS διακομιστή (Node.js + Express για backend εφαρμογών κινητών). React Native — η κυρίαρχη τεχνολογία: σύμφωνα με τη Statista (2025), το 38% των跨πλατφορμικών έργων χρησιμοποιούν React Native, υπολειπόμενο μόνο του Flutter (46%).

Το βασικό χαρακτηριστικό της JavaScript — το μοντέλο εκτέλεσης μονού νήματος με μη αποκλειστική είσοδο-έξοδο. Το event loop επιτρέπει την επεξεργασία χιλιάδων ασύγχρονων λειτουργιών σε ένα νήμα χωρίς δημιουργία νημάτων λειτουργικού συστήματος. Αυτό καθιστά την JS αποδοτική για εφαρμογές με έντονη I/O (αιτήματα δικτύου, εργασία με βάσεις δεδομένων), αλλά απαιτεί προσοχή σε υπολογισμούς έντασης CPU.

Πρότυπα JavaScript: ES5, ES6, ES2025

Πρότυπο ECMAScript (ES) καθορίζει την προδιαγραφή της JavaScript. Το ES6 (2015) εισήγαγε let/const, συναρτήσεις βέλους, κλάσεις, ενότητες, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Οι σύγχρονες μηχανές Hermes (React Native) και V8 (Node.js) υποστηρίζουν ES2022+. Το React Native Hermes υποστηρίζει ES2020+ με ξεχωριστούς περιορισμούς στα Proxy και Symbol.

Σύνταξη JavaScript: τύποι, συναρτήσεις και πρωτότυπα

Σύνταξη JavaScript — παρόμοια με C, δυναμικά τυποποιημένη. Ο τύπος μεταβλητής καθορίζεται από την τιμή και μπορεί να αλλάξει κατά το runtime. Τα let και const (ES6) αντικατέστησαν το var για την εμβέλεια επιπέδου μπλοκ. Πρωτόγονοι τύποι: string, number, boolean, null, undefined, symbol, bigint. Οτιδήποτε άλλο είναι αντικείμενο (object, array, function, date, regexp).

Συναρτήσεις ως αντικείμενα πρώτης τάξης

JavaScript — γλώσσα με συναρτήσεις ανώτερης τάξης. Οι συναρτήσεις μπορούν να εκχωρηθούν σε μεταβλητές, να μεταβιβαστούν ως ορίσματα, να επιστραφούν από άλλες συναρτήσεις. Οι συναρτήσεις βέλους (=>) δεν έχουν δικό τους this — κληρονομούν το this από το εξωτερικό πλαίσιο. Το κλείσιμο (closure) — συνάρτηση που θυμάται μεταβλητές από το πεδίο ορατότητας όπου δημιουργήθηκε.

// Τύποι δεδομένων και συναρτήσεις στη JavaScript
// Πρωτόγονοι τύποι
const name = 'React Native';
let version = 0.71;
var isActive = true; // παρωχημένο var

// Αντικείμενα και πίνακες
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Συνάρτηση ανώτερης τάξης
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 για αντιγραφή αντικειμένων
const newApp = { ...app, version: 16 };

Ο τελεστής spread ... δημιουργεί ένα ρηχό αντίγραφο του αντικειμένου. Η αποδόμηση (const { platform, version } = app) εξάγει πεδία σε μεταβλητές. Η συνάρτηση βέλους στο filterByVersion είναι συντομότερη από την έκφραση function και δεν δημιουργεί δικό της this — αυτό είναι κρίσιμο σε στοιχεία React Native όπου το this αναφέρεται στην κλάση του στοιχείου.

Πρωτοτυπική κληρονομικότητα

JavaScript χρησιμοποιεί πρωτοτυπική κληρονομικότητα, όχι βασισμένη σε κλάσεις όπως η Java ή C#. Οι κλάσεις (ES6) — συντακτικό ζάχαρη πάνω από πρωτότυπα. Κάθε αντικείμενο έχει μια εσωτερική αναφορά [[Prototype]] σε άλλο αντικείμενο. Κατά την πρόσβαση σε ιδιότητα που δεν υπάρχει στο αντικείμενο, η JS την αναζητά στην αλυσίδα πρωτοτύπων. Η σύνταξη κλάσης (extends, super) κάνει τον κώδικα πιο ευανάγνωστο, αλλά κάτω από την επιφάνεια παραμένουν πρωτότυπα.

// Κλάσεις στη JavaScript — συντακτικό ζάχαρη
class PlatformService {
  // Ιδιωτικό πεδίο (ES2022)
  #apiKey;

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

  // Στατική μέθοδος
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Ασύγχρονη μέθοδος
  async initialize() {
    return await this.#validateKey();
  }

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

// Κληρονομικότητα
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Τα ιδιωτικά πεδία #apiKey (ES2022) παρέχουν πραγματική ενθυλάκωση, μη προσβάσιμη με συμβάσεις _underscore. Η στατική μέθοδος getPlatforms ανήκει στην κλάση, όχι στο στιγμιότυπο. Ο getter info υπολογίζεται κατά την πρόσβαση. Το async/await κάνει τον ασύγχρονο κώδικα γραμμικό. Το React Native Hermes υποστηρίζει ιδιωτικά πεδία από την έκδοση 0.71.

Ασυγχρονισμός στη JavaScript: Event Loop και Promise

Ασυγχρονισμός JavaScript βασίζεται στο event loop — έναν ατέρμονο βρόχο που ελέγχει τη στοίβα κλήσεων (call stack) και τις ουρές εργασιών. Call stack — σύγχρονος κώδικας, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Το event loop παίρνει εργασίες πρώτα από το microtask, στη συνέχεια από το macrotask. Το μπλοκάρισμα του call stack (ατέρμονος βρόχος) σταματά ολόκληρο το UI.

Promise — αντικείμενο που αντιπροσωπεύει μια μελλοντική τιμή. Το Promise μπορεί να είναι pending (αναμονή), fulfilled (επιτυχία), rejected (σφάλμα). Η αλυσίδα .then().catch().finally() επεξεργάζεται το ασύγχρονο αποτέλεσμα. Το async/await (ES8) — συντακτικό ζάχαρη: η συνάρτηση async επιστρέφει Promise, το await αναστέλλει την εκτέλεση έως ότου επιλυθεί το promise, χωρίς να μπλοκάρει το νήμα.

// Ασύγχρονη φόρτωση δεδομένων στο 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 με την async συνάρτηση fetchUser εκτελεί αίτημα HTTP κατά την τοποθέτηση του στοιχείου. Η σημαία cancelled αποτρέπει το setState μετά την αποτοποθέτηση — κοινό πρόβλημα στο React Native. Το Optional Chaining user?.name και Nullish Coalescing ?? διαχειρίζονται undefined χωρίς σφάλματα. Το ActivityIndicator εμφανίζεται κατά τη φόρτωση — ασύγχρονο μοτίβο γνωστό σε κάθε προγραμματιστή JS.

React Native: JavaScript σε πλατφόρμες κινητών

React Native — πλαίσιο από τη Meta (Facebook) για δημιουργία εγγενών εφαρμογών κινητών σε JavaScript. Σε αντίθεση με την προσέγγιση WebView, το React Native αποδίδει πραγματικά εγγενή στοιχεία (UIView για iOS, ViewGroup για Android). Ο κώδικας JS εκτελείται σε ξεχωριστό νήμα (Hermes ή JSC) και επικοινωνεί με το εγγενές νήμα UI μέσω Bridge (παλιά αρχιτεκτονική) ή JSI (νέα αρχιτεκτονική Fabric).

Αρχιτεκτονική React Native

Το React Native αποτελείται από νήμα JS (ο κώδικάς σας), εγγενές νήμα (UI) και Bridge/JSI για την αλληλεπίδρασή τους. Στην παλιά αρχιτεκτονική (Bridge) τα μηνύματα JSON σειριοποιούνται και μεταδίδονται ασύγχρονα — αυτό δημιουργεί καθυστερήσεις σε γρήγορα κινούμενα σχέδια. Η νέα αρχιτεκτονική Fabric (React Native 0.68+) χρησιμοποιεί JSI (JavaScript Interface) — άμεση αλληλεπίδραση JS με αντικείμενα C++ χωρίς σειριοποίηση.

// Στοιχείο React 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>
  );
}

Το στοιχείο LocationTracker παρουσιάζει την εργασία με το εγγενές API γεωτοποθεσίας. Το Platform.OS διακρίνει Android και iOS. Το PermissionsAndroid.request — το εγγενές παράθυρο διαλόγου αδειών Android. Το Geolocation.getCurrentPosition — η ενότητα @react-native-community/geolocation, που συνδέεται μέσω npm. Το React Native παρέχει διεπαφές JS για κάμερα, Bluetooth, επιταχυνσιόμετρο και άλλους αισθητήρες.

Ionic και Cordova: κοντέινερ WebView

Ionic — πλαίσιο για υβριδικές εφαρμογές κινητών, που χρησιμοποιεί WebView για απόδοση HTML/CSS/JS. Σε αντίθεση με το React Native, το Ionic δεν δημιουργεί εγγενή στοιχεία — η εφαρμογή λειτουργεί μέσα σε ένα κοντέινερ ιστού (WebView) σε iOS (WKWebView) και Android (Android WebView). Αυτό δίνει 100% επαναχρησιμοποίηση κώδικα ιστού, αλλά περιορίζει την απόδοση σύνθετων κινούμενων σχεδίων.

Apache Cordova — η βάση του Ionic, που παρέχει πρόσβαση σε εγγενή API μέσω προσθηκών JavaScript. Κάμερα, GPS, επαφές, σύστημα αρχείων — όλα προσβάσιμα μέσω cordova-plugin-*. Το Ionic 7+ χρησιμοποιεί Capacitor — τον διάδοχο του Cordova με καλύτερη απόδοση, υποστήριξη ESM και άμεση πρόσβαση σε iOS/Android SDK μέσω Swift και Kotlin.

Εργαλεία προγραμματιστή JavaScript

Εργαλεία προγραμματιστή JS για εφαρμογές κινητών περιλαμβάνουν Node.js, npm/yarn, Expo, React Native CLI και Metro bundler. Node.js — περιβάλλον εκτέλεσης JS εκτός προγράμματος περιήγησης, βάση του οικοσυστήματος. npm (Node Package Manager) — διαχειριστής πακέτων με 2+ εκατομμύρια βιβλιοθήκες. npx — βοηθητικό πρόγραμμα για εκτέλεση πακέτων npm χωρίς εγκατάσταση.

Οικοσύστημα εργαλείων

Expo — ένα στρώμα πάνω από το React Native που απλοποιεί την ανάπτυξη: δεν απαιτεί Xcode/Android Studio για να ξεκινήσει, παρέχει Managed Workflow με προεγκατεστημένες βιβλιοθήκες. Expo Application Services (EAS) — δημιουργία και δημοσίευση στο cloud. Metro — ο bundler του React Native, που συλλέγει κώδικα JS και εξαρτήσεις σε ένα αρχείο. Hermes — η μηχανή JS από τη Meta, βελτιστοποιημένη για κινητές συσκευές με μεταγλώττιση AOT.

// package.json — διαμόρφωση έργου 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"
  }
}

Το αρχείο package.json — η βάση κάθε έργου JS. Τα σενάρια start, android, ios εκκινούν τον bundler Metro και τη δημιουργία. Οι εξαρτήσεις χωρίζονται σε dependencies (runtime) και devDependencies (δοκιμές, linters). React Navigation — τυπικός δρομολογητής. Jest — πλαίσιο δοκιμών. ESLint — στατικός αναλυτής, που ελέγχει το στυλ κώδικα και πιθανά σφάλματα.