Song song với việc cung cấp những sản phẩm mỹ thuật website tới thị trường, LovaWeb cũng luôn coi trọng và đặc biệt nhấn mạnh ý nghĩa của việc thường xuyên phải update công nghệ mới. Và CSS Frameworks là một trong các yếu tố cần phải chú trọng, kể cả hiện nay LovaWeb đang có dịch cắt HTML và CSS front end. Trong thời buổi hiện nay thì không thiếu gì những Frameworks CSS/Front End, con số có thể đếm được vài chục. Nhưng số Frameworks tốt thật không nhiều. Trong khuôn khổ bài viết tôi sẽ nói về 5 Frameworks tốt nhất hiện nay và những Frameworks này, LovaWeb đã sử dụng thành thạo.
Trong bài viết hôm nay, LovaWeb sẽ phân tích những mặt tốt – xấu của tất cả 5 Framewors trên cùng phần mềm của nó cho những tình huống đặc biệt khác nhau. Với cương vị một Front End Developer bạn cũng nên tham khảo bài viết trên nhằm lựa chọn lấy 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 cơ bản nhất, không cần thiết phải sử dụng một framework phức tạp và đồ sộ mà triển khai làm gia tăng tốc độ coding lên.
Frameworks xếp vào top đầu tiên chính là CSS Frameworks nổi tiếng nhất hiện nay, Bootstrap.
(Chú ý: một số tin tức về xác suất thống kê, nhận xét, version có khả năng đã trở thành Outdate tính từ bỏ khi bài viết trên được viết xong. )
1. Bootstrap Framework
- 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
Một 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 Framework
Foundation đang là Frameworks lớn số 2 trên toàn cầu, xuất phát từ một doanh nghiệp duy nhất là ZURB và nó. .. cực kỳ mạnh. Minh chứng sự thành công của Foundation là niềm tin của nhiều ông to lớn: Facebook, Mozilla, Ebay, Yahoo!, and National Geographic.
- Tác giả: ZURB
- Phát hành: 2011
- Phiên bản beta: 6.3.1
- Mức độ uy tín: 25,400 đánh giá 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 kiểu modular: hỗ trợ
- Có template/layout ban đầu: hỗ trợ
- Bộ icon: Foundation Icon Fonts
- Hỗ trợ add-on: hỗ trợ
- Cơ chế bản quyền: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
- Tài liệu: Tốt.
- Khả năng tuỳ chỉnh: cũng giống với Boostrap.
- Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9; iOS, Android, Windows Phone 7
- Bản quyền: MIT
Ghi chú thêm
Foundation là một Framework bài bản với 1 team hỗ trợ, đào tạo và phát triển.
3. Semantic UI Framework
Semantic UI là 1 dự án đang triển khai với mục đích làm cho việc xây dựng website trở nên dễ sử dụng hơn bao giờ hết. Framework đặc biệt dùng cấu trúc code dựa trên những ngôn ngữ lập trình đời sống giúp các code dễ đọc và dễ viết hơn bao giờ hết.
- Tác giả: Jack Lukic
- Phát hành: 2013
- Version tiếp theo: 2.2
- Độ nổi tiếng: 34,762 lượt bầu 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 kết thúc: 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: Khá ổn, Very good. Semantic đặc biệt không tốt đối với việc làm tài liệu, họ có cả một website riêng biệt dùng làm document ở trên gồm tất cả: khởi đầu, chuyên sâu và xây dựng theme.
- Khả năng tuỳ biến: không có hỗ trợ GÌ, 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ú thêm
Semantic là một Framework rất hay và đủ chức năng nhất của một Front-End Framework sót lại trong list của chúng ta. Từ việc thiết lập cấu trúc dự án, cấu trúc code đến đặt tên hàm, login code đến mức độ sạch sẽ của code nó điều được làm khá tốt.
4. Pure Framework
Pure được phát triển từ Yahoo là Framework gọn nhẹ nhất trong list trên, theo cấu trúc module và component nên có thể tháo nếu cần. Một Frameworks cực tốt để phát triển các dự án từ bé đến lớn điều hợp.
Pure sẽ đem đến một "khung xương" để khởi động một dự án Front End một cách sạch sẽ sẻ nhất. LovaWeb khuyến nghị sử dụng đối với những người không cần hoặc không muốn sử dụng Full-Freatured Framework mà chỉ đặc biệt ưa thích một component nào đấy nhưng không phải cồng kềnh mang cả đống nhưng chỉ dùng 1 ít.
5. UIkit Frameworks
UIkit là một bộ sưu tập những component đã được biến thể với mục tiêu gọn nhẹ và dễ sử dụng khi lập trình. Đây là CSS Frameworks ít tiếng tăm nhất trong list trên nhưng cũng đừng coi thường bởi sự hữu dụng của nó đối với một vài trường hợp.
UIkit đang được sử dụng phổ biến nhất trong phát triển website WordPress themes. Nó đem đến một bộ tính năng rất "flexiabe" và linh hoạt để dễ dàng tuỳ biến trên các thể loại Theme. Ulkit đang là phần mạch chủ yếu nhằm triển khai những chức năng cho phép admin hoặc người dùng tuỳ ý xây dựng nên bố cục website mà không cần hiểu biết về coding cả.
Quan trọng thì bạn sẽ sử dụng được những framework nào?
Kết bài chỉ tôi sẽ khái quát, tổng hợp lại và gợi ý cho bạn lựa chọn Framework thích hợp nhất với bản thân bạn. Xem thêm những thông tin khác:
- Framework kia có tốt không? Sự nổi danh của nó dĩ nhiên đồng nghĩa với câu "nó tốt" và quan trọng nhất là nó có một cộng đồng rộng lớn để phát triển, thảo luận, đóng góp ý kiến nữa. Cũng đã có thêm khá nhiều chỉ dẫn trên Wikipedia kể cả tiếng Anh lẫn tiếng Việt về những bài viết trên. Thêm nữa là những plugin của người thứ 3 viết cũng đa dạng hơn.
- Framework kia có thực sự đang trong giai đoạn phát triển? Có thể khẳng định chắc 100% sẽ không bao giờ có một sản phẩm nào là hoàn thiện 100% và nếu bạn đã dừng phát triển rồi thì bạn cũng không nên lãng phí thời giờ sử dụng làm gì vì đến 1 lúc nào đấy nó sẽ không còn thích hợp với yêu cầu phát triển của bạn đâu.
- Tài liệu của Framework kia hiện như thế nào. Khi truy cập vô một tài liệu nên bỏ khoảng 5 phút đầu để check qua toàn bộ coi tài liệu có đc viết thực sự "có tâm" hay là không. Các thành phần quan trọng có đáng để truy cập vào hay là không. Vì nếu một framework có hay đến mấy nhưng mà nhà phát triển vẫn không quan tâm về vấn đề hỗ trợ người sử dụng thì cũng sẽ khó khăn đối với bạn để có thể liên tục training nó chuyên sâu hơn nữa.
Tuy nhiên bạn nên lưu ý thêm một điều, hiện tại style Front End theo xu hướng Flexbox và Grid Layout đang ngày càng phát triển và cũng đc những browser tân tiến hỗ trợ hết lòng. Nên nếu bạn có dự định đổi hẳn qua sử dụng 2 style trên mà lại bỏ qua những CSS Frameworks trên đây cũng không phải là một ý tồi.
