Chuyện coding

Series Lược Sử Lập Trình Web Phần 2 – Thời đại của jQuery

14 Comments

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

Ở phần trước, chúng ta đã tìm hiểu về lập trình web ở những năm 2006 trở về trước, thời mà viết web chỉ đơn thuần là viết code cho server render ra HTML/CSS/JS.

Ở phần này, chúng ta cùng nhìn lại những năm 2006-2010, buổi bình minh của JavaScript nhé.

PHP đã thống trị Internet như thế nào

Bạn nào đọc Tôi Đi Code Dạo lâu cũng biết mình không ưa PHP. Tuy nhiên, nhắc về lịch sử lập trình Web mà không nhắc tới PHP là một thiếu sót lớn.

Những năm 2003-2005, một số CMS phổ biến dựa trên nền PHP (WordPress, Joomla) ra đời như. Các CMS này rất phù hợp để làm web bán hàng, langding page, blog, web tin tức.

Đa phần cá nhân, doanh nghiệp vừa và nhỏ chỉ cần những trang như thế này. Chưa kể, máy chủ Linux chạy được PHP giá rẻ bều so với Window. Thế là, Internet bắt đầu tràn ngập những trang web “mì ăn liền” được dựng lên bằng CMS (hoặc PHP).

Đến hiện tại, các CMS này vẫn sống dai, sống khỏe. Nhu cầu nhiều, cạnh tranh cao, nhưng nếu biết cách làm ăn thì các bạn làm web theo hướng này vẫn còn sống được 5-10 năm nữa hoặc hơn.

Website kiểu “mì ăn liền” vẫn sống khỏe/sống tốt

Sự ra đời của jQuery

Nếu chịu khó đọc lại JS Truyền Kì phần 1, các bạn sẽ thấy jQuery- thư viện JavaScript nổi tiếng nhất ra đời trong thời đại này.

Do đó, nếu các bạn học và dùng jQuery nghĩa là các bạn học công nghệ hơn 10 năm tuổi rồi đấy! Cũng chả sao cả, site của thegioididong.com load nhanh siêu tốc cũng nhờ dùng công nghệ … “cũ xì” cơ mà!

Vào thời đó, jQuery được dân tình tung hô và đón nhận vì những đặc điểm sau:

1. Giúp code chạy trên nhiều trình duyệt: Thuở đó, các trình duyệt chưa áp dụng chuẩn chung, do đó code chạy trên Firefox có thể sẽ không chạy trên IE, hoặc ngược lại. jQuery cũng cấp những hàm đã viết/test sẵn, đảm bảo chạy được trên mọi trình duyệt.

2. Quản lý cây DOM dễ dàng hơn: Trước khi có jQuery, ta có thể dùng JavaScript để thay đổi HTML như sau. Để tìm các element, ta phải sử dụng hàm getElementByID, getElementByClass rất dài dòng:


document.getElementById('jav')
.getElementByClass('inner')[0].innerText = 'Do not watch JAV';

view raw

vanilla.js

hosted with ❤ by GitHub

Với jQuery, ta chỉ cần sử dụng CSS Selector là xong


$('#jav > .inner').text('Do not watch JAV')

view raw

jquery.js

hosted with ❤ by GitHub

3. Animation: jQuery có nhiều animation rất hay như hide/show, slideup/slidedown, thay vì viết code dài dòng chỉ cần gọi hàm là xong.

4. Ajax: Nhờ có AJAX, browser có thể gửi dữ liệu lên, lấy dữ liệu từ server về mà không cần phải load lại trang. Có điều, viết code thuần để tạo AJAX call rất rườm rà và sida. jQuery có nhiều hàm để gọi Ajax rất mạnh như load, ajax, get, getJSON, làm cho việc viết AJAX ngắn gọn hơn nhiều.

jQuery xuất hiện, làm cuộc đời JS bước sang trang mới

Buổi bình minh của JavaScript

Sự ra đời của jQuery là một cột mốc quan trọng của JavaScript. Nó biến JS từ một ngôn ngữ bị ghét sang một ngôn ngữ … bị thương, được dùng nhiều. (Cũng giống như Rails ra đời đã biến Ruby từ một ngôn ngữ .. đồ chơi sang một ngôn ngữ thực dụng, được cộng đồng startup mê mẩn).

Không lâu sau đó, jQueryUI ra đời. Đây là một thư viện dựa trên jQuery, cung cấp những component rất ngầu như datepicker, dialog, modal, autocomplete, … những thứ mà trước đây Web Developer nằm mơ cũng không nghĩ đến!

