Front end partners should be able to clearly feel , During the interview , Interviewers from major companies have paid great attention to the investigation of front-end engineering ability .
The evolution of front end engineering can greatly improve the development efficiency . The front end is now , There are a lot of good frameworks and tools coming out of the community , To free front-end engineers from heavy work . such as , Give one again dom The element binds a click event , Use Vue It will be better than JS Simpler and clearer .
I believe that every student who steps into the front end of this industry has a heart that loves learning . Because the front end industry is not as mature and stable as the back end , So it's been pushing the old and bringing forth the new at a high speed , Every year, a new framework comes out . But everyone's energy is limited , Everyone wants to put in a limited amount of energy , To learn the most valuable things . So I've been wondering if I can condense the outstanding achievements in engineering in the front end of these years into one course . Interested students can understand ?《 Perspective front end Engineering 》
Combined with their own experience, summed up some methods in front-end learning , I hope that's helpful ：
I am a Wang Chao , Now fast Dog Taxi （ primary 58 Express ） Head of front end , from 0 To 1 Set up a fastdog front-end team , Responsible for the construction of team technical system , In the order Webpack and Vue Based on 、 Node.js The middle layer is complementary , automation 、 engineering 、 Component based fastdog front end technology system .
Worked at renren.com 、 qihoo 360、58, Yes 8 Years of working experience in the Internet .
This time I want to talk to you From cutaway to front end Leader, How to achieve personal growth ？
Joint recommendation ： Shen Jian Take a taxi CTO、 Wang Haixu 58 Founder of big front end team 、 Feng Yang 58 Head of home platform
Time flies by , The industry has been in the forefront for seven or eight years . I am not a computer professional, I am engaged in the front-end industry , It's been a lot of setbacks , Took a lot of detours .
But now look back on my career , Every experience has a different harvest .
My first job after graduation was in an advertising agency flash Advertising design and graphic design . I didn't think about it carefully when I chose this job .
Because the company is very small , stay flash I am the only one in the post of development and design , There are no experienced people around to learn . With Web2.0 Coming of age ,Flash Technology is also on the decline , my flash The road is a dead end .
Later, a front-end colleague came to the company , Work with the constant communication, gradually understand the front-end development ,flash Technology will surely be replaced by front-end technology in the future . This just put their energy into the front-end learning , I can do some simple work slowly .
Now let's look at , Although I finally found a correct channel . But if you do a careful research when you choose a job , Can let oneself walk many detours less .
The platform is very important for new people , A good platform will give new people a good starting point for growth , Good vision . And with the help of many experienced elderly people on the platform , New people will grow quickly , Can lay a good foundation for future career development .
At that time, the front end was at PC Web Development to mobile Web The period of development transition . More than two years here , Whether it's PC On the development or mobile development have done a lot , such as PC Compatibility of various browser manufacturers , The adaptation of various models on mobile terminal , Use CSS3 Implement new features .
At this time, the front-end domain is changing rapidly , image Angular、React Such as the modern front-end framework has begun to appear . And here is still the use of traditional native JS、jQuery Repeat the project , Their own technology has also entered a bottleneck period .
Technology facing its own bottleneck , I think about changing circumstances to force myself out of the comfort zone , Break through the technical bottleneck .
however , I would like to say a little more here , Don't change jobs just for the sake of job hopping .
Ask yourself before you change jobs , Have I learned everything I should have learned here ？ If the answer is yes , Then move early , Otherwise, it will continue to precipitate and improve steadily .
360 The technical system here is perfect , Separate front and rear development 、 Front end deployment platform 、 Code auto before launch diff, The application of new technology 、 Regular technical exchange .
At the beginning of my job, I had a lot of work on projects , Because from the development framework Backbone、React To build tools Webpack, Then to the development mode Linux Development machine , Everything is new , I don't feel like anywhere .
It took me half a year , Until you use it with your colleagues React restructure 360 Map , To be fully familiar with and adapt to . But the half year that made me extremely miserable was just the time when I improved the fastest .
Speaking of this, I would like to talk about how to improve myself step by step .
The first is to think about solutions independently . When I encounter problems, I usually go online to find solutions , It can't be solved , Then go to your colleagues and leader Ask for help .
Second, the ability of colleagues to see their own code . From their code , Can learn from a lot of good design methods and programming habits , Accumulated over time into their own things .
Third, more technical exchanges with colleagues . Through communication with them , Can be very good to broaden their horizons , Make up for what you don't know . Thank you very much for my old friend, Si Wangli , I learned a lot from him .
The early front-end development method of fastdog is relatively primitive . As the head of fastdog , I started to push forward front end engineering . The first is to upgrade the technology stack , The front and rear ends were separated . We have successively built the front-end deployment platform 、 Component library 、 The scaffold 、 And the performance monitoring platform has gradually formed a perfect front-end technology system .
As a team leader, how to build a technical system from scratch , Here is my experience .
The new technical director changes from technical thinking to management thinking . Many technologists become team managers , Or are you used to doing everything by yourself , On the one hand, they are worried that others will not do well , On the other hand, they are worried that their technical advantages will be gradually lost . No one else can do it , You can coach , But you can't do it for him , Because your energy is limited . The other worry is even more undesirable , You don't go into the technical details , But in the technical breadth of knowledge 、 There will be a greater improvement in technical vision .
The construction of technical system should aim at solving business pain points . Any technical tools and platform construction can not be separated from this purpose , You can't just try out a technology or have fun with it . Otherwise, it is likely to be a waste of research and development costs , It's hard to promote it in a team , Can't produce value .
Technical system construction should be fully discussed before implementation . The design of the scheme has been discussed clearly , In order to avoid all kinds of problems in the future . We had a profound lesson when we built the front-end deployment platform .
Due to the poor consideration of the preliminary scheme , Later, the platform experienced a major adjustment , It took half a year for the project deployed on the old platform to complete the migration , Cost is very high .
It is suggested that 70% Time spent on project design and discussion ,30% Time spent developing tools and platforms .
I have been engaged in front-end development for seven or eight years , It has experienced a very low degree of engineering development mode , It also witnessed the significant improvement of the engineering level in the front-end field in recent years . Causes for the significant improvement of front end engineering level , There are roughly two ：
On the one hand, it is due to the complexity of the business of large companies , The corresponding front-end engineering degree is high , The supporting infrastructure is very mature , Naturally, the requirements for personnel are very high .
On the other hand , Now the front-end development is based on some advanced engineering tools , such as React、Vue、Sass、Webpack etc. . Only with good engineering ability , In order to better deal with the increasingly complex development tasks , It's easier to get into big companies .
Front end engineering is a big topic , It covers a lot of knowledge . It's boring to talk about theoretical knowledge in a large space , And the effect is not good .
So in the course design , I'm based on the implementation of a front-end scaffold tool as the main line , The process leads to the idea of realizing a certain function and the tools used , And explain one by one .
for example , In order to standardize the code of developers , We need to introduce code checking tools into scaffolding eslint and stylelint, And the use of the two is explained .
And such as , There may be many ways to build a local development environment , For example, write a static server to implement or use webpack-dev-server and webpack-dev-middleware To carry out , We focus on the latter in detail .
After the end of the course , Not only can the system learn the tools and knowledge of front-end engineering , Can also complete a practical scaffold tool .
Practical scaffold construction , Communication process specification 、 Development 、 Joint tune 、 test 、 structure 、 Deploy knowledge of each link
The course content is based on the actual engineering experience of the team , Can be directly applied to the course of business development
Last , I hope that every front-end person can complete his own advanced road of life through hard work , come on. ！
The first part ： Formwork design
The first 01 course ： Template function design
The first 02 course ：Webpack Basic introduction
The first 03 course ： Build project template framework
The first 04 course ： Front end modular solutions
The first 05 course ： Building local development environment
The first 06 course ： Build local Mock service
The first 07 course ： Introduce code checking tools
The first 08 course ： Automatically generate sprite map
The first 09 course ： Build from the browser
The first 10 course ： Build on the environment
The first 11 course ： Integrated mobile debugging tools
The first 12 course ： Introduce unit testing
The first 13 course ： introduce e2e test
The first 14 course ：Webpack Build performance optimization
The first 15 course ： Add deployment capabilities
The first 16 course ： Aggregate project configuration and template
The second part ： Command line design