Front end Engineering: how to grow by leaps and bounds

Wei 1 2020-11-13 06:33:12
end engineering grow leaps bounds

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 :

  1. Consolidate your basic ability .HTML、CSS、JS These three front-end technologies must be proficient , Can't be a front-end company for a few years CSS Layout 、 The basic things about asynchronous programming are still vague .
  2. Grasp the main contradiction , Build core competitiveness . Everyone's energy is limited , We should choose a direction of interest and go deep into it . Instead of trying to do the best in all directions .
  3. More thinking and summary in work . Many people make complaints about their business needs. , No chance to do technical projects , No improvement . In fact, we can also improve our ability in business . In doing business , You can put your usual new ideas into practice , Put new technologies into practice . in addition , Do a double check after the project is finished , Summarize the problems and solutions . in the course of time , You'll find yourself growing well in your business .
  4. Communicate more with others . Now the Internet technology pays attention to open source , Our mentality is more important open, We should learn from each other's strengths , Internalized into your own things , Let yourself get rapid promotion .
  5. Always focus on the community technology trends . New things are emerging in endlessly , You don't have to learn everything , But we should grasp the industry trends , Know what technology everybody's playing with , Keep up with the pace of the industry .

Who am I ?

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 、 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

My work experience

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 .

graduate , Never choose the wrong job for your first job

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 .

「 」 period , witness PC Web To Move Web Spanning

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」 period , The more painful it is, the faster it will rise

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 .

「 Fast dog 」 The challenge of , Construction of front end engineering system

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 .

Why do big companies attach so much importance to front end engineering ?

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 .

Trial reading ?《 Perspective front end Engineering 》

curriculum design

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 .

Course features

Practical driving , Communication front end knowledge

Practical scaffold construction , Communication process specification 、 Development 、 Joint tune 、 test 、 structure 、 Deploy knowledge of each link

Practical , Direct landing business

The course content is based on the actual engineering experience of the team , Can be directly applied to the course of business development

What can you learn

  1. Have a systematic understanding of front end engineering ;
  2. Can independently design a set of front-end engineering solutions ;
  3. The breadth of knowledge has been greatly improved ;
  4. Into a better platform , Get better pay .

Last , I hope that every front-end person can complete his own advanced road of life through hard work , come on. !

Trial reading ?《 Perspective front end Engineering 》


Opening words : What is front-end engineering

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

The first 17 course :cli Functional design ( On )
The first 18 course :cli Functional design ( Next )

Conclusion : An open mind is a higher level of engineering

本文为[Wei 1]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple