Trong bài viết này, chúng ta sẽ được gặp lại khái niệm framework và bên cạnh đó chúng ta còn có thêm một khái niệm mới đó là library hay thư viện. Hãy mở đầu với khái niệm mới library.
Sử dụng các thư viện library JavaScript
Khái niệm library hay thư viện trong JavaScript và các ngôn ngữ lập trình nói chung được hiểu là một bộ code cung cấp các công cụ tiện ích giúp chúng ta nhanh chóng thực hiện một thao tác xử lý nào đó với code được viết ngắn gọn hơn, dễ đọc hơn. Chẳng hạn bạn viết một nhóm các hàm xử lý các tác vụ tính toán số học và chia sẻ để người khác sử dụng. Đó có thể xem là một library.
So với các framework thì các library được nhận diện là các bộ code tiện ích nhỏ hơn và không cung cấp các thành phần mang kiến trúc cụ thể trong code triển khai phần mềm hay trong giao diện hiển thị của người dùng.
Và ở đây trong môi trường trình duyệt web, chúng ta thường phải viết rất nhiều các dòng code để truy vấn các phần tử HTML và thực hiện thao tác xử lý nào đó. Điều này đã tạo cảm hứng cho các lập trình viên giàu kinh nghiệm tạo ra và chia sẻ các library tuyệt vời cho tác vụ này:
[jQuery] Bài 1 – jQuery Là Cái Gì?
Việc sử dụng các library còn một ý nghĩa khác nữa là giúp chúng ta đảm bảo rằng code mà chúng ta viết ra sẽ luôn hoạt động tốt trên mọi trình duyệt web. Lý do ở đây là vì các trình duyệt web được phát triển với tiến trình hỗ trợ các tính năng của các ngôn ngữ không đồng đều. Do đó nên khi chúng ta xem tài liệu hướng dẫn tự học của W3schools hay MDN đều có một chỉ mục là Browser Compabilty (Tính tương thích với các trình duyệt).
Một tính năng mới của JavaScript có thể có cú pháp viết ngắn gọn hơn và dễ đọc hơn so với cách viết đã cung cấp trước đó; Nhưng lại chưa chắc đã được tất cả các trình duyệt web hỗ trợ. Đây cũng là điểm mà các thư viện JavaScript có thể giúp chúng ta được phép viết code theo cú pháp sắp được hỗ trợ đầy đủ bởi tất các trình duyệt web. Và thậm chí là cả những cú pháp đang được phát triển, rất được ưa thích bởi cộng đồng lập trình viên, và sắp được ra mắt chính thức. 
Sử dụng thư viện Babel trong trình duyệt web
Ở đây mình muốn giới thiệu cách sử dụng thư viện Babel ngay với mục đích đơn giản là giúp chúng ta có thể yên tâm sử dụng bất kỳ cú pháp hay công cụ nào trong các bài tiếp theo của Series JavaScript. Để sử dụng Babel trực tiếp trong môi trường trình duyệt web, chúng ta cần gắn tệp babel.min.js được cung cấp bởi Babel vào vị trí đứng trước tất cả các thẻ <script> khác trong văn bản HTML:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Và tất cả các tệp JavaScript khác sẽ cần được chỉ định thuộc tính type="text/babel" để được thông dịch qua thư viện này.
babel.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/babel">constgetMessage=()=>"Hi Babel !";let message =getMessage();
console.log(message);</script>Bây giờ thì chắc chắn là các trình duyệt web phiên bản cũ cũng có thể hiểu được phần “ngoại ngữ” trong code JavaScript của chúng ta rồi. Chúng ta đã có thể hoàn toàn yên tâm và tự tin để tìm hiểu thêm những điều mới mẻ của JavaScript.
Trang blog cá nhân của bạn thế nào rồi?
Ở thời điểm hiện tại thì chúng ta đã có khả năng viết code để tạo ra các trang đơn hoàn chỉnh và trình bày nội dung cho người xem. Chúng ta có thể tạo ra một trang đơn index.html làm trang chủ cho blog đang xây dựng và tải lên Github Pages để mọi người có thể xem. Và rồi tạo ra các trang đơn cho mỗi bài viết blog được đặt trong một thư mục /post bên cạnh index.html để người xem có thể truy xuất tới với đường dẫn https://yourname.github.io/post/bai-blog-thu-10.html.
Tuy nhiên lúc này sau khi đăng tải xong bài viết thứ 10 trên trang blog cá nhân. Chúng ta nhận ra một vấn đề đó là: “Sẽ thế nào nếu như sau khi chúng ta viết xong bài blog thứ 1001 và muốn cập nhật giao diện của trang web cho phù hợp với xu hướng thiết kế web ở thời điểm đó?”
“Chúng ta sẽ mở và chỉnh sửa giao diện của trang chủ index.html và bài viết đầu tiên bai-blog-thu-1.html. Sau đó copy/paste những thay đổi cần thiết lần lượt cho từng bài viết trong số 1000 bài còn lại. Hoặc là có một cách làm nào đó khác mà chúng ta cần tìm ra. “
Vậy là đã đến thời điểm chúng ta cần phải một chút băn khoăn cho cái định nghĩa ban đầu về một trang web mà chúng ta đã có.
Trích đoạn bài viết HTML đầu tiên:
Một website có thể được hiểu đơn giản là một tập các trang web đơn cùng được đặt ở một nơi nào đó trên internet mà mọi người có thể mở và xem được.
_Một người sử dụng máy tính
Cũng không có gì sai cả, nhưng chúng ta thực sự là cần suy nghĩ nhiều hơn một chút về việc tạo ra các trang web đơn.
Các framework JavaScript
Rõ ràng lúc này chúng ta thấy rằng công việc tạo ra các trang web đơn có nhiều thao tác trùng lặp và có thể được tự động hóa để đem lại tiện ích sử dụng, chỉnh sửa, và cập nhật khi cần thiết. Việc tự động hóa để bày ra một giao diện trang web đơn phù hợp với yêu cầu của người sử dụng website có thể được thực hiện xử lý ở 1 trong 2 nơi:
- Ngay trên thiết bị của người dùng
client-side. - Trên máy chủ web
server-side.
Tuy nhiên cho dù là được thực hiện ở đâu thì chúng ta cũng vẫn cần sự hỗ trợ của một framework JavaScript cho một công việc như vậy. Và đối với tiến trình học tập hiện tại của chúng ta đang thực hiện với Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên, mặc dù Series JavaScript của chúng ta vẫn còn nhiều thứ ở phía trước, nhưng đây thực sự đã là thời điểm rất phù hợp để chúng ta bắt đầu tìm hiểu về việc lập trình logic hiển thị nội dung.
Đối với phương án đầu tiên thì… hãy cứ tin mình đi: “chúng ta thực sự chưa hẳn là đã sẵn sàng cho phương án số 1 ở thời điểm hiện tại”.
Vì vậy nên chúng ta sẽ chọn phương án xử lý logic hiển thị hay logic linh động để tạo ra các trang web đơn tại server-side, tức là phương án số 2. .
Bạn sẽ không cần phải học thêm một ngôn ngữ lập trình nữa để bắt đầu đâu, vì ở thời điểm hiện tại JavaScript đã rất rất phổ biến tại server-side và được ưa thích bởi rất rất nhiều lập trình viên. Và trước khi gặp mặt framework giúp chúng ta nhanh chóng xây dựng một logic hiển thị như vậy ở server-side thì trước hết chúng ta cần làm quen với môi trường chạy JavaScript ở đó đã:
[NodeJS] Bài 1 – NodeJS Là Cái Gì?
Tổng kết của một bài viết hơi quá dài
Như vậy là chúng ta đã có một bài viết lan man, tản mạn về 2 khái niệm library và framework trong JavaScript. Bên cạnh đó là các phần giới thiệu mơ hồ về thư viện jQuery, Babel, và môi trường chạy JavaScript ở server-side là NodeJS. Mặc dù Series bài viết về ngôn ngữ JavaScript nói riêng vẫn sẽ được tiếp tục, mình thực sự rất mong muốn là bạn sẽ tham gia ngay cùng với mình trong 2 Series jQuery và NodeJS.
Hẹn gặp lại bạn trong các bài viết tiếp theo.
(Sắp đăng tải) [JavaScript] Bài 10 – Kiểu & Hằng
Nguồn: viblo.asia