{
  "version": 1,
  "locale": "vi",
  "updated": "2022-04-04",
  "page": {
    "type": "article",
    "title": "EGANY Front-End Tech Stack",
    "description": "Lời mở đầu Sau chuỗi bài Vọc cùng Thành không mấy thành công tại DevNow, cứ 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...",
    "url": "https://egany.com/blogs/eganyers/egany-front-end-tech-stack/",
    "markdown_url": "https://egany.com/blogs/eganyers/egany-front-end-tech-stack.md",
    "json_url": "https://egany.com/blogs/eganyers/egany-front-end-tech-stack.json",
    "group": "eganyers",
    "author": "Thành Nguyễn",
    "published": "2021-02-24T02:38:20.000Z",
    "modified": "2022-04-04T10:36:19.000Z",
    "categories": [
      "Engineering"
    ]
  },
  "organization": {
    "name": "EGANY",
    "legal_name": "CÔNG TY CỔ PHẦN CÔNG NGHỆ EGANY",
    "alternate_name": "EGANY Technology JSC",
    "url": "https://egany.com/",
    "address": "77/6 Hồ Thị Kỷ, Phường Vườn Lài, TP. Hồ Chí Minh",
    "telephone": "+84934269700",
    "email": "support@egany.com",
    "tax_id": "0313000791",
    "opening_hours": "Thứ 2 - Thứ 6, 9:00 - 17:00",
    "same_as": [
      "https://www.facebook.com/egany.tech/",
      "https://www.youtube.com/user/eganydotcom",
      "https://zaloapp.com/qr/p/15np7bg4k8s47?src=qr"
    ]
  },
  "headings": [
    {
      "level": 1,
      "text": "EGANY Front-End Tech Stack",
      "id": "egany-front-end-tech-stack"
    },
    {
      "level": 2,
      "text": "Lời mở đầu",
      "id": "loi-mo-dau"
    },
    {
      "level": 2,
      "text": "Tech Stack là gì?",
      "id": "tech-stack-la-gi"
    },
    {
      "level": 2,
      "text": "Công nghệ front-end tại EGANY",
      "id": "cong-nghe-front-end-tai-egany"
    },
    {
      "level": 3,
      "text": "1\\. JavaScript",
      "id": "1-javascript"
    },
    {
      "level": 3,
      "text": "2\\. React",
      "id": "2-react"
    },
    {
      "level": 3,
      "text": "3\\. NextJS",
      "id": "3-nextjs"
    },
    {
      "level": 3,
      "text": "4\\. VueJS",
      "id": "4-vuejs"
    },
    {
      "level": 3,
      "text": "5\\. Svelte",
      "id": "5-svelte"
    },
    {
      "level": 3,
      "text": "6\\. Các thư viện hỗ trợ",
      "id": "6-cac-thu-vien-ho-tro"
    },
    {
      "level": 2,
      "text": "Tech stack",
      "id": "tech-stack"
    },
    {
      "level": 3,
      "text": "1\\. User Dashboard | Admin Dashboard | Website",
      "id": "1-user-dashboard-admin-dashboard-website"
    },
    {
      "level": 3,
      "text": "2\\. Theme | Theme Addons",
      "id": "2-theme-theme-addons"
    },
    {
      "level": 3,
      "text": "3\\. Embedded Web App",
      "id": "3-embedded-web-app"
    },
    {
      "level": 2,
      "text": "Tổng kết",
      "id": "tong-ket"
    }
  ],
  "links": [
    {
      "text": "**Vercel**",
      "url": "https://vercel.com/"
    }
  ],
  "sections": [
    {
      "id": "hero",
      "heading": "EGANY Front-End Tech Stack",
      "content_markdown": "",
      "links": []
    },
    {
      "id": "loi-mo-dau",
      "heading": "Lời mở đầu",
      "content_markdown": "Sau chuỗi bài *Vọc cùng Thành* không mấy thành công tại DevNow, cứ 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.\n\n> 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. \n> \n>  **Cập nhật ngày 04/04/2022:** Bổ sung ChakraUI & React Hook Form, Valtio",
      "links": []
    },
    {
      "id": "tech-stack-la-gi",
      "heading": "Tech Stack là gì?",
      "content_markdown": "![Thinking meme](https://cdn.egany.com/images/blogs/2021/02/think-meme-300x248.jpg \"Thinking meme\")\n\nChắ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.\n\nMộ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ì?\n\n**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:\n\n- **Programming languages:** C#, Java, JavaScript, Ruby, …\n- **Frameworks:** .NET, Spring, Express, Ruby on Rails, …\n- **Databases:** MySQL, Postgre, MongoDB, …\n- **Front-end tools:** npm, Babel, Webpack, …\n- **Back-end tools:** Apache, Ngnix, Docker, …\n- **Applications connected via APIs**: API nội bộ hoặc của một bên thứ ba (third-party)\n\nNhư tiêu đề, bài viết này chỉ giới thiệu về front-end stack tại EGANY.",
      "links": []
    },
    {
      "id": "cong-nghe-front-end-tai-egany",
      "heading": "Công nghệ front-end tại EGANY",
      "content_markdown": "Sau hơn 2 năm tìm hiểu và thử nghiệm thì đây là các công nghệ chính được sử dụng tại EGANY:\n\n### 1\\. JavaScript\n\n![JavaScript logo](https:https://cdn.egany.com/images/blogs/2021/02/javascript-thumb-150x150.jpg \"JavaScript logo\")\n\nDo 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.\n\n**Ưu điểm:**\n\n- Dễ tiếp cận. Dễ dùng. Dễ chạy\n- Có thể chạy được ở client-side (browser) và server-side\n- Hiệu năng ổn\n\n**Khuyết điểm:**\n\n- Hơi \"tự do\" nên sẽ phải cẩn thận khi phát triển\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\n- 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\n\nEGANY đ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\nNế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é!\n\n### 2\\. React\n\n![React logo](https://cdn.egany.com/images/blogs/2021/02/react-thumb-150x150.jpg \"React logo\")\n\nCó 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ệ.\n\n**Ưu điểm:**\n\n- Open Source\n- Con ông cháu cha (Facebook)\n- API ổn định do ra đời từ khá lâu\n- Cực kì nhiều thư viện cũng như framework phát triển dành cho/dựa trên React\n\n**Khuyết điểm:**\n\n- Phải setup công cụ hỗ trợ khi dùng _JSX_\n- Khá rắc rối cho người mới tiếp cận\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\n\n### 3\\. NextJS\n\n![NextJS logo](https://cdn.egany.com/images/blogs/2021/02/next-thumb-150x150.jpg \"NextJS logo\")\n\nVớ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.\n\n**Ưu điểm:**\n\n- Open Source\n- Con ông cháu cha (Vercel)\n- Sử dụng React\n- Setup & deploy dễ dàng nhờ hệ thống [**Vercel**](https://vercel.com/)\n- Giải quyết tốt tốc độ tải trang cũng như _SEO_ nhờ _Server-Side Rendering_\n- 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\n\n**Khuyết điểm:**\n\n- Giải pháp bị phụ thuộc vào các ràng buộc của NextJS\n- 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\n\n### 4\\. VueJS\n\n![VueJS logo](https://cdn.egany.com/images/blogs/2021/02/vue-thumb-150x150.jpg \"VueJS logo\")\n\nUI 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.\n\n**Ưu điểm:**\n\n- Open Source\n- Được đánh giá là nhẹ & nhanh hơn React\n- Đầy đủ tính năng hơn React\n- Thích hợp trong việc \"nâng cấp\" HTML có sẵn\n- Template giống HTML thuần\n\n**Khuyết điểm:**\n\n- Còn khá mới, chưa có nhiều plugins như React\n- 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 `<template></template>`). Dự kiến vấn đề này sẽ được khắc phục ở version 3\n\n### 5\\. Svelte\n\n![Svelte logo](https://cdn.egany.com/images/blogs/2021/02/svelte-thumb-150x150.jpg \"Svelte logo\")\n\nPhá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.\n\n**Ưu điểm:**\n\n- Open Source\n- Bundle nhỏ, tốc độ tải và chạy cao\n- Template giống HTML thuần\n- Trải nghiệm dev tốt\n\n**Khuyết điểm:**\n\n- Còn khá mới, chưa có nhiều plugins như React hoặc thậm chí là VueJS\n- 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\n- Không có sponsor (nhà tài trợ) đủ lớn để đảm bảo duy trì được dự án\n\n> Mình có viết thêm bài [Svelte – Ván cược thành công](https://egany.com/blogs/svelte-van-cuoc-thanh-cong/ \"Svelte - Ván cược thành công\"), mọi người có thể đọc thêm câu chuyện khi lựa chọn Svelte của team mình.\n\n### 6\\. Các thư viện hỗ trợ\n\nNgoài các công nghệ trên thì 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.\n\n![Zustand logo](https://cdn.egany.com/images/blogs/2021/02/zustand-thumb-150x150.jpg \"Zustand logo\")  \n![Immer logo](https://cdn.egany.com/images/blogs/2021/02/immer-thumb-150x150.jpg \"Immer logo\")\n\nZustand 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.\n\n![React Query logo](https://cdn.egany.com/images/blogs/2021/02/react-query-thumb-150x150.jpg \"React Query logo\")  \n![SWR logo](https://cdn.egany.com/images/blogs/2021/02/swr-thumb-150x150.jpg \"SWR logo\")\n\nĐố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.\n\n![TailwindCSS logo](https://cdn.egany.com/images/blogs/2021/02/tailwind-thumb-150x150.jpg \"TailwindCSS logo\")  \n![Tachyons logo](https://cdn.egany.com/images/blogs/2021/02/tachyons-thumb-150x150.jpg \"Tachyons logo\")\n\nTailwind & 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, không phải Most Valuable Player đâu nhé các bạn game thủ ????) hoặc UI mockup.\n\n![Ant Design logo](https://cdn.egany.com/images/blogs/2021/02/antd-thumb-150x150.jpg \"Ant Design logo\")\n\nNhậ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.",
      "links": [
        {
          "text": "**Vercel**",
          "url": "https://vercel.com/"
        }
      ]
    },
    {
      "id": "tech-stack",
      "heading": "Tech stack",
      "content_markdown": "### 1\\. User Dashboard | Admin Dashboard | Website\n\nHệ thống cũ:\n\n![Front-end dashboard tech stack](https://cdn.egany.com/images/blogs/2021/02/dashboard-stack.jpg \"Front-end dashboard tech stack\")\n\n- **Programming Language:** JavaScript & TypeScript (main)\n- **Framework:** NextJS\n- **UI**: React + Ant Design\n- **State management:** Zustand + Immer + React Query\n\nHệ thống mới (từ 28/10/2021):\n\n![Chakra UI](https://cdn.egany.com/images/blogs/2022/02/chakraui-logo-150x150.png) ![React Hook Form](https://cdn.egany.com/images/blogs/2022/02/react-hook-form-logo-150x150.png) ![Valtio](https://cdn.egany.com/images/blogs/2021/02/valtio-150x150.png)\n\nVì 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 đó.\n\n- **Programming Language:** TypeScript\n- **Framework:** NextJS\n- **UI**: React + ChakraUI + React Hook Form\n- **State management:** Valtio + React Query\n\n### 2\\. Theme | Theme Addons\n\n![Front-end theme tech stack](https://cdn.egany.com/images/blogs/2021/02/theme-stack.jpg \"Front-end theme tech stack\")\n\n- **Programming Language:** JavaScript\n- **Framework:** VueJS\n- **CSS**: Tailwind, Tachyons hoặc SCSS\n\n### 3\\. Embedded Web App\n\n![Front-end embedded app tech stack](https://cdn.egany.com/images/blogs/2021/02/theme-stack.jpg \"Front-end embedded app tech stack\")\n\n- **Programming Language:** JavaScript\n- **Framework:** Svelte\n- **CSS**: Tailwind, Tachyons hoặc CSS",
      "links": []
    },
    {
      "id": "tong-ket",
      "heading": "Tổng kết",
      "content_markdown": "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.\n\nTech 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é!\n\nCám ơn các bạn đã đọc. Happy hacking!\n\n> Sau bài của mình thì bạn Thuận đã biên tiếp bài [Back-end Tech Stack](https://egany.com/blogs/egany-back-end-tech-stack/ \"Back-end Tech Stack\") luôn, các bạn có thể đọc ngay cho nóng ;).",
      "links": []
    }
  ]
}