Đánh giá Frontend Là Gì – Làm Frontend Cần Kỹ Năng Gì

Chào mừng các bạn đặt bước chân đầu tiên lên con đường lập trình web (web development). Đây là một câu hỏi mà bất kỳ người nhập môn Lập trình web nào cũng thắc mắc và ngay cả những lập trình viên có kinh nghiệm đi nữa cũng chỉ là người đang đi trên con đường tìm câu trả lời bất tận mà thôi. Chúng tôi xin phép trả lời ngắn gọn rằng:

Lập trình web bao gồm lập trình Front-end và Back-end, làm cho website hoạt động được trơn tru, mang lại trải nghiệm tốt nhất cho người dùng.

Bạn đang xem: Frontend là gì

Nếu các bạn chưa biết website là gì thì hãy đọc bài viết này:

Sau đây, chúng ta sẽ tìm hiểu những khái niệm được nhắc đến trong định nghĩa ở trên.

Front-end

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-end

HTML, 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.

Xem thêm: Vốn Pháp định Tiếng Anh Là Gì, Vốn Pháp định

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-end

Về 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:

Trình duyệt web có thể hiểu được: ví dụ text thô, HTML, CSS, JavaScript, file audio MP3, video MP4, tài liệu PDF. Nếu trình duyệt không hiểu được những gì nhận được từ Back-end, nó sẽ bật cửa sổ Download để người dùng tải tài nguyên đó về máy rồi tự xử, ví dụ file ZIP, RAR, EXE v.v.Mã nguồn ở Front-end có thể xử lý được: có những tài nguyên sẽ do mã nguồn JavaScript xử lý chứ không để cho trình duyệt xử lý (kẻo nó bật cửa sổ Download), chẳng hạn như file DAE hoặc OBJ chứa model 3D.

Xem thêm: Bch Là Gì – Attention Required!

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 để hiển thị một trang web chào mừng.

Chuyên mục: Hỏi Đáp