Javascript könyvtárak és keretrendszerek

Könyvtár (Library):

• A könyvtár egy gyűjteménye előre megírt kódoknak, funkcióknak, amiket te hívsz meg, amikor szükséged van rájuk.
• Te irányítod a program működését, a könyvtár csak segít.
• Példa: Ha használsz egy könyvtárat adatmanipulációhoz, akkor te döntöd el, mikor és hogyan hívod meg az adott funkciót.

1. jQuery

Mi az?
A jQuery egy gyors, kicsi és funkciókban gazdag JavaScript könyvtár, amelyet eredetileg 2006-ban hoztak létre. A célja az volt, hogy leegyszerűsítse a DOM-manipulációt, az eseménykezelést, az animációkat, és az AJAX-hívások lebonyolítását.

Fő jellemzők:

• DOM-manipuláció: Könnyedén kiválaszthatunk, módosíthatunk HTML-elemeket ($('.class').hide() vagy $('#id').text('Hello')).
• Eseménykezelés: Események, mint kattintások vagy egérmozgások egyszerű kezelése ($('button').on('click', function() { ... })).
• AJAX: Egyszerű HTTP-kérések küldése szerverekhez aszinkron módon ($.ajax({...})).
• Keresztböngésző kompatibilitás: A jQuery egyik legnagyobb előnye az volt, hogy egységes API-t biztosított különböző böngészők között.

Miért kevésbé használják ma?

• A modern böngészők natívan támogatják azokat a funkciókat, amiket a jQuery valaha leegyszerűsített (pl. document.querySelector, fetch).
• A modern JavaScript (ES6+) és más fejlettebb könyvtárak/keretrendszerek (pl. React) feleslegessé tették.

Mikor lehet hasznos?

• Régi projektek karbantartásakor.
• Gyors prototípus készítéshez, ha nincs szükség bonyolult struktúrákra.

2. Lodash

Mi az?
A Lodash egy JavaScript könyvtár, amely segít az adatok manipulálásában, különösen tömbök, objektumok és függvények kezelésében. Gyors és megbízható eszköz, amely sok hasznos segédfüggvényt kínál.

Fő jellemzők:

• Tömbök kezelése: Könnyű manipulációs műveletek, mint például tömbök összeolvasztása, szeletelése, szűrése (_.chunk, _.flatten, _.uniq).
• Objektumkezelés: Objektumok másolása, mély másolás, kulcsok és értékek kezelése (_.merge, _.pick, _.omit).
• Függvények: Függvények optimalizálása (pl. debounce és throttle időzítések), melyek hasznosak az események kezelésében (_.debounce, _.throttle).
• Adatkezelés: Adatok rendezése, szűrése, keresése (_.filter, _.map, _.sortBy).

Példa használat:

