Series Lược Sử Lập Trình Web Phần 3.1 – JS framework trỗi dậy

Series này gồm 4 phần chính:

Ở những phần trước, chúng ta đã biết về giai đoạn 2005-2010, khi JavaScript dần dần được cộng đồng sử dụng rộng rãi.

Ở phần này, chúng ta sẽ tìm hiểu về những năm 2010-2014, còn được người đời gọi là Thời đại Phục Hưng của JavaScript.

Đây là giai đoạn JS bước lên vũ đài chính trị, lộn, vũ đài lập trình, với sự ra đời của vô số framework/tooling hay ho, dần dần được nhiều người biết đến.

Sự ra đời của SPA (Single Page Application)

Với jQuery, JavaScript bắt đầu được sử dụng rộng rãi hơn. Nhờ công nghệ AJAX, JavaScript giúp client có thể đưa dữ liệu lên server, lấy dữ liệu từ server về mà không cần tải lại trang.

Không chỉ dừng lại ở đó, JavaScript bắt đầu dùng để hiển thị/ẩn dữ liệu, validate, xử lý sẵn dữ liệu dưới client (phân trang/ filter).

Thế rồi, dân developer chợt nhận ra một điều:

Tại sao mỗi lần chuyển trang lại phải gọi tới server, chờ server trả HTML về và render lại? 
Sao không dùng JavaScript để ẩn hiện trang luôn? Vừa nhanh, lại vừa tiết kiệm băng thông nữa! 

Ừ nhỉ, lúc này server chỉ cần trả dữ liệu dưới dạng JSON cho client xử lý là xong, không cần phải render HTML nữa.

Tèn tén ten, thế là một thuật ngữ mới tên Client Side Rendering ra đời!

Những logic về render dữ liệu sẽ được xử lý ở phía client thay cho server

Client Side Rendering tức là việc render HTML, CSS sẽ được thực hiện ở client (Tức JavaScript ở trình duyệt). So với Server Side Rendering (SSR) đã nhắc trong phần 1, Client Side Rendering (CSR) có những đặc điểm sau:

  • Những logic đơn giản (validation, đọc dữ liệu, sorting, filtering) nằm ở client side
  • Logic để routing (chuyển trang), render (hiển thị) dữ liệu thì 96.69% là nằm ở client side
  • Logic phức tạp (thanh toán, phân quyền) hoặc cần xử lý nhiều (data processing, report) vẫn nằm ở server side.

Chi tiết hơn về 2 cái này, các bạn xem ở bài viết SSR vs CSR nhé!

Nhược điểm của JavaScript

Thế nhưng, với những dự án lớn, logic phức tạp, viết logic thuần bằng JavaScript, jQuery là một cực hình!

Thật đấy, bạn nào từng làm việc với jQuery sẽ biết, làm những chức năng thêm bớt xóa sửa đơn giản với jQuery và AJAX cũng không hề dễ.

Code jQuery/JavaScript sẽ thực hiện những chức năng sau:

  1. Lấy dữ liệu đã nhập trong cây DOM khi người dùng submit form, click button
  2. Validate dữ liệu đầu vào.
  3. Sau khi validate, gửi dữ liệu lên server, lấy dữ liệu về.
  4. Xử lý dữ liệu (filter, sort, paging)
  5. Hiển thị dữ liệu bằng cách thêm node, xóa node trong cây DOM

Developer nhận ra rằng phần lớn code mình viết ra không phải để xử lý vấn đề business (đây là những thứ ăn tiền của phần mềm), mà chỉ là code để móc nối dữ liệu giữa server, client và tương tác với người dùng (plumbing code). Cực ơi là cực mà lại không hiệu quả!

Thế rồi, những JavaScript lần lượt ra đời để giải quyết vấn đề này. Ba framework phổ biến nhất trong giai đoạn này là:

AngularJS, BackboneJS, EmberJS – 3 framework phổ biến thời bấy giờ

Nhờ sự “bá đạo, mạnh mẽ” của mình, cộng với sự chống lưng của Google, AngularJS nhanh chóng phổ biến và được giới developer ưa thích. Nhà nhà sử dụng, người người sử dụng AngularJS!

Mấy cái framework này có gì hay?

