Atomic Design
👡

Atomic Design

Mario Sanchez

Tác giả: Phi Long

Cập nhật lần cuối: 12/11/2024

Mở đầu:

Qua quá trình tiếp xúc với kiến trúc Microservices một khoảng thời gian, bản thân mình nhận thấy đây là một kiểu kiến trúc phần mềm mang lại nhiều điều thú vị. Tất nhiên là sẽ có quan điểm trái chiều giữa Thích và không thích, sẽ có nhiều tiền bối đi trước có kinh nghiệm cho rằng “Microservices chỉ gây hứng thú cho người mới chập chửng tìm hiểu rồi thần thánh hóa nó thôi, tụi anh áp dụng kiểu kiến trúc A - B - C còn hiệu quả hơn nhìu…”

Về tính đúng sai, cá nhân mình cũng chưa đủ “Kiến thức - kinh nghiệm - trải nghiệm” để đóng góp thảo luận, mình chỉ nói dựa trên tiêu chí - “Tôi đã có được tư duy gì khi làm quen với Microservices?”

Tinh thần của Microservices là chia nhỏ một ứng dụng thành các dịch vụ nhỏ, độc lập và có thể triển khai được. Mỗi dịch vụ có trách nhiệm cho một chức năng cụ thể và có thể được phát triển và bảo trì độc lập với các dịch vụ khác. Nghe như kiểu khái niệm “Bất đồng bộ” ấy nhi - chia nhỏ công việc thành nhiều phần nhỏ và thực hiện đồng thời để đạt được hiệu quả cao mà không gây xung đột cho nhau.

Liên hệ với Atomic Design:

Giống như Microservices: chia để trị, Atomic Design là một phương pháp thiết kế giao diện người dùng (UI) tập trung vào việc tạo ra các thành phần nhỏ, độc lập và có thể tái sử dụng được gọi là "nguyên tử". Các nguyên tử này sau đó có thể được kết hợp để tạo thành các thành phần phức tạp hơn, giống như cách các nguyên tử trong hóa học kết hợp để tạo thành các phân tử.

Nguồn cảm hứng từ hóa học:

Brad Frost – một Web Designer đến từ Mỹ, trong quá trình tìm kiếm một phương pháp để xây dựng hệ thống thiết kế giao diện người dùng, ông đã tìm kiếm nguồn cảm hứng từ các lĩnh vực và ngành công nghiệp khác. Ông chợt nhận ra, trong thiết kế công nghiệp và kiến trúc đã áp dụng phát triển các hệ thống mô-đun thông minh để sản xuất các vật thể cực kỳ phức tạp như máy bay, tàu thuyền và tòa nhà chọc trời. Rồi ông nghĩ về thế giới tự nhiên, điều đó gợi nhớ đến việc ngồi học tại một chiếc bàn ọp ẹp trong phòng thí nghiệm hóa học thời trung học.

Các phản ứng hóa học được biểu diễn bằng phương trình hóa học, rồi các nguyên tố hóa học kết hợp với nhau như thế nào để tạo thành phân tử. Bùmmm!!! Và thế là hàng loạt chuỗi ý nghĩ xuất hiện trong đầu Brad Frost tạo thành một lý thuyết nền tảng thú vị, trông đơn giản nhưng vô cùng hiệu quả khi áp dụng.

Cấu trúc:

Trong Atomic Design: giao diện được chia thành 5 phần:

  • Nguyên tử (Atoms): Đây là các thành phần nhỏ nhất và cơ bản nhất của giao diện, chẳng hạn như nút bấm, biểu tượng (icon), label chữ.
  • Phân tử (Molecules): Là tổ hợp gồm nhiều Atom, tạo thành những đơn vị cơ bản và có tính năng rõ ràng ví dụ như một cụm Input nhập email (bao gồm tiêu đề, icon và input fields..),
  • Cấu trúc/Thực thể (Organisms): Là các nhóm phân tử được sắp xếp với nhau để tạo thành các thành phần giao diện phức tạp hơn, chẳng hạn như Header, Footer, Box tìm kiếm nâng cao, Box thông báo, Menu sidebar …
  • Bản mẫu (Templates):  Là kết hợp các organisms với nhau tạo thành các trang hoàn chỉnh. Có thể hiểu đây gần tương tự bước Wireframing trong quy trình thiết kế UI/UX.
  • Trang (Pages): Là các trang web hoặc ứng dụng hoàn chỉnh được tạo ra bằng cách lấp đầy các bản mẫu với nội dung cụ thể, phục vụ cho trình bày sản phẩm

    • Đối chiếu:

  • Thiết kế: Khi thiết kế giao diện với Figma, mình cứ cắm đầu làm từ trên xuống dưới, làm đến đâu tách component đến đó. Trong khi hiện nay, các Designer UI/UX chuyên nghiệp sẽ ưu tiên phát triển bộ style chung và bộ component trước, sau đó mới kéo thả vào từng Page, hiển nhiên sẽ có lợi cho sự phát triển sản phẩm theo hướng lâu dài.
  • Phát triển: Trước đây, mình có thói quen là sẽ viết mã thành một trang con hoàn thiện trước rồi mới bắt đầu đi tách nhỏ các component, viết composable, hook, … đôi khi rất tốn thời gian refactor và có thể dẫn đến hoa mắt, sai sót. Giờ đây, khi làm chung trong một tập thể, cần có sự thống nhất chung về những thành phần sẽ phát triển và tái sử dụng.

    • Tại sao nên sử dụng Atomic Design?

  • Đảm bảo tính đồng bộ trong thiết kế giao diện;
  • Tiết kiệm thời gian khi có thể tái sử dụng các thành phần trong dự án;
  • Dễ dàng nâng cấp, bảo trì các thành phần, dự án;
  • Tối ưu quy trình thiết kế.
  • Khi cần giao tiếp với các team bên ngoài trong một dự án lớn, cách làm này đem đến ngôn ngữ chung để mọi người hợp tác dễ dàng.

    • Atomic Design dành cho tất cả các giao diện người dùng:

  • Mặc dù Atomic Design được sinh ra từ lĩnh vực thiết kế web, nhưng nó có thể áp dụng cho tất cả các giao diện người dùng, không chỉ giao diện web.
  • Bạn có thể áp dụng phương pháp Atomic Design cho giao diện người dùng của bất kỳ phần mềm nào: Microsoft Word, Keynote, Photoshop, ATM của ngân hàng, v.v.

    • Bạn có thể tham khảo thêm tại đây:

    Microservices: Kiến Trúc Hệ Thống Đang Làm Mưa Làm Gió - System Design Concept: https://viblo.asia/p/microservices-kien-truc-he-thong-dang-lam-mua-lam-gio-system-design-concept-Rk74axMrVeO

    Micro Frontends - microservice hoá cho phía Front-end

    https://viblo.asia/p/micro-frontends-microservice-hoa-cho-phia-front-end-gGJ59vwPKX2

    Bình luận(0)

    Hãy là người đầu tiên bình luận!