Chocolate & Đơn giá cho sự ngọt ngào
Front-end, bộ mặt của phần mềm, nơi chiếm lấy Tình Yêu của khách hàng dành cho sản phẩm.
Bước đệm cho việc giao diện Front-end hoàn thành chức năng nhiệm vụ cao cả ấy, chị em Designer ngày đêm uốn nắn những Đường cong hoàn mỹ, thướt tha, thả hồn vào những Góc nghiêng thần thánh, cho ra da thịt, cái hồn của sản phẩm.
Nhiệm vụ của anh em Developer chúng ta là thổi vào đó sức sống, làm cho sản phẩm không những đẹp về hình thức mà còn ứng xử khéo léo, thông minh như đang ở vòng chung kết cuộc thi hoa hậu, để phần mềm trở thành một người bạn thân thiện, hữu ích trong công việc hàng ngày.
Nét đẹp, nó Ngọt ở thành quả, còn quá trình hình thành thì khá Đắng, tất cả những gì anh em chúng ta có, là những khối Lego được cung cấp bởi Hạ tầng Core. Bản thân những khối Lego, chúng Perfect về mặt Responsible, hoàn thành ĐÚNG & ĐỦ trong phạm vi trách nhiệm mà chúng được thiết kế và phân giao.
Muốn vun đắp nên những công trình lớn lao hơn, anh em chúng ta cần làm việc theo nhóm nhiều người. Nhóm nhiều người mà hoạt động trơn tru như 1 thể thống nhất, thì mỗi anh em cần tuân theo hiệp ước chung, để ráp Lego lại thành những kiến trúc kì vỹ.
Căn bản thì khi Dev, chúng ta có các tình huống sau:
1/ Mình Dev nguyên 1 luồng của chính mình, hoàn thiện mọi khâu và không đụng đến ai => Ca này dễ
2/ Mình cần ráp Code của mình với Code của Team để phối hợp hoạt động => Ca này gay cấn
3/ Bạn ấy nghỉ phép 1 thời gian, mình được Sếp giao cho support và cần hiệu chỉnh code của bạn ấy => Ca này thở Oxy.
Các bạn thấy đấy, khi chúng ta cùng 1 ADN, cùng 1 Tộc, cùng 1 Văn Hóa, thì việc ta tiên đoán được cách hành xử của người anh em kia nó cực kỳ dễ, bởi vì bản thân mỗi anh em, khi được giao cho nhiệm vụ viết Code xử lý tình huống đó, mỗi anh em đều viết nó theo 1 luồng và 1 kiến trúc như nhau.
Một ngày âm u, khách hàng đang hối, mở Code lên thấy người anh em kia bị ma nhập, viết Code theo 1 trường phái tà đạo, ngoại tộc, cả Team đứng ngồi không yên, cố tìm cách để hiểu được người anh em này đang viết cái gì, thì bão đã kéo tới rồi.
| Hạng mục | Rules Trên Hạng mục | Đơn giá vi phạm | ||
|---|---|---|---|---|
| 1 | Unit Test thành phẩm của chính mình | - Mài dũa kỹ càng, trước khi trao tay người khác | 10k | |
| 2.1 | Kiến trúc Module | - GlobalState.js: Phân quyền, Config Menu, Login Session - GlobalConstant.js: Hằng số dùng cho toàn bộ Front-end - GlobalUtil.js: Utilities dùng chung cho toàn bộ Front-end ============================== - Cấu trúc 1 Module: + component (folder) + form (folder) + model (folder) + style (folder) + constant (folder): chứa file JS, KHÔNG lấy từ api, thiết lập cứng trên Front-end + config (folder): chứa file JS, load tham số từ API + util (folder) + view (folder) + moduleName_index.js (MainPage.js import hết các module.js vào) + moduleName_router.js (Quy tắc đặt url: #/module-name/page-name)+ mockData (folder): chứa file JSON hoặc hàm ES6 Generator ============================== - Tạo lệnh CommandLine generete Cấu trúc Module - Cấm Import từ Module khác, muốn dùng chung phải tìm ra cách đưa vào Common hoặc Base |
100k | ** |
| 2.2 | Phân bổ Code trong 1 file JS | Cấu trúc phân bổ code === Class Extends Component === Chia #region trong 1 file JS + 1.0/ vùng Initialize (constructor) + 2.0/ vùng chứa Life Cycle của React + 3.0/ vùng chứa Function còn lại + 4.0/ vùng event (onClick, onBlur, ...) + 5.0/ vùng defaultProps ============================== |
30k | * |
| 3 | Naming Convention: Tên File, tên Biến, Tên Hàm | - camelCase - tên viết tắt: cho phép bỏ qua camelCase (Viết HOA toàn bộ) - ưu tiên Tiếng Anh - Quy tắc hình thành tên biến: + dùng Danh từ, số ít + kiểu boolean: isVariableName, canVariableName + kiểu Array: arrVariableName - Quy tắc đặt tên hàm: + Hàm sự kiện thao tác: tiền tố onActionName() + Hàm thông thường: dùng động từ + Function of Class => Dùng function + bind + Cấm pattern: onActionName(eventObject => handler(eventObject)); + Bắt buộc pattern onActionName(handler); |
30k | * |
| 4 | Life Cycle của State & Renderer | - Tùy Component - Tùy Module - Render tối đa 3 lần - Ưu tiên dùng State cục bộ (Internal Component State) - CORE chịu khó cực xíu, để bên ngoài tái sử dụng sướng |
10k | |
| 5 | Mutable & Immutable | - Tham khảo chuyên gia cho những tính huống đặc thù - Object.Freeze(someObject) |
||
| 6 | Rule sử dụng Async & Await, Promise, Callback | - Ưu tiên 1: Async - Await (Syntactic Sugar) - Ưu tiên 2: Promise - Thư viện bên thứ 3 mà chưa có 2 kỹ thuật trên thì mới dùng Callback-Hell |
10k | |
| 7 | Axios | - Dùng Async-Await - Dùng Promise khi chờ All Thread Done |
10k | |
| 8 | Rule setState (dùng props / gán state) | - Hạn chế gán hàm Callback vào hàm SetState() - Quy tắc khai thác this.state: + this.setState(): buộc dùng hàm setState() + this.state.variableName = abc => cấm |
10k | |
| 9 | Rule Check Null | - @babel/plugin-proposal-optional-chaining, dùng thư viện Transpile này đề hạn chế Null Accident | ||
| 10 | Redux, lỗi đặt tên biến trong Store trùng với Single State Repository của Redux | - Đóng tiền thôi chứ Rule gì nữa (:D) | 10k | |
| 11 | Doc Style trên function (/*Doc Here */) | - Dùng Storybook để viết Doc Style - Utilities: bắt buộc - Base Class: bắt buộc - Core Component: bắt buộc |
50k | * |
| 12 | Quy chế Extend từ Base | - Extends tối đa 2 Level - Lớn hơn 2 Level => nộp tiền liền |
30k | * |
| 13 | Rule tối ưu Performance trên Grid | - Tham khảo chuyên gia cho những tính huống đặc thù | ||
| 14 | Rule DateTime for Restful | - Bắt buộc yyyy-MM-dd [hh:mm:ss] (ngoặc vuông là Optional) - Dự án đặc thù (International => buộc gọi qua Utilities để post lên Rest API) |
30k | * |
Thảo luận