How to become a professional front end engineer in 2021?

Aliyunqi 2021-02-23 03:39:28
professional end engineer

brief introduction : If you want to be a professional front end Engineer , So you need to know what to learn , To what extent , And how to learn effectively . There are no formal front-end technology courses in universities , Generally, there is a lack of more authoritative channels to systematically understand and learn the most practical 、 Cutting edge front end technology . As a front-end Engineer for a long time , I refined it 4 This is a topic of common concern , Hope to be helpful to the students who want to become professional front-end engineers .


If you want to be a professional front end Engineer , So you need to know what to learn , To what extent , And how to learn effectively . There are no formal front-end technology courses in universities , Generally, there is a lack of more authoritative channels to systematically understand and learn the most practical 、 Cutting edge front end technology . As a front-end Engineer for a long time , I refined it 4 This is a topic of common concern , Hope to be helpful to the students who want to become professional front-end engineers :

  • Is there a future in front-end development ?

  • Go to a big company after graduation , Or go “ Small and beautiful ” The company ?

  • I like front-end development very much , To what extent can we enter “ Big factory ”?

  • I have some experience in front end development , How to improve yourself ?

One The current situation and Prospect of front end development

Review the history of programming languages , We can see that many of the programming languages that were once popular have disappeared , Or fading out . meanwhile ,2009 Years later, a number of new languages have sprung up . We have noticed that some languages with a long history have strong vitality , image C / C++、Java.90 At the beginning of this year, the mass Internet was born ,Web Technology is starting to rise ,Python / PHP / Java It's all in this period . among HTML / JavaScript / CSS It was born one after another in that era . The rise and fall of language is closely related to the background of that time . Front end technology has undergone nearly 30 years of changes in the times ,JavaScript Still the most popular language in the world ,JavaScript The open source community is also the most active , We can see Github Top20 In the project , Most of them are front-end projects . Today's front end technology seems to be omnipotent , It's all pervasive , It can be applied in all fields .


The development of the front-end industry is actually inseparable from the development of the Internet and the needs of the times . As you can see from the figure below, there are three obvious turning points :

The first turning point is 2004 About years ago ,2004 year Gmail Release , This product is very meaningful ,Gmail It's the earliest single page application , Large scale applications Ajax This technology , It can realize the same interactive experience as desktop software in browser , This started a revolution in interactive experience at that time . It's a real mutation ( Before that , We often talk about front-end development 80% It's about typesetting , today 80% It's about engineering development ), thus ,JavaScript It began to develop rapidly . just as Atwood According to the law “ Anything that works JavaScript Applications implemented , In the end JavaScript Realization ”.

The second turning point is 2010 About years ago ,Node The emergence of does not subvert the server development mode , But completely upgraded the front-end tool chain , From then on, the front-end engineering system began to develop rapidly . then NPM Open source package management services , Activate the global front-end community activity .

here we are 2013 About years ago , The mobile age is coming , The business battlefield turns to the mobile end . Traditional front-end development has to be said to have entered a low ebb . But soon , Here comes the third turning point , Interconnection of services and products , It's contradictory to the closeness of native applications . therefore , A variety of hybrid development solutions are derived , All kinds of cross end technologies . At the same time, the emergence of small programs , Open up a new battlefield for the front end , Front end development is revitalized again . here we are 2017 About years ago , The cloud era has officially drawn the curtain , The mode of production and office accelerates the digital transformation ,toB Business is on fire , The traditional front-end technology has become the best choice . therefore , We can see that there is a great demand for front-end engineers in the current talent market , however , Senior front-end talent has always been a scarce resource .


Two prospects : The value of front end technology

The value of technology determines its vitality . The value of front-end technology is “ Interface ” The value of , I believe in all “ Interface ” It's going to end up with front-end technology . Connecting consumers to the Internet , It's digital life “ Interface ”, Connect producers ( Enterprises 、 Institutions 、 We-Media ) To the Internet , It's digital production “ Interface ”. Today you can also feel , these “ Interface ” It's becoming more and more diverse 、 Intelligent 、 And it's everywhere .


for instance , Let's see 60 s , The console of the rocket is a physical interface , Up to date “ The dragon spacecraft ” The console is completely digital based , According to the disclosure, this interface is to use JavaScript Developed . I Believe , In the future, all physical interfaces will evolve into digital interfaces .


Front end development is simply to achieve product performance and interaction . Today, different types of products have rich forms of expression and interaction , It is no longer a single picture and text 、 Video and some mouse and keyboard interaction . In terms of business type , Yes toC、toB,toG, Different customers , There is a big difference in the way front-end technology is applied . Will anyone worry about the existence of the front-end industry 30 Years. , Will it lose innovation , There's an involution ? in summary , Obviously not. . The future has come , Need more “ After wave ” Into the industry , This industry needs more innovation .

