Top 10 front-end framework trong năm 2016 (Phần 1)

Dưới đây là tốp 10 front-end framework phổ biến nhất trong năm 2016

1. Boostrap

Danh sách này sẽ không đầy đủ nếu không có front-end framework cực kỳ phổ biến là Bootstrap. Được tạo bởi các lập trình viên của Twitter và được phát hành lần đầu vào năm 2011, nó là framework mã nguồn mở phổ biến nhất trên thế giới.

Giống như các front-end framework hiệu quả khác, Bootstrap bao gồm các thành phần CSS, HTML và JavaScript. Nó tuân thủ các chuẩn responsive web design, cho phép bạn phát triển các trang web responsive phức tạp.

Bởi vì nó được cập nhật liên tục, Bootstrap thường được bổ sung những tính năng mới và tốt nhất. Ví dụ, nó bổ sung các theme theo hướng dẫn về material desing của Google ngay sau khi chúng được công bố, và nó cũng đã nâng cấp sử dụng Sass như là CSS preprocessor.

Ưu điểm:

• Hỗ trợ responsive web design (cũng có thể vô hiệu hóa nếu được yêu cầu)
• Tài liệu hướng dẫn đầy đủ

Nhược điểm:

• Kích thước file lớn 276KB vì có quá nhiều style ít được sử dụng
• Có quá nhiều HTML class và các phần tử DOM vì vậy có thể lộn xộn và gây nhầm lẫn

Lý tưởng cho: Những người mới bắt đầu và những người cần một front-end framework mạnh mẽ.

2. Semantic-UI

Một front-end framework mới là Semantic-UI, nó khác biệt so với những framework còn lại và đã trở thành một trong những framework phổ biến nhất.

Sự đơn giản chính là điểm mạnh của framework này. Bởi vì nó sử dụng ngôn ngữ tự nhiên, code tự giải thích chính nó. Thậm chí nếu chưa có nhiều kinh nghiệm lập trình bạn sẽ vẫn cảm thấy khá quen thuộc khi làm việc với nó.

Một tính năng nổi bật khác của Semantic-UI là nó tích hợp một lượng lớn các thư viện của bên thứ ba. Thực tế là, bạn sẽ không cần sử dụng bất kỳ thư viện nào khác. Do đó, quá trình phát triển sẽ dễ dàng và hợp lý hơn.

Ưu điểm:

• Tên các class có ý nghĩa tạo ra ít rào cản khi bắt đầu, thậm chí những người mới bắt đầu có thể sử dụng ngay
• Kích thước các file nhỏ và tối thiểu hóa thời gian tải bởi vì bạn có thể chỉ tải các thành phần bạn cần, mỗi thành phần đều có các file JS và CSS của riêng mình
• Các phần tử đa năng giúp cho việc tùy chỉnh dễ dàng

Nhược điểm:

• Có quá nhiều gói khi so sánh với Foundation và Bootstrap
• Với những thiết kế phức tạp, bạn có thể tìm thấy những thiếu hụt của framework này

Lý tưởng cho: Những người mới bắt đầu và những người muốn một framework nhẹ và nhanh.

3. Foundation

Được tạo bởi công ty thiết kế web Zurb, Foundation là một framework cao cấp, dành cho doanh nghiệp và rất phù hợp để phát triển các website nhanh, responsive. Được sử dụng bởi các website như Facebook, eBay, và Mozilla, nó cũng khá phức tạp và có thể không phù hợp với những người mới bắt đầu.

Framework với nhiều tính năng này hỗ trợ GPU acceleration giúp cho các animation mượt, nhanh và Fastclick.js để render nhanh hơn trên các thiết bị mobile. Nó chạy Sass preprocessor và bao gồm các thuộc tính trao đổi dữ liệu được phát triển bởi Foundation, giúp bạn tải các section HTML nhẹ hơn cho mobile và nặng hơn cho các thiết bị có màn hình lớn hơn.

Ưu điểm:

• Không lock-in style, vì thế bạn có thể linh hoạt hơn
• Sử dụng REMS thay vì pixels, không cần chỉ định rõ chiều rộng, cao cho từng loại thiết bị

Nhược điểm:

• Kích thước file khá lớn
• Hơi phức tạp cho những người mới bắt đầu

Lý tưởng cho: Những lập trình viên đã có kinh nghiệm và những người phát triển các website nhanh, hấp dẫn, mang tính responsive.

4. Materialize

Materialize cũng tuân theo material design của Google và bao gồm các button, icon, card, form và các thành phần khác. Nó có một phiên bản chuẩn và một phiên bản sử dụng Sass.

Materialize bao gồm tính năng IZ column grid tiện lợi, có thể được sử dụng cho bố cục của website. Nó cũng có material design shadows, typography, colors và các tính năng khác.

Ngoài ra, nó còn có ripple-effect animation, drag-out mobile menus, Sass mixins và nhiều thứ khác.

Ưu điểm:

• Có một lượng lớn các thành phần để lựa chọn
• Hỗ trợ responsive đảm bảo rằng website được hỗ trợ trên tất cả các thiết bị

Nhược điểm:

• Kích thước file lớn
• Không hỗ trợ Flexbox

Lý tưởng cho: Những lập trình viên ít kinh nghiệm, những người muốn sử dụng thiết kế material của Google.

5. Material UI

Nếu bạn đang tìm kiếm một framework cái tuân thủ các hướng dẫn thiết kế material của Google, thì bạn không thể bỏ qua Material UI. Nó là framework thực hiện các hướng dẫn thiết kế material kỹ lưỡng nhất, nhưng có một điểm cần chú ý: Nó không phải là điểm bắt đầu cho một dự án thiết kế web.

Nó gồm các style CSS và các thành phần thiết theo phong cách material, Material UI sử dụng LESS preprocessor. Vì nó sử dụng các thành phần React, nên có kiến thức tốt về React là một lợi thế.

Khả năng tùy chỉnh cao, Material UI bao gồm các style chia thành nhiều file khác nhau, vì thế bạn có thể ghi đè các biến LESS CSS mà không ảnh hưởng đến các thành phần của framework.

Ưu điểm:

• Cách dễ dàng nhất để đáp ứng các hướng dẫn material design của Google khi sử dụng một framework
• Tính tùy chỉnh cao

Nhược điểm:

• Không phát minh để phục vụ như một điểm bắt đầu cho các dự án thiết kế web
• Cần có một hiểu biết chắc chắn về React để sử dụng hiệu quả

Lý tưởng cho: Những lập trình viên hiểu và có kinh nghiệm với React và những người cần một cách dễ dàng để tuân thủ các hướng dẫn thiết kế material.

Nguồn bài viết : https://www.keycdn.com