Framework Front End Pho Bien Nhat Hien Nay

Ngoài việc tạo các tác phẩm nghệ thuật trên trang web cho khách hàng, còn rất quan trọng và đặc biệt nhấn mạnh vai trò của việc luôn cập nhật công nghệ mới.

Tại thời điểm hiện tại, có rất nhiều Framework Front End, có thể tính đến hàng chục. Tuy nhiên, có rất ít Framework Front End chất lượng. Trong bài viết này, tôi sẽ đề cập đến năm framework front end tốt nhất hiện có và đều được sử dụng thành thạo.

Trong bài viết này sẽ so sánh các điểm hay – dở của cả 5 Framework Front End đó 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 Framework tốt nhất cho mỗi dự án Front End.

Ví dụ, bạn không cần phải sử dụng một Framework Front End mạnh mẽ và cồng kềnh để triển khai nếu dự án của bạn chỉ đơn giản là phổ thông. Bootstrap, framework CSS phổ biến nhất hiện nay, là framework đầu tiên.

1. Bootstrap - Framework Front End

Bootstrap đang là Framework Front End dẫn đầu thị trường hiện nay về mức độ nổi tiếng và ứng dụng đại trà của nó. Bản thân Bootstrap cũng đang phát triển rất nhanh mỗi ngày. Bạn luôn có thể tin tưởng vào nó trong bất kì dự án Front End nào.

• 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

• 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

Bootstrap có ưu điểm lớn nhất là sự phổ biến. Tuy nhiên, về mặt kỹ thuật, nó không hẳn tốt hơn các Framework Front End khác trong danh sách, nhưng nó chắc chắn là tốt hơn nhiều Framework Front End khác. Tại sao phổ biến của Bootstrap là một lợi thế quan trọng? Bạn có thể xem thêm các mẫu website có định hướng Bootstrap từ bạn trên YouTube.

2. Foundation - Framework Front End

Foundation đang là Framework Front End 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 Front End chuyên nghiệp với 1 đội ngũ hỗ trợ, huấn luyện và tư vấn viên.

3. Semantic UI - Framework Front End

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 Front End đặ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 Front End 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 - Framework Front End

Pure được phát triển bởi Yahoo là Framework Front End 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 Framework Front End rất tốt để phát triển các dự án từ nhỏ đến lớn đều hợp.

Pure chỉ cung cấp một "khung xương" để bắt đầu một dự án Front End một cách sạch sẻ nhất. 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 và chỉ thích một thành phần nhỏ, không cồng kềnh và vác cả khối.

5. UIkit - Framework Front End

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 Framework 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 Front End 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 nên lưu ý rằng phong cách Front End theo xu thế Flexbox và Grid Layout đang dần được các trình duyệt đời mới ủng hộ. Vì vậy, nó có thể là một ý tưởng tốt nếu bạn muốn sử dụng cả hai style này mà không sử dụng các framework CSS trên.