Bộ công cụ Front-End của EGANY

Công nghệ Front-End tại EGANY

Sau chuỗi bài về các công nghệ không mấy thành công tại DevNow, mình đã tưởng là sẽ không viết blog nữa. Tuy nhiên, hôm nay có hứng nên muốn viết một bài chia sẻ về các công nghệ đang được sử dụng ở phía front-end của EGANY.

Bài viết không có ý định khen hoặc chê các thư viện/framework được đề cập. Đây đơn thuần là đánh giá chủ quan của mình về mức độ PHÙ HỢP của công nghệ khi áp dụng tại EGANY.

Tech stack là gì?

Chắc hẳn các bạn đã từng nghe tới MEAN stack (MongoDB, Express, Angular, Node), hoặc MERN stack (MongoDB, Express, React, Node). Đó là 2 ví dụ trong số nhiều tech stack phổ biến hiện nay.

Một số bạn có thể thắc mắc tại sao JAMstack (JavaScript, API, Markup) khá nổi dạo gần đây lại không được đề cập phải không? JAMstack tuy có stack trong tên gọi của mình nhưng thực tế nó là một kiến trúc dùng để phát triển website. JAMstack mang ý nghĩa rộng hơn so với tech stack. Vậy tech stack là gì?

Tech stack là tổng hợp công nghệ được sử dụng để xây dựng và phát triển ứng dụng. Tech stack thường sẽ bao gồm:

• Programming languages: C#, Java, JavaScript, Ruby, ...
• Frameworks: .NET, Spring, Express, Ruby on Rails, ...
• Databases: MySQL, Postgre, MongoDB, ...
• Front-end tools: npm, Babel, Webpack, ...
• Back-end tools: Apache, Ngnix, Docker, ...
• Applications connected via APIs: API nội bộ hoặc của một bên thứ ba (third-party)

Như tiêu đề, bài viết này chỉ giới thiệu về front-end stack tại EGANY.

Công nghệ front-end tại EGANY

Sau hơn 2 năm tìm hiểu và thử nghiệm, đây là các công nghệ chính được sử dụng tại EGANY:

1. JavaScript

Do hầu hết sản phẩm tại EGANY đều là web application (ứng dụng chạy trên nền tảng web) nên JavaScript luôn là lựa chọn hàng đầu cho programming language.

Ưu điểm:

• Dễ tiếp cận. Dễ dùng. Dễ chạy
• Có thể chạy được ở client-side (browser) và server-side
• Hiệu năng ổn

Khuyết điểm:

• Hơi "tự do" nên sẽ phải cẩn thận khi phát triển
• Đôi lúc sẽ chạy khác nhau trên các trình duyệt khác nhau hoặc thậm chí các phiên bản khác nhau của cùng một trình duyệt
• Cần setup thêm các công cụ hỗ trợ (linter, bundler, ...) mới có thể "tự tin" và thoải mái phát triển sản phẩm

EGANY đang trong quá trình chuyển đổi một số sản phẩm hiện có qua TypeScript (TS). TS sẽ giúp team tránh đa số các lỗi syntax, lỗi runtime cũng như hỗ trợ tốt hơn khi phát triển sản phẩm.

Nếu chuyển đổi thành công chắc chắn mình sẽ có bài viết khoe chia sẻ cho các bạn. Hãy đón chờ nhé!

2. React

Có lẽ React quá nổi tiếng để mình phải giới thiệu rồi nhỉ? Nếu người người nhà nhà đều dùng thì EGANY cũng không phải là ngoại lệ.

Ưu điểm:

• Open Source
• Con ông cháu cha (Facebook)
• API ổn định do ra đời từ khá lâu
• Cực kì nhiều thư viện cũng như framework phát triển dành cho/dựa trên React

Khuyết điểm:

• Phải setup công cụ hỗ trợ khi dùng JSX
• Khá rắc rối cho người mới tiếp cận
• Chỉ là thư viện UI nên sẽ phải cài đặt thêm các thư viện khác để hỗ trợ xây dựng website hoàn chỉnh

3. NextJS

Với hệ thống "đồ chơi" đồ sộ và xịn sò, NextJS đáp ứng tốt cho các dự án xây dựng website cho khách hàng cũng như nội bộ công ty.

Ưu điểm:

• Open Source
• Con ông cháu cha (Vercel)
• Sử dụng React
• Setup & deploy dễ dàng nhờ hệ thống Vercel
• Giải quyết tốt tốc độ tải trang cũng như SEO nhờ Server-Side Rendering
• Rất nhiều template có sẵn, đáp ứng được hầu hết các yêu cầu thường gặp của khách hàng

Khuyết điểm:

• Giải pháp bị phụ thuộc vào các ràng buộc của NextJS
• Khó tích hợp các thư viện client-side có sử dụng object window, điển hình là các thư viện rich-text editor

4. VueJS

UI framework nổi đình nổi đám ngay từ lúc ra mắt. VueJS cũng được áp dụng cho một số sản phẩm tại EGANY.

Ưu điểm:

• Open Source
• Được đánh giá là nhẹ & nhanh hơn React
• Đầy đủ tính năng hơn React
• Thích hợp trong việc "nâng cấp" HTML có sẵn
• Template giống HTML thuần

Khuyết điểm:

• Còn khá mới, chưa có nhiều plugins như React
• Syntax hơi rườm rà, điển hình như import component (import từ file, khai báo component rồi mới có thể sử dụng bên trong ). Dự kiến vấn đề này sẽ được khắc phục ở version 3

5. Svelte

Phát triển theo hướng compiler, kích thước file bundle của Svelte khá "khiêm tốn" so với React hay VueJS. Tận dụng lợi thế này, EGANY áp dụng Svelte vào các sản phẩm tích hợp (như egaShop) nhằm đảm bảo tốc độ tải trang cũng như hiệu năng của ứng dụng khi được nhúng vào trang của khách hàng.

Ưu điểm:

• Open Source
• Bundle nhỏ, tốc độ tải và chạy cao
• Template giống HTML thuần
• Trải nghiệm dev tốt

Khuyết điểm:

• Còn khá mới, chưa có nhiều plugins như React hoặc thậm chí là VueJS
• Syntax khá mới lạ so với các thư viện hoặc framework hiện có khiến developer bỡ ngỡ khi tiếp cận lần đầu
• Không có sponsor (nhà tài trợ) đủ lớn để đảm bảo duy trì được dự án

6. Các thư viện hỗ trợ

Ngoài các công nghệ trên, EGANY còn sử dụng thêm một số thư viện hỗ trợ để đẩy nhanh tốc độ phát triển ứng dụng.

Zustand và Immer là bộ đôi kết hợp giúp việc quản lý client-site state trở nên dễ dàng và hiệu quả hơn khi làm việc với NextJS.

Đối với server-site state thì React Query và SWR đều đáp ứng tốt cho nhu cầu hiện tại của team. Trải nghiệm người dùng cũng được nâng cao nhờ tính năng tự cập nhật lại dữ liệu khi focus lại website.

Tailwind & Tachyons tuy không được sử dụng nhiều trong các sản phẩm hiện có tuy nhiên chúng lại đóng vai trò chủ chốt trong quá trình tạo MVP (Minimum Viable Product) hoặc UI mockup.

Nhận ra việc quản lý custom UI components ngày càng trở nên khó khăn và mất thời gian hơn, team quyết định lựa chọn Ant Design. Điều này giúp team tập trung vào các tính năng của sản phẩm hơn là những thứ "râu ria" liên quan tới giao diện.

Tech stack

1. User Dashboard | Admin Dashboard | Website

Hệ thống cũ:

• Programming Language: JavaScript & TypeScript (main)
• Framework: NextJS
• UI: React + Ant Design
• State management: Zustand + Immer + React Query

Hệ thống mới (từ 28/10/2021):

Vì nhu cầu custom theme để có "chất riêng" của EGANY, Ant Design đã được thay thế bởi ChakraUI và React Hook Form. Zustand + Immer đã được thay thế bằng Valtio - đơn giản, dễ dùng nhưng vẫn đảm bảo các tính năng của bộ đôi trước đó.

• Programming Language: TypeScript
• Framework: NextJS
• UI: React + ChakraUI + React Hook Form
• State management: Valtio + React Query

2. Theme | Theme Addons

• Programming Language: JavaScript
• Framework: VueJS
• CSS: Tailwind, Tachyons hoặc SCSS

3. Embedded Web App

• Programming Language: JavaScript
• Framework: Svelte
• CSS: Tailwind, Tachyons hoặc CSS

Tổng kết

Tuổi già sức yếu chỉ viết được tới đây thôi. Mong rằng qua bài viết các bạn sẽ lựa chọn được cho bản thân mình cũng như team một tech stack phù hợp nhất.

Tech stack yêu thích của bạn hoặc team bạn là gì? Hãy chia sẻ cho mình và mọi người biết nhé!

Cám ơn các bạn đã đọc. Happy hacking!

Sau bài của mình thì bạn Thuận đã biên tiếp bài Back-end Tech Stack luôn, các bạn có thể đọc ngay cho nóng ;)