Tổng hợp 5 Frameworks Front End tốt nhất 2024

Song song với việc thực hiện các tác phẩm nghệ thuật website cho khách hàng, Mona Media còn rất chú trọng và đặc biệt đề cao vai trò của việc luôn phải cập nhật công nghệ mới. Và CSS Frameworks là một trong những mảng cần phải cân nhắc, nhất là khi Mona Media đang cung cấp dịch vụ cắt HTML/CSS front end. Trong thời đại này thì không thiếu các Frameworks CSS/ Front End, số lượng có thể lên đến hàng chục. Nhưng số lượng Frameworks chất lượng thật sự không nhiều. Trong phạm vi bài viết tôi sẽ đề cập đến 5 Frameworks tốt nhất hiện nay và các Frameworks này, Mona Media đều sử dụng thành thạo.

Trong bài viết này, Mona Media sẽ so sánh các điểm hay – dở của cả 5 Framewors đó và ứng dụng của nó vào các trường hợp đặc biệt khác nhau. Với vị trí một Front End Developer bạn nên nằm lòng bài viết này để chọn ra một Frameworks tốt nhất cho mỗi dự án Front End. Ví dụ như nếu bạn chỉ đang làm một dự án phổ thông đơn giản, không cần thiết phải sử dụng một framework mạnh mẽ và cồng kềnh để triển khai làm tăng thời gian coding lên.

Frameworks đứng ở vị trí đầu tiên chính là CSS Frameworks nổi tiếng nhất hiện nay, Bootstrap.

(Lưu ý: một số thông tin như số liệu thống kê, đánh giá, version có khả năng đã bị Outdate kể từ thời điểm bài viết này được viết ra.)

• Tác giả: Mark Otto và Jacob Thornton.
• Phát hành: 2011
• Version hiện tại: 3.3.7
• Mức độ nổi tiếng: 111.000 lượt bình chọn trên GitHub
• Nền tảng dựa trên: RWD và mobile first ( ưu tiên hiển thị di động trước ).
• Kích thước files: 154 KB
• Pre-processors: Less and Sass (sorry nhưng mình không biết từ này tiếng Việt nghĩa là gì )
• Responsive: hỗ trợ
• Theo cấu trúc modular: hỗ trợ
• Có template/layout khởi đầu: hỗ trợ
• Bộ icon sử dụng: Glyphicons Halflings set
• Hỗ trợ add-on: Không chính thống nhưng hiện tại có các bên thứ 3 đã đóng góp khá nhiều plugins.
• Cơ chế độc quyền: Jumbotron
• Tài liệu mô tả: rất tốt
• Khả năng tuỳ biến: Hiện tại thiếu mỗi Color Picker ( JS chọn màu ).
• Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8 (có thể cài thêm Respond.js nếu muốn chạy trên IE8)
• Bản quyền nắm giữ: MIT

Vài lưu ý về Bootstrap

Thế mạnh nhất của nó là mức độ phổ biến, còn về mặt kỹ thuật, Bootstrap không hẳn tốt hơn các Frameworks còn lại trong list ( nhưng tất nhiên hơn rất nhiều Frameworks con con khác). Tại sao tôi lại nói mức độ phổ biến là một lợi thế rất lớn của Bootstrap?

Vì: – Bạn có thể dễ dàng search thêm các plugins khác từ hàng ngàn bên thứ 3 khác – Bạn có thể dễ dàng tìm kiếm đối tác, nhân viên biết sử dụng Bootstrap – Bạn dễ hỏi ^^

Các mẫu website có định hướng Bootstrap từ Mona Media bạn có thể xem thêm tại youtube.

2. Foundation

Foundation đang là Frameworks nổi tiếng thứ 2 trên thế giới, phát triển bởi một công ty duy nhất là ZURB và nó…rất mạnh. Minh chứng cho sức mạnh của nó là sự tin tưởng của nhiều ông lớn như: Facebook, Mozilla, Ebay, Yahoo!, và National Geographic.

• Tác giả: ZURB
• Phát hành: 2011
• Phiên bản hiện tại:6.3.1
• Mức độ nổi tiếng: 25,400 bình chọn trên GitHub
• Nền tảng dựa trên: RWD, mobile first, semantic.
• Kích thước files: 197.5 KB
• Pre-processors: Sass
• Responsive: hỗ trợ
• Theo cấu trúc modular: hỗ trợ
• Có template/layout khởi đầu: hỗ trợ
• Bộ icon: Foundation Icon Fonts
• Hỗ trợ add-on: hỗ trợ
• Cơ chế độc quyền: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Tài liệu: Tốt.
• Khả năng tuỳ biến: cũng tương tự như Boostrap.
• Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9 ; iOS, Android, Windows Phone 7
• Bản quyền: MIT

Ghi chú

Foundation là một Framework chuyên nghiệp với 1 đội ngũ hỗ trợ, huấn luyện và tư vấn viên.

3. Semantic UI

Semantic UI là 1 dự án đang triển khai với mục tiêu làm cho việc xây dựng website trở nên dễ hiểu hơn. Framework đặc biệt dùng cấu trúc code dựa trên các ngôn ngữ đời thực cho code dễ đọc và dễ hiểu hơn.

• Tác giả: Jack Lukic
• Phát hành: 2013
• Version hiện tại: 2.2
• Độ nổi tiếng: 34,762 lượt bình chọn trên GitHub
• Nền tảng dựa trên: Semantic, tag ambivalence, responsive.
• Kích thước files: 806 KB
• Pre-processors: Less
• Responsive: Yes
• Theo cấu trúc modular: hỗ trợ
• Có template/layout khởi đầu: hỗ trợ
• Bộ icon: Font Awesome
• Add-on: No
• Cơ chế độc quyền: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
• Tài liệu: Rất tôt, Very good. Semantic đặc biệt rất giỏi trong việc làm tài liệu, họ có hẳn một website riêng dùng cho document tại đây bao gồm cả: bắt đầu, chuyên sâu và xây dựng theme.
• Khả năng tuỳ biến: không có sẵn GUI, chỉ có manual customization.
• Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10 , Android 4, Blackberry 10
• Bản quyền: MIT

Ghi chú

Semantic là một Framework cực kì sáng tạo và đầy đủ tính năng nhất của một Front-End Framework còn lại trong list của chúng ta. Từ cách lập cấu trúc dự án, cấu trúc code đến đặt tên hàm, login code và độ sạch của code tất cả đều thuộc làm rất tốt.

4. Pure

Pure được phát triển bởi Yahoo là Framework nhẹ nhất trong list này, theo cấu trúc module và component để có thể tháo lắp khi cần. Một Frameworks rất tốt để phát triển các dự án từ nhỏ đến lớn đều hợp.

Pure chỉ mang đến một “khung xương” để bắt đầu một dự án Front End một cách sạch sẻ nhất. Mona Media khuyến khích sử dụng cho các lập trình viên không cần hoặc không thích sử dụng Full-Freatured Framework mà chỉ đặc biệt thích một component nào đó thôi không phải cồng kềnh vác cả khối nhưng chỉ dùng 1 ít.

5. UIkit

UIkit là một bộ sưu tập các component đã được biến thể nhằm mục đích tinh gọn và dễ sử dụng cho lập trình viên. Đây là CSS Frameworks kém tên tuổi nhất trong danh sách này tuy nhiên cũng không thể xem thường vì tính khả dụng của nó trong một số trường hợp.

UIkit đang được sử dụng nhiều nhất để phát triển các WordPress themes. Nó mang đến một bộ công cụ cực kì “flexiabe” và mạnh mẽ giúp dễ dàng tuỳ biến cho các loại Theme. Ulkit đang là cái lõi chính để thực hiện các tính năng giúp admin/ người dùng tuỳ ý xây dựng nên giao diện website mà không cần kiến thức về coding nào.

Vấn đề chính, cuối cùng thì bạn nên sử dụng cái nào?

Kết bài tôi muốn thống nhất, tổng kết lại và định hướng giúp bạn chọn Framework phù hợp nhất với chính bạn. Xem qua các điều sau:

• Framework đó có nổi tiếng không? Sự nổi tiếng của nó tất nhiên tương đương với việc “nó tốt” và quan trọng nhất là ta có một cộng đồng lớn để phát triển, hỏi đáp, xây dựng thêm nữa. Cũng đã có sẵn rất nhiều hướng dẫn trên mạng cả tiếng Anh lẫn tiếng Việt cho các bài viết này. Thêm nữa là các plugin của bên thứ 3 viết cũng nhiều hơn.
• Framework đó có phải đang trong quá trình phát triển? Có thể nói chắc chắn 100% rằng không hề có một sản phẩm công nghệ nào hoàn hảo 100% và nếu tác giả đã ngừng phát triển nó thì bạn cũng không nên phí thời gian sử dụng làm gì bởi vì đến 1 lúc nào đó nó sẽ không còn phù hợp với nhu cầu phát triển của bạn nữa.
• Tài liệu của Framework đó hiện tại như thế nào. Khi bạn đọc vào một tài liệu hãy dành ra 5 phút trước để check qua tổng thể xem tài liệu có được viết một cách “có tâm” hay không. Các phần quan trọng có thấy để cập tới hay không. Vì nếu như một framework dù tốt đến đâu nhưng người phát hành lại không chú trọng đến việc hướng dẫn người sử dụng thì cũng rất khó cho bạn để có thể tiếp tục training nó sâu hơn.

Tuy nhiên bạn cũng nên cân nhắc tới một điểm, hiện nay phong cách Front End theo xu thế Flexbox và Grid Layout đang dần phát triển và dần được các trình duyệt đời mới ủng hộ hết mình. Nên nếu bạn có ý định chuyển hẳn sang dùng 2 style này mà bỏ qua các CSS Frameworks trên thì cũng không phải là một ý tưởng tồi.