Các framework này cung cấp sẵn cách tổ chức code và architecture, những API tiện lợi để render HTML, routing, gọi AJAX. Nhờ có chúng, developer giờ có thể tập trung vào viết code để giải quyết vấn đề business.

Hầu hết các framework này hoạt đông theo cơ chế MVC hoặc MVVM:

  • View (hoặc template) sẽ được define trong file HTML
  • Model chứa dữ liệu sẽ nằm trong code JavaScript
  • Controller (hoặc view model) sẽ bind dữ liệu từ model và view, tạo thành HTML hiển thị cho người dùng.
  • Bạn nào muốn tìm hiểu rõ hơn thì đọc series AngularJS của Codeaholicguy nhé!

Lần đầu tiên sử dụng AngularJS, cảm xúc của mình là: Wow, framework bá đạo vkl:

  1. Gọi AJAX với 1 dòng code
  2. Tạo view template trong file HTML
  3. Gọi JavaScript trong controller, thay đổi dữ liệu trong $scope
  4. Bùm, dữ liệu đã thay đổi trong HTML
  5. Khi người dùng nhập dữ liệu, dữ liệu được tự động bind vào JavaScript object (two-way data binding) luôn
AngularJS có lắm thứ hay ho bá đạo

Tất nhiên, khi sử dụng lâu mình cũng gặp một số vấn đề về performance, viết code rối hay thư viện sida. Nhưng AngularJS đã tiết kiệm cho team mình rất nhiều thời gian code và fix bug.

Cấu trúc một dự án với JS framework

Nếu chỉ sử dụng framework thay thế cho jQuery, phiên bản Thiên Địa 2010 cũng không quá khác biệt so với bản 2006:


<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Tài liệu học tập</title>
</head>
<body ng-app="javApp" ng-controller="javController">
<ul>
<!– Template trong view –>
<li ng-repeat="video in learningVideos">
<a href="{{video.link}}">{{video.name}}</a>
</li>
</ul>
</body>
<!– Thư viện AngularJS trước tiên –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script&gt;
<!– Một số thư viện đi kèm –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/angular-ui-router.min.js"></script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-thiendia/1.0.0/angular-thiendia.min.js"></script&gt;
<!– Code JavaScript viết thêm, thường sẽ nằm ở file riêng –>
<script>
var app = angular.module('javApp', []);
// Controller móc nối dữ liệu
app.controller('javController', ['$scope', function($scope) {
$scope.learningVideos = [
{ name: 'Tài liệu Việt', link: 'http://vav.av&#39; },
{ name: 'Tài liệu Hàn', link: 'http://kav.av&#39; },
{ name: 'Tài liệu Nhật', link: 'http://jav.av&#39; }
];
}]);
</script>
</html>

view raw

index-2010.html

hosted with ❤ by GitHub

Thế nhưng, code của các dự án AngularJS trong thực tế trong sẽ khác hẳn thế này!

Tại sao vậy? Các bạn xem phần dưới nhé!

Tạm kết

Ban đầu mình định viết toàn bộ về giai đoạn 2010-2014 này trong một bài viết luôn. Ai ngờ dài quá nên phải tiếp tục tách ra làm hai phần vậy!

Ở đầu giai đoạn này, code front-end vẫn chưa cần sử dụng NodeJS làm gì cả. Thế nhưng, khi những dự án lớn lớn dần, ta bắt đầu cần giải quyết những vấn đề sau:

  • Package Management
  • Module/Dependency Management
  • Testing
  • Code Transformation
  • Task Runner

Đây là lúc NodeJS nhập cuộc, cùng với JS framework làm nên một cuộc cách mạng trong cộng đồng JavaScript.

Chi tiết thì các bạn đón xem phần sau nhé!

5 thoughts on “Series Lược Sử Lập Trình Web Phần 3.1 – JS framework trỗi dậy”

  1. Anh Hoàng vừa chém gió trên youtube, vừa viết kiến thức kỹ thuật trên blog. Thật đúng là “full-stack” hai tay hai súng 😀

    Liked by 2 people

  2. Hóng thời kỳ của React và Vue, mong a viết các phần sau chi tiết hơn nữa (dài hơn cũng được ^^).

    Liked by 2 people

Leave a comment