------
Phần 92. Phân
biệt front-end, back-end và full-stack
Như đã biết, khái niệm client-side (phía client) và
server-side (phía server) có liên quan đến mô hình làm việc theo kiểu
client-server. Hiểu nôm na, trong mô hình này sẽ có hai máy tính, một máy tính
gọi là client và một máy tính gọi là server. Khi đó, những gì xảy ra tại máy
client gọi là client-side, những gì xảy ra ở server gọi là server-side.
Thuật ngữ client-side và server-side thường được sử dụng kèm
với các từ khác, ví dụ: lập trình phía client (client-side programming), lập
trình phía server (server-side programming).
Quan sát đoạn mã sau đây,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Phan35</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
//show/hide
div-1
$('#chkWho').click(function()
{
$('#div_1').toggle(this.checked);
});
});
</script>
</head>
<body>
<?php
$arrTitle =
array( 'una' => 'Unassigned',
'mr' => 'Mr.',
'mrs'
=> 'Mrs.', 'ms' => 'Ms.', 'dr' => 'Dr.'
);
function
createSelectBox ($name, $arrData) {
$result
= '';
$result
= '<select name="'.$name.'" id="'.$name.'">';
foreach
($arrData as $key => $value) {
$result
.= '<option value="'.$key.'">'.$value.'</option>';
}
$result
.='</select>';
echo
$result;
}
?>
<div>
<label><input
type="checkbox" id="chkWho"> <strong>Who</strong></label>
</div>
<div
id="div_1" style="display:none">
<table>
<tbody>
<tr>
<td><strong>Name</strong></td>
<td>
<?php
createSelectBox('title', $arrTitle); ?>
</td>
<td><strong>External
ID:</strong></td>
<td><input
type="text"></td>
</tr>
</tbody>
</table>
</div><!--
end div_1 -->
</body>
</html>
Đoạn mã trên gồm mã HTML, jQuery,
PHP; trong đó mã HTML và jQuery sẽ được trình duyệt (browser) tại máy client xử
lý, mã PHP sẽ được phần mềm web server tại máy server xử lý. Mã PHP sẽ được xử
lý và thực thi trước mã HTML và jQuery.
Vậy còn front-end và back-end có nghĩa là gì?
Theo vi.wiki thì “front-end và back-end là các thuật ngữ chỉ
các giai đoạn bắt đầu và kết thúc của một quá trình xử lý. Khái niệm này thường
được sử dụng trong lĩnh vực phát triển phần mềm.
Trong thiết kế phần mềm,
- front-end là một phần của hệ thống phần mềm, tương tác
trực tiếp với người sử dụng”. Cụ thể, đó là hệ thống các giao diện người dùng
(GUI).
- back-end gồm có các thành phần để xử lí các thông tin
từ/đến front-end. Thông thường ám chỉ tới việc tương tác với hệ quản trị cơ sở dữ
liệu (DBMS – Database Management System).
Đọc thêm hai bài viết này để hiểu thêm,
Một số tình huống hay dùng, liên quan đến client-side,
server-side, front-end, back-end:
Client-side
|
Server-side
|
Lập trình phía client: client-side programming
|
Lập trình phía server: server-side programming
|
Ngôn ngữ phía client: HTML, CSS, JavaScript
|
Ngôn ngữ phía server: PHP, ASP
|
Front-end
|
Back-end
|
Lập trình viên front-end: front-end developer, làm giao
diện người dụng, sử dụng HTML, CSS, JavaScript, các thư viện, các framework,
và các ngôn ngữ khác.
|
Lập trình viên back-end: back-end developer, xây dựng
trang admin, thực hiện các xử lý liên quan đến cơ sở dữ liệu, các xử lý phía
sau; sử dụng PHP, ASP, các thư viện, các framework, và các ngôn ngữ khác.
|
Làm phần nội thất, sơn, trang trí của một ngôi nhà.
|
Làm phần móng, phần thô của một ngôi nhà.
|
Bạn giỏi về front-end hay back-end?
|
Bạn giỏi về front-end hay back-end?
|
Làm phần front-end trước hay back-end trước?
|
Làm phần front-end trước hay back-end trước?
|
Học JavaScript là học ngôn ngữ chạy ở client-side, dùng để
tạo phần front-end.
|
Học PHP là học ngôn ngữ chạy ở server-side, dùng để tạo
phần back-end.
|
Tóm lại, liên quan đến web, có thể nhìn nó ở ba khía cạnh
sau:
- Quá trình tạo ra web (trang web, ứng dụng web, website)
- Quá trình sử dụng web
- Quá trình xử lý của hệ thống
Khái niệm client-side và server-side thường được sử dụng khi
đề cập đến “Quá trình xử lý của hệ thống”. Trong khi khái niệm front-end và
back-end thường được sử dụng khi đề cập đến “Quá trình tạo ra web”.
Full-stack là gì?
Thực tế, người làm front-end cũng phải biết back-end và
ngược lại, người làm back-end cũng phải biết front-end. Vì vậy việc phân chia
này cũng là tương đối, tất nhiên họ sẽ có thế mạnh hay quan tâm nhiều hơn giữa
hai loại công việc này.
Full-stack là bao gồm cả front-end và back-end. Như vậy, lập
trình viên full-stack là người đa năng, là người “biết tuốt”.
[27/2/2018 Bài chia sẻ có ích của tác giả Ngô Thanh Tùng “Để
trở thành một lập trình viên Full Stack Developer” – software engineer (kĩ sư
thực thụ)
Cần học:
- Ngôn ngữ lập trình, Framework
- Server, Database, Web, Mobile
- UI/UX
- Internet of Things
- Cloud
- Business logics > Technical logics
Người học cần các đức tính:
- Đam mê
- Kiên trì
- Dũng cảm
Học Full Stack vậy có nhiều quá không? Rộng thì không sâu,
nhất nghệ tinh nhất thân vinh > suy cho cùng cũng chỉ là những thứ để phục
vụ cho một công việc:s “làm ra một phần mềm”.]
-----------
Cập nhật [27/2/2018][9/1/2018]
-----------