Képzeld el, hogy egyetlen programozási nyelvet tanulsz meg, és ezzel a tudással képes leszel weboldalakat építeni, szervereket üzemeltetni, mobil alkalmazásokat fejleszteni, sőt – és itt jön az igazán izgalmas rész – teljes értékű asztali alkalmazásokat is létrehozni, legyen szó Windowsról, macOS-ről vagy akár Linuxról.

Ez nem túlzás – ez JavaScript. :)

Ha azon gondolkodsz, hogy pályát válts, és a programozás felé kacsintasz – különösen a frontend vagy a fullstack webfejlesztés irányába –, akkor jó hírem van; a JavaScript nem csupán egy nyelv a sok közül. Ez az a nyelv, amely az elmúlt három évtizedben a böngészők apró szkript nyelvéből a szoftverfejlesztés egyik leg univerzálisabb eszközévé nőtte ki magát. És mi a legjobb az egészben? A tanulási görbe eleje kifejezetten barátságos, a közösség hatalmas és segítőkész, a lehetőségek pedig szinte végtelenek.

Ebben a cikkben bejárjuk a JavaScript világát – az alapoktól egészen a meglepő magasságokig, és megtudjuk, hogy a weboldalak programozásán túl, még milyen lehetőségeket rejt magába.

Az alapok – Mi is az a JavaScript?

A JavaScript 1995-ben született mindössze tíz nap alatt, Brendan Eich keze által. Eredeti célja szerény volt: egy kis dinamizmust vinni a korabeli statikus weboldalakba. Egy gomb, amire rákattintasz, és történik valami. Egy űrlap, amely ellenőrzi a beviteli adatokat. Egy kép, amely megjelenik, ha egy adott elem fölé viszed az egeret. Felugró, eltűnő, majd újra megjelenő tartalmak kezelése. Események vezérlése, mint amilyen az egérrel való kattintás az oldal egy területén.

A nyelv könnyen tanulható, nem kell fordítót telepítened, nem kell bonyolult fejlesztői környezetet konfigurálnod. Elég egy böngésző, egy szövegszerkesztő, és már írhatod is az első kódsoraidat. A szintaxisa a C-családból merít, de jóval elnézőbb a kezdőkkel. Nem kell típusokat deklarálnod, nem kell memóriát kezelned, nem kell fordítási hibákkal küzdened, mire az első „Hello, World!"-öd megjelenik a képernyőn.

Ám a könnyű belépés megtévesztő lehet, ugyanis a JavaScript mögött egy rendkívül robusztus, eseményvezérelt, prototípus-alapú nyelv áll, amely a modern fejlesztés szinte minden szegletében jelen van.

Webfejlesztés és a DOM – A varázslat kezdete

Amikor megnyitsz egy weboldalt, a böngésző felépít egy úgynevezett DOM-ot (Document Object Model) – ez lényegében a HTML-dokumentum fa struktúrájú, programozható reprezentációja. A JavaScript pedig az az eszköz, amellyel ezt a fát dinamikussá, "élővé" teheted. Csomópontokat adhatsz hozzá, törölhetsz, módosíthatsz, stílusokat változtathatsz, eseményeket kezelhetsz.

Ez az a pont, ahol a frontend fejlesztés igazán izgalmassá válik. Egy egyszerű document.querySelector('.gomb').addEventListener('click', ...) sorral életre kelthetsz egy felületet. Animációkat készíthetsz, adatokat tölthetsz be a háttérben az oldal-újratöltése nélkül; Interaktív űrlapokat építhetsz. A DOM-manipuláció a frontend alapja, és a JavaScript az egyetlen nyelv, amelyet minden böngésző natívan ért. Kezdetben a JavaScript mellett a böngészők, több script nyelvvel is próbálkoztak, mint például a VBScript, (Egy, a Visual Basic programozási nyelv alapjaira épülő Script nyelv) ám végül a Javascript győzött, kiszorítva, a többi próbálkozást, ezért nincs versenytársa ebben a szegmensben.

Az internet és weboldalak terjedésének köszönhetően, és annak, hogy az emberek online töltött ideje egyre csak nőtt, megszületett az igény, hogy a dinamikus weboldalkon túl, a honlapok alkalmazás jellegű szolgáltatásokat is nyújtsanak, ami magával vonta a Javascript fejlődését.

SPA – Az alkalmazásélmény a böngészőben

A 2010-es évek elején forradalom indult. Megjelentek az egyoldalas alkalmazások, azaz az SPA-k (Single Page Application). A gondolat egyszerű, de zseniális. Ahelyett, hogy minden kattintásnál a szerver új HTML-oldalt generálna le és küldene a böngészőnek, a JavaScript helyben „rajzolja újra" a felületet. Az eredmény? Gyors, fluid, alkalmazásszerű élmény – mintha nem is egy weboldalon lennél. (Lásd például a Google docs alkalmazásait, a Figmát, vagy akár a Discordot. )

