🌞

Làm quen với phương pháp Atomic để structure source code, design

Sửa bài viết này

Đây là một trong những cách tiếp cận để thiết kế một system. Tác giả của structure này là Brad Frost, ám ảnh bởi một thạc sĩ hóa học người Việt Nam (chắc dạy ở Mỹ), dạy môn hóa học khi anh này đang học cấp II.

Lấy ý tưởng nguyên tử hóa học, sự kết hợp giữa các nguyên tử tạo ra một phân tử, kết hợp các phân tử lại tạo thành 1 sinh vật

Structure theo phương pháp Atomic

Những khái niệm chính của Atomic

  • Atom nguyên tử (nguyên tố), đơn vị nhỏ nhất
  • Molecule do 2 nguyên tử trở lên hợp lại tạo thành, những phân tử hóa học như H2O được cấu thành từ nguyên tử Hidro và Oxy
  • Organism là sự kết hợp của nhiều phân tử tạo thành

Chúng ta đã biết bảng tuần hoàn hóa học, thứ ám ảnh thời học sinh

Bảng tuần hoàn hóa học

Thì lớn lên chúng ta có bảng tuần hoàn HTML, ám ảnh thời web developer

Bảng tuần hoàn HTML

Sự kết hợp của các element chúng ta tạo ra những trang web khác nhau (Organism)

Ngoài 3 khái niệm chính trên của hóa học, tác giả đưa thêm 2 khái niệm vào của dân web chúng ta

  • Template
  • Page

Structure theo phương pháp Atomic

Atom

Những element nhỏ nhất trong giao diện, đó chính là các thẻ html

<input />
<label />
<button />

Molecule

Trong lập trình chúng ta thường gọi nó là component, thí dụ như search component sẽ bao gồm label, input, button

Structure theo phương pháp Atomic

Organism

Một component có ô search, có thanh navigation, logo, đố bạn đó là gì? Header

Structure theo phương pháp Atomic

Tất nhiên header cũng có thể có nhiều component khác

Structure theo phương pháp Atomic

Một component có thể gọi là Organism có thể bao gồm nhiều component lặp lại như danh sách sản phẩm, bài viết

Structure theo phương pháp Atomic

Template

Giờ tới khái niệm mà tất cả anh em làm web chúng ta điều biết

Template là page nhưng ở dạng skeleton, chúng ta chưa tô vẽ gì cụ thể, nó như một cái rập, chúng ta dùng để đập ra vài trăm bộ đồ.

Structure theo phương pháp Atomic

Page

Page là một một UI hoàn chỉnh với nội dung, hình ảnh, logic có đầy đủ hết rồi

Structure theo phương pháp Atomic

Một illustration tổng quát

Initializing...