Khái niệm về Frontend là gì ?

Sự khác nhau giữa Designer và Frontend Tôi thử sức làm BA

Thu thập yêu cầu Phân tích yêu cầu Thiết kế giao diện Lập trình giao diện

Frontend là tên gọi của người thực hiện việc lập trình giao diện phía người dùng, cụ thể:
+ Hiển thị giao diện
+ Nhận tương tác và phản hồi cho người sử dụng

Tại sao BA cần phải hiểu Frontend ?

1. Hiểu được công việc của Frontend để dễ dàng giao tiếp, làm việc;
2. Giao tiếp sử dụng đúng từ chuyên môn;
3. Có thể chỉnh sửa nhanh giao diện trong trường hợp dev frontend chưa hỗ trợ kịp thời;
4. Có được ý tưởng và cơ sở để dựng lên các bản Wireframe, Mockup, Prototype.
Quy trình làm việc BA liên quan đến Frontend Tôi thử sức làm BA

1. BA đặc tả tài liệu yêu cầu (SRS), xây dựng Mockup, thống nhất luồng quy trình, thống nhất được luồng đi
giữa các màn hình. Nếu BA có kinh nghiệm thì xây dựng luôn Prototype.

2. BA giao tiếp với Designer để trao đổi yêu cầu đặc thù về giao diện và truyền tải lại luồng quy trình để
designer thiết kế giao diện

3. BA gửi khách hàng xem giao diện Designer thiết kế. Khách hàng chốt thì sẽ truyền giao diện cho đội
Frontend (chuyển file psd hoặc link figma, adobe xd)

4. Frontend cắt giao diện theo bản thiết kế của Designer

5. Fontend cắt xong thì chuyển cho Backend

HTML (Hypertext Makup Language) Tôi thử sức làm BA

Là ngôn ngữ đánh dấu dùng để tạo và cấu trúc thành phần trong trang web hoặc ứng dụng

Một số vấn đề cần lưu ý:

1. HTML không phải là ngôn ngữ lập trình
2. HTML với BA học chỉ cần hiểu tên gọi, cách sử dụng mức cơ bản, không cần phải lập trình

Nguồn học HTML: W3school (W3C)

Phân loại thẻ HTML

1. Thẻ xác định yếu tố liên quan đến SEO
2. Thẻ xác định bố cục: Header, section, nav, sidebar, footer, …
3. Thẻ xác định định dạng chữ: b, em, i, mark, …
4. Thẻ liên quan đến form
5. Thẻ liên quan đến table
6. Thẻ liên quan đến dữ liệu đa phương tiện: image, audio, video
7. Thẻ liên quan đến văn bản: p, h1 -> h6, ….
8. ….
CSS (Cascading Style Sheets) Tôi thử sức làm BA

Là ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu

Một số vấn đề cần lưu ý:

1. CSS còn có thể tạo hiệu ứng (CSS3)
2. CSS với BA thì cần hiểu các vấn đề liên quan như thay đổi màu sắc, cỡ chữ, font chữ, hiệu ứng, ...

Nguồn học CSS: W3school

Các vấn đề liên quan đến CSS

1. CSS xác định liên quan đến text: màu chữ, kiểu chữ, font chữ, màu nền, …
2. CSS xác định bố cục
3. CSS xác định hiệu ứng
4. CSS xác định liên quan đến thành phần: table, image, …
JS (Javascript) Tôi thử sức làm BA

Là ngôn ngữ giúp người dùng thao tác và nhận phản hồi từ hệ thống

Một số vấn đề cần lưu ý:

1. JS có rất nhiều kiến thức và nhiều thư viện, framework, học mất nhiều thời gian
2. JS với BA thì cần hiểu các cách người dùng tương tác với hệ thống

Nguồn học JS: W3school

Các vấn đề liên quan đến JS

1. JS liên quan đến cách người dùng tương tác hệ thống
2. Hiểu JS áp dụng ở đâu: Check kiểu dữ liệu, validate form, trả về dữ liệu ngay cho người dùng, …
3. Hiểu được định dạng JSON và các công cụ để check JSON