Giới thiệu về lập trình Front-End của website

0

Như đã giới thiệu trong bài Giới thiệu về lập trình web: Front-End và Back-End. Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi thứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript được điều khiển bởi trình duyệt máy tính của bạn.

Giới thiệu về lập trình Front-End của website

Các kỹ năng và công cụ

Nhiệm vụ của Front-End là tạo ra giao diện của một trang web và kiến trúc những trải nghiệm của người dùng. Đôi lúc biết về lập trình là chưa đủ, sức sáng tạo và khiếu thẩm mỹ của một designer cũng rất quan trọng. Khi mọi tính năng không chỉ đủ mà phải đẹp và thuận tiện cho người dùng.

Các ngôn ngữ dùng trong lập trình front end.

  • HTML: viết tắt của HTML là chữ viết tắt của cụm từ HyperText Markup Language, có thể hiểu là ngôn ngữ đánh đấu siêu văn bản. Nhiệm vụ của HTML là tạo ra cấu trúc và định dạng các siêu văn bản, các tập tin media (hình ảnh, video …)
  • CSS: là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạnglại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML) thành một bố cục website, có màu sắc, ảnh nền.
  • JavaScript là ngôn ngữ lập trình hướng kịch bản. Thường được sử dụng trên các trang web ở phía người dùng. Nghĩa là chạy trên nền của trình duyệt chứ không chạy trên máy chủ, xử lý các sự kiện tương tác với người dùng. Tuy nhiên, javascript cũng được dùng để viết script xử lý trong các ứng dụng

Có thể nói đây làm bộ ba không thể tách rời ở giao diện một website.

Các framwork và thư viện hỗ trợ thường sử dụng

Bootstrap

Bootstrap là một framework HTML, CSS, và JavaScript cho phép thiết kế phát triển responsive we. Nghĩa là trang web có khả năng thay đổi cấu trúc giao diện để tương thích với nhiều loại kích thước màn hình khác nhau. Bootstrap cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn.

Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.

Jquery

Jquery là một bộ thư viện Javascript. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax và được hỗ trợ bởi hầu hết các trình duyệt hiện đại.

Đạon code mẫu về jQuery đơn giản

Các module chính của jQuery bao gồm:

  • Ajax – xử lý Ajax
  • Atributes – Xử lý các thuộc tính của đối tượng HTML
  • Effect – xử lý hiệu ứng
  • Event – xử lý sự kiện
  • Form – xử lý sự kiện liên quan tới form
  • DOM – xử lý Data Object Model
  • Selector – xử lý luồng lách giữa các đối tượng HTML

Ajax là việc xử lý các tương tác của người dùng có kết nối đến server dưới nền của trình duyệt. Vì thế, trang web sẽ không cần tải lại toàn bộ dữ liệu mỗi khi tương tác của người dùng ảnh hưởng đến dữ liệu trên server. Giúp tiết kiệm tài nguyên máy chủ, giảm tải cho hệ thống và tăng trải nghiệm người dùng.

AngularJS và VueJS

AngularJS là một framework do Google phát triển, có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. 

Giới thiệu về lập trình Front-End của website - framework angular JS
Đạon code mẫu về AngularJS
Giới thiệu về lập trình Front-End của website - framework angular JS
Đạon code mẫu về AngularJS

Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces).

Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue.

ReactJS

React.JS là một thư viện Javascript do Facebook phát triển, dùng để xây dựng giao diện người dùng. Angular là một framework hoàn chỉnh còn React thì không. Điều này lý giải tại sao thường gây ra một số hiểu lầm về React, bởi React thường được tích hợp trong một hệ sinh thái gồm các framwork hoàn chỉnh, nhưng nó chỉ phục vụ cho tầng view trong mô hình MVC (Chúng ta sẽ tìm hiểu sau về MVC nhé).

Giới thiệu về lập trình Front-End của website - thư viện ReactJS
Đạon code mẫu về ReactJS

ReactJS có ưu điểm vượt trội so với Angular và Vue về khả năng duy trì, quản lý và mở rộng code. Nhưng đối với các website cỡ nhỏ thì việc dùng ReactJs trong front-end là rất cồng kềnh và không cần thiết. Nó chỉ thích hợp với các dự án lớn.

Các website nhỏ với số ít chuyển động hiệu ứng và Ajax thì jQuery là phù hợp.

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.