Hi, everyone, I am Yali. I have been working in the front-end industry for five years since my graduation. I have experienced the transition from the front-end era of Jquery to the framework era, during which I have also upgraded and expanded several times. At the end of the year, I reviewed my experience of front-end work and learning in the past few years from the following aspects:

  • Understanding of front-end work
  • Understanding of front-end knowledge
  • Initial front-end work
  • Mid-term front-end work
  • Current Development work

1. Understanding of front-end work

Beauty: Front-end development is a part of direct interaction with users. Beautiful design and simple process can most directly affect users’ impression on products. A good product is just like “delicious food”, “color” is also ranked first. To develop a product is to use the most advanced technology and the most stable framework, but when it is presented in the end, it is not beautiful and simple enough. Users will only feel that the product is “low” and the development team is not professional enough. This point is currently ignored by many front-end developers, developers need to pay attention to, have some patience and beauty to improve the quality of the page.

Fast: Similarly, the front-end work as the ultimate in product development, work needs and requirements, design, and the back-end, project manager, and so on each link to communicate and to find the deficiency of project preparation, even need to make up for, adaptation of these errors, so wait until “patiently” help the back-end colleagues measured, the errors in the interface, each link also stroke smooth, You’ll find that you don’t have much time left for front-end development. The ability to develop quickly is especially important if you don’t want to fall behind. The training of this ability requires the accumulation of common functional scenes. The accumulation of common functions will be described below.

Specification: I have seen it in my work. Vue and Vuex projects are introduced into each component, and the scaffolding built by myself is all.HTML pages. In each page, script is used to introduce vuue. You can refer to vuE-CLI, Ant Design Pro, UMI, TDesign and other open source projects. In addition, because of the flexibility of JavaScript language, many front-end developers lack the concept of specification, so for the team, it is necessary to use ESLint + Prettier and other code inspection tools to strengthen the front-end code quality inspection.

Reference links: scaffolding, code specifications, and inspections

2. Understanding of front-end knowledge

Progressive knowledge system: When you first learn front-end, you may feel that front-end knowledge is too complicated and messy when you see concepts such as HTML, CSS, LESS, Sass, Js, Es, Ts, Vue, React, etc. This is also the problem caused by the rapid development of front-end in recent years. It has not experienced more than ten years of development like Java. It is stable and comprehensive. However, just like vue.js is a progressive JavaScript framework, I think the front-end knowledge is also a progressive knowledge system, which requires us to master the core concepts of HTML, CSS and JS, and then learn and use relevant extension schemes. Tailwind CSS, ES6, etc.

3. Review of early front-end work

I still remember eating “Rhino Book” and “Redbook” every night in my early days, and I believe that every front-end developer has been tortured by these two books. Reading a lot of books is really important to build and improve the knowledge system and broaden our horizon in the early stage.

For example: “Graphic Css3” can better grasp the overall knowledge system of Css, “Css Revealed” can learn more unconstrained complex style design, “In-depth understanding of ES6” for ES6 grammar explanation and so on these excellent technical books.

At the same time, I often go to the official website of the most common and basic frameworks to get familiar with the various concepts proposed by these frameworks and skillfully use these frameworks to solve related problems.

Reference link: common official website

4. Mid-term front-end work review

With the accumulation of development experience and the increase of learning knowledge, GRADUALLY familiar with and improved:

  • Vue system mobile terminal basic framework
  • Vue system background management system basic framework
  • React system ali open source framework: Ant Design Pro, UMI, etc
  • Node related system: Koa, Express, Mongoose, mongodb and other related packages

Handy project scaffolding can help make technology choices faster and better when faced with new project requirements.

At the same time, while learning and building these frameworks, I noticed more technical scenes, such as:

  • Skeleton screen
  • Long list optimization
  • internationalization
  • Upload large files in fragments
  • Mobile gesture
  • Recursive components
  • Single sign-on (sso)
  • Background management system permission processing

And so on scenes, at ordinary times to achieve and accumulate these scenes, for the promotion of technology is very helpful!

Reference links: Common features

In addition, frequent browsing of GitHub, code Cloud, Npm and other communities will help us discover more scenarios and many excellent solutions! You can also learn a lot about programming by reading some packages.

At the same time, I am familiar with the whole process of project technology development through the study of the front and back end knowledge. I also began to notice some necessary or helpful systems, such as buried monitoring system, CMS content management system, project management system and other common projects.

5. Current understanding of development work

For more than a year, I have learned the development knowledge related to Java and Spring in my spare time. I feel that the perfect system of Spring Boot and Spring Cloud has great reference significance for developing background interfaces using other background languages, such as Node.

At the same time, based on the front-end technology and the study of work projects, for the overall design of the system, have a deeper understanding. Note that the overall technology selection varies greatly due to the different functions of various systems. For example, seckill systems and content management systems are definitely different.

Therefore, the focus of my future work and study may be to implement or transform some common open source systems to improve work efficiency and business efficiency.

At the same time, we strive to accumulate corresponding technical solutions and understand the corresponding technical architecture according to different business needs.

6. Conclusion

In the process of technical learning and growth, there were also a lot of perplexity, but I persisted in learning and accumulating, and when the knowledge was well understood, I would naturally have “paoding” insights into the system and find my own technical interest.