In the previous enterprise project development, I have done some front-end infrastructure construction and project promotion.

After the completion of the project, I had no time to sort out and reflect on the problems and solutions encountered in the process of promotion. Due to the small number of front-end team members, more people cooperated and solved some problems together.

tool

Front-end editors, such as sublime, vscode, webstorm and atom, have developed to the point where vscode has become the mainstream editor for front-end development. In the development process of the team, some fixed plug-ins need to be standardized and unified.

Include:

The size of TAB indentation, as well as formatting plug-ins, for example in vue development, Vetur is recommended for formatting and code constraints, including tools such as code checking ESLint.

In addition to the unified use of plug-ins as a standard, other plug-ins as a personal hobby and habit.

Project Structure Directory

Folder division

Take VUE development as an example: interface API, routing Router, state management Store, component Compoment, utility class utils, it is recommended to divide into their respective folders, clear the function of the folder, file naming specification can refer to: VUE official document – Style Guide

Folders can be named according to custom, and the most important thing is to make sure that the functionality is clearly delineated to make sure that the directory is cluttering up during development

The code

javascript

  • Constants are capitalized, specifications use commands such as let and const, variables and methods are named with a hump or underscore,
  • Utility classes utils and dependent package methods, such as time format YYYY-MM-DD, use formatting methods in utils
  • Methods such as deep copy or throttling and anti-shaking can be encapsulated or lodash can be used according to the project scenario.

html&&css

Class names are humped or connected with -, and the writing order is suggested to refer to the Tencent CSS writing specification

git

  • Default main branch, this should be the common understanding of code maintenance process
  • After the project is completed and goes live for the first time, it is recommended to add a Fix branch as a bug maintenance branch in the production environment
  • During development, dev branch commit, commit information should be detailed and preferably depending on the type of commit, whether it is fix or update code

Collaborative development

In the development process, the progress and cycle of the project are not quite the same, while some front-end developers may be new to the project, and some of them have stayed in the project for a long time, and their abilities will be different. When developing and assigning tasks, they need to assign tasks according to different situations.

Questions to consider

  • Whether according to the strength of individual ability, when assigning tasks, pay attention to training or according to the field of personal expertise to deal with good problems.
  • Business components and common components are written according to the module assigned tasks or by a single student to complete
  • More questions…

Documentation and comments

  • The readme.md recommendation for the project is to make it as complete as possible, not just to install NPM dependencies and start them, but also to include as mentioned above: plug-in specifications, some important dependencies, Node versions, etc
  • Code comments it is recommended to maintain good habits, including code block comments, business logic comments, implementation pain points, etc

Front-end principal

  • As the head of the front end, I need to make better technology selection based on business requirements, and have a certain understanding and breadth of knowledge about existing tools
  • Good basic coding support as a support, familiar with front-end project architecture, front-end development skills, skilled in business development, have a certain ability and understanding of algorithms, and have a good sensitivity to technical updates and information in the front-end field
  • I have certain management ability to maintain the vitality of the team and improve the fighting ability of the whole team. It is suggested to carry out some technical sharing or discussion to guide the front-end team members to overcome some problems and be good at discovering their shining points.
  • Good communication and understanding skills, quick problem locating and effective communication, whether to front end members, other colleagues or superiors.

Write in the last

The above are some thoughts about the construction of the front end team of small companies. In the front end of 2022, I hope all the students of the front end development can find their own piece of world.

Personal blog address: Some thoughts on small company front-end construction

Creation is not easy, reprint please indicate the source and author.