FRONTEN

D
BACKEND
 Hello!
Auzan Assidqi | @auzanassdq
Coding Instructor of Skilvul
Datanya dari mana?

ketika pencet order barang, apa yg

terjadi ??

Datanya disimpan dimana?

 Ketika kamu request skilvul.com,
skilvul memberikan response berupa halaman website

komputer komputer

Internet

kamu skilvul

Ko bisa komputer skilvul nerima request dan kirim response ?

Padahal kan cuma komputer…
Ternyata itu bukan komputer biasa..

Skilvul mengubah komputernya menjadi sebuah

web server sehingga bisa menerima, mengolah,
dan mengirim data
Web Server dibangun dengan
bantuan software seperti :
- Apache
- NGINX
- Tomcat
- dll

Software tersebut akan membuat komputer membuka jalur secara terus

menerus yang ditugaskan untuk
menunggu, menerima dan mengirim data

Tapi dengan berkembangnya teknologi,

beberapa bahasa pemrograman sudah mendukung fitur tersebut.
Jadi ga perlu install software di atas

Note: adakalanya di install kalo butuh fitur tambahan seperti load balancer dll
Express
 Static
Web Server

Request
Home
client index.html

Response
index.html
server

Tidak ada data yang diolah pada sisi server.

 Dynamic
Web Server

Request
Produk
produk.html DB produk
client

Response
index.html
server database

Terjadi pengolahan data pada sisi server sebelum memberikan response

frontend backend

?
 API

customer kitchen
waiters

browser server

frontend backend
Arsitektur
Web API
HTTP method: status code:
- GET - 2xx - success
- POST - 3xx - redirect
- DELETE - 4xx - client error
- PUT - 5xx - server error

rules penulisan endpoint REST API

- Gunakan kata benda (noun)
- pakai huruf kecil
- gunakan dash (-) jika lebih dari 1 kata
- dibuat plural jika ada banyak data
- dibuat singular jika ada 1 data
endpoint method description

/users GET Mendapatkan list

data user

/users POST Menambahkan data

user

/users/:id GET Mendapatkan data

user berdasarkan id

/users/:id PUT Mengubah user

berdasarkan id

/users/:id DELETE Menghapus user

berdasarkan id
Datanya ada dimana?
 Database

SQL

NoSQL
source : www.astera.com
customer waiters kitchen storage

browser API server Database

frontend backend
 ORM

ORM

Server Database

meningkatkan developer experience

 Rute dan datanya sudah ada,
berarti bisa diakses semua orang dong?

{
name: “Alpha”,
email: “alpha@gmail.com”,
password: 123
/users },
{
name: “Beta”,
email: “beta@gmail.com”,
password: 456
}
 Security

bcrypt
OAuth

JWT
CORS
Eeh makin lama makin banyak yang
akses nih..

Jadi lemot deh..

Vertical scaling
Horizontal
scaling
researchgate.net