Theo bước jQueryUI, một loạt những thư viện/plugin khác ra đời, hàng loạt những tính năng trước đây chỉ có trên Desktop App nãy đã có thể có trên Web:

  • Slide show (Carousel)
  • Animation
  • Drag & Drop
  • Chart & Report
  • Loading board
  • Responsive on mobile
  • …

Một chân trời mới mở ra cho Web Developer. Với JavaScript và jQuery, Web bây giờ “động” hơn, “mạnh” hơn khi trước.

Các thư viện jQuery cung cấp những component rất cool mà trước giờ web developer hằng mơ ước (Ảnh là boostrap nha)

Cấu trúc một dự án jQuery

Giai đoạn này đa phần các trang web vẫn sử dụng cơ chế Server Side Rendering (Xem lại phần 1). Server sẽ render HTML/CSS/JS để cho trình duyệt xử lý.

Sau khi trình duyệt nhận được toàn bộ HTML, JavaScript sẽ bắt đầu chạy để chỉnh sửa HTML (tạo slideshow v…v), thêm hiệu ứng, load thêm một số dữ liệu.

Một trang dùng jQuery lúc bấy giờ sẽ gồm những thành phần sau:

  • CSS và HTML thuần
  • Thư viện jQuery
  • Một số thư viện bổ trợ
  • Code JavaScript viết thêm, tùy dự án

Trang thiên địa phiên bản 2006-2010 sẽ được cải tiến như sau:


<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Tài liệu học tập</title>
</head>
<body>
<ul>
<li><a href="http://jav.av">Tài liệu Nhật</a></li>
<li><a href="http://kav.av">Tài liệu Hàn</a></li>
<li><a href="http://vav.av">Tài liệu Việt</a></li>
</ul>
</body>
<!– Thư viện jQuery trước tiên –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&gt;
<!– Một số thư viện đi kèm –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-thiendia/1.0.0/jquery-thiendia.min.js"></script&gt;
<!– Code JavaScript viết thêm, nếu dài có thể bỏ file riêng –>
<script>
$(document).ready(function() {
var sweetAlert = swal;
sweetAlert('Welcome to Thiên Địa, kho tài liệu học tập hàng đầu Việt Nam');
});
</script>
</html>

view raw

index-2006.html

hosted with ❤ by GitHub

Tạm kết

Ở giai đoạn này, cuộc sống của một Web Developer cũng khá đơn giản. Chỉ cần nắm vững jQuery, biết dùng AJAX là đã code được front-end rồi. Đa phần dân web developer đều code được cả back-end lẫn front-end nên vẫn chưa có sự phân hóa rõ rệt.

Hiện tại, jQuery vẫn còn được sử dụng trong nhiều dự án. Có nhiều trang Web lớn vẫn hoạt động theo cấu trúc mình vừa nói ở phần trước nha.

Nhiều trang như thegioididong, dienmaycholon … vẫn sống tốt với HTML/CSS/jQuery ở front-end

Ở phần sau, chúng ta sẽ cùng tìm hiểu về giai đoạn 2010 tới 2014, khi những framework nổi tiếng ra đời, NodeJS bắt đầu được sử dụng trong front-end.

Đó cũng là lúc JavaScript và front-end trở nên mạnh mẽ, phức tạp, mà cũng … vô cùng thú vị.

14 thoughts on “Series Lược Sử Lập Trình Web Phần 2 – Thời đại của jQuery”

  1. Bài viết hay a, hiện tại e cũng chỉ mới làm đến jquery và ajax thôi, do tính chất e làm cms nên cũng chưa tìm hiểu về js framework nhiều 😀

    Like

    Reply

    2. sweetAlert cũng giống như alert là để hiển thị hộp thoại thông báo, nhưng theo cách đẹp hơn khá nhiều, nó cung cấp hàm swal() để hiển thị hộp thoại. Thực tế thì khi đã cài đặt sweetAlert và import đầy đủ cdn của nó, bạn có thể gọi ngay hàm swal(), có lẽ ở đây tác giả viết như vậy để bạn biết swal() là một hàm của sweetAlert, và như vậy thì bạn có thể google dễ dàng hơn :))

      Liked by 1 person

      Reply

  5. anh hoàng cho em hỏi 1 sinh viên ở việt nam nếu học tốt thì có cơ hội thực tập tại sing không ạ ?
    em thấy làm việc ở nước ngoài thường phải yêu cầu visa, không biết nếu giỏi thì các công ty có chịu hỗ trợ thủ tục visa cho sinh viên không anh nhỉ ?

    Like

    Reply

  8. Chào anh, em chưa có thời gian để đọc bài viết ngay bây giờ, nhưng mà cái tiêu đề làm em lấn cấn quá nên quyết định vào cmt luôn. Chính xác từ anh muốn dùng là “lược sử” phải không ạ?

    Like

    Reply

Leave a comment