Rất đơn giản, «Front-end» bao gồm tất cả những tài nguyên (resource) được trình duyệt web tải về và chạy trên máy tính của bạn, mang lại cho người dùng trải nghiệm nghe, nhìn, tương tác. Front-end còn được gọi là «Client-side».Resources«Front-end resource», thường bị đọc là “rì-xuộc” (nếu bạn đọc như thế thì khi đi làm ở công ty nước ngoài sẽ bị cười cho đấy), không chỉ gồm bộ 3 huyền thoại: mã nguồn HTML, CSS, JavaScript mà còn có file hình, video, audio, font, model 3D, mã nguồn WebAssembly, Flash, Java applet… Những resource nào đòi hỏi phải cài plug-in của hãng thứ ba đang ngày càng ít được chú ý hơn (Flash, Java applet, Silverlight…). Thay vào đó người ta ưu tiên những resource có thể chạy ngay trên trình duyệt mà không cần phải cài thêm plug-in ngoài. Trách nhiệm trọng đại ấy dĩ nhiên được đặt lên vai của JavaScript.  Lập trình Front-endHTML, CSS, JavaScript và WebAssembly đang là 4 ngôn ngữ duy nhất mà các trình duyệt web hiện đại có thể hiểu được tính đến thời điểm này (2020), trong đó phổ biến nhất là HTML, CSS và JavaScript cho nên đừng bao giờ phát ngôn những câu như “Nên học SCSS thay vì CSS”, “Biết Angular và TypeScript đủ rồi, không cần học JavaScript”, “JSX thay thế cho HTML” v.v. kẻo người ta cười cho đó! Công việc «Lập trình Front-end» yêu cầu phải biết 3 ngôn ngữ này, nhưng tỷ trọng khác nhau cho mỗi “nhánh nghề”. Nhánh “cắt layout” (UI/UX developer)Chịu trách nhiệm hiện thực hóa trang web từ hình thiết kế, yêu cầu kỹ năng HTML và CSS cao. Tùy theo yêu cầu của dự án mà UI/UX developer còn phải đảm bảo trang web hiển thị tốt trên các loại thiết bị và các kích thước màn hình khác nhau. Đối với mỗi loại thiết bị, các thành phần phải được sắp xếp phù hợp với trải nghiệm của người dùng, ví dụ như các nút bấm trên màn hình điện thoại phải đủ lớn để chạm ngón tay. Nhánh lập trình JavaScript (JS developer)Nhận mã nguồn HTML và CSS từ UI/UX developer rồi lập trình hành vi cho trang web bằng JavaScript. Nhánh nghề này lại được chia thành nhiều “môn phái” dựa theo framework, chẳng hạn như “Angular developer”, “React developer”, “Vue developer”… JS developer cũng phải đảm bảo mã nguồn của mình chạy tốt trên các loại thiết bị khác nhau do dự án yêu cầu, từ thiết bị mạnh như máy tính cho đến thiết bị có tài nguyên hữu hạn như smart TV. Tuy nhiên, việc phân chia chuyên môn như trên chỉ có ở những công ty lớn, thông thường lập trình viên Front-end phải “ôm show” trọn gói HTML, CSS, JavaScript framework luôn. Đồng thời họ còn phải nắm được nguyên lý và giao thức kết nối giữa Front-end và Back-end để truy vấn dữ liệu và thực hiện một số tối ưu hóa. Back-endVề mặt kỹ thuật, Back-end cũng là một phần mềm, có chức năng hồi đáp những yêu cầu từ Front-end. Phần mềm này không có giao diện, và người dùng không trực tiếp thao tác với nó. Back-end còn được gọi là «Server-side». Front-end không quan tâm phần mềm Back-end được tạo bởi công nghệ gì (và cũng không nên biết, vì lý do bảo mật), nó chỉ cần Back-end cung cấp những tài nguyên sao cho:
Phần mềm Back-end có thể được xây dựng bằng nhiều cách khác nhau, với những công nghệ khác nhau, nhưng vẫn cho ra kết quả hiển thị giống nhau ở Front-end. Hãy xem những ví dụ sau:Đề bài: Một Back-end cung cấp tài nguyên HTML cho trình duyệt để Viết bằng ngôn ngữ PHP:<html> <body> <h1> <?php echo ‘Hello, CodeSchool.vn’ ?> </h1> </body><html> Viết bằng C++ CGI:#include <iostream>usingnamespace std;int main() { cout<<“Content-type: text/html”<<endl<<endl; cout<<“<html><body>”<<endl; cout<<“<h1>Hello, CodeSchool.vn</h1>”<<endl; cout<<“</body></html>”<<endl; return 0;} Viết bằng ASP.Net Core:using …namespace NetCoreSchool{ publicclass Startup { publicvoid Configure(IApplicationBuilder app) { app.Run(context => { return context.Response.WriteAsync( “<html><body>” + “<h1>Hello, CodeSchool.vn</h1>” + “</body></html>” ); }); } }} Viết bằng NodeJS:const http = require(‘http’);const app = new http.Server();app .on(‘request’, (req, res) => { res.writeHead(200, { ‘Content-Type’: ‘text/html’ }); res.write(‘<html><body>’); res.write(‘<h1>Hello, CodeSchool.vn</h1>’); res.end(‘</body></html>’); }) .listen(80); Tất cả những cách viết Back-end kể trên đều trả về cùng một kết quả như sau cho Front-end:<html> <body> <h1> Hello, CodeSchool.vn </h1> </body><html> Lập trình Back-endLà viết mã nguồn để tạo nên một phần mềm (hoặc hệ thống phần mềm) có khả năng:
Tiếp nhận yêu cầu từ một client không phải là vấn đề, nhưng trong trường hợp hàng triệu client truy cập cùng lúc thì lại đòi hỏi cách thiết kế hệ thống phải chịu tải được, phải đảm bảo tốc độ truy cập tốt nhất có thể. Trước khi xử lý, cần phải kiểm tra dữ liệu đầu vào, vừa phải xử lý nhanh vừa phải đảm bảo độ chính xác, xử lý nhiều việc cùng một lúc, và tối ưu lưu trữ v.v và v.v. Có nhiều cách hồi đáp kết quả: có thể trả về dữ liệu được chứa trong mã HTML, hoặc dữ liệu riêng, HTML riêng, hoặc streaming các tài nguyên có dung lượng rất lớn. Chúng ta đã tìm hiểu xong các khái niệm rất căn bản, bằng ngôn ngữ rất bình dân. Lưu ý: Các định nghĩa trong video này chỉ mang tính chất giới thiệu cho người nhập môn hoàn toàn mới, không bao hàm mọi khía cạnh và mọi trường hợp ngoại lệ. |