const _ = require('lodash');

 

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = _.filter(numbers, n => n % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

Mikor hasznos?

• Amikor komplex adatmanipulációra van szükség, és a natív JavaScript funkciók nem elég elegánsak vagy hatékonyak.
• Nagyobb projekteknél, ahol sok adatfeldolgozási művelet szükséges.

3. Moment.js

Mi az?
A Moment.js egy könyvtár, amely a dátumok és időpontok kezelésére szolgál. Segít dátumok formázásában, összehasonlításában, konvertálásában és manipulálásában.

Fő jellemzők:

• Dátum formázása: Könnyedén átalakíthatod a dátumokat olvasható formátumokká (moment().format('YYYY-MM-DD')).
• Idő különbség számítása: Megmondhatod, hogy két dátum között mennyi idő telt el (moment().diff(anotherDate)).
• Időzónák kezelése: Dátumok konvertálása különböző időzónák között.
• Human-readable idő: Pl. “3 days ago” (moment().fromNow()).

Példa használat:

const moment = require('moment');

 

let now = moment();

console.log(now.format('MMMM Do YYYY, h:mm:ss a')); // October 27th 2023, 2:45:00 pm

console.log(now.fromNow()); // a few seconds ago

Miért számít elavultnak?

• Nagy méret: A Moment.js viszonylag nagy fájlmérettel rendelkezik, ami lassíthatja az alkalmazásokat.
• Alternatívák: Modern alternatívák, mint a Luxon vagy a date-fns, kisebbek és funkciógazdagabbak.

Mikor hasznos?

• Régebbi projektekben vagy olyan alkalmazásokban, ahol már be van építve és jól működik.

4. Axios

Mi az?
Az Axios egy HTTP-kliens könyvtár, amely megkönnyíti az API-k hívását a szerverrel való kommunikáció során. Alapértelmezés szerint Promise-okat használ, ami leegyszerűsíti az aszinkron kódolást.

Fő jellemzők:

• Egyszerű HTTP-kérések: GET, POST, PUT, DELETE kérések könnyedén kezelhetők.
• Automatikus JSON-kezelés: Az Axios automatikusan átalakítja a válaszokat JSON formátumra.
• Interceptors: Lehetővé teszi, hogy minden kérés és válasz előtt vagy után módosítsd az adatokat.
• Keresztböngésző kompatibilitás: Működik minden modern böngészőben és Node.js-ben is.

Példa használat:

const axios = require('axios');

 

axios.get('https://jsonplaceholder.typicode.com/posts/1')

  .then(response => {

    console.log(response.data);

  })

  .catch(error => {

    console.error('Error:', error);

  });

Miért népszerű?

• Könnyebben kezelhető, mint a natív fetch API, mert automatikusan kezeli a JSON-válaszokat és a hibákat.

5. Chart.js

Mi az?
A Chart.js egy egyszerűen használható könyvtár, amely lehetővé teszi interaktív és szép grafikonok készítését HTML5 Canvas elemek segítségével.

Fő jellemzők:

• Grafikon típusok: Vonal-, oszlop-, kör-, radar-, buborék- és egyéb diagramok támogatása.
• Interaktivitás: Hover-effektek, tooltip-ek és animációk.
• Testreszabhatóság: Könnyedén testreszabhatod a színeket, stílusokat és a megjelenést.

Példa használat:

<canvas id="myChart" width="400" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ['Red', 'Blue', 'Yellow'],

        datasets: [{

            label: '# of Votes',

            data: [12, 19, 3],

        }]

    }

});

</script>

Mikor hasznos?

• Amikor egyszerű és látványos adatvizualizációra van szükséged minimális konfigurációval.

6. D3.js

Mi az?
A D3.js (Data-Driven Documents) egy adatvizualizációs könyvtár, amely lehetővé teszi dinamikus, interaktív grafikonok és vizualizációk készítését a weben.

Fő jellemzők:

• Teljes kontroll: Lehetővé teszi az adat-alapú manipulációt SVG, HTML, és CSS segítségével.
• Dinamikus vizualizációk: Az adatok változásával a vizualizációk automatikusan frissülnek.
• Komplex vizualizációk: Hőtérképek, hierarchiák, grafikonok, térképek és egyéb összetett ábrák készítése.

Példa használat:

<script src="https://d3js.org/d3.v6.min.js"></script>

<script>

d3.select("body").append("p").text("Hello D3.js!");

</script>

Miért különleges?

• A Chart.js-szel ellentétben a D3.js mélyebb kontrollt biztosít az elemek felett, de emiatt meredekebb a tanulási görbéje is.

Mikor hasznos?

• Olyan fejlett adatvizualizációk esetén, ahol testreszabott megjelenítési módokra van szükség.

Keretrendszer (Framework):

• A keretrendszer egy átfogóbb struktúra, amely irányítja a kódod működését.
• A keretrendszer határozza meg a program szerkezetét, és neked kell alkalmazkodnod hozzá.
• Ez az ún. "inverz kontroll": nem te hívod a keretrendszert, hanem az hív téged.
• Példa: Egy keretrendszer meghatározza, hogyan építsd fel az alkalmazásod, és ő fogja meghívni a funkcióidat a megfelelő helyeken.

