[MUSIC]
Front-end Web UI Frameworks đang trở thành phương pháp tiếp cận của họ để
thiết kế và triển khai các trang web gần đây của họ.
Hãy tự hỏi chính xác những gì là Front-end Web UI Frameworks,
và tìm hiểu thêm một chút chi tiết về chúng.
Tiếp theo, vì vậy rõ ràng
trong bài học này chúng ta sẽ tự hỏi mình, các khuôn khổ front-end là gì?
Chúng chứa những gì?
Một số khung giao diện người dùng front-end phổ biến là gì?
Và tại sao chúng ta cần sử dụng khuôn khổ giao diện người dùng front-end khi chúng tôi thiết kế
các trang web của mình?
Vì vậy, Framework giao diện người dùng web front-end là gì?
Chúng ta hãy lùi lại một bước, và
tưởng tượng rằng bạn chỉ biết HTML, CSS và JavaScript.
Nếu bạn được yêu cầu thiết kế một trang web mới, bạn rõ ràng sẽ đi về xây dựng
và triển khai toàn bộ trang web Sử dụng các kỹ năng kỹ thuật mà
bạn có dựa trên kiến thức của bạn về HTML, CSS và JavaScript.
Bạn thường nhận ra rằng có rất nhiều
thành phần lặp đi lặp lại mà bạn sẽ sử dụng trên trang web của bạn.
Và bạn sẽ kết thúc thiết kế tập hợp các lớp CSS của riêng bạn.
Bạn sẽ được thiết kế thành phần dựa trên JavaScript.
Và sau đó một khi bạn có được một nhóm của chúng với nhau,
mỗi khi bạn cần thiết kế một trang web mới, bạn sẽ được sử dụng các
tập hợp được xác định trước của CSS và các
thành phần dựa trên JavaScript để nhanh chóng thực hiện một trang web mới.
Tại sao không đưa điều này đến kết luận hợp lý của nó?
Làm thế nào về, nếu chúng ta thiết kế một toàn bộ khuôn khổ bao gồm
sẵn sàng để sử dụng các thành phần giao diện người dùng HTML, CSS và JavaScript đặt.
Vì vậy, ở đây, một khuôn khổ giao diện người dùng web front-end
có thể xác định một loạt các lớp CSS mà
sẽ cho phép chúng tôi bao gồm các thành phần như Buttons, T
ables, Navigation bar, Dropdowns, Alerts,
Modals, Tabs, Accordions và nhiều hơn nữa.
Và nhanh chóng cho phép chúng tôi thiết kế và thực hiện một trang web.
Vì vậy, đây là những gì một khuôn khổ giao diện người dùng web front-end hoàn thành.
Nó là một bộ sưu tập của tất cả các thành phần này.
Không chỉ vậy, nó còn cung cấp cho bạn một phương pháp xác định
kiểu chữ phù hợp mà bạn có thể sử dụng cho toàn bộ thiết kế trang web của mình.
Và cho phép bạn nhanh chóng giàn giáo
ra một trang web hoặc sân.
Nếu bạn tìm kiếm các framework web front-end,
bạn sẽ tìm thấy rất nhiều trong số họ trên Internet.
Bây giờ một số người đã thực hiện dịch vụ riêng của họ về
tất cả các khung giao diện người dùng web khác nhau, và
đã xuất bản mười danh sách các khung giao diện người dùng front-end hàng đầu của họ.
Đây là một trong những như vậy mà bạn có thể hoặc
có thể không đồng ý với bảng xếp hạng này, nhưng
Bootstrap xảy ra là phổ biến nhất trong số tất cả các khuôn khổ giao diện người dùng web front-end.
Bootstrap luôn xếp hạng là số một
trong nhiều danh sách các khung giao diện người dùng web kết thúc phía trước.
Phần còn lại trong danh sách này có thể khác nhau, nhưng bạn thường sẽ tìm thấy ngữ nghĩa UI,
Foundation by Zerp, Materialize, Material UI, và
một số trong những người khác xuất hiện trong nhiều những danh sách top end.
Câu hỏi rõ ràng tiếp theo là,
tại sao bạn muốn sử dụng khung giao diện người dùng web front-end?
Đầu tiên và quan trọng nhất, họ cung cấp cho bạn một cách nhất quán để thiết kế trang web.
Và, hầu hết các khung front-end này
hỗ trợ những gì được gọi là thiết kế web đáp ứng.
Chúng tôi sẽ xem xét nhiều hơn về thiết kế web đáp ứng trong bài học tiếp theo, nhưng
nhanh chóng tóm tắt nó, bạn không nhận ra rằng trang web
của bạn có thể được truy cập từ nhiều loại thiết bị khác nhau của các trình bảo vệ màn hình khác nhau,
từ điện thoại di động nhỏ đến đến một máy tính để bàn đầy đủ.
Bạn muốn có thể thiết kế trang web của bạn để tự động thích ứng
để phục vụ cho các hạn chế kích thước của mỗi
thiết bị khác nhau, từ đó trang web của bạn đang được truy cập.
Vì vậy, thiết kế web đáp ứng là quan tâm đến khía cạnh này.
Vấn đề thứ hai mà hầu hết các Framework Franken cố gắng
giải quyết là khả năng tương thích chéo trình duyệt.
Nếu bạn đã chơi xung quanh với các trình duyệt nhiều như tôi đã làm,
tôi khá chắc chắn rằng bạn đã nhận ra rằng
không có hai trình duyệt hiển thị cùng một trang web chính xác theo cùng một cách.
Vì vậy, khi bạn thiết kế một trang web để hiển thị nhất quán trên
nhiều trình duyệt khác nhau, bạn sẽ phải đối mặt với một trận chiến khó khăn.
Bây giờ các khung front-end này đã quản lý để giải quyết hầu hết các đặc trưng
của các trình duyệt khác nhau theo cách mà bạn có thể cung cấp kết
xuất phù hợp của trang web của bạn trên các trình duyệt khác nhau.
Vì vậy, đó là lý do thứ hai tại sao bạn có thể muốn sử
dụng khuôn khổ giao diện người dùng Front-End Web.
Và khía cạnh thứ ba của tất nhiên là khi bạn cần thiết kế một trang web,
bạn sẽ luôn phải chịu áp lực thời gian khủng khiếp.
Vì vậy, tăng năng suất của bạn
để bạn không lãng phí năng lượng và thời gian của bạn vào
các vấn đề cấu hình lãng phí của các thành phần riêng lẻ của trang web của bạn.
Thay vào đó, hãy để điều đó được thực hiện
bởi một khuôn khổ giao diện người dùng web front-end được thiết kế nhất quán.
Vì vậy, điều đó giúp bạn tiết kiệm rất nhiều thời gian trong việc triển khai trang web của bạn.
Họ đã bị sa thải.
Và cuối cùng, tất nhiên,
hầu hết các khuôn khổ giao diện người dùng front-end mà tất cả đều có cộng đồng riêng của họ.
Họ là những người dùng sử dụng các khuôn khổ này để triển khai các trang web.
Vì vậy, cộng đồng người dùng này sẽ cung cấp cho bạn một
cách rất hiệu quả để có thể giải quyết các vấn đề mà bạn có thể
gặp phải khi bạn áp dụng bất cứ ai trong khuôn khổ này cho thiết kế trang web của bạn.
Vì vậy, với những lợi thế khác nhau,
tại sao bạn không muốn sử dụng một khuôn khổ giao diện người dùng web front-end?
Với sự hiểu biết này về khung giao diện người dùng web front-end,
bây giờ chúng ta hãy tiếp tục tìm hiểu thêm về Bootstrap,
khung giao diện người dùng web front-end phổ biến nhất.
[ NHẠC]