To sum up , The development trend of the front end is changing from “ From single end to multi end ”、“ The interface is moving from GUI towards NUI evolution ”,VR / AR、 Digital twin and other related technologies are becoming more and more mature , These are all implemented in Ali's business . The development mode is also changing from the traditional B/S Pattern , Xiang Yun + The development of cloud native mode at the end . Students are now in such a new era 、 An era full of innovation and vitality .


3、 ... and Career choice

The second question is about career choice . If you choose a front-end Engineer , Everyone is concerned about professional development . Personal growth is inseparable from environmental factors . Go to “ Big factory ”、“ Small and beautiful ” The company , Or start a business , My advice is : If you have a clear dream, go “ Small and beautiful ” Or start a business , If you want to be a professional technician, you have to go to a big company . I personally suggest that life has a long way to go , Don't get to the final state so early . Just graduated , First go to the company and have a good experience , Come out and start a business again . So-called “ speciality ”, We will value these aspects :

  • We need to solve a wide range of problems : Rich practical experience in business scenarios , The breadth of problem solving .

  • It's difficult and challenging enough : like “ Car repair ” and “ Repair the plane ”, The same technology stack , Depth of application , The size of the project , The play and challenge are very different .

  • The experience of the Legion : like “ Guerrilla detachment ” and “ Regular army ”, In the cognition of strategy and tactics 、 Management planning 、 Professional role collaboration 、 Development process 、 Platform thinking 、 Comprehensive ability can bring rich feelings and experience .

  • Professional development literacy and characteristics : Small companies want to finish , Big companies want to do well . Under high standards and strict requirements , It is conducive to the formation of professional development literacy .

  • With innate R & D reserves : Fight a long war , We have to invest time in developing core competence 、 Rich technical reserves .

“ I will ”、“ I know that, too ” It's not enough , The growth of front-end engineers requires a certain time span of experience . just as Bob Dylan One of the lyrics :“How many roads must a man walk down,Before you call him a man”, Which translates as : How many holes does a front-end engineer have to step through , It's a professional front-end engineer .

Four Talent portrait of front end Engineer

Third question , To what extent can we enter a large factory ? Large factories have a great demand for front-end engineers , But the passing rate of school enrollment is not high , The supply and demand of the market are obviously unequal .

The current situation is that everyone starts from self-study , There is a certain gap between what the individual studies and what the company needs . Learning is not systematic enough , I usually read books , Shopping in the community 、 Read some articles randomly , It's easy to be misled . Have some internship experience , But the contact is limited , I don't know what the gap is with the professional requirements . The problem with this is : It's generally fragmented learning , It's not systematic , A panoramic view of front end technology 、 The trend is not very clear . In Ali, we often say “ Somatosensory ”, Somatosensory is to have personal feeling and understanding , Only once , Do it over and over again , Stepped on many pits , It's possible to build this sense of body . The front end is developing very fast , A lot of knowledge goes out of date very quickly . therefore , Can't stay on the surface usage . Front end technology has a fast changing part , There are also relatively stable parts , therefore , The way to learn front-end technology should be multithreaded 、 Multidimensional , I'll talk about that later .

As shown in the figure , We mainly look at three variables for front-end candidates : Basic level ( What's the foundation like )、 Cognitive level ( Is cognition comprehensive 、 Is it in place )、 The level of practice ( What was actually used 、 What have I done? ).


Basic aspects : The first is HTML / CSS / JavaScript / Web API We should learn systematically , To read good books ( Highly rated books , Here are two ), Get into the habit of looking at authoritative documents (MDN、 Official documents ) The habit of . Help to read some articles .

In terms of cognition : Have a panoramic view ( First there's the general perception , Know what to focus on 、 Focus on technology trends )、 Knowledge in various fields is not required , But have an accurate understanding . I suggest you pay more attention to open source projects , Mainstream frameworks and popular Libraries . The way to follow them is to subscribe to their updates , Look at their source code , stay Github Watch the discussion of others , It's better to be able to participate . The structure of personal knowledge should be rich , The Internet 、 Algorithm 、 product 、 Design 、 visualization 、 Tools / You need to know something about plug-ins and so on , Where people's vision is, the boundary is . Train yourself to sum up 、 The habit of Induction , I should write more , Summary is a process of structuring knowledge .

In practice : Like internship projects 、 School projects 、 Write more in the learning process demo、 It's better to have some personal projects , In a word, we should look for all kinds of practical opportunities .

Another dimension is potential , Or personal traits . We value the potential of the candidate very much . Can we trace the root of the problem , warren , Explore the nature of the problem . To the new / p. / Special things , Whether there is enough curiosity and curiosity , Willing to try , Especially for the product design has its own aesthetic and taste . The value of front-end engineers is “ create ”, Are you willing to put it into practice , Restore your ideas with code , This trait is very important . I had a good interview , I feel confused when I take a written test , Don't write , This is not going to work . In school recruitment , We value human potential more , In terms of ability, we pay more attention to the foundation .

5、 ... and Multithreaded learning path

Let's look at the fourth question , How to continuously improve personal technical level ? In the school interview , I found that most of the students have learned some front-end technology , You can also make something , The problem is that it's not moving forward , I don't know how to learn deeply . Companies are different from schools , School is the place to study , The company is the place to work . We hope that before you enter the company , Can establish good study habit and effective study method , such , Into a work environment , Using specific business scenarios , Can grow up quickly .

There are two ways to learn front-end technology : One is “ Multithreading ” The learning path of , One is the path of deep learning . What is? “ Multithreading ” The learning path of ?


First thread , It's the learning of basic knowledge . This is the basis for learning other technologies . Basic knowledge needs systematic learning , The foundation includes JavaScript / HTML / CSS / Native Web API Learning from . I can't do the project directly after I have learned it , You also need to master some frameworks and tools to solve problems , But if we want to solve the problem better 、 Combination plan 、 Debugging problems , We must have a deep understanding of language and its characteristics .

The second thread , Learning domain knowledge . I said that before , We should constantly enrich our knowledge structure . Specific job needs specific domain knowledge . There will be some general knowledge , Like software engineering / data & Algorithm / The Internet / visualization / Security / Interaction design , These knowledge and theories do not require deep learning , But it's got to be cognitive .

Third thread , Engineering practice experience . The point is the experience of using . Like development tools / Package management / Building tools / Mainstream frameworks and Libraries / Code version management / Debugging and testing tools and so on , These things at the tool level , Although more , Many of them can be used . The front-end tools are “ be fond of the new and tired of the old ” Characteristics , It changes quickly , Keep absorbing the latest . So-called “ Good lies in things ”, Good at using open source libraries and tools , It can help us solve problems quickly . however , If you don't understand the underlying principles 、 Technical point , Just stay at the level of being able to use , It can only be copied mechanically , It's hard to improve . Many people say that the front end is developing too fast , Just learned something , I'll be eliminated in two years , It's really about tools , The more basic things are, the more stable they are , And the more it's worth learning . Engineering , image React This basic library is relatively stable , It's worth learning deeply , Later, I will talk about how to learn in depth . actually , Any new thing has its development vein , If you have a certain foundation , Understand the underlying principles , Not only can you master it quickly , It can be perfected .

To be a professional front end Engineer , Need multithreading 、 Multidimensional learning , Including after work , Still need to keep learning . For the students , The foundation should be firm , Experience in engineering , The knowledge structure should be as extensive and rich as possible .

6、 ... and Deep learning path

What I just said is horizontal , Let's look at how to learn in depth vertically . In depth is from Know What To Know How Until then Know Why The process of . Corresponding to the link below ,Know What Namely “ Heard of ”、“ The concept is clear ”, also “ Know the difference ”.Know How Namely “ Used to ”、“ Understand usage ”、“ Tread pit ”( There's no pit , Basically, it's very shallow ).Know Why Namely “ Understand the principles ”、“ deductive ”, That is to achieve the degree of flexible use .

For students , The three dimensions mentioned above :

  • Basic knowledge of : Need to go to “ Understand the principles ” The degree of

  • The engineering practice : Especially the front-end main frame learning , At least until “ Understand usage ” The degree of

  • Domain knowledge : Need to go to “ The concept is clear ” The degree of


We use React For example :

“ Heard of ” I know what it is , One UI Developed library . The concept is clear , I know all the concepts about it , It's a declarative 、 Component based architecture 、 Predictable 、 Responsive UI library . So what is declarative 、 What is component architecture , What is responsive , All need to know . What is the component state , What is responsive programming ,VDOM、JSX What are the differences , These are its related concepts , ultimately , Touch it all the way .

“ Used to ” Have you ever done something more complicated 、 Challenging projects , Whole React Technology stack , What have you used . Understand usage , For example, understand the characteristics of componentization 、 combination 、 Various ways to pass attributes 、 The difference between a class component and a function component , Why is it advocated to use function components now 、 What scenarios are controlled and uncontrolled components used in .“ Step on the pit ”, The more holes you step in , The deeper the explanation goes , For example, version differences 、re-render Performance problems of 、Hooks The problem of dependence , There's no real sense of body . Understand the principles , For example, do you understand Hooks Operation mechanism of 、 Do you understand React The concurrency mode of 、 Do you understand virtual DOM The basic principle of 、React The basic principle of coordinator and so on .

7、 ... and Effective ways of learning

What I'm talking about is what to learn , And how much to learn . Next, let's talk about ways to learn effectively . Effective learning must be in the process of hands-on learning , I know everything , But it's not necessarily a good solution ( As with life ). The ability to solve problems is a comprehensive ability , As shown in the figure :


Problem solving is a closed loop . When we really face demand , In the face of problems , We need to develop our ability to analyze problems , Find the demand behind it 、 Technical point , Then go to the research program , Otherwise you don't know what to search for . It is suggested to write more about the process of exploring the scheme demo, Break down the complex problem into a single point and solve it one by one ( The idea of calculus ). Then there's the formal coding , solve the problem . After the problem is solved , And to sum up , Only in this way can we turn practice into effective experience . It's not over yet , We have to continue to explore the optimal solution , Is there a better plan 、 How to write the code is more maintainable 、 How to write expansion is more flexible . Exploring the optimal solution is equivalent to fitness , When the limit threshold is reached , The breakthrough .

I often hear complaints ,“ There are no good opportunities for practice ”、“ I haven't been in contact with ”、“ There is no challenge in the present job , Can't learn ”……. These are all borrowings , Problem solving starts with being good at finding and defining problems , Usually when we learn a technical point , You should learn to write questions for yourself first , That's the question of definition . The more thorough the problem is , The simpler the solution is . To improve oneself is first to improve oneself , Not satisfied with the status quo , Start with the pursuit of code quality , To pursue the best solution .

Finally, let's summarize today's sharing . First of all, we talked about “ choice ”, The development history and some prospects of front-end technology are discussed , The future of the front end industry is very much to look forward to . The advantages of big factories in cultivating professional talents , Ali has very rich business scenarios and technical reserves , If you want to learn , Willing to take the challenge , There are a lot of opportunities . Next , Also talked about the ability and potential requirements of front-end engineers . Finally, it focuses on how to learn , There are two paths : Multi thread learning path and deep learning path . At present, we have Alibaba front end trainee plan For the majority of students in school to provide professional learning front-end technology opportunities , Let the students have a comprehensive understanding of the front-end technology , I know what to learn , How to learn , Try to meet the requirements of large factories . Students in school can actively participate in , I believe there will be a lot of harvest .

author : Developer Assistant _LS

Link to the original text

This article is the original content of Alibaba cloud , No reprint without permission



  1. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  2. Javascript数据类型
  3. HTTP interface debugging tool! 48000 star HTTP command line client!
  4. Parameter encryption of front end URL link band
  5. HTTP interface debugging tool! 48000 star HTTP command line client!
  6. Three front end frameworks: data binding and data flow
  7. Reading Axios source code (1) -- exploring the realization of basic ability
  8. Event bubble and capture in JavaScript
  9. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  10. R & D solution e-Car front end monitoring system
  11. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  12. R & D solution e-Car front end monitoring system
  13. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  14. 解决ajax跨域问题【5种解决方案】
  15. Top ten classic sorting of JavaScript
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  18. My http / 1.1 is so slow!
  19. Why Vue uses asynchronous rendering
  20. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  21. The tapable instance object hook of webpack4. X core tool library
  22. The tapable instance object hook of webpack4. X core tool library
  23. Using libcurl for HTTP communication in C + +
  24. Using libcurl for HTTP communication in C + +
  25. Using CSS variable in Vue
  26. Deeply understand the update of state and props in react
  27. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  28. Baidu share does not support the solution of HTTPS
  29. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  30. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  31. Vue cli creates vue3 project
  32. Nginx reverse proxy for windows authentication using NTLM
  33. Rust tutorial: introduction to rust for JavaScript developers
  34. Deploying personal blog to Tencent cloud with serverless framework
  35. R & D solution e-Car front end monitoring system
  36. JavaScript advanced learning
  37. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  38. Vue: vuex persistent state
  39. React native gets the current network state of the device Netinfo
  40. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  41. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  42. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  43. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  44. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  45. High performance nginx HTTPS tuning
  46. JQuery advanced
  47. day 30 jQuery
  48. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  49. TCP/IP 开胃菜 之 HTTP
  50. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  51. JavaScript data type
  52. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  53. Solve Ajax cross domain problem [5 solutions]
  54. HTTP of TCP / IP appetizer
  55. Optimization of pod creation efficiency in serverless scenario
  56. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  57. First knowledge of HTTP / 1.1
  58. First knowledge of HTTP / 1.1
  59. Webpack learning notes series 05 devserver
  60. Webpack learning notes series 04 - resource processing optimization