Background:
In the past two years QA team growth rapidly, more and more new hires joined our team. In order the improve management efficiency for our daily work we designed a platform called QA Platform, the main features includes Task Management, Personal Performance Management, Live Bug Management and corresponding Approve&Request workflow, Permission Control and Role management, etc. Now it has became our good assistant in our work. When talk about a platform, Frontend is an important part . This post will talk about the frontend of this platform.
What is Ant Design Pro
For Backend, there are mature frameworks for different coding languages, for example, Spring Boot for Java, Django for Python and Gin for Golang. A Good framework can make developer more focused on the business logic rather than the different and complex environment or dependancies management. For Frontend, it is same. Ant Design Pro is kind of framework we call it as scaffold and it was developed and maintained by Ant Group(Ali Pay)
Why Ant Design Pro?
Ant Design Pro is one of most popular scaffold in the world, it is a real Open-Box-To-Use framework. In Github it has 31.5K stars.
The Advantage for Ant Design Pro
- Free (other scaffold like Material and MUI need to pay like 50 USD)
- Better UI components provided by the development team compare to pure React components
- Very detailed documents for the UI components and also they provided many examples for these components. As developer we could write code by reading the documents
- Integrate with useful and most used dependancies like Redux, Router, Layout etc. FE developer can more focus on their own pages.
- Last but the most important, Ant Design Pro has very strong eco-system based on AntD, for example ant-design-charts which included lots of chart for user to use.
The Disadvantage for Ant Design Pro
- The default theme might be so colourful like other counterparts(eg.Material), if you are not fond of the theme you need to customise it by spending some efforts.
- Ant Design pro is more suitable for internal tools and platforms, if your web pages are for the outside users, it is not the best option because you have to do lots of customisation for it.
For QA Team what we need is an internal platform and we have to finish coding as fast as possible, we did not want to spent more time and effort on systematically learn how to establish Frontend by raw React. By using Ant Design Pro has the framework for FE we could create our pages conveniently
Fast Boot Camp
In this section we will briefly talk about how to setup the front end pages fast.
- Install NPM package on your computer , because we need use some commands in NPM to run, build, install dependencies
- Initialise a project by this command in terminal:
npx create-umi myapp`
- Follow the instructions step by step in the terminal then a project create
- Run
cd myapp && npm installto install the dependencies
- Finally run
npm run startto launch the project, then a simple website started
For more details about Ant Design Pro can refer to its official website and Github.
https://github.com/ant-design/ant-design-pro
Current&Future of the QA Platform
The first version was launched about one year ago, we have been continuously making improvement for it. For the frontend part, we started to use Redux for the data management in frontend and all of features are based on components. Till now we already have over 20 pages in the platform. The next step we need are are going to make the platform better user experience and better UI layout that can be defined by end user for better comply with their personal habits.
Learning path
- Learn Javascript especially new version ES5+
- Learn React fundamental in React official website
- Try to write code for simple page or component
- Learn Redux
- Write complex components and pages
Bad Quality Organization 