“Fast, simple and robust” front-end application framework, open source

Almost all platforms in Web development need a background management, usually including permissions, add, delete, change to check, reports, charts and other relatively simple business logic content, but a large number of add, delete, change to check, interface debugging is also very time-consuming. Under the concept of big middle platform, there are higher requirements for the front end of the management console, which requires to maintain a unified UI style and consistent interactive experience.

The front-end development team of Basic Science and Technology Product Department of WeBank began to explore Vue technology in 2015, and completed the upgrade of the technology stack from Angular to a new vUe-based architecture in 2016, accumulating valuable experience in the front-end application of development management console.

Based on this, Webank incubated a front-end solution of Fes. Js applicable to background management system, which has been practiced internally for 3 years and opened source externally in August this year. Compared with similar projects, Fes. Js has perfect engineering capabilities, providing command line tools for initial projects, development and debugging, compilation and packaging, and format checking. Simplify the design of complex, using the convention to generate routing, global components, layout, menu, permission management, data dictionary configuration, provide state management, data dictionary management, interface management and other modules, so that the background management application development only need to focus on the page, with components to build the page.

Refuse to test:

Github.com/WeBankFinTe…

Gitee.com/WeBank/fes….

The current features are

1. Command line tool fES-CLI, one line command to create project, start development and debugging, package and release;

2. Runtime framework FES-Core, fixed page layout, provides permissions management, storage management, routing management, interface management, state management, data dictionary management, environment management and other apis, and provides extended interfaces in the way of plug-ins;

3. Component library FES-UI, including 30+ PC component library, which can quickly build pages such as add, delete, change and check.

1. Efficient development of front end of management system

Build the project environment quickly, encapsulate the common modules of background management application; Fixed app layouts so developers only care about building pages with components;

2, meet the high quality and high stability operation

The stable underlying architecture of Fes. Js combined with the upper quality assurance system and the whole set of online verified technology stack can ensure the stable operation of the application online.

3. Support international version

Fes-core and FES-UI support internationalization capabilities, making it easy to implement internationalization support for management console applications.

Evolution process

In the process of using Vue to develop the management console, some relatively common components have been accumulated to realize business requirements. After reconstructing to make the components more common, the UI-WEBank component library was born.

Using component library to develop management console application, efficiency has been improved, but there are still a lot of content, such as layout, menu, permissions, interface request ability is similar, why not management console application in other general ability abstract out, implement a framework encapsulate these capabilities? Thus, fes.js was born.

The core design principle of Fes. Js is “let developers write less”, and the vision is “Fast, Easy, Strong”. Fes. Js is divided into fES-CLI, fES-Core and FES-UI in terms of functions. Before open source, fES-CLI and FES-Core have undergone a major architectural change.

• Fes-cli and fES-core are in the same NPM package. Each update of FES-core is followed by the update of fES-CLI. In other words, users need to reinstall the Fes command globally.

• Fes-core relies heavily on FES-UI, using the Message component of FES-UI in the code. Fes-core’s package.json is written to block the version of FES-UI. As a result, each upgrade of the FES-UI version requires the upgrade of the FES-core version, and the user needs to reinstall the Fes command.

In v2.0, the three modules are completely decoupled, and the versions of FES-Core and FES-UI are determined by the project.

We have taken the first step, although we can’t fully implement some of the features at present, as time goes by, this part of the features will be more and more perfect, hopefully this will help developers to better develop.

We sincerely invite you who pay attention to front-end development to participate in the fes.js project. We welcome any form of contribution, any suggestions or opinions can be raised in GitHub/ Gitee/wechat group, looking forward to your arrival.

• GitHub project address

  Github.com/WeBankFinTe…

• Gitee project address

  Gitee.com/WeBank/fes….

• Project documentation

  Webank. Gitee. IO/fes. Js/guid…

• Please contact

  Harry, Project Leader: [email protected]