🏛️ Cjelokupna Slika (Big Picture)
Moderne aplikacije (posebno u javnoj upravi) nisu jedan ogroman program, već ekosistem strogo razdvojenih komponenti. Osnovna podjela je na Frontend (ono što korisnik vidi) i Backend (procesorski mozak).
Renderuje UI, parsira HTML, CSS, vrti JavaScript.
Zaprima HTTP zahtjeve, provjerava prava, izvršava C# / JS kod.
Trajno čuva podatke o korisnicima i sistemu na diskovima.
🎨 Frontend: Umjetnost i Logika u Browseru
Vaš browser (Klijent) prima sirovi tekst od servera i mora ga pretvoriti u vizuelni interfejs. Tri tehnologije drže cijeli web:
- HTML (Struktura): Tekstualni jezik koji opisuje *šta* se nalazi na stranici. (Ovo je dugme, ovo je naslov).
- CSS (Izgled): Skup pravila o bojama, dimenzijama i pozicijama. Prevara vaših očiju.
- JavaScript (Ponašanje): Programski jezik koji živi u browseru i može mijenjati HTML i CSS u realnom vremenu.
Krunski koncept: DOM (Document Object Model)
Kada browser preuzme HTML, on ga pretvara u hijerarhijsko drvo u memoriji, zvano DOM. JavaScript ne komunicira direktno s tekstom fajla; on komunicira sa DOM stablom.
// 1. JS pronalazi vizuelni HTML element u DOM stablu
const dugme = document.getElementById("btnPosaljiZahtjev");
const porukaDiv = document.getElementById("statusPoruka");
// 2. JS dodaje "Osluškivač" i čeka korisnikov klik
dugme.addEventListener("click", async () => {
// 3. JS mijenja DOM u letu (Korisnik vidi "Učitavam...")
porukaDiv.innerText = "Slanje zahtjeva na server...";
dugme.disabled = true;
try {
// 4. Pozivanje Backenda u pozadini (Non-blocking)
const odgovor = await fetch("https://api.vlada.gov.ba/zahtjevi", { method: "POST" });
if(odgovor.ok) {
porukaDiv.innerText = "Uspješno poslano!";
porukaDiv.style.color = "green"; // Mijanjanje CSS-a iz JS-a
}
} catch (err) {
porukaDiv.innerText = "Greška u komunikaciji!";
}
});SPA (Single Page Application) vs Tradicionalni Web
U javnim sistemima često ćete čuti termin SPA (korištenjem Reacta ili Angulara). U tradicionalnom webu (stari PHP), svaki klik je značio da server šalje potpuno novi HTML fajl, a browser je treptao i učitavao stranicu ispočetka.
U SPA arhitekturi, server pošalje prazan HTML fajl i jedan masivni JavaScript fajl. Nakon toga, browser preuzima kontrolu. Kada korisnik klikće po aplikaciji, browser samo u pozadini skida "čiste podatke" (JSON) sa servera i JavaScript sâm iscrtava DOM elemente po ekranu, bez ikakvog treptanja ili ponovnog učitavanja stranice.
| Biblioteka / Framework | Opis | Svrha |
|---|---|---|
| React | Napravljen od strane Facebooka. Najpopularnija UI biblioteka koja koristi Virtualni DOM za ekstremnu brzinu iscrtavanja. | SPA Portali, Interaktivni Dashboards |
| Angular | Napravljen od strane Googlea. Ogroman, kompletan framework koji prisiljava inženjere na strogu arhitekturu (TypeScript obavezan). | Masivni Enterprise softveri za javnu upravu |
⚙️ Backend: Poslovna Pravila i Sigurnost
Dok potencijalno kompromitovani browseri šalju zahtjeve, Backend stoji kao neosvojiva tvrđava i provjerava svaki bit. Kod koji se vrti na Backendu napisan je jezicima poput C# (.NET), Java, Python ili Node.js.
🛑 Sigurnosna Paradigma: Ne vjeruj Klijentu nikada (Zero Trust)
Korisnik može kliknuti na dugme "Odobri" u svom browseru. Njegov browser može poslati komandu serveru. Međutim, server nikada ne smije izvršiti tu komandu bez provjere.
- Autentifikacija: Da li je korisnik prijavljen? (Provjera tokena).
- Autorizacija: Da li ovaj korisnik ima pravo da odobri ovaj specifični dokument? (Provjera rola u bazi).
- Validacija: Da li su iznosi poreza unutar granica zakona? (Poslovna logika).
Ako se ove provjere prebace na Frontend umjesto na Backend, aplikacija je ozbiljno hakirana u roku od 5 minuta pomoću Postmana!
Fenomen Node.js i The Event Loop
JavaScript je originalno bio samo za Frontend. Tada (2009. godine) se rodio Node.js – omotač koji vrti V8 JavaScript Engine unutar operativnog sistema servera. Node.js je unio revoluciju kroz model zvan Asinhroni, Non-blocking I/O potpomognut s Event Loop-om.
Jedan pametni konobar umjesto tima sporih konobara
Kako rade tradicionalni serveri (ASP.NET / PHP) vs Node.js:
- Tradicionalno (Multi-Threaded): Kada 1000 korisnika zatraži obraduPDF-a odjednom, server kreira 1000 teških Threadova (radnika). Ako radnik čeka bazu da vrati podatke (što traje npr. sekundu), taj radnik je "blokiran" i "jede" radnu memoriju (RAM) besposlen.
- Node.js (Single-Threaded): Ima samo JEDNOG glavnog radnika. Kada primi upit klijenta, on upit delegira bazi podataka i trenutno prolazi dalje (Non-blocking) da opsluži drugog klijenta, ne čekajući bazu! Kada baza završi, ona trigeruje prolazak kroz "Petlju događaja" (Event Loop), a radnik uzme rezultat i tek tada ga spakuje klijentu.
Ovo čini Node.js ekstremno brzim i skalabilnim za visoko opterećene sisteme (poput chatova, streamova ili API gatewaya), ali jako lošim za teške procesorske kalkulacije (npr. renderovanje videa).
const express = require('express');
const app = express();
// Ruter koji odgovara na HTTP GET za korisnike
app.get('/api/gradjani/:jmbg', (req, res) => {
const trazeniJmbg = req.params.jmbg;
// (Ovdje ide logika čitanja iz baze, asinhrono)
// Server vraća JSON
res.json({ ime: "Damir", status: "Aktivan", broj: trazeniJmbg });
});
// Paljenje servera na portu 3000
app.listen(3000, () => console.log('API sluša na portu 3000'));💾 Baze Podataka (Database Layer)
Programski kod ne pamti ništa kad se server ugasi (jer je sve u RAM memoriji). Da bi podaci trajno ostali zabilježeni (npr. stanje poreskog duga), koristimo Sisteme za upravljanje bazama podataka (DBMS).
- Relacione baze (SQL): MS SQL Server, PostgreSQL, Oracle. Podaci su smješteni u strogo definisanim tabelama povezanim ključevima. Apsolutni standard u svim finansijskim i javnim institucijama zbog ACID svojstava (garancija tačnosti transakcija).
- NoSQL baze: MongoDB, Redis. Podaci se smještaju kao JSON dokumenti, fleksibilno. Super za sisteme sa ogromnom količinom nestrukturiranih podataka.