Hành trình tạo ra dịch vụ mới "Ggul-tem" (Hả? Đến tháng sau cơ ạ?)

Source: 신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편

Đây là bản dịch nguyên văn sang tiếng Việt và bảng tổng hợp từ vựng kỹ thuật tương ứng từ bài viết của bạn:

Bản dịch tiếng Việt

Hành trình tạo ra dịch vụ mới "Ggul-tem" (Hả? Đến tháng sau cơ ạ?) - Phần 2 30. 06. 2024. 19:09 Chào mọi người. Tôi là Lee Min-ha từ đội Web Frontend.

Trong phần trước, chúng ta đã lập kế hoạch cho dịch vụ Ggul-tem, đặt tên cho các khái niệm cần thiết và thiết kế cơ sở dữ liệu dựa trên đó. Trong phần này, tôi sẽ giới thiệu về các kỹ nghệ (tech stack) mà chúng tôi đã lựa chọn.

Lựa chọn Tech Stack và Phát triển

Trong mạng External, vốn đã có các ứng dụng thuộc mảng frontend của BSD. Chúng được xây dựng bằng Node.js và Fastify (một web framework tinh gọn). Khi phía Front gọi API, ứng dụng tổng hợp attraction sẽ truy vấn dữ liệu từ Oracle DB – kho lưu trữ dữ liệu chính. Nó cũng truyền lại kết quả từ việc gọi các API bên ngoài như lịch sử mua hàng, Link-kr, v.v.

Dữ liệu lưu trữ có thể được quản lý thông qua màn hình Admin. Tại đây, có thể kiểm tra xem ai đã viết feed nào, ai đã nhấn nút thích, hay lượng mua hàng phát sinh là bao nhiêu.

Frontend được phát triển dưới dạng plugin thay vì xây dựng server riêng biệt. Các ứng dụng liên quan đến Event tuy có tên là frontend nhưng lại chứa nhiều logic nghiệp vụ của các khu vực khuyến mãi. Trong kỳ BSD này, tab Ggul-tem sẽ được thiết lập mới bên cạnh tab Xếp hạng, vì vậy chúng tôi đã import ứng dụng attraction mới tạo vào bên trong ứng dụng Event dưới dạng bundle.

Typescript, React 18.2
Tanstack query (aka. react-query): Rất có lợi cho phát triển vì không cần quản lý trạng thái riêng biệt cho từng chức năng gọi API như đăng ký/chỉnh sửa/thích Ggul-tem.
Tanstack virtual: Dùng để hiện thực chức năng cuộn vô hạn (infinite scroll).
Sử dụng framework Fastify tương tự như event-fe.
Đóng gói bằng Vite và triển khai qua hệ thống phân phối nội bộ.

Ngoài ra còn có các đặc điểm sau:

Gọi API tổng hợp attraction và kiểm chứng giá trị nhập của người dùng (phòng chống XSS).
Vì kho lưu trữ của Event Front và Ggul-tem (attraction front) tách biệt, nên mã nguồn Fastify phía Ggul-tem được phát triển tại attraction front, tạo ra thành phẩm dưới dạng gói npm (Fastify plugin) để phía Event Front sử dụng.
Trong quá trình phát triển, chúng tôi đã dựng dev server tại attraction frontend với cấu trúc tương tự Event Front.

Tech Stack của Backend như sau:

Trong mảng Event, có nhiều ứng dụng chạy bằng C# .NET và Node.js, nhưng đây là lần đầu tiên đội áp dụng Spring và Kotlin để phát triển. Vì dùng Oracle, chúng tôi đã áp dụng JPA và QueryDSL thay cho Stored Procedure (SP). Dịch vụ Admin được tạo bằng Spring Multi-module để UI web và API kết nối Oracle có thể chia sẻ cùng một domain model.