Ezek megvalósításához, és a fejlesztések hatékonyabbá és karban tarthatóbbá tételéhez, olyan keretrendszereket hoztak létre – mint a React, a Vue, az Angular, a Svelte, vagy akár az Alpine – amelyek mind JavaScript-re (vagy annak szupertípusaira, például TypeScriptre) épülnek. A React komponens-alapú gondolkodásmódja, a Vue elegáns reaktivitása, az Angular vállalati szintű struktúrája mind azt mutatja, hogy a JavaScript ökoszisztéma mennyire sokszínű és érett. Ezen keretrendszerek logikáival pedig olyan elegáns tervezési minták születtek meg, melyek segítségével akár magunk is tervezhetünk, és írhatunk saját elegáns, könnyed és villámgyors keretrendszereket.

A JavaScript viszont ennél is több. Túlmutat a böngészők zárt ökoszisztémáján.

Backend – Node.js és a szerver oldali JavaScript

2009-ben Ryan Dahl bemutatta a Node.js-t, és ezzel a JavaScript kilépett a böngésző börtönéből. A Node.js a Chrome V8 motorjára építve lehetővé tette, hogy JavaScript kódot futtass a szerveren, vagyis egy számítógépen, ami eddig a pontig, csak a böngészőkön keresztül, egy weboldalba ágyazva volt lehetséges. Hirtelen nem kellett PHP-t, Pythont vagy Javát tanulni a backendhez – elég volt az a nyelv, amely ismerős volt a frontend világából.

A Node.js nem-blokkoló (aszinkron), eseményvezérelt architektúrája kiválóan alkalmas nagy terhelésű, valós idejű alkalmazásokhoz. Chat-szerverek, API-k, streaming szolgáltatások, mikro-szervizek. Az npm (Node Package Manager) a világ legnagyobb szoftvercsomag-regisztere – több mint kétmillió csomag közül válogathatsz.

Fullstack fejlesztőként egyetlen nyelven írhatjuk a kliens oldali és a szerver oldali részt is. Ez nemcsak időt spórol, hanem egy koherens gondolkodásmódot is ad. Ugyanazok az adatstruktúrák, ugyanazok a tervezési minták, ugyanaz a szintaxis mindkét oldalon. Ez a JavaScript egyik legnagyobb versenyelőnye.

Desktop alkalmazások – Amikor egy weblap a desktopra kerül.

Ez az a rész, amely sok kezdőt meglephet – és ami miatt ez a cikk nem csupán egy újabb „webes"cikk, amely bemutatja, hogyan lehet egy weboldalt programozni. Megmutatja, hogy a webes tudásunkkal, hogy tudunk komoly, plattformfüggetlen, számítógépes programokat is írni.

PWA – Progresszív webalkalmazások

2015-re kiforrott az igény az offline is futtatható weboldalak iránt. Története azért is izgalmas, mert rámutat, hogyan vált egy „kísérleti" ötletből mára a webfejlesztés egyik legfontosabb ipari szabványává. Ehhez a böngészőknek is meg kellett ugraniuk egy hatlams evolúciós lépcsőt, mely értelmében, a böngészőben megnyitott, arra alkalmas weboldalakat, magából a böngészőből telepíthetővé kellett tenni. (Megjelent az új telepítő ikon a chromium alapú böngészőkben)

A PWA-k (Progressive Web Apps) tehát hidat képeznek a web és a natív alkalmazások között. Egy PWA lényegében egy weboldal, amely a service workereknek köszönhetően offline is működik. Push üzeneteket küld és telepíthető a felhasználó asztalára vagy telefonjára, ami ezután úgy viselkedik, mint egy natív app. A technológia teljesen JavaScript-alapú. Semmi más nem kell hozzá, csupán HTML, CSS és JavaScript.

A PWA-k előnye, hogy nem kell külön kódbázist fenntartanod iOS-re, Androidra, MacOS, Windows és Linux desktopra. Egyetlen kódbázis, minden platform. A telepítés egy kattintás, a frissítés automatikus.

Viszont a teljes alkalmazás élményhez szükség van ugynevezett IO (Input/Output) műveletekre, amelyek segítségével, akár új fájlokat is létrehozhatunk, olvashatunk, és szerkeszthetünk. A cikk ezen pontján már gondolom nem meglepő, ha azt mondom, hogy a JavaScript világából ez a terület sem maradhat ki. A Javascript ökoszisztéma erre is kiváló platformfüggetlen megoldást kínál.

Electron – Asztali alkalmazások webtechnológiával

Az Electron keretrendszer (amelyet a GitHub csapata fejlesztett) a Chromium böngészőmotort és a Node.js futtatókörnyezetet csomagolja egybe. Az eredmény? Teljes értékű, cross-platform asztali alkalmazások. Amelyek fejlesztéséhez csupán a HTML, CSS és JavaScript tudásunkra van szükség.

A Visual Studio Code, a Slack, a Discord, a Spotify, a Figma ..., stb alkalmazások desktop verziói – mind Electron-alapú alkalmazások. Ezek nem „buta weboldalak egy ablakban": komplex, natív élményt nyújtó szoftverek, amelyek a fájlrendszerhez, az operációs rendszer értesítéseihez, a vágólaphoz, a rendszer-tálcához is hozzáférnek.

