Frontend, Backend i Web Tehnologije

🎨 Frontend: Tri Stuba

Frontend je sve ono što korisnik vidi i sa čim vrši interakciju u svom browseru. Bilo koja web stranica, od najjednostavnije do Facebook-a, izgrađena je na tri osnovna stuba:

Vizuelni prikaz granice između Klijenta (Frontend) i Servera (Backend)

📝 Primjer: Frontend Validacija (JMBG)

U javnoj upravi, formulari su najvažniji dio Frontenda. Zamislite da građanin ispunjava zahtjev za dječiji doplatak. Prije nego što se podaci uopšte pošalju na server, Frontend (JavaScript) mora provjeriti da li su uneseni podaci smisleni.

function validirajJMBG(jmbg) {
    // JMBG mora imati tačno 13 cifara i sastojati se samo od brojeva
    if (jmbg.length !== 13 || isNaN(jmbg)) {
        alert("Greška: JMBG mora sadržavati tačno 13 brojeva!");
        return false;
    }
    // Ovdje bi išla napredna logika provjere datuma rođenja iz prvih 7 cifara...
    return true;
}

Zašto Frontend validacija nije dovoljna? Korisnik može isključiti JavaScript u browseru ili lažirati zahtjev (koristeći Postman), čime zaobilazi ove provjere. Zato se validacija uvijek mora ponoviti i na Backendu.

🎨 1. CSS vs SCSS i Varijable

Kada radite na velikim projektima, obični CSS postane težak za održavanje. Zato koristimo SCSS (Sassy CSS). To je "nadogradnja" na CSS koja nam omogućava napredne stvari.

:root {
  --glavna-boja: #ff0000;
}
h1 {
  color: var(--glavna-boja);
}

$glavna-boja: #ff0000;

h1 {
  color: $glavna-boja;
  &:hover {
     color: darken($glavna-boja, 10%);
  }
}

🍦 Vanilla JavaScript

Kada čujete izraz "Vanilla JS", to ne znači neki novi framework. To je jednostavno šaljiv naziv za čisti, obični JavaScript bez ikakvih dodataka ili biblioteka.

Prije nego što počnete učiti React ili Angular, morate znati Vanilla JS. To je kao da učite voziti auto - prvo naučite voziti na mjenjaču (Vanilla), pa tek onda pređete na autopilota (Framework).

⚡ JavaScript (JS) vs TypeScript (TS)

Tokom učenja vidjet ćete nešto što se zove TypeScript. Šta je to?

• JavaScript (JS): Dinamičan jezik. Vi napišete var ime = "Damir", a kasnije možete reći ime = 5. To je fleksibilno, ali može dovesti do grešaka ("Crash") u produkciji.
• TypeScript (TS): To je JavaScript sa tipovima. Vi kažete let ime: string = "Damir". Ako pokušate staviti broj, program vam javi grešku prije nego ga pokrenete.

📚 Biblioteke i Framework-ci

Pisanje čistog JS-a može biti sporo za velike projekte. Zato su programeri napravili alate da ubrzaju stvar.

⚙️ Backend: Serversko Programiranje

Backend je "ispod haube". To je dio aplikacije koji se izvršava na serveru. Korisnik nikada ne vidi ovaj kod, on vidi samo rezultat koji taj kod pošalje (obično u obliku HTML-a).

Glavni zadaci Backenda:

• Sigurnost: Provjera lozinki i prava pristupa. Za državne sisteme, ovo je kritično (štiti od SQL Injection-a, XSS napada).
• Baza Podataka: Čitanje, pisanje i sigurno arhiviranje (Audit log) podataka (Oracle, SQL Server, PostgreSQL).
• Poslovna Logika: Obračun dječijeg doplatka, provjera dugovanja za porez, generisanje zvaničnih PDF rješenja.
• API Integracije: Komunikacija sa drugim državnim institucijama (npr. provjera identiteta u MUP-u preko CIPS baze).

Jezici Serverskog Programiranja

Za razliku od Frontenda (gdje je kralj samo JavaScript), na Backendu postoji mnogo opcija:

🚀 Fenomen Node.js

Tradicionalno, JavaScript je živio samo u browseru. Međutim, 2009. godine Ryan Dahl je uzeo V8 Engine (motor koji pokreće Chrome) i izvukao ga iz browsera, omogućivši da se JS vrti na serveru.

Node.js Event Loop (Non-blocking) vs Tradicionalni Multi-threaded model

Kako Node.js "kompajlira"? (V8 i JIT)

Mnogi misle da je JS spor jer je "interpretiran" (čita se liniju po liniju). To je nekad bilo tačno. Danas, Node.js koristi moćni V8 C++ Engine koji radi JIT (Just-In-Time) kompajliranje.

📦 NPM: Najveći App Store za programere

Uz Node.js dolazi i NPM (Node Package Manager). Zamislite ga kao "App Store" ili "Google Play", ali za biblioteke koda.

Umjesto da pišete kod za slanje emailova ili validaciju datuma ispočetka, vi jednostavno "skinete" gotov paket koji je neko drugi već napisao i testirao.

npm install moment     # Instalira biblioteku za rad sa vremenom
npm install express    # Instalira web server framework

Sve zavisnosti vašeg projekta se zapisuju u fajl package.json. To je "recept" vašeg projekta. Ako date taj recept drugom programeru, on samo ukuca npm install i NPM će skinuti sve potrebne sastojke (biblioteke).

🌐 CDN i Cloudflare

CDN (Content Delivery Network) je mreža servera raspoređenih po cijelom svijetu.

Problem: Ako je vaš server u Sarajevu, a korisnik u New Yorku, podaci moraju putovati preko okeana (velika latencija/kašnjenje).
Rješenje: Koristite CDN (npr. Cloudflare). Cloudflare kopira vaše slike, CSS i JS na servere u New Yorku, Londonu, Tokiju...

Kada korisnik iz New Yorka otvori vašu stranicu, slike mu se učitavaju sa servera u New Yorku, a ne iz Sarajeva. Rezultat? Stranica se otvara trenutno.

Node.js vs PHP/ASP

• Node.js: Odličan za Real-time aplikacije (Chat, Notifikacije), SPA (Single Page Applications) backend. Isti jezik (JS) svuda.
• PHP/ASP: Često bolji za teške proračune, stabilne poslovne aplikacije, standardne web stranice. ASP.NET Core je danas brži od Node.js-a u sirovim performansama, ali Node.js ima ogroman ekosistem (NPM).