Lịch sử và những điểm mạnh của jQuery
Trước tiên, hãy cùng tìm hiểu xem tại sao jQuery lại trở thành 1 thư viện phổ biến trong hệ sinh thái Javascript ?
jQuery ra đời trong khoảng những năm 2006, khi mà các trang web còn rất đơn sơ, khái niệm web application, singple page application trên nền Javascript lúc này vẫn chưa bắt đầu. Vào khoảng thời gian này, Javascript được dùng chủ yếu để hiện thị các widget trên web như image slider, image gallery, date picker, embed form, buttons… Engine javascript lúc bấy giờ chưa đủ mạnh để xử lý các tác vụ như bây giờ. Và các trình duyệt thời đó thì có rất nhiều vấn đề, mỗi trình duyệt có 1 kiểu tương tác, hiển thị khác nhau, thiếu quy chuẩn chung cho Javascript. Và với sự xuất hiện của jQuery thì những vấn đề đó hầu như được giải quyết, bằng cách cung cấp các features với cú pháp đồng nhất và trải nghiệm đồng nhất trên các trình duyệt khác nhau:
DOM Selector:
jQuery cung cấp syntax selector tương tự CSS selector, có thể access bất kì DOM element nào trong web, theo class, id, tag name, attribute, children node, show, hide element, duyệt qua từng phần tử đã select…
Ajax handling:
Trước khi ajax phổ biến thì cách để lấy dữ liệu từ server về client là map view với controller và dùng code server để render view, data (Java có JSP, ASP.Net có cshtml, hay đơn giản hơn là PHP). Với sự xuất hiện của ajax thì mỗi trình duyệt lại có 1 syntax để call ajax khác nhau. Với jQuery thì đơn giản chỉ cần dùng syntax $.ajax và truyền vào các tham số url, method (GET, POST…), kết quả request sẽ được trả về trong event success, failure hoặc hàm .done ()hay .then()
Events listener:
Ở các phiên bản cũ của những trình duyệt phổ biến, việc add các events (click, load, mousehover, mouseout, show, hide) cho DOM element rất hạn chế và không đồng nhất. Với jQuery thì syntax rất đơn giản là .on(‘eventName’), kết hợp với DOM selector nên việc add events rất dễ dàng.
jQuery plugins:
Rất nhiều widget javascript đã được viết dựa trên jQuery và được sử dụng rộng rãi trong phần lớn các trang web, giúp rút ngắn thời gian phát triển, ví dụ như các thư viện mở rộng cho form, input, select2, datepicker. Ngay cả thư viện CSS nổi tiếng nhất là Bootstrap cũng phát triển các tính năng Javascript trên nền jQuery.
jQuery có còn cần thiết trong năm 2020
Thực tế thì jQuery đã dần trở nên tàn lụi khi mà các trình duyệt ngày càng trở nên hoàn thiện và có thể làm tốt những tính năng mà jQuery đã từng làm, các ứng dụng web và mobile thì ngày càng trở nên phức tạp với các yêu cầu mà sử dụng jQuery không còn cần thiết và phù hợp nữa.
Các tính năng của jQuery đã được các trình duyệt đồng nhất và xử lý tốt hơn.
DOM selector của jQuery có thể được thay bằng document.querySelector hoặc querySelectorAll, với CSS selector theo class, id… tương tự.
$.ajax có thể được thay bằng fetch hoặc axios
jQuery event listener có thể được thay bằng event listener của browser hoặc event handling của các framework JS hiện đại.
Các tính năng của jQuery không còn cần thiết nếu sử dụng các framework JS như React, Vue, Angular
Nếu bạn đang sử dụng 1 trong các frameworks này, chắc hẳn việc select DOM elements và xử lý show/hide, edit class, attributes, add event listener sẽ không còn cần thiết nữa.
Với React, Vue hay Angular, các frameworks này đều cung cấp các template engine rất mạnh. Event và data sẽ được gắn trực tiếp vào DOM element trong template. Data và event luôn được đồng bộ giữa code và view, nhờ cơ chế watch của framework, khi data thay đổi thì view sẽ được tự động cập nhật mà không cần thêm bất kì code xử lý nào. Class của DOM Element lúc này được tách khỏi business logic và chỉ đóng vai trò style CSS. Giảm thiểu vấn đề code bị lỗi khi thay đổi cấu trúc HTML.
So sánh thực tế use case sử dụng jQuery và các giải pháp khác.
Hãy thử tưởng tượng, bạn cần code 1 login form, sau khi xong form Html và CSS, bạn set ID cho user name input và password input. Form login của bạn có 1 button Login, bạn dùng jQuery để add event khi click button Login thì sẽ gọi đến hàm Login.
Trong code xử lý login, bạn dùng jQuery $(“#userNameInput”).val(), $(“passwordInput”).val() để lấy username và password mà user đã nhập vào form. Tiếp theo bạn validate username và password nhập vào có đúng format, có bị để trống không… Cuối cùng bạn gọi $.ajax và truyền username và password vào 1 object để gửi lên server. Từ đây server sẽ xử lý tiếp và trả về response user có hợp lệ không.
Nghe qua thì có vẻ rất đơn giản và dễ dàng, nhưng nếu thay vì form login chỉ có 2 trường input là username và password, có thể có thêm checkbox Remember Me… trong những trường hợp và bài toán khác, ta có thể có 1 form nhập dữ liệu từ 20 đến 50 trường. Vậy thì nếu chỉ dùng jQuery thì sẽ gặp những vấn đề gì:
Tạo html form inputs:
Vấn đề:
nếu tất cả đều là text input, bạn sẽ phải lặp lại phần code html cho mỗi input 20 đến 50 lần. Nhưng trong thực tế, 20-50 inputs này sẽ có đủ thể loại từ text, select dropdown, checkbox, radio, date-picker… Lúc này, 1 coder tay to rất có thể sẽ viết Html cho cả 20-50 inputs này, set ID cho từng input để phục vụ cho các xử lý logic.
Giải pháp:
Với các framework JS như React, Vue, Angular, bạn có thể tách các input type khác nhau thành các component như TextInput, SelectInput, CheckboxInput…
Tiếp theo, define 1 json array chứa metadata (input type, validation rules, api url để load data…) của toàn bộ inputs trong form, và với code html thì dùng syntax for loop của framework, map type của input metadata với input component để render toàn bộ list inputs.
Xử lý logic cho từng inputs trong form:
Vấn đề:
Mỗi inputs có thể có 1 rule validation khác nhau. Với input type là select box, thì list options cho mỗi input sẽ khác nhau, có thể là 1 list có sẵn, hoặc load từ api… 1 số inputs lại có logic ẩn, hiện tuỳ thuộc vào dữ liệu của các input khác. Nếu chỉ đơn thuần dùng jQuery, ta sẽ phải define logic cho từng input trong form theo selector.
Giải pháp:
Nhờ vào tính năng tự động binding data và event giữa tầng logic và view, ở phần khởi tạo form html inputs, trong vòng lặp for để render inputs, bạn có thể thiết lập event cho input mà ko cần dùng class hoặc id, event này cũng được gắn sẵn metadata của từng input để bạn có thể tham chiếu và xử lý.
Submit dữ liệu từ form lên server:
Vấn đề:
Với code xử lý thuần bằng jQuery, bạn sẽ phải get value của từng input trong form, tạo JSON object từ value của các inputs và submit lên server.
Giải pháp:
Nếu bạn đã define được JSON structure ở bước khởi tạo form, toàn bộ value của input sẽ được tự động đồng bộ với property chứa value của input object. Lúc này bạn chỉ cần submit object này lên server mà không cần phải dùng jQuery selector để lấy dữ liệu của từng input trong form.
Kết luận
Qua use case ở trên, có thể thấy rằng, với những trường hợp UI đơn giản và logic xử lý ở client không nhiều, thì việc sử dụng jQuery rất đơn giản, thuận tiện, giúp rút ngắn thời gian code. Nhưng khi UI và logic xử lý ở client trở nên phức tạp, nếu chỉ sử dụng jQuery thì sẽ không đáp ứng được yêu cầu của các bài toán phức tạp, số lượng code sẽ tăng lên và khó quản lý code. Lúc này việc sử dụng các framework Javascript để chia nhỏ HTML thành các reusable components, đồng bộ event và data thông qua template mà không cần phụ thuộc vào html class, ID sẽ giúp code nhanh hơn, sạch hơn và hiệu quả hơn.
