Frontend vs Backend khác nhau ở đâu? Phân biệt 2 nửa của mọi web và app

Hiểu đơn giản nhất

Mọi web và app đều có hai nửa, giống như một nhà hàng:

• Frontend = phòng khách. Bạn (người dùng) nhìn thấy, chạm vào: menu, bàn ghế, đèn, không gian. Nếu phòng khách bẩn hay menu rối, bạn không vào quán lần thứ hai.
• Backend = bếp. Bạn không thấy, nhưng nó quyết định món có ngon không, có đúng giờ không, có đúng giá không. Bếp lộn xộn thì dù phòng khách đẹp, quán vẫn lụn bại.

Cả hai bắt buộc phải có. Web chỉ có frontend (không có backend) như nhà hàng chỉ có phòng khách, không có bếp — không phục vụ được khách thật.

Tại sao bạn cần biết

• Thuê đúng người. Web 5 trang giới thiệu công ty chỉ cần frontend developer. Web có đăng nhập, giỏ hàng, thanh toán bắt buộc cần thêm backend. Thuê sai vai trò là tốn tiền không hiệu quả.
• Báo lỗi đúng người. "Nút Đặt hàng không bấm được" → frontend. "Đặt xong không thấy email xác nhận" → backend. Biết lỗi ở đâu giúp dev fix nhanh hơn 5-10 lần.
• Chọn đúng platform. Shopify, WordPress, Webflow tự lo backend cho bạn. Custom code bắt buộc build cả hai.
• Hiểu báo giá. Agency báo giá web 30 triệu vs 80 triệu — chênh lệch lớn nhất thường ở backend (có/không có DB, có/không có authentication, có/không có thanh toán).

So sánh nhanh

Frontend — phòng khách của web

Frontend làm gì

• Hiển thị nội dung mà backend trả về: text, ảnh, video, bảng giá
• Nhận tương tác của bạn: bấm, gõ, kéo thả, scroll, swipe
• Validate dữ liệu cơ bản trước khi gửi backend: "email sai định dạng", "password phải 8 ký tự"
• Animation và hiệu ứng: nút bấm "nhún" xuống, modal mở từ giữa màn hình, loading spinner

Công nghệ chính

• HTML — khung sườn nội dung (heading, paragraph, list, link)
• CSS — vẽ giao diện (màu, font, layout, responsive)
• JavaScript — thêm tương tác (bấm là gì, validate form, gọi API)
• Framework: React (Facebook), Vue (Evan You), Svelte, Next.js, Nuxt — giúp viết code có cấu trúc, tái sử dụng
• Chạy trong: trình duyệt người dùng — Chrome, Safari, Firefox, Edge

Ai làm frontend

• Frontend developer (chuyên về HTML/CSS/JS)
• UI/UX designer (làm Figma, không code, cộng tác với frontend dev)

Backend — bếp của web

Backend làm gì

• Xử lý logic nghiệp vụ: tính giá đơn hàng có khuyến mãi, áp dụng voucher, kiểm tra mật khẩu, xếp lịch giao hàng
• Lưu và truy xuất database: nhớ ai đã mua gì, ai login lúc mấy giờ, sản phẩm nào hết hàng
• Bảo mật: xác thực user (Auth — Authentication — xác thực ai đăng nhập), mã hoá password, chống tấn công SQL injection, rate-limit để chống spam
• Tích hợp dịch vụ ngoài: thanh toán VNPay/Stripe, gửi tin Zalo OA, gửi email qua SendGrid, gửi SMS qua Twilio
• Cron job: gửi báo cáo mỗi sáng 8h, sao lưu DB mỗi đêm, dọn dẹp data cũ hàng tuần

Công nghệ chính

• Ngôn ngữ: Node.js (JavaScript), Python, Go, Java, PHP, Ruby, C#
• Framework: Express, NestJS, Django, FastAPI, Laravel, Spring Boot, Ruby on Rails
• Database: PostgreSQL, MySQL, MongoDB, Redis, SQLite
• Chạy trong: máy chủ Linux ở data center (AWS, Google Cloud, DigitalOcean, hosting Việt Nam như Vinahost, Tenten)

Ai làm backend

• Backend developer (chuyên server-side)
• DBA (Database administrator) — dự án lớn cần người chuyên quản DB
• DevOps engineer — lo phần triển khai, scaling, monitoring

