Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

Một khi các bạn đã quen với cách làm việc của ReactJS thì bước tiếp theo là tự mình build một cấu trúc chuẩn để làm việc, hoặc chọn 1 framework ReactJS để làm việc.
Trước khi mình biết đến umiJS hay dvaJS thì mình cũng đã build qua, nhưng mà sài umiJS đã quá, nên thôi không nên build những gì mà người ta đã làm quá tốt rồi (trừ khi bạn có thể build cấu trúc tốt hơn :)).
Bài viết này mình sẽ đi qua mô tả về umiJS, không đề cập tới dvaJS hay những gì liên quan reactJS nữa, những điểm mình thích khi làm việc với umiJS gồm những điểm sau:

1. Tích hợp sâu với kiến trúc dvaJS (dvaJS là gì tham khảo link)
2. Khỏi tạo nhanh 1 ứng dụng reactJS với 1 vài câu lệnh. (dùng umi-cli cài đặt bằng cách install umi package)
   
   yarn global add umi

   1	yarn global add umi

3. Hổ trợ luôn server side render (SSR), 1 tính năng quá tiện khi dùng.

dùng umiJS bạn có dc gì, đó là có được 1 bộ admin reactJS Antd Design Pro, 1 ứng dụng react bên ngoài, và nếu muốn làm SSR thì có luôn, chỉ cần bật cấu hình ssr: true trong file cấu hình

I. Giới thiệu về umiJS:

Theo như tác giả mô tả thì umiJS là 1 bộ khung ứng dụng react cấp doanh nghiệp có khả năng cắm (pluggable) (nghe to tát đó), vì nó hổ trợ coi như đủ cho doanh nghiệp dùng, không cần phải viết thêm gì, dùng không cũng không hết 🙂 (theo ý mình)

II. Tính năng umiJS:

• 📦 Out of box, tích hợp sẵn hổ trợ cho react, react-router, ….
• 🏈 Next.js like and full featured routing conventions, hổ trợ cấu hình định tuyến
• 🎉 Complete plugin system, bao gồm mọi vòng đời từ mã nguồn tới xuất bản
• 🚀 High performance, với hổ trợ cho PWA, route-level code splitting, …. bằng plugin (có khả năng cắm ở đây, khi dùng umiJS nó sẽ cung cấp 1 số plugin cho mình gắn vào dùng)
• 💈 Support for static export, thích hợp với nhiều môi trường khác nhau, như console app, mobile app (cấu hình fastclick, PWA), egg, …
• 🚄 Fast dev startup, hổ trợ dll với việc cấu hình
• 🐠 Compatible with IE9, dựa trên umi-plugin-polyfills
• 🍁 Support TypeScript, bao gồm định nghĩa  d.ts và umi test
• 🌴 Deep integration with dva, hổ trợ kiến trúc thư mục duck, tự động load model, chia nhỏ code, …

III. Một số câu lệnh thường dùng:

1. Để tạo 1 ứng dụng với umiJS, gồm các bước
   • tạo thư mục ứng dụng: ví dụ umi-helloworld
   • vào trong thư mục vừa tạo, gõ lệnh:
     
     yarn create umi

     1	yarn create umi

   • Sau khi gõ lệnh trên màn hình tiếp theo hiển thị cho bạn lựa chọn:
     
     ? Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. ❯ app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.

     1 2 3 4 5 6

     ? Select the boilerplate type (Use arrow keys)   ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. ❯ app             - Create project with a simple boilerplate, support typescript.   block           - Create a umi block.   library         - Create a library with umi.   plugin          - Create a umi plugin.

     
     – antd-design-pro: tạo dự án với layout là bản mẫu ant-design-pro
     – app: Tạo dự án với bản mẫu đơn giản, hổ trợ typescript (mình hay chọn phần này)
     mấy mục (block, library, plugin), umiJS cung cấp thêm để mình có thể xây dựng thêm plugin cho umi, này mình chưa dùng tới các bạn có thể tham khảo thêm nếu muốn trên umiJS.
   • Tiếp theo nó sẽ hỏi bạn có chọn typescript không, cài này tùy các bạn nếu thích làm việc với typescript thì chọn Yes
     
     ? Do you want to use typescript? (y/N)

     1	? Do you want to use typescript? (y/N)

   • Chọn các chức năng kèm theo mà bạn muốn mở:
     
     ? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◯ antd ◯ dva ◯ code splitting ◯ dll

     1 2 3 4 5

     ? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◯ antd ◯ dva ◯ code splitting ◯ dll

     
     bao gồm antd, dva, code splitting, dll. Bước này bạn chọn hoặc bỏ qua việc này mình có thể cấu hình lại được trong file config của umiJS.
   • Vậy là xong cấu hình lúc tạo dự án, umi sẽ tự đông sinh mã code ra cho bạn:
     
     create package.json create .gitignore create .editorconfig create .env create .eslintrc create .prettierignore create .prettierrc create .umirc.js create mock/.gitkeep create src/app.js create src/assets/yay.jpg create src/global.css create src/layouts/index.css create src/layouts/index.js create src/models/.gitkeep create src/pages/index.css create src/pages/index.js create webpack.config.js ✨ File Generate Done ✨ Done in 161.20s.

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

     create package.json    create .gitignore    create .editorconfig    create .env    create .eslintrc    create .prettierignore    create .prettierrc    create .umirc.js    create mock/.gitkeep    create src/app.js    create src/assets/yay.jpg    create src/global.css    create src/layouts/index.css    create src/layouts/index.js    create src/models/.gitkeep    create src/pages/index.css    create src/pages/index.js    create webpack.config.js ✨  File Generate Done ✨  Done in 161.20s.

   • Chạy lệnh yarn để cài đặt cách package tương ứng trong package.json
   • Chạy yarn start để chạy ứng dụng, gõ localhost:8000 để xem kết quả
     

Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

Nguồn: umiJS