Ngu ngơ học làm web (92) - Phân biệt front-end, back-end và full-stack

Tiếp theo của: Ngu ngơ học làm web (91) - Sử dụng PHP trong Openemr
------

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]
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web