Series này gồm 4 phần chính:
- Phần 1: Giai đoạn trước 2005 – JavaScript là cái thứ chi chi
- Phần 2: Giai đoạn 2005-2010 – Thời đại của jQuery
- Phần 3.1: Giai đoạn 2010-2014 – JS Framework trỗi dậy
- Phần 3.2: Giai đoạn 2010-2014 – NodeJS náo loạn giới front-end
- Phần 4.1: Giai đoạn 2014 đến nay – NodeJS, BabelJS, Webpack, ReactJS – Tứ đại thiên vương (tạm thời) của JS
- Phần 4.2: Web front-end hiện đại có gì hot
Ở 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.
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.getElementById('jav') | |
| .getElementByClass('inner')[0].innerText = 'Do not watch JAV'; |
Với jQuery, ta chỉ cần sử dụng CSS Selector là xong
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#jav > .inner').text('Do not watch JAV') |
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.
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ấ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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <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> | |
| <!– 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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-thiendia/1.0.0/jquery-thiendia.min.js"></script> | |
| <!– 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> |
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.
Ở 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ị.
Từ coder đến developer - Tôi đi code dạo 
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 😀
LikeLike
Hóng mãi =) Tuần này có luôn Phần 3 anh nhỉ 😉
LikeLike
Cứ từ từ mỗi tuần 1 bài nhé ahihi 😀
LikeLike
var sweetAlert = swal;
sweetAlert(‘…’);
cái đoạn này là sao hả a. e ko hiểu lắm ạ 😦
LikeLiked by 1 person
Theo mình biết, swal là biến global trong sweetalert.min.js
Nghĩa là bạn có thể sử dụng swal(‘…’) luôn.
LikeLike
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 :))
LikeLiked by 1 person
Ừm, do cái chữ swal nó sida nên nhiều khi bạn đọc không hiểu nó là gì ấy :))
LikeLiked by 1 person
Hóng phần 3 quá vì đang bí trên con đường học front end
LikeLike
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ỉ ?
LikeLike
Ko em 😀
LikeLike
Hay quá !!!
LikeLike
Bài hay quá
LikeLike
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 ạ?
LikeLike
Ừm già rồi viết sai chính tả đó e ơi 😥
LikeLike