Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
42 Thư Viện Javascript Dành Cho Front-end Developer

42 Thư Viện Javascript Dành Cho Front-end Developer


Ngày 7 Tháng 6 Năm 2021

Javascript được xem là một ngôn ngữ không thể thiếu dành cho việc thiết kế và phát triển web. Do đó trong ngày hôm nay mình xin giới thiệu đến bạn một số thư viện Javascript phổ biến dành cho developer và coder nhé!

React.JS

React là một thư viện Javascript mã nguồn mở được dùng để xây dựng giao diện cho web application. Nó cho phép bạn có thể tạo các UI phức tạp từ các đoạn mã nhỏ, độc lập (component) và tái sử dụng. Ngoài ra nó được Facebook duy trì, phát triển nên bạn hoàn toàn yên tâm về việc sử dụng thư viện này cho dự án của mình nhé.
Hiện nay có rất nhiều công ty lớn đang sử dụng nó cho website của mình như là Facebook, Twitter, Netflix, WhatsApp...

React.JS

Nguồn

Vue.JS

Vuejs là một thư viện mã nguồn mở miễn phí với kích thước nhỏ gọn giúp bạn xây dựng giao diện cho người dùng một cách nhanh chóng(đặc biệt là single page web application). Nó được phát triển bởi Evan You (một lập trình viên tại Google) vào năm 2014 và đạt được vị trí thứ 2 trong ranking Front-end Javascript Framework năm 2019. Theo mình thấy một số lợi ích của Vúe là dễ dàng học và tiếp thu hơn so với các framework khác, document hướng dẫn cực kỳ chi tiết và dễ hiểu...

Vue.JS

Nguồn

Angular.JS

Angular Js cũng giống như hai framework phía trên, giúp bạn có thể dễ dàng xây dựng ứng dụng web, mobile web, native mobile và native desktop. Nó được nhiều công ty lớn tin tưởng và sử dụng như là Google, Forbes, IBM, Microsoft...

Angular.JS

Nguồn

Jquery

Jquery là một trong những thư viện được sử dụng phổ biến bởi các lập trình viên front-end. Nó là một thư viện mã nguồn mở nhỏ gọn, miễn phí cung cấp nhiều tính năng hữu ích dành cho phát triển website như là AJAX, thao tác với CSS, DOM, HTML một cách dễ dàng, xử lý sự kiện(event), hiệu ứng chuyển động...

Jquery

Nguồn

Lodash

Lodash giúp cho việc bạn xử lý các vấn đề liên quan tới Array, String, Number, Object... bằng ngôn ngữ lập trình Javascript một cách dễ dàng.Lodash

Nguồn

AnimeJS

AnimeJS là thư viện giúp bạn có thể dễ dàng xây dựng hiệu ứng chuyển động nhanh chóng dành cho trang web bằng cách làm việc với các thuộc tính CSS, SVG, thuộc tính DOM, Javascript Object...AnimeJS

Nguồn

AOS

AOS giúp bạn tạo ra các hiệu ứng chuyển động cho các thành phần website khi người dùng scroll trang web.AOS

Nguồn

Popper

POPPER là một thư viện được viết bằng javascript với kích thước chỉ khoảng 3kB giúp bạn nâng cao tốc độ của website mà vẫn giữ được các chức năng mà một tooltip cần có. Nó hay được sử dụng trong các thư viện phổ biến hiện nay như là Bootstrap, Foundation, Material UI... Theo mình thấy nó giúp chúng ta giải quyết vấn đề hay gặp trong tooltip đó là xác định vị trị của phần tử và hiển thị nó tốt nhất có thể trên những màn hình thiết bị khác nhau.Popper

Nguồn

Owl Carousel 2

Owl Carousel 2 là một thư viện mã nguồn mở giúp bạn xây dựng carousel một cách dễ dàng và có tính thẩm mỹ cao. Với hơn 60 dạng carousel khác nhau, hỗ trợ tính năng touch and drop trên mobile để tăng trải nghiệm người dùng, responsive trên nhiều màn hình thiết bị khác nhau, thư viện được chia thành nhiều mô đun nhỏ giúp giảm các plugin không cần thiết khi sử dụng trong dự án. Điểm mình cảm thấy thích ở thư viện này là nó có nhiều ví dụ chi tiết cho từng chức năng giúp bạn dễ dàng thiết lập cũng như lựa chọn xây dựng carousel phù hợp cho dự án web của mình như là chức năng autoplay, có thể sử dụng với video, tùy chỉnh hiệu ứng chuyển động... Bạn có thể tham khảo thêm trong trang demo của nó nhé!Owl Carousel 2