Ha frontend fejlesztőként belépsz a munkaerőpiacra, az Electron-tudás azonnal megkülönböztet: nemcsak weboldalakat, hanem telepíthető, forgalmazható desktopszoftvereket is szállíthatsz.

Hátránya, hogy az Electront úgy viselkedik mint egy konténer, amibe a fent említett összetevők vannak csomagolva, aminek köszönhetően, ha például három Elektron alapú programot futtatsz egyszerre, akkor tulajdonképpen három Chromium motor, és három nodejs terheli egyszerre a memóriát.

Ellenben van egy, mára egyre nagyobb teret hódító operációs rendszer, ami erre is, gyors, hatékony, és azonnal működő megoldást kínál. Ez az oprendszer nem más, mint a Linux.

Linux, SpiderMonkey és a GTK – A nyílt forráskódú asztal

Szóval, ha a fentiek, még mindig nem lennének elegek, nézzük a Linux világát. A Mozilla SpiderMonkey motorja, amely a Firefox JavaScript-motorja – 2011 óta a GNOM rendszerszintű komponenseként van jelen, minden GNOM és belőle kinőtt asztali környezetben. Ilyen például a méltány híres Cinnamon felület, amely többek közt a Linux MInt legnépszerűbb grafikus felülete, asztali környezete.

Tehát 2011. áprilisában megjelent a – GNOME 3.0 (A nagy áttörés) és vele együtt a GNOME Shell, amelynek a teljes felhasználói felülete, logikája és bővítményrendszere (GNOME Extensions) már SpiderMonkey-ra épült. Innentől kezdve a SpiderMonkey alapértelmezett függősége lett minden fősodorbeli Linux disztribúciónak (Ubuntu, Fedora, Arch, Debian stb.).

Ez azt jelenti, hogy Linuxon, valódi, natív asztali alkalmazásokat fejleszthetsz – fájlkezelő kiegészítőket, rendszerbeállítás-alkalmazásokat, multimédiás eszközöket, játékokat, ..., stb. És mindezt JavaScript nyelven, a GNOME ökoszisztéma részeként. Az ugyancsak a Linux szerves részét képező WebKitGTK pedig lehetővé teszi, hogy webes technológiával építs grafikus felületet Linux alkalmazásokba, a böngészőmotor teljes erejével, elkerülve az Elktorn energiapazarló életmódját.

Ez a terület, a Linux térhódításával, hatalmas lehetőség. Aki most száll be, az valódi "úttörő" lehet.

Mit kapsz, ha a JavaScriptet választod?

  • Alacsony belépési küszöb. Nem kell drága szoftver, nem kell komplex telepítés. Egy böngésző és egy szövegszerkesztő elég.

  • Egy nyelv – sok platform. (Gyakorlatilag az összes) Frontend, backend, mobil, desktop – mindezt egyetlen nyelven.

  • Hatalmas közösség és ökoszisztéma. Miután megismerted a nyelvet, bármilyen problémára találsz megoldást, tutorialt, csomagot.

  • Piaci kereslet. A JavaScript-fejlesztők iránti igény évek óta töretlen, és a fentiek térnyerése pedig, újabb fejlesztőket követel. A fizetések versenyképesek.

  • Folyamatos fejlődés. Az ECMAScript szabvány évente frissül, a nyelv modern, expresszív és egyre elegánsabb.

  • Jövőbiztosság. A web egyre több teret tölt be az életünkben. A JavaScript pedig a web nyelve, ami nem változni, hanem bebetonozódni látszik. Ezen felül pedig mára a mérnökök megalapozták azt a stratégiát mi szerint a Javascript ne csak a web, hanem a desktop és a mobil alkalmazások platformfüggetlen nyelve is legyen, amelyek még tovább erősítik a JavaScript időtállóságát.

Záró gondolat

Ha most barátkozol a programozás gondolatával, ha a frontend vagy a fullstack fejlesztés izgat, ha szeretnéd, hogy a munkád kézzelfogható legyen, legyen az egy felület, amelyet az emberek naponta használnak, egy alkalmazás, amelyet a gépükre telepítenek –, akkor a JavaScript a te nyelved.

Nem kell egyszerre mindent megtanulnod. Kezdd a DOM-manipulációval, építs egy kis interaktív oldalt. Aztán tanulj meg egy keretrendszert. Később nézz rá a Node.js-re. Majd próbáld ki az Electront, vagy Linuxon a GJS-t. Lépésről lépésre, projektalapon, kíváncsian.

A JavaScript nem tökéletes nyelv – ilyen nem is létezik. De a legtöbb lehetőséget kínáló, legsokoldalúbb és legkönnyebben elérhető nyelv, amellyel ma a szoftverfejlesztésbe belekezdhetsz. És aki egyszer belekóstol, az ritkán akar más nyelvre váltani.

Ha kedvet kaptál a programozáshoz, jelentkezz képzéseinkre, ahol bevezetünk a HTML, CSS és Javascript világába. Itt megtanulhatod a programozás alapjait, megismerkedhetsz a népszerű architektúrákkal, tervezési mintákkal, és elsajátíthatod a modern programozás alapelveit.

Fosztó Zsolt