1. React

(Technikailag könyvtár, de gyakran keretrendszerként kezelik)

Mi az?
A React egy JavaScript UI-könyvtár, amit a Facebook fejlesztett ki 2013-ban. A React fő célja az, hogy megkönnyítse az interaktív, dinamikus felhasználói felületek (UI) építését, különösen Single Page Application (SPA) formában.

Fő jellemzők:

• Komponensalapú felépítés: Minden felhasználói felület (UI) újrahasznosítható komponensekből épül fel. Például egy gomb, űrlap vagy navigációs sáv mind külön komponensként kezelhető.

Példa:

function Greeting(props) {

  return <h1>Hello, {props.name}!</h1>;

}

• Virtuális DOM: A React használ egy virtuális DOM-ot, ami egy memóriában tárolt könnyített verzió a valódi DOM-ról. Amikor változás történik, a React először a virtuális DOM-on hajtja végre az összehasonlítást, majd csak a szükséges részeket frissíti a böngészőben. Ez gyorsabbá teszi az alkalmazásokat.
• JSX: A React lehetővé teszi a JSX használatát, ami egy JavaScript kiterjesztés, és lehetővé teszi HTML-szerű kód írását JavaScript-ben.

Példa:

const element = <h1>Hello, world!</h1>;

Miért használják?

• Gyors és hatékony a virtuális DOM miatt.
• Komponens-alapú struktúrája könnyen kezelhetővé és újrahasznosíthatóvá teszi a kódot.
• Széleskörű közösségi támogatás és bővítmények.

2. Angular

Mi az?
Az Angular egy teljes körű keretrendszer SPA-k (Single Page Applications) építésére. A Google által fejlesztett keretrendszer teljes körű megoldást nyújt mind a front-end fejlesztéshez, mind az alkalmazás architektúrájának kialakításához.

Fő jellemzők:

• TypeScript alapú: Az Angular teljes mértékben TypeScript-re épül, amely egy JavaScript superset, és erős típusosságot biztosít, ami segít a hibák elkerülésében.

Példa TypeScript-ben:

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html'

})

export class AppComponent {

  title = 'Hello Angular!';

}

• Szigorú struktúra: Az Angular megköveteli az MVC (Model-View-Controller) mintát, ami strukturáltabb fejlesztést eredményez.
• Kétirányú adat-kötés (Two-way Data Binding): Az Angular automatikusan szinkronizálja az adatokat a modell és a nézet között, így amikor az adat változik, azonnal frissül a felhasználói felületen is.
• Beépített eszközök: Routing, form-kezelés, HTTP-szolgáltatások, tesztelési eszközök mind beépítettek.

Miért használják?

• Teljes körű megoldás komplex alkalmazások fejlesztésére.
• Nagyvállalati alkalmazásokhoz ideális, mivel struktúrált és skálázható.

3. Vue.js

Mi az?
A Vue.js egy progresszív keretrendszer, amely könnyen integrálható meglévő projektekbe, de képes nagyobb alkalmazások kezelésére is. Evan You hozta létre, aki korábban a Google-nél dolgozott Angular projekteken, így a Vue bizonyos szempontból kombinálja a React és Angular előnyeit.

Fő jellemzők:

• Egyszerű tanulási görbe: A Vue könnyen megtanulható, különösen azok számára, akik már ismerik a HTML-t, CSS-t és a JavaScript-et.
• Komponens-alapú felépítés: Hasonlóan a React-hez, a Vue is újrahasznosítható komponensekből épül fel.
• Reaktív adat-kötés: A Vue támogatja az egyszerű és rugalmas adat-kötést, amely automatikusan frissíti a DOM-ot, ha az adatok változnak.
• Sablon alapú szintaxis: A Vue szintaxisa nagyon hasonlít a hagyományos HTML-re, ami könnyen olvashatóvá és érthetővé teszi a kódot.