Cầu nối: API

Frontend và backend không nói chuyện trực tiếp với nhau. Chúng giao tiếp qua API (Application Programming Interface) — như bồi bàn trong nhà hàng:

• Bồi bàn nhận order từ phòng khách (frontend) → truyền vào bếp (backend)
• Bếp nấu xong → bồi bàn mang món ra cho khách
• Khách không vào bếp, bếp không ra phòng khách — luôn qua bồi bàn

Mọi action có ý nghĩa (đăng nhập, đặt đơn, xem giỏ hàng) đều là một lần frontend gọi API tới backend. Chi tiết về API ở bài API là gì (sắp có).

Ví dụ thực tế: đặt 1 ly trà sữa trên Shopee Food

Bạn mở app Shopee Food trên điện thoại, đặt 1 ly trà sữa Phúc Long, topping trân châu, 25.000đ. Đây là phân chia front/back:

Frontend (chạy trong app trên điện thoại bạn)

1. Hiển thị danh sách quán + ảnh món (dữ liệu lấy từ backend qua API)
2. Cho bạn vuốt, lọc theo loại (cà phê, trà sữa, đồ ăn nhanh)
3. Bấm vào quán Phúc Long → hiện menu (1 lần gọi API nữa)
4. Form đặt món: chọn size, topping, ghi chú "ít đường" — validate "phải chọn ít nhất 1 món"
5. Bạn bấm "Đặt hàng" → frontend gửi API tới backend
6. Backend xử lý xong → frontend hiện popup "Đặt thành công, mã đơn ABC123"

Backend (chạy ở data center Shopee)

1. Nhận yêu cầu đặt món từ frontend (qua API)
2. Kiểm tra quán Phúc Long có còn nhận đơn giờ này không (DB lookup)
3. Tính tiền: 25.000đ + phí ship 15.000đ - khuyến mãi 10.000đ = 30.000đ
4. Trừ tiền tài khoản ShopeePay của bạn (gọi sang dịch vụ thanh toán)
5. Lưu đơn hàng vào DB với trạng thái "Đang chuẩn bị"
6. Gửi notification cho quán Phúc Long: "Có đơn mới ABC123"
7. Tìm shipper trong khu vực 2km — Grab nội bộ chọn shipper gần nhất
8. Tự động update trạng thái mỗi 30 giây: "đang chuẩn bị" → "shipper đã đến quán" → "đang giao" → "đã giao"

Ranh giới: API giữa Front và Back

Mỗi tương tác có ý nghĩa trong app đều là một cuộc nói chuyện giữa frontend (app) và backend (server Shopee) qua API.

Full-stack — biết cả hai nửa

Một số developer làm được cả hai (full-stack developer). Họ có lợi và hạn chế:

Lợi:

• Tự build được dự án nhỏ một mình
• Hiểu cả hai phía → thiết kế hệ thống hiệu quả hơn
• Linh hoạt khi team thiếu người, có thể chuyển đổi nhiệm vụ

Hạn chế:

• Khó giỏi đỉnh ở cả hai — mỗi phía đã rất rộng
• Dự án lớn (10+ developer) vẫn cần chuyên gia riêng từng phía
• Lương full-stack thường cao hơn mid-level một bên ~20% vì hiếm hơn

Pattern phổ biến: dùng full-stack cho MVP (Minimum Viable Product — sản phẩm tối thiểu khả dụng, phiên bản đầu để test thị trường) trong 2-3 tháng, sau đó tách thành 2 team chuyên khi product fit.

Khi nào cần ai

Tóm tắt 1 dòng

Frontend = phòng khách bạn thấy, chạy trong trình duyệt. Backend = bếp bạn không thấy, chạy trên server. API = bồi bàn truyền lệnh giữa hai phía. Thuê đúng vai trò = tiết kiệm và đỡ lỗi.

Đọc tiếp

• Web hoạt động thế nào — hành trình 200ms — 5 bước có cả front và back tham gia
• API là gì? Tại sao mọi app đều cần — cách bồi bàn truyền lệnh giữa hai phía (sắp có)
• HTML, CSS, JavaScript là gì — 3 ngôn ngữ cốt lõi của frontend (sắp có)
• Framework là gì? React, Vue, Next.js — bộ Lego có sẵn để build nhanh (sắp có)