Bắt đầu với bản vẽ thiết kế

Luôn là như vậy, bản vẽ thiết kế là một phần quan trọng trong quá trình thiết kế ra một website, người Designer sẽ cung cấp cho nhóm lập trình một bản vẽ hoàn thiện đã được chấp nhận bởi khách hàng

Kế tiếp là Front-end dev

Đây là điểm khác biệt của việc áp dụng Style Guide vào việc lập trình web so với các cách tiếp cận thông thường, như đã nhắc đến ở bài trước, bản vẽ thiết kế sẽ được đưa đến một Front-end dev để tạo ra Style Guide với đầy đủ các thành phần được thể hiện như:

• Danh sách các biến màu
• Danh sách font-family
• Global element tags: p, a, h1, h2, h3, h4, h5, h6, button, input, image, video….
• Các Component
• Sidewide: header, footer
• Layouts
• Pages

Để làm được điều đó, ban đầu người front-end dev cần phải phân tích bản thiết kế để xác định xem những style nào mang tính global của từng thành phần, những style nào sẽ được custom tùy theo từng component; những thành phần nào thuộc header, footer; chia nhỏ bản thiết kế ra thành các component khác nhau; những loại layout nào được sử dụng: full width hay có container? không có sidebar hay có sidebar, nếu có thì có 1 hay 2…?

Sau khi đã có được component và layout, việc tạo những demo pages cũng khá đơn giản bằng cách tích hợp các component cần thiết vào layout thích hợp dựa theo bản thiết kế. Các dữ liệu được sử dụng thường là các dữ liệu mẫu được lấy từ file json, điều này sẽ thuận tiện cho việc integrate sau này từ dữ liệu thật từ cơ sở dữ liệu.

Phần việc của Back-end Dev

Sau khi front-end đã xong việc định nghĩa các component và layout, lúc này phần việc của back-end khá đơn giản, họ chỉ cần dựa trên những demo pages mà front-end đã dựng trước đó và truyền dữ liệu thực tế - thay vì dùng dữ liệu mẫu từ file Json như front-end đã làm. Lúc này Back-end dev đã được đưa về đúng với phần việc và trách nhiệm của họ là xây dựng cơ sở dữ liệu, tập trung vào logic và xử lý bài toán, chức năng, hơn là phải quan tâm xem chỗ này nên dùng thẻ HTML gì, markup mỉnh đưa ra như này đã phù hợp cho front-end để syle hay chưa….

Ưu điểm của style-guide

Như những gì mình trình bày ở trên, thì việc sử dụng style-guide trong lập trình web có rất nhiều ưu điểm, nó giúp cho phần việc của Front-end và Back-end được phân định một cách rõ ràng và không bị phụ thuộc vào nhau.

• Người front-end dev có thể thoải mái trong việc định nghĩa và đưa ra các markup phù hợp để style theo bản vẽ
• Người back-end dev có thể tập trung vào phần cốt lõi giá trị của họ, không bị phân tâm vào các vấn đề khác, vì điểm cuối họ cần đưa ra là dữ liệu.
• Việc kiểm tra giao diện website cũng trở nên dễ dàng hơn cả, hơn nữa, nếu có vấn đề gì về design cần được update, back-end dev cũng ko cần thiết phải biết điều này, nó có thể được update 1 cách dễ dàng bởi designer và front-end dev

Hy vọng là sau bài viết này, bạn sẽ có thêm chút cảm nhận gì đó về Style Guide, bài tiếp theo, mình sẽ giới thiệu 1 công cụ rất hữu ích cho lập trình web trong việc sử dụng style-guide, đó là Pattern-lab. Hãy để lại comment hoặc câu hỏi của bạn nếu như có điều gì đó bạn chưa rõ sau khi đọc xong bài này nhé!