Példa:

<div id="app">

  <p>{{ message }}</p>

</div>

 

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

});

</script>

Miért használják?

• Egyszerűség és rugalmasság.
• Könnyű bevezetni meglévő projektekbe.

4. Svelte

Mi az?
A Svelte egy új generációs keretrendszer, amely kompilációs időben alakítja át a kódot hatékony, natív JavaScript-re. Ez azt jelenti, hogy az alkalmazás futtatásához nincs szükség külön futtatókörnyezetre.

Fő jellemzők:

• Nincs virtuális DOM: A Svelte közvetlenül frissíti a DOM-ot, ami gyorsabb teljesítményt eredményez.
• Kompilációs időben történő optimalizálás: A kód már a fejlesztési folyamat során átalakul hatékony JavaScript-té.
• Egyszerű szintaxis: A Svelte szintaxisa nagyon intuitív és egyszerű.

Példa:

<script>

  let count = 0;

</script>

 

<button on:click={() => count++}>

  Clicked {count} times

</button>

Miért használják?

• Kisebb fájlméret és gyorsabb futtatás.
• Könnyű használat és modern megközelítés.

5. Next.js

Mi az?
A Next.js egy React-alapú keretrendszer, amely támogatja a server-side rendering (SSR) és a static site generation (SSG) funkciókat. A Next.js lehetővé teszi gyors és SEO-barát React alkalmazások készítését.

Fő jellemzők:

• Server-side rendering (SSR): Az oldalak a szerveren generálódnak, ami SEO-barátabb és gyorsabb kezdeti betöltést eredményez.
• Static site generation (SSG): Az oldalak előre generálódnak build időben, így a végső alkalmazás gyorsan tölt be.
• API Routes: Lehetővé teszi API végpontok létrehozását közvetlenül a Next.js projektben.

Példa:

export default function Home() {

  return <h1>Welcome to Next.js!</h1>;

}

Miért használják?

• SEO-barát és gyors React alkalmazások építésére ideális.
• Teljes körű eszközkészlet a fejlesztéshez.

6. Express.js

Mi az?
Az Express.js egy minimalista és rugalmas backend keretrendszer, amit a Node.js-hez fejlesztettek. Az Express az egyik legnépszerűbb választás REST API-k és szerveroldali alkalmazások készítésére.

Fő jellemzők:

• Egyszerűség és rugalmasság: Minimalista keretrendszer, amely lehetővé teszi az egyszerű szerveroldali alkalmazások gyors felépítését.
• Middleware támogatás: Könnyű middleware-eket használni az alkalmazások funkcionalitásának bővítésére.
• REST API-k: Express-t gyakran használják RESTful API-k készítésére.

Példa:

const express = require('express');

const app = express();

 

app.get('/', (req, res) => {

  res.send('Hello World!');

});

 

app.listen(3000, () => {

  console.log('Server is running on http://localhost:3000');

});

Miért használják?

• Egyszerű szerveroldali logika gyors implementálása.
• REST API készítésére kiváló.

7. NestJS

Mi az?
A NestJS egy progresszív Node.js keretrendszer, amely a TypeScript-et használja alapértelmezetten. A NestJS célja a moduláris, skálázható és karbantartható szerveroldali alkalmazások építése.

Fő jellemzők:

• TypeScript alapú: Az Angular-hoz hasonlóan a NestJS is TypeScript-re épül.
• Moduláris architektúra: Az alkalmazásokat külön modulokba lehet szervezni, ami megkönnyíti a skálázhatóságot.
• Beépített támogatás: REST API-k, GraphQL, WebSockets, és sok más technológia támogatása.

Példa:

@Controller()

export class AppController {

  @Get()

  getHello(): string {

    return 'Hello from NestJS!';

  }

}

Miért használják?

• Nagy projektek fejlesztésére, ahol moduláris szerkezet és skálázhatóság szükséges.
• Erős TypeScript támogatás, ami segíti a hibák elkerülését.