Nguồn

D3.js

D3.js là một thư viện javascript được xây dựng cho việc trực quan hóa dữ liệu và hiển thị thông qua SVG, Canvas, HTML... Nó là mã nguồn mở, được hơn 1 triệu lượt tải xuống mỗi tuần thông qua npm. Số liệu trên có thể giúp chúng ta hiểu được phần nào độ phổ biến cũng như nổi tiếng của nó ở trên thế giới. Ngoài ra nó cũng cung cấp nhiều ví dụ có sẵn giúp bạn có thể tìm hiểu cũng như học hỏi thêm làm sao để áp dụng D3.js vào trang web của mình. Tuy nhiên nó cũng có một số điểm hạn chế là khó sử dụng đối với những bạn mới bắt đầu hay sẽ không chạy được trên các trình duyệt cũ như là IE8.D3.js

Nguồn

DarkModeJS

Thư viện DarkModeJS giúp chúng ta tự động thực hiện thay đổi giao diện người dùng theo khoảng thời gian nhất định và có thể chuyển sang chế độ khác theo yêu cầu của người dùng. Bạn có thể tự tạo ra các file css tương phản cho mình và thiết lập chúng thông qua DarkModeJS.DarkModeJS

Nguồn

Chart.js

Thư viện Chart.js giúp bạn tạo các biểu đồ đẹp mắt cho trang web của mình. Nó có rất nhiều biểu đồ khác nhau và cho phép chúng ta linh hoạt xử lý các dữ liệu truyền vào cho biểu đồ khi sử dụng thư viện. Ngoài ra nó cũng thường xuyên được cập nhật các phiên bản mới và được responsive trên nhiều màn hình thiết bị khác nhau.Chart.js

Nguồn

SweetAlert

SweetAlert là một thư viện mã nguồn mở giúp bạn xây dựng những thông báo cho trang web một cách nhanh chóng với tính thẩm mỹ cao và nhiều hiệu ứng chuyển động đẹp mắt. Để sử dụng nó cho trang web của chúng ta cũng rất đơn giản, bạn chỉ cần gọi file sweetalert.min.js thông qua CDN và xác định thuộc tính cơ bản cho thông báo như là title(tiêu đề), text(nội dung), icon. Ngoài ra bạn có thể thêm các thuộc tính và chức năng khác như là button (nút), hiển thị thông qua Ajax, sử dụng promise cho modal...SweetAlert

Nguồn

Highlightjs

Highlightjs là một thư viện mã nguồn mở được xây dựng bằng Javascript giúp bạn làm nổi bật đoạn code ở trong trang web và có thể chạy trên cả trình duyệt cũng như trên máy chủ. Một số điểm mạnh của thư viện này là không phụ thuộc vào bất cứ framework nào, có khả năng tự động phát hiện ngôn ngữ mà bạn nhúng vào trang web, hỗ trợ hơn 189 ngôn ngữ lập trình phổ biến, cung cấp thêm 94 kiểu style cho các đoạn mã trong trang web . Điểm mình thích ở thư viện này là bạn có thể giảm dung lượng của Highlightjs thông qua việc loại bỏ những ngôn ngữ lập trình mà chúng ta không sử dụng trong quá trình download. Đối với phía máy chủ thì bạn có thể dùng yarn hay npm để cài đặt nhé.Highlightjs

Nguồn

VideoJS

VideoJS là trình phát video được xây dựng từ nền tảng Video HTML5 hỗ trợ cho nhiều định loại định dạng khác nhau như Youtube, Vimeo, streaming... Nó được phát triển vào giữa năm 2010, được hàng trăm lập trình viên đóng góp vào dự án và hiện có hơn 450.000 trang web đang sử dụng thư viện này. Một số điểm mạnh của VideoJS là được thiết kế với tính thẩm mỹ cao, có nhiều theme để lựa chọn phù hợp cho trình phát media, có thể chạy trên cả máy tính cũng như điện thoại, cung cấp hơn 100 plugin giúp bạn có thể tính chỉnh cũng như thêm tính năng mới một cách dễ dàng...VideoJS

Nguồn

Momentjs

Momentjs giúp bạn dễ dàng xử lý ngày giờ bằng Javascript một cách dễ dàng.Momentjs

Nguồn

PixiJS

Tạo nội dung kỹ thuật số đẹp mắt với trình kết xuất WebGL 2D nhanh nhất, linh hoạt nhấtPixiJS

Nguồn

Webpack

Webpack là công cụ đóng gói mô đun tĩnh cho các ứng dụng Javascript hiện đại.Webpack

Nguồn

Fullpagejs

Fullpagejs giúp bạn tạo fullscreen scrolling dành cho website.Fullpagejs

Nguồn

HowlerJS

HowlerJS là một thư viện mã nguồn mở được xây dựng bằng Javascript với kích thước chỉ khoảng 7KB giúp bạn tạo cũng như xử lý audio một cách dễ dàng cho trang web. Với việc kết hợp giữa API và HTML5 Audio nên nó có thể chạy trên nhiều nền tảng và trình duyệt web khác nhau bao gồn cả IE9 và Cordova. Một số điểm mạnh của HowlerJS là có khả năng mở rộng dễ dàng thông qua kiến trúc chia mô đun, hỗ trợ hầu hết các loại file audio phổ biến ngày nay như MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A..., tự động caching giúp tăng hiệu suất của trang web cũng như băng thông của server... Ngoài ra nó cũng cung cấp cho bạn một số thuộc tính để có thể tinh chỉnh trình phát media để phù hợp với trang web như là xác định âm lượng ban đầu, có tự động phát hay không, tính năng động lặp lại bài hát khi kết thúc...HowlerJS

Nguồn

Masonry

Nó là một thư viện giúp bạn dễ dàng tạo ra các bố cục lưới phức tạp cho trang web của mình.(Đặc biệt là hình ảnh)

Masonry

Nguồn

screenfull

Screenfull giúp chuyển các thành phần hay trang web sang chế độ toàn màn hình.

screenfull

Nguồn

Particles

Particlesjs là một thư viện mã nguồn mở miễn phí giúp bạn có thể tạo và tinh chỉnh background đẹp cho trang web.

Particles

Nguồn

Leaflet

Leaflet là một thư viện mã nguồn mở Javascript cho việc tương tác với map(bản đồ) trên thiết bị di động.

Leaflet

Nguồn

SortableJS

SortableJS là thư viện javascript cung cấp thêm các chức năng drag and drop cho HTML5.

SortableJS

Nguồn

clipboard.js

Clipboard giúp bạn có thể tạo chức năng sao chép nội dung trong trang web vào clipboard một cách nhanh chóng.

clipboard.js

Nguồn

Underscore.js

Underscore js là javascript library cung cấp cho bạn các hàm hữu ích để giải quyết các vấn đè hay gặp trong quá trình lập trình.

Underscore.js

Nguồn

Cleave.js

Cleave giúp chúng ta có thể dễ dàng định dạng lại thành phần input khi người dùng đang nhập thông tin.

Cleave.js

Nguồn

Share

Thư viện Sharect giúp người dùng có thể chọn những văn bản mà họ muốn ở trong trang web và chia sẻ ngay lập tức lên Facebook hoặc Twitter giống như Medium. Kích thước của nó cũng rất là nhẹ chỉ khoảng 8Kb.

Share

Nguồn

Chardin.js

Thư viện Chardin.js giúp chúng ta hiển thị các phần hướng dẫn cho các component trong trang web. Nó giúp giải thích thêm về các chức năng của component giúp người dùng hiểu và dễ dàng sử dụng hơn.

Chardin

Nguồn

Flip

Flip là một plugin giúp bạn có thể tạo bộ đếm(counter) kèm theo hiệu ứng flip một cách nhanh chóng và dễ dàng cho trang web. Nếu bạn cần tạo ra các bộ đếm ngược thời gian của sự kiện, các chương trình khuyến mãi, chiến dịch gây quỹ thì theo mình nghĩ đây là thư viện tốt nhất dành cho bạn.

Flip

Nguồn

Image Compare Viewer

Image Compare Viewer là một thư viện mã nguồn mở được xây dựng bằng Javascript giúp bạn có thể tạo ra component so sánh hai hình ảnh trực tiếp ở ngay trên trang web. Theo mình thấy nó thường được sử dụng để so sánh hình ảnh trước và sau khi chỉnh sửa để giúp người dùng có cái nhìn trực quan và phân biệt được rõ ràng hơn.

Image Compare Viewer

Nguồn

Notyf

Notyf là thư viện Javascript giúp bạn tạo các thông báo dạng toast cho trang web với kích thước chỉ khoảng 3Kb. Nó được hiển thị responsive trên nhiều màn hình thiết bị khác nhau và dễ dàng sử dụng chung với các framework JS phổ biến hiện nay như React, Angular, Aurelia, Vue, và Svelte.

Notyf

Nguồn

Dinero.js

Dinero.js là một thư viện javascript cung cấp nhiều tính năng giúp bạn có thể làm việc và xử lý các vấn đề liên quan đến tiền tệ (currency) ở trong trang web.

Dinero.js

Nguồn

simpleParallax.js

simpleParallax.js là một thư viện mã nguồn mở javascript với kích thước nhỏ gọn, nó sẽ giúp bạn có thể tạo hiệu ứng chuyển động parallax cho hình ảnh của trang web một cách đơn giản và dễ dàng.

simpleParallax.js

Nguồn

Duet Date Picker

Duet Date Picker Là một mã nguồn mở được phát triển bởi Duet Design System’s. Nó cho phép bạn có thể xây dựng component date picker(Chọn thời gian) một cách dễ dàng cho trang web mà không cần phải sử dụng thêm thư viện bổ sung nào. Một số tính năng mà mình cảm thấy thích ở thư viện này là có dark và light theme, có thể thiết lập khoảng cách thời gian mà người dùng được phép chọn, thiết lập ngày tháng năm theo khu vực…

Duet Date Picker

Nguồn

Print.js

Print.js là một thư viện Javascript nhỏ gọn giúp bạn có thể in file trực tiếp ngay trên trang web mà không cần phải chuyển hướng hay sử dụng nhúng(embeds). Nó hỗ trợ in được rất nhiều dạng như là PDF, HTML (Ví dụ như form...), hình ảnh, JSON... Ngoài ra thì nó cũng chạy được hầu hết trên các trình duyệt phổ biến hiện nay như là Google Chrome, Firefox, Safari, Edge và Opera.

Print.js

Nguồn

Math JS

Math JS là một thư viện toán học mã nguồn mở với hơn 10.5k sao đánh giá trên Github dành cho ngôn ngữ Javascript và NodeJS(chạy phía server). Nó giúp bạn linh hoạt trong việc tính toán và xử lý với nhiều kiểu dữ liệu khác nhau như là numbers, big number(số lớn), complex number(số phức tạp), phân số, unit(đơn vị) và ma trận.

Math JS

Nguồn

PROGRESS BAR JS

PROGRESS BAR.JS là một thư viện mã nguồn mở được xây dựng bằng Javascript giúp bạn dễ dàng tạo các thanh tiến trình với nhiều loại hình dạng khác nhau và responsive trên nhiều màn hình thiết bị phổ biến ngày nay. Bạn cũng có thể thiết lập dễ dàng thông qua npm, bower hoặc tải về để sử dụng. Ngoài ra nó cũng có một trang hướng dẫn đầy đủ về các tính năng mà chúng ta có thể sử dụng trong thư viện này và các trang demo với đoạn code được viết sẵn giúp bạn dễ dàng hơn trong việc áp dụng vào trang web của mình.

PROGRESS BAR JS

Nguồn

Quill

Quill là một trình soạn thảo mã nguồn mở nên bạn cứ yên tâm sử dụng cho tất cả loại trang web thương mại hay phi thương mại nhé. Nó được xây dựng với nhiều chức năng như thêm đường dẫn, hình ảnh, video hay thêm các đoạn code vào nội dung... Điểm mình thích ở Quill là cách thiết lập dễ dàng, hiển thị được trên tất cả các trình duyệt web hiện đại và responsive trên nhiều màn hình thiết bị, có các bài hướng dẫn chi tiết về các vấn đề thường hay gặp khi sử dụng nó.

Quill

Nguồn

VALIDATE JS

VALIDATE.JS là một thư viện mã nguồn mở cung cấp cho bạn cách thức để kiểm tra các đối tượng Javascript trong trang web. Mục tiêu chính của nó là thiết lập các validation dưới dạng JSON và có thể chia sẻ qua lại giữa trình duyệt và máy chủ. Nó cung cấp cho chúng ta rất nhiều các phương thức validate như là xác thực ngày tháng, email, format, kiểm tra loại của đối tượng... VALIDATE.JS có thể chạy trên cả hai môi trường là trình duyệt và máy chủ(Nodejs). Các ví dụ và cách sử dụng bạn tham khảo thêm trong trang demo nhé!

VALIDATE JS

Nguồn

MochaJS

MochaJS là một framwork testing được sử dụng phổ biến trong lập trình web và hỗ trợ cho cả back-end(Nodejs) và front-end. Nó giúp bạn thực hiện kiếm tra không đồng bộ một cách đơn giản và dễ dàng. Ngoài ra nó còn có cộng động lập trình viên hỗ trợ đông đảo, nhiều hướng dẫn ví dụ chi tiết và được nhiều công ty cũng như website lớn tin tưởng sử dụng.

MochaJS

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu thư viện Javascript hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!