Hệ thống Admin chung hiện tại của công ty thường gặp khó khăn trong phát triển và triển khai vì tất cả domain đều nằm chung một kho lưu trữ frontend. Project nặng nên tốn thời gian build và khó scale riêng lẻ cho từng ứng dụng. Admin liên quan hỗ trợ SSO để liên kết với hệ thống bên ngoài. Việc chuyển sang Java/Kotlin hoặc Node.js để chạy trên Fusion (hệ thống Kubernetes nội bộ) giúp giảm bớt các điểm cần quản lý, hỗ trợ bảo trì rất tốt. Hơn nữa, vì không dùng .NET Framework nên có thể phát triển trên Macbook. Tuy nhiên, việc phải tự hiện thực các chức năng chung và trải qua quy trình QA riêng khiến thời gian phát triển dài hơn – đây là sự đánh đổi giữa tốc độ phát triển và khả năng bảo trì.

HTMX + Thymeleaf: Chúng tôi cấu trúc Admin UI bằng HTMX thay vì cshtml. Dù mục tiêu là hiện thực tính năng nhanh chóng hơn là sự hoàn thiện, nhưng việc áp dụng HTMX có thể coi là một thử thách kỹ thuật (tất nhiên, khi lịch trình gấp gáp, chúng tôi không khỏi hối hận chút ít...).

Một chút về HTMX:

Dễ hiểu chỉ bằng cách nhìn vào HTML.
Giúp giao tiếp AJAX với server mà không cần script riêng biệt, loại bỏ nhiều mã boilerplate (mã lặp).
Khai báo thuộc tính với tiền tố "hx-" để tạo dữ liệu mong muốn dễ dàng. Có thể mở rộng tính năng qua Extension. Không cần bước build riêng nên có thể phát triển tức thì.

Ưu/Nhược điểm rõ ràng:

Ưu điểm: Không dùng JS khi giao tiếp server, trung thành với mục đích nguyên bản của HTML. Kết hợp với Thymeleaf cho phép tái sử dụng layout (tương tự component trong React). Backend developer có thể tự làm Front.
Nhược điểm: Cần thời gian thích nghi với việc nhận phản hồi là tag HTML thay vì JSON. Các vấn đề về binding dữ liệu (như đổi từ @RequestBody sang @RequestPart) từng khiến chúng tôi loay hoay. Lượng packet dữ liệu lớn có thể gây áp lực traffic. Cuối cùng, các tính năng như tải Excel CSV, date-picker vẫn cần đến JS và không dùng được Typescript.

Quản lý dự án và QA

Daily Scrum hàng ngày trong 2 tuần: Diễn ra từ 1-10 phút để chia sẻ tiến độ, giúp điều chỉnh các điểm chưa rõ ràng mà không gây thêm việc dư thừa.
Tự QA nội bộ: Trước khi qua đội QE/PM, đội phát triển đã tự QA. Điều này cực kỳ hiệu quả vì mọi người đều là developer nên đã đưa ra các phản hồi chất lượng cao, từ bug nhỏ đến luồng di chuyển bất tiện và cả cách khắc phục.

Các vấn đề kỹ thuật phát sinh

Lý do PK trong Oracle DB không tăng tuần tự: Hệ thống Oracle sử dụng cấu trúc RAC (Real Application Cluster). Khi tạo Sequence với tùy chọn CACHE, các node sẽ lấy trước một khoảng số vào bộ nhớ (ví dụ node 1 lấy 1-20, node 2 lấy 21-40). Do đó khi kết nối vào các instance khác nhau, số PK sẽ nhảy cóc (1, 21, 41...). Để đảm bảo duy nhất, nên dùng tùy chọn NO ORDER. Tránh dùng NO CACHE vì Oracle không khuyến nghị.
Sử dụng JPA, QueryDSL thay vì SP: Chúng tôi gặp khó khăn khi QueryDSL không hỗ trợ subquery trong mệnh đề from và join. Giải pháp là biến chính subquery đó thành một Entity (giống như View) để xử lý.

Các công cụ nội bộ sử dụng

Git/Github: Quản lý mã nguồn.
Jira: Quản lý công việc và yêu cầu hạ tầng.
Saturn Initializr: Tạo nhanh project backend với các gói bảo mật nội bộ.
Fusion (Openshift): Build, triển khai và điều phối container.
Kibana: Theo dõi log từ các Pod trong Kubernetes.
nGrinder: Test chịu tải (stress test). Đã test thành công với 1 triệu bản ghi.
Datadog: Giám sát hiệu suất ứng dụng (APM) và cảnh báo qua Slack/Teams.