preface
More than five years have passed since MY first contact with front-end development in September 2015. At the beginning, I worked in a small outsourcing team with no staff and no management. I worked alone for more than two years.
I have been the team leader for nearly 3 years, but I happen to have experienced a lot of things this year. When I think back on my road, I feel quite touched.
Although I am not a good team leader, I have seen many students who have worked for five years and three years, and they are confused and don’t know what to do when they encounter bottlenecks.
After all, I can write some understanding and thinking about how to break through the bottleneck period in the primary front end. I hope that some students can be inspired and help. Also welcome to leave a message and discuss.
What is the bottleneck
The primary front end is defined as 1-3 years of work experience. Note 1-3 years of work experience, not years of work.
Many students often have such a situation, there are so many business, to finish so much business has already spent their daily time and passion, no longer have the time and energy to do the rest of the things.
Everyone’s proficiency is limited. At the beginning, it takes one month to develop a small project or requirements, but in a year or less, the development time can be reduced to half a month after receiving a certain business beating to improve the framework proficiency and business understanding. However, this is the limit of normal development, and when there is no way to improve the efficiency of development with the help of proficiency, there will be a period of confusion.
In the existing technology and proficiency has been fully able to meet the current business needs, the company to the CONTENT of r&d is scheduled to occupy the estimated time. This is when the primary front end hits a bottleneck. Or it’s a bottleneck at any stage of development.
Reduce ineffective work
What kind of work is ineffective (inefficient)?
- Repeated service rewriting
- Repetitive functions write repeatedly
Example 1: Login service
Most h5 activities require developing new projects, new code, and many businesses need to determine login status. If you encounter this problem, try the following solutions
All login logic is encapsulated in THE SDK. When developing new activities, the SDK can be directly introduced through the CDN. In the case that the current environment is not logged in, the login interface can be pulled up to log in.
Use Rollup to develop a Library.
Example 2: Rights service
In the middle station system, basically every service station (such as order, customer service, etc.) will have the corresponding permission control. If every system needs write permission control, it will take a long time. Even if it is copied from the last project every time, it is difficult to guarantee the unified upgrade of the future permission system.
Students who are familiar with the micro front end can strip the entire permission business into an independent sub-project, and then each service station can directly reference the permission service, so as to maintain the overall upgrade of the permission business, and will not affect the development of their own business students.
If you are not familiar with the micro front end, you can refer to Git Submodule or NPM package dependency, etc., or you can separate the business and develop and upgrade in a unified way, but the updated permission service needs to be rebuilt and released.
Example 3: Building foundation scaffolding
Every time a new project is developed, there are some basic configurations that do not need to be changed, such as:
- Requested test, pre-delivery, production address
- Build commands, configuration of various environments
- Special use methods of block business (such as sharing functions commonly used by active business)
You can use Node to develop your own CLI tool and pre-configure several basic projects based on different services. In this way, you can draw different basic templates based on different services, reducing the time for building and configuring new services.
Example 4: Build your own component library
Although there are well-established component libraries such as Ant Design, Vant, etc., it is certainly not enough to fit each company’s own characteristics and business.
Can cooperate with THE UI design, the main style of the company, the basic components of all planning, consciously to precipitate their own component library.
In the following iteration or new project development, we can quickly complete the basic construction of the interface through the self-built component library.
This matter to take the initiative to promote, otherwise it is generally difficult to land.
In the example above, there is a part of the basic code in the first project. In the second project, you should consciously design and plan to encapsulate and extract the content, so that in the third project, you can use the previous design and the basic code to improve your development speed.
After 1-3 years of project training, you should have the ability to extract common functions and businesses from multiple projects, find similarities and common points to combine and encapsulate (disassemble projects, combine packages).
In theory, this is a virtuous circle, which can shorten the start time of the later iteration project, and in this process, I also play different roles and get different opportunities for growth and learning.
The above work will certainly take up extra spare time, but it is also a process of learning and improving. In fact, after increasing efficiency, there will be a certain amount of free time in the daily work, to go through the virtuous cycle.
Use tools to improve efficiency
Vscode has a lot of plug-ins to improve efficiency, not to mention, what code formatting, automatic prompts, resource agents, everyone is the front end of the use of certain.
But instead of limiting yourself to the front end, use a few extra tools to increase your productivity.
Efficiency here is not just about front-end development, but about looking a little wider at the whole r&d tool link.
In the requirements – design – development – test – launch – business feedback link, what tools can improve the efficiency of the front end
Take into account problems that are foreseeable, will occur, and have occurred with respect to the front end.
Many of these things can be done with Node and can be developed by ourselves. However, considering the cost and cost, self-developed or Node may not be the best choice.
Jenkins Or Gitlab CI/CD
Each build is painful, time consuming, and in the case of multiple collaborators, there may be online exceptions because each developer’s system environment is different.
When you encounter these problems, first of all, don’t run away or create a new package to solve them, but introduce a build tool to help you do it.
Big companies and teams may have operations or established DevOps systems to do these things, but that doesn’t mean you can’t learn and use them to improve yourself.
If these are not available on the team, it will save you a lot of effort on the build and deployment side.
Fiddler Or Chales
Debugging on the mobile side has always been a hassle. In addition to the vConsole tool available in the test environment, this kind of packet capture tool can be used online to quickly locate some problems with the front and back end separation projects.
On macs, You can use Charles more often. On Windows, you can use Fiddler more often.
Sentry
No system is ever 100 percent perfect, the complexity of the environment after launch is far greater than the use cases covered by the test, and if your team doesn’t have the resources or a sophisticated online warning system to improve your project, introducing Sentry can be a cost-effective thing to do.
This will save you time looking for bugs that don’t make sense, and it’s also a great productivity tool.
Sentry is a logging platform, which is divided into client and server. The client (currently available in Python, PHP, C#, Ruby, etc.) is embedded in your application and sends messages to the server when an exception occurs. The server logs messages to a database and provides a Web interface for easy viewing. Written in Python, Sentry is open source, performs well, and is easy to extend.
Sketch And Pixcook
When you use UI for design, you can’t restore it with the naked eye, and you need photoshop tools to get PSD. Here, you can recommend using Sketch for your design, which is convenient and small in size. If not, Pixcook also automatically generates annotated front-end code via PSD, both of which are great tools for design and development.
Don’t be limited to the framework
Thor’s Soul: Are you Thor or The Hammer God? The same goes for the front end. Are you a front end engineer or a Vue or React or Api developer?
All frameworks are tools for business development, and in a mature system, none of them cost more than labor. What you need to think about is not how to be a good framework developer, but how to be a qualified engineer.
Now a variety of Web frameworks emerge in an endless stream, each small program blossomed, multi-end framework also emerged. Learn the use of a framework, in fact, it is not difficult, at most two projects, can be skilled to use, because the birth of the framework is to let you quickly to complete the project.
The underlying technology and the upper design are strong enough that even with a new framework, you can get started quickly. This is not to say that you don’t need to understand the design and Api of the corresponding framework, but to avoid becoming an Api engineer. What are your core competencies as an engineer?
Of course, it would be great to have a framework that works and solves all the business problems, but in reality there are very few frameworks or people.
In short, r&d that solves business is profitable R&D, and r&d that makes money is good R&D. This may say out will be hit, but the reality of the money is really the boss, not a development.
In addition, no matter how good the underlying knowledge, algorithm, design, but must not be divorced from the business basis. In order to interview, many students will brush the questions and brush the algorithm, which is indeed very effective, but the most important thing is to learn how to apply all these knowledge system to the actual project, so that he can play the maximum value.
Technical depth is equivalent to internal work, certainly the deeper the better, but must cooperate with the business use of this layer of foreign kung fu, in order to become a unique master. Like Guo Jing a high strong internal force but still need to surrender dragon 18 palm to resist the enemy.
Life and death see light, do not accept
Go it alone
If you’re in a small company, a small team, you don’t have to do much work on yourself, just work on any new technology, if:
- I have a certain expectation that there will be a lot of immature technology pits, and there will be a lot of internal and external pressure
- Allow enough time for trial and error, and business must come first
- There must be a certain record, if the new technology can not solve the problem, can quickly take out the record to solve
- It must not be used in the main business, if there is a problem, it will lead to the trust crisis of the team, affect the development of the later period, is not conducive to the later period of cooperation
- Be open to new techniques that don’t feel superior, solve problems and share them with everyone on the team who wants to get to know them
team
If you’re in a big company, a mature team, there’s only so much you can do.
Remember, the bigger the team, the more business links, the more details, the more places to start, and the more resources available.
So dare to take responsibility and tasks, at the critical moment to withstand.
For example, have enough courage to apply for a new project when it starts. The precondition is that you are resilient, trustworthy, a person who can be trusted.
Alternatively, I can actively participate in the product link, communicate with a series of personnel related to product, RESEARCH and development, testing, operation and maintenance, customer service and so on, and find out the existing pain points and difficulties together, and then find ways to solve them.
The best way to do this is to describe what you want to do as what they want to do, and then they can use your resources to do it, and then a win-win situation emerges.
Write in the last
No matter where are the same, do technology to bear in mind that irritable, to endure loneliness, sit on the bench.
Recommended reading
Here recommend a friend’s blog, write very good.
How do junior engineers grow quickly and seek breakthroughs