How to be a front-end leader

Soldier 2020-11-08 20:15:30
front-end end leader

How to be a front end leader? You need to be incredibly intelligent ? It's still the best technology ? Or a lot of eloquence ?

One 、 Preface

I interviewed a company yesterday , It feels good , All the conditions are still ok, They need to recruit a front end leader, And I'm going to be the front end of the company leader, I feel flattered , There is another kind of little joy , It is said that :“ Soldiers who don't want to be generals are not good soldiers ”, I want to be recognized .

I was the head of the front end for a while , It's like going to Sichuan University to recruit , Or lead the progress and development of the whole project .

But it's not the same as what I'm going to be , It used to be an outsourcing company , Almost all projects are done by everyone , The intersection is smaller , Team members are not running in very well ; Now it's about maintaining and iterating on your products , This requires a good understanding between team members , Communicate without hindrance , We should have a thorough understanding of business , The user experience needs to be better .

I will stand Personal perspective , Team perspective , Company perspective Think about , A good front end leader What should it be ? To sort out some directions for future action .

In fact, most of my views are broader , It's not limited to which industry leader. Because the author level is limited , There are some omissions or even incorrect views , Please do not hesitate to criticize and correct .

Two 、 Think from a personal point of view

A good front end leader What should it be ?

The technology is better

As a front end leader , The technology is certainly better than most people in the industry , And know more , Whether it's product design , Or interaction design , Or front end and back end , You need to be a little bit .

Let's take a look at what the front end needs to be ? All change is the same , The front three swords :HTML,CSS,JavaScript. The others are like three frames (vue/react/angular), engineering ( Automatic deployment / automated testing /git workflow ), Applet , Cross platform application (ReactNative/Flutter/Taro/Uniapp/Eletctron), Hybrid applications (Ionic/cordova),NodeJS(egg/koa/mongodb),Serverless, Are derived from some of the expansion direction , You also need to learn .

Here is a little learning skill : Be curious .

In fact, we are born with curiosity , Think about why children always ask “ Why? ”, Ask yourself if you don't want to know if there are aliens outside the earth ? Why did the apple fall , Instead of flying to the sky ?1+1 Why must be equal to 2? If you think these questions are ridiculous , Sorry for the inconvenience , You are being laughed at and sympathized with , What you lose is precious curiosity ! With curiosity , Newton would think “ Why did the apple fall ” This seems like a silly question , Finally we found the existence of gravity .

So please keep this curiosity , It's for us to learn 、 The source of creation .

Two 、 Think from a team perspective

A good front end leader What should it be ?

Promote the atmosphere of team sharing

No sharing , There is no Internet now , Like this agreement, that agreement , This programming language that programming language . In the team , We need to share , Whether it's technology sharing or personal growth sharing .

Sharing will promote the personal growth and business development ability of team members .

Strengthen team communication and cooperation

“ A chopstick breaks easily , Ten chopsticks are as hard as iron ”.

We can use some software , Such as tapd To manage the project , Assign tasks to group members , Control the project schedule and collect some questions .

Communication among team members should be strengthened , Sometimes a problem can haunt you all day , This is when you take a few minutes to ask other people , Maybe it's solved , I have a deep understanding of this . We all need to learn from each other , No one can be anything , Everything is better than others , There's no face or something .

Make plans and assign tasks

Stage goals , Subdivide the children of each goal , Assign according to priorities and characteristics of team members .

Suppose we have a custom table The requirements of component class library , There are two members of the group , One Javascript Better , A compilation css Animation is better , I will definitely arrange for JavaScript Good colleagues to meet this demand . If I have to know more about my team .

meanwhile , for fear of “ A single point of failure ”,a Colleague turnover ,b Colleagues take over a A colleague's project / modular , It's going to surprise you , On the one hand, the project handover process will be prolonged , On the other hand, the cost of context switching for other members is also high .

The solution is to allow as many members as possible to cross participate in different modules , Development of different projects , Can cooperate with Review Let the team members be familiar with the code of the project .

Do a good job in infrastructure construction and improve efficiency

  • Basics UI Component library
  • build by oneself Gitlab
  • version management
  • Automatically compile and publish Jenkins
  • Unified scaffolding
  • Node Middle layer
  • Buried point system
  • Monitoring and alarm system
  • security management
  • Eslint
  • Mock
  • Grayscale Publishing
  • oidc Single sign on
  • Swagger The interface is generated automatically
  • Document platform construction

3、 ... and 、 Think from the perspective of the company

A good front end leader What should it be ?

Keep the project stable

  1. regular Code Review, Discover and solve problems , Lead team members to overcome difficulties .
  2. Perfect the buried point system , For operations to analyze data , Continuous improvement to enhance the user experience .
  3. Improve the monitoring and alarm system , Find online problems quickly .
  4. Improve the version management system , Auto build tool , Script .
  5. Perfect coding standard , Plus all kinds of lint, And type checking typescript.
  6. Write test cases : For common class libraries and public UI Component library .

Create more value

  1. “ Wear business glasses ” To write a project , Give full play to the project value and find the expansion direction .
  2. Lead the team , Discover their strengths , To distribute reasonably .

Four 、 summary

I mainly wrote about “ How to be a front end leader” Ideas , From the individual 、 From the perspective of the team and the company, summarize their own views , It's a little general , It's time to really settle down , I'll do a brainstorming , Write each point in detail , Smaller , More execution .

About writing , I am here 2017 I wrote an article in “ A Jingdong operation plan written in my work ”, as time goes on , There has been a lot of repercussions on the Internet , This strengthened my confidence in writing , Show my ideas to more people , So I wrote “ My Internet company dissolved ”, It feels like nice, Although it took a lot of energy .

I suggest that you can also try to write something slowly , It can be a simple summary or diary , From this, we can exercise our language organization ability and deepen our understanding of certain knowledge .


  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