Birth of Fes.js
In the blink of an eye, I have joined the company for 5 years, and I have been working on the development of middle and back-end applications related to the customer service business of banks. It will inevitably be a bit boring and boring to do development work with high similarity day after day, so I thought about how to be smarter way to comprehensively optimize and improve the efficiency of middle and background application development.
Three important points have been extracted from past work. The first is Fast, which requires an extremely agile development experience; the second is Easy, which has low learning costs and is easy to use; and finally, Strong, which has stronger code robustness and excellent performance; This builds Fes.js, a Vue 3 based front-end application solution.
With the design ideas of convention, configuration, and componentization, users only care about building page content with components. The technical curve is flat and easy to get started. After several projects, it tends to be stable. The rich Vue 3 ecology and Fes.js plug-ins make business development more agile and smooth.
The growth of Fes.js
At the beginning of open source in 2020, Fes.js was only positioned as a mid- and back-end application solution. Now it has added the function of developing H5 and has evolved into a general front-end application solution . Next, I will share with you what transformation Fes.js has undergone and completed this iterative upgrade. I hope it can be a reference for you, and I look forward to trying the upgraded Fes.js.
v1 version
Most of the front-end applications in the middle and background have to deal with these things:
-
build, dev and build
-
entry index.html
-
Enter main.js, initialize the vue instance
-
routing related
-
Permission related
-
Page Layout
-
interface request
-
...
At the time CLI tools were very popular, such as Vue-CLI and mn within the team, they handled build related things, and other things needed to be handled by the project itself. Then the steps to develop a new project are to copy the old project first, then change the code, and then add new functions, and find some problems over time:
-
Inheriting the "to-be-optimized" code, it is very laborious to change if you are not familiar with it, and it is a hidden danger if you do not change it
-
The technology stack is old, and the upgrade is very laborious. It is better to build a new set
-
A request tool function, ten ways to write it, it is tiring to maintain
Then provide a framework to encapsulate these general functions, unify code specifications and code organization, code optimization and upgrades are handed over to the framework, users don't have to worry about it, the v1 version does these things.
Design ideas
Module division
- fes-cli is a command-line tool that provides capabilities such as pre-compiling, creating projects, enabling development and debugging, and packaging and publishing.
- Fes-core is a runtime framework that provides fixed page layouts and APIs such as permission management, storage management, routing management, interface management, state management, data dictionary management, and environment management. Provides runtime extensions in the form of plugins.
- fes-ui is a component library, including 30+ PC-side component libraries, which can quickly build pages such as additions, deletions, changes, and inspections.
How to use Fes-ui
1. Global installation command
wnpm i @webank/fes-cli -g2. Declare dependencies in the project
{"dependencies": { "@webank/fes": "^1.0.0"}}
3. After installing dependencies, run in the project root directory
fes dev
Since the v1 version was born, if you compare developing an application to building a house, using fes.js is equivalent to giving you a rough house, only needing decoration.
v2 version
After running the v1 iteratively for a while, we encountered some problems:
1. The module division is unreasonable
The v1 version shields users from the concept of fes-ui. Users do not need to know how to install and register these components. They only need to declare dependencies @webank/fes in package.json and use components in code. The ideal is perfect, but the reality is very skinny. fes-ui is updated at high frequency, and fes-core is updated at low frequency. When fes-ui is incompatible with updating and upgrading the major version number, since @webank/fes depends on fes-ui, then @webank/fes must also follow the major version upgrade, which brings challenges to the usability and stability of @webank/fes.
2. Global fes command
The v1 version expects users to install the fes command locally and globally, and also install the fes command globally in the build platform, which can save a lot of installation time for different projects. If fes-cli is very stable and hardly updated, then it works. However, the reality is that fes-cli also needs to be updated and iterated. At the same time, the pre-build, mock and other capabilities provided by fes-cli require the cooperation of projects. There is a possibility that different projects need to use different versions of fes-cli.
Prepare to solve the above problems in v2 version.
Design ideas
The running idea is the same as the v1 version, and two changes need to be made:
- Split @webank/fes into @webank/fes-core and @webank/fes-ui, decoupling the two modules
- Fes-cli is changed to project startup, non-global installation.
Module division
How to use
1. Declare dependencies in the project
{"dependencies": {"@webank/fes-core": "^2.0.0","@webank/fes-ui": "^2.0.0",},"devDependencies": {"@webank/fes-cli": "^2.0.0",}}
2. After installing dependencies, run in the project root directory
fes dev The V2 version also upgrades Vue from 1.0 to 2.0 and webpack to 4.0, bringing a better development experience.
v3 version
After running the V2 version for a while, we encountered some problems:
1. Weak scalability
The V2 version encapsulates Vue's plugin capabilities to provide extensions. Vue plugins do things at runtime, they can't do things during the build phase. For example, if I want to automatically generate and register the Vue component from the svg file in the src/icons folder, the Vue plug-in cannot be implemented. It needs to scan the icons folder during the build phase to generate extra code based on the filename.
2. Too hardened
Using fes.js is like decorating and adding various things on the basis of a rough house with a fixed layout. Times are changing, users want a better living experience, and they are not satisfied with the rough housing pattern, but fes.js cannot change the pattern.
In order to solve these problems, fes.js needs to strengthen its extension capabilities and allow plugins to support runtime and build time. The second is to no longer fix the layout of the rough room, but abstract the room of the rough room as a plug-in, allowing users to freely choose what plug-in to use to form the rough room. V3 rewrites the entire code with a plugin mechanism.
Design ideas
Before webpack and other builders execute compilation, each plugin can read files, configurations, and environment variables, execute the corresponding logic, and write the runtime code into the .fes temporary directory, and then add runtime code dependencies to the entry file fes.js. In this way plugins can support build-time and runtime extensibility. Under this architecture, the core logic is the life cycle management of plugins.
Plugin mechanism
Execute the running process of fes dev:
Module division
Fes has built-in packages preset-build-in and runtime, including build, routing, entry files, and runtime plug-in mechanism content, but does not contain any business-related content, so fes.js has been transformed into a general front-end application solution.
The plug-ins included in the dotted line are freely selected according to business needs. For example, for background applications in development, the layout can use fes-plugin-layout, and the permission settings can use fes-plugin-access.
plugin
How to use
1. Declare dependencies in the project
{"dependencies": {"@fesjs/fes": "^2.0.0"}}
2. After installing dependencies, run in the project root directory
fes dev The V3 version also upgraded Vue to 3.0 and webpack to 5.0, further optimizing the development experience. At the same time, a new Vue3-based component library FES-Design was released. The design system of FES-Design is still under continuous exploration. I hope to provide users with a better and more professional enterprise-level product design system through more accumulation in the future. .
V4 version
When the v3 version was developed, webpack 5.0 was just released. Considering the webpack ecosystem, we continued to use webpack as a builder, and the construction-related logic revolved around webpack. In the last year, various builder solutions have emerged in the front-end circle, such as esbuilder, vite, tsc, etc. After experiencing vite, I feel really fragrant. Webpack can't beat it at all. If you can't beat it, join it!
Design ideas
The construction logic related to webpack in the v3 version is in the package @webank/preset-built-in, and they are stripped out to form a new module fes-builder-webpack, and a new module fes-builder-vite is formed based on the vite development construction logic. The package whose name starts with fes-builder- is the set of plugins responsible for processing the construction logic, which will be loaded first, and the way of implementing the logic is still based on the plugin mechanism.
Module division
How to use
1. Declare dependencies in the project {
"dependencies": {"@fesjs/fes": "^3.0.0","@fesjs/builder-vite": "^3.0.0"}}
2. After installing dependencies, run fes dev in the project root directory
The future of Fes.js
I don't know what fes.js will become in the future. What I know is that fes.js follows the trend and becomes suitable for it. Both fes.js and fes-design are open source, welcome to experience!
fes.js :
Address: https://github.com/WeBankFinTech/fes.js
Documentation: fesjs.mumblefe.cn/next
fes-design:
Address: https://github.com/WeBankFinTech/fes-design
Documentation: fes-design.mumblefe.cn