“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”
I was shocked by the speed of development of front-end frameworks in my company’s projects
It’s not just front-end frameworks, the whole front-end industry is growing by leaps and bounds. Choosing the right framework for development before you start writing a project can do a lot of work.
Layui is obsolete
Before I took over, the company’s back-end projects were developed using the Layui framework, which meant that it was not a project with separate front and back ends.
I also tried to stick with Layui at the beginning to keep the project consistent, which cost me a lot of money. It was much more obscure than native, not to mention simpler, and I was able to write 2000+ lines of code on a page (with good encapsulation) while doing a lot of overtime.
Although Layui is a bit of a pit for me, I can also practice something in it.
1. For example, I’m encapsulating the render table method, because the event listener needs to use a callback function, and I need to pass in a variable, so I use a closure to receive a variable into the context, so that the callback function can use the variable inside.
2. Use Proxy object to monitor the changes of object data and execute corresponding methods.
3. Use Echarts to complete the presentation of various charts.
4. Dealing with all kinds of complex data…
Transfer Vue for development
After the first phase of asset management was completed using LayUI, Vue was used for subsequent development.
UI library is the mainstream UI library ElementUI.
Since Vue is a data-driven view that also changes the frame of the data, I can quickly develop pages by focusing only on the Model layer and the main business logic.
You don’t have to use a lot of native JS in Vue, but there are too many forms to submit for something like a form validation rule, so I packaged my own logic that simply passes in the name of the current field and the rule method, for example, the current field is the phone number, So just pass in the phone number and the phone number validation function that I wrapped myself.
Request interception, if the current request is the same as the last request, the current request will not go to the request server, optimize the server resource consumption.
Also did front-end upload, download files and other functions. To upload a file, the file is parsed into a piece of data and submitted to the backend through the interface for saving to the database. To download the file, the data returned by the backend is used to generate the file and download it.
The echarts chart logic is basically the same as it was before, except now it’s downloading the NPM package to use.
SCSS is a mature, stable and powerful CSS preprocessor, and SCSS is a new syntax feature introduced in Sass3 version, fully compatible with CSS3 while inherits the powerful dynamic functions of Sass.
Finally, LayUI was officially shut down, marking the end of an era in which frameworks were outdated but still revered by LayUI’s framers. Have to say, the front end development speed is really too fast, only continuous learning to keep up with the pace of the development of The Times.
2. Connect Vue project to LayUI project
Before using Vue for development, I had already figured out how to connect with the original project. My solution was to use Vue for development and package the packaged DIST folder to the backend for project connection.
This approach is cumbersome and makes the project bloated, but there is no way around it (I can’t think of a better solution anyway) unless you use Vue to refactor the entire backend project.
But the cost of refactoring the entire project is too high to be rushed into — just do it.
3. Optimize the Vue project
1. When requesting data, add the request progress bar effect at the top of the page to make the request progress become visual.
2. Modified ElementUI’s default LoAdding effect to use custom LoAdding effects.
Due to the large size of the project, all kinds of operations became inconvenient, so I decided to optimize the project.
3. Remove all consoles from the project when it goes live. Remove it using the babel-plugin-transform-remove-console plug-in, install it in the development dependency, and configure the plug-in in the babel.config.js configuration file.
4. Load external CDN resources through externals. After this parameter is configured, the dependencies configured in externals will not be packaged when the project runs or is packaged. Therefore, you can write the CDN link of the dependency (corresponding version) in the /public/index.html file.
5. Enable gzip compression. Use the compression-webpack-plugin plug-in and then configure the plug-in in the vue.config.js configuration file. However, the gzip compression can take effect only after the gzip_static function is enabled on the Nginx server.
Four, also wrote several other projects
For example, NAS network disk system, small program coupons, prizes and other new functions of the realization of large screen display and so on.
1. The requirement of NAS web disk system is to read the contents of files on the user’s local computer through web pages. The first thing that comes to my mind is to use NodeJS + Vue to realize this. Reading local files is a bit of a hassle, and using recursion to traverse the files will crash the system because the files are too large.
So I wrote the logic to iterate through two levels of directories, continue to iterate through the folder if it’s a folder, open the file if it’s a file, and display the details. This will do the basic job, but the downside is that you can’t go through it in depth.
So I use the ability of socket. IO to achieve depth traversal function. Basically, you iterate through files, recursively if they’re folders, and push them to the front end if they’re files, until you’ve pushed all the files in the entire folder. Since files are pushed one by one, there is no chance of a system crash, but the push traversal time is too long.
2, the small program is also written a lot of new features, coupon list modification, the realization of the prize list, select coupons after the corresponding change in the amount, the default selection of the maximum coupon and so on.
3, the large screen display is achieved by using Echarts, reuse other large screen style style, and complete the new large screen display.
Fourth, the ability to solve problems has been improved
In the process of project development, there will inevitably be many problems.
But there are problems on the timely solution of the problem, stand in the perspective of the product to see the problem, to think about this demand is not reasonable, can achieve.
Various reasons prompted me to solve some problems and have a deep understanding of the project content.
It also made me look at things a little differently.
There was no UI design lion, so I had to think about how the product could be better designed. Maybe the combination of the front-end programmer and the UI design lion can achieve some special effects that are not easy to achieve.
5. 2022 Targets
1. Learn Vue 3.0
Vue 3.0 out of almost a year, front-end development is really too fast, to learn things is too much, although the use of Vite wrote some demo, also read some text about Vue 3.0, but always just learn about.
So I hope to learn more about Vue 3.0 next year and apply it to my projects. It’s definitely much better than Vue 2.
Learn TypeScript
TypeScript is a superset of JavaScript that can write super canonical code with type accuracy, which I think is a must for the front end.
3. Study of other contents
If I have time, I also want to learn Three. Js, AR. Js and other graphics front-end field content.