So Sánh 5 Framework Front-End Phổ Biến Nhất

So Sánh 5 Framework Front-End Phổ Biến Nhất

Ngày nay xuất hiện rất nhiều các framework front-end CSS, nhưng dường như chỉ có một vài trong số đó là thực sự tốt. Trong bài viết này, ta sẽ đem ra so sánh năm framework front-end tốt nhất hiện nay. Cùng tham khảo để biết thêm nhiều thông tin bổ ích nhé!

Mỗi framework đều có những ưu nhược điểm riêng và các lĩnh vực ứng dụng cụ thể, đáp ứng nhu cầu của những dự án cụ thể. Ví dụ, nếu đó là một dự án đơn giản thì chẳng việc gì phải dùng đến một framework phức tạp cả. Ngoài ra, nhiều lựa chọn trong số đó là ở dạng mô-đun, cho phép bạn chỉ sử dụng những component cần thiết, hay thậm chí là trộn lẫn cả component từ những framework front-end khác nữa.Những framework front-end dưới đây được sắp xếp dựa trên độ phổ biến của chúng theo GitHub, bắt đầu với framework đang nổi nhất, đương nhiên, là Bootstrap.

Lưu ý : một số thông tin dưới đây được xếp hạng dựa theo số sao đánh giá trên GitHub  – có thể hiện nay đã không còn chính xác nữa, nên hãy chú ý nếu bạn đang đọc bài viết này khá lâu sau ngày được đăng. Ngoài ra cũng hãy lưu ý rằng dung lượng ở đây là kích thước đã được thu nhỏ của các file CSS và JavaScript cần thiết.

1. Bootstrap

Không có gì phải bàn cãi, Bootstrap chính là cái tên đi đầu trong những framework front-end hiện nay. Với sự phổ biến rộng rãi và vẫn đang tiếp tục tăng lên mỗi ngày, chắc chắn bộ công cụ tuyệt vời này sẽ không làm bạn thất vọng, hay bỏ mặc bạn trên con đường xây dựng một website thành công.

  • Nhà phát triển: Mark Otto và Jacob Thornton
  • Phát hành: 2011
  • Bản mới nhất: 4.*.*
  • Độ phổ biến: 126,202 sao trên GitHub
  • Mô tả: “Một framework front-end mượt mà, trực quan và mạnh mẽ giúp cho việc phát triển web nhanh gọn và dễ dàng hơn”
  • Nguyên lý cơ sở: RWD và mobile first (ưu tiên thiết bị di động)
  • Dung lượng: 592 KB (thư mục zip đã biên soạn trước)
  • Bộ tiền xử lý: Sass
  • Khả năng đáp ứng (Responsive):
  • Module:
  • Mẫu/Bố cục bắt đầu:
  • Bộ icon: Không
  • Tiện ích bổ sung: Không đi theo gói, nhưng có nhiều lựa chọn plugin của bên thứ ba
  • Component nổi bật: Jumbotron, Card
  • Tài liệu: Tuyệt vời
  • Tùy chỉnh: Grid system và Reboot có tùy chọn cho các file riêng biệt, dễ dàng tùy chỉnh với Sass; không có tùy chỉnh online
  • Hỗ trợ trình duyệt: Bản mới nhất của Firefox, Chrome, Safari, IE810-11-Microsoft Edge
  • Giấy phép: MIT

Farmework nào phổ biến nhất

Điểm mạnh nhất của Bootstrap chính là độ phổ biến rất rộng rãi của nó. Tuy rằng điều này không nhất thiết có nghĩa Bootstrap là tốt nhất, nhưng nó thực sự cung cấp nhiều tài nguyên (bài viết và hướng dẫn, tiện ích mở rộng và plugin của bên thứ ba, trình tạo chủ đề, v.v.) hơn cả bốn framework front-end dưới đây gộp lại. Nói ngắn gọi, Bootstrap xuất hiện khắp mọi nơi. Và đây cũng là lý do mà mọi người tiếp tục lựa chọn sử dụng nó. Lưu ý: “Component nổi bật” ở đây mang nghĩa là nổi bật và độc đáo khi chỉ so sánh với các framework front-end khác được đề cập trong bài viết này.

2. Foundation của ZURB

Foundation chính là ông lớn thứ hai được đem ra so sánh. Có một công ty lớn như ZURB làm điểm tựa, framework này thực sự có một nền tảng vững chắc y như tên của nó (“foundation” – nền tảng). Vì thế, Foundation cũng được sử dụng cho rất nhiều website lớn như Facebook, Mozilla, Ebay, Yahoo! và National Geographic, cùng một số cái tên khác nữa.

  • Nhà phát triển: ZURB
  • Phát hành: 2011
  • Bản mới nhất: 6
  • Độ phổ biến: 27, 497 sao trên GitHub
  • Mô tả: “Framework front-end đáp ứng (responsive) tiên tiến nhất trên thế giới”
  • Nguyên lý cơ sở: RWD, mobile first, semantic (ngữ nghĩa)
  • Dung lượng: 233 KB
  • Bộ tiền xử lý: Sass
  • Khả năng đáp ứng:
  • Module:
  • Mẫu/Bố cục bắt đầu:
  • Bộ icon: Foundation Icon Fonts
  • Tiện ích bổ sung:
  • Component nổi bật: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • Tài liệu: Tốt, với nhiều nguồn tài liệu có sẵn khác nữa
  • Tùy chỉnh: GUI cơ bản
  • Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
  • Giấy phép: MIT

Foundation thực sự là một framework front-end chuyên nghiệp để hỗ trợ, đào tạo và tư vấn cho doanh nghiệp. Nó cũng cung cấp nhiều tài nguyên để giúp người dùng làm quen và sử dụng framework nhanh và dễ dàng hơn.

3. Semantic UI

Semantic UI vẫn đang liên tục nỗ lực để khiến việc xây dựng website ngày càng có ngữ nghĩa (semantic) hơn. Nó áp dụng các nguyên tắc ngôn ngữ tự nhiên, từ đó giúp code trở nên dễ đọc và dễ hiểu hơn rất nhiều.

  • Nhà phát triển: Jack Lukic
  • Phát hành: 2013
  • Bản mới nhất: 2.3
  • Độ phổ biến: 42,162 sao trên GitHub
  • Mô tả: “Một framework với component UI dựa trên các nguyên tắc hữu ích của ngôn ngữ tự nhiên”
  • Nguyên lý cơ sở: Semantic, tag ambivalence, responsive
  • Dung lượng: 1.8 MB
  • Bộ tiền xử lý: Less
  • Khả năng đáp ứng:
  • Module:
  • Mẫu/Bố cục bắt đầu: Có, cung cấp dàn trang cơ bản cho người mới bắt đầu
  • Bộ icon: Font Awesome
  • Tiện ích bổ sung: Không
  • Component nổi bật: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
  • Tài liệu: Rất tốt, cung cấp các tài liệu có tổ chức, cộng thêm một website riêng có hướng dẫn để bắt đầu sử dụng, tùy chỉnh và sáng tạo chủ đề
  • Tùy chỉnh: Không có tùy chỉnh GUI, chỉ có tùy chỉnh thủ công
  • Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE10+ (IE9 với trình duyệt có tiền tố), Android 4, Blackberry 10
  • Giấy phép: MIT

Semantic UI là framework sáng tạo và đầy đủ tính năng nhất được đề cập trong bài. Kết cấu tổng thể và quy ước đặt tên của nó, về mặt logic và ngữ nghĩa, đều vượt trội hơn hẳn những framework khác.

4. Pure của Yahoo!

Pure là một framework module gọn nhẹ – được viết hoàn toàn bằng CSS – bao gồm những component có thể được dùng chung hoặc tách ra tùy thuộc vào nhu cầu của người dùng.

  • Nhà phát triển: Yahoo
  • Phát hành: 2013
  • Bản mới nhất: 1.0.0
  • Độ phổ biến: 18,825 sao trên GitHub
  • Mô tả: “Một bộ các module CSS gọn nhẹ với khả năng đáp ứng linh hoạt có thể dùng cho mọi dự án web”
  • Nguyên lý cơ sở: SMACSS, tối giản
  • Dung lượng: 3.8 KB (thu nhỏ và nén gzip)
  • Bộ tiền xử lý: Không
  • Khả năng đáp ứng:
  • Module:
  • Mẫu/Bố cục bắt đầu:
  • Bộ icon: Không; có thể dùng Font Awesome thay thế
  • Tiện ích bổ sung: Không
  • Component nổi bật: Không
  • Tài liệu: Tốt
  • Tùy chỉnh: GUI Skin Builder (trình xây dựng giao diện) cơ bản
  • Hỗ trợ trình duyệt: Bản mới nhất của Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
  • Giấy phép: Yahoo! Inc. BSD

Pure mang phong cách tối giản nhất, phù hợp để khởi đầu cho mọi dự án. Đây là lựa chọn lý tưởng cho những người không yêu cầu một framework với đầy đủ các tính năng mà chỉ cần các component cụ thể cho công việc của họ.

5. UIkit của YOOtheme

UIkit là một bộ các component dễ dàng sử dụng và tùy chỉnh. Tuy không phổ biến như các đối thủ, nó vẫn đáp ứng được các chức năng và chất lượng tương tự.

  • Nhà phát triển: YOOtheme
  • Phát hành: 2013
  • Bản mới nhất: 3.0.0
  • Độ phổ biến: 12,821 sao trên GitHub
  • Mô tả: “Một framework front-end dạng module gọn nhẹ giúp phát triển các giao diện web nhanh và mạnh mẽ”
  • Nguyên lý cơ sở: RWD, mobile first
  • Dung lượng: 374 KB (thư mục zip)
  • Bộ tiền xử lý: Less, Sass
  • Khả năng đáp ứng (Responsive):
  • Module:
  • Mẫu/Bố cục bắt đầu:
  • Bộ icon: Có hệ thống icon SVG riêng và một thư viện với số lượng icon vẫn đang tiếp tục tăng lên
  • Tiện ích bổ sung:
  • Component nổi bật: Article, Flex, Cover, HTML Editor
  • Tài liệu: Tốt
  • Tùy chỉnh: Tùy chỉnh GUI nâng cao chỉ có ở phiên bản 2 (phiên bản trước)
  • Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9+
  • Giấy phép: MIT

Famrework nào phổ biến nhất 2

UIkit đã và đang được ứng dụng thành công trên WordPress. Nó cung cấp một cơ chế tùy chỉnh thủ công linh hoạt và mạnh mẽ. (Phiên bản trước của framework này cũng có tùy chỉnh GUI nâng cao.)

Đâu là framework front-end dành cho bạn?

Sau đây là một số hướng dẫn giúp bạn lựa chọn được framework phù hợp nhất dành cho mình. Vài điều quan trọng nhất cần chú ý đến là:

  • Framework đó có đủ phổ biến không? Càng phổ biến nghĩa là có càng nhiều người tham gia dự án, và vì thế sẽ có càng nhiều bài viết từ cộng đồng, càng nhiều website thế giới thực, tiện ích mở rộng của bên thứ ba, và tích hợp tốt hơn với các sản phẩm phát triển web liên quan. Framework càng phổ biến thì càng thọ hơn: cộng đồng sử dụng framework này càng lớn thì càng ít có khả năng bị người dùng và nhà phát triển bỏ rơi.
  • Framework này có đang được tích cực phát triển không? Một framework tốt phải được liên tục nâng cấp với những công nghệ web mới nhất, đặc biệt là các thiết bị di động.
  • Framework này đã “chín muồi” chưa? Nếu một framework nào đó vẫn chưa được thử nghiệm và sử dụng trong các dự án thực tế, thì bạn có thể tùy ý lục lọi, nhưng đừng nên dựa vào nó cho các dự án chuyên nghiệp.
  • Framework này có tài liệu tốt không? Nó sẽ rất thuận lợi cho quá trình học tập và làm quen.
  • Mức độ đặc thù của framework này? Một framework chung chung thì dễ làm việc hơn một framework có tính đặc thù cao. Trong hầu hết các trường hợp, tốt nhất là nên chọn một framework tối giản vì tùy chỉnh sẽ dễ dàng hơn nhiều. Thêm các quy tắc CSS cũng thuận tiện và hiệu quả hơn nhiều so với ghi đè các quy tắc hiện có. Ngoài ra, điều đó cũng dẫn đến nhiều quy tắc không được sử dụng mà lại tăng dung lượng CSS một cách không cần thiết.

Nếu bạn vẫn đang phân vân, hãy thử cách kết hợp xem sao. Nếu một framework cụ thể không thỏa mãn được nhu cầu của bạn, thì hãy kết hợp thêm các component từ một hay hai dự án khác. Ví dụ, bạn có thể có một định dạng CSS kích thước nhỏ từ framework này, một hệ thống lưới từ framework khác, và vài component phức tạp hơn từ một framework khác nữa. Đó chính là tính module! Cuối cùng, đây cũng là điều cần được nhắc tới rằng ngày nay, với Flexbox và Grid Layout đang được hỗ trợ bởi phiên bản mới nhất của phần lớn các trình duyệt, thì việc xây dựng các bố cục phức tạp đã trở nên vô cùng dễ dàng. Sự thật này có lẽ sẽ khuyến khích thêm càng nhiều nhà phát triển từ bỏ các framework front-end để tự tạo các bố cục dàn trang của họ từ đầu.

Bạn nghĩ như thế nào về bài viết này? Các framework front-end trên đây còn có ưu nhược điểm nào nữa không? Có còn framework nào nên được đề cập tới nữa không? Hãy bình luận bên dưới nhé!