What is front end engineering?

Wei 1 2020-11-13 06:33:08
end engineering

Front end engineering is a necessary skill of modern front end

Web The speed of evolution of the front end in recent years is amazing . Many front engineers make complaints about it “ I can't learn. ”. Now it's not HTML、CSS、JS It's time for the front-end three swordsmen to walk the world with their swords .

Take the author's personal experience as an example . The author is in 2011 Enter the front-end industry in about two years . The main content of the work at that time was , Turn the design sketch into a static page , And then use jQuery Plug in to achieve some pages of the rotation map 、 Interactive effects such as the Lantern . Finally, we use the back-end template language such as smart、velocity Add page logic to the static page , The code is handed over to the server to finish the online . The whole process ,JS Frame to jQuery Mainly ,CSS Use it at most Less.

Let's take a look at the way the front end works today , In my opinion Take a taxi Take the front-end team as an example . The development framework of the front end is to Vue Mainly , Use Webpack Solution interface mock、 Code checking 、 The code to compile 、 structure 、 Compress 、 Add version number 、 Deployment and other whole process work . The technical points involved are Vue、Vuex、ESlint、stylelint、mock、Webpack、Sass、PostCSS etc. . The requirements for the front end have changed from simple JS、CSS The problem has become more engineering oriented .

Front end engineering is a big topic , Even now, there is no exact definition . The author's understanding of front-end engineering is : Everything can improve the efficiency of front-end development , The means and tools to improve the quality of front-end applications are front-end engineering .

The benefits of front-end engineering

More and more prosperous in the front end , More and more complex today , What benefits can learning front-end engineering bring to us

1. Greatly improve development efficiency

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 .

for instance , Give one again dom The element binds a click event , Use pure JS It could be done :

document.getElementById('myDom').addEventListener('click', function(e){
// do some thing

We introduce jQuery Under the circumstances , It's a lot easier :

// do some thing

If in Vue in , Simple and clear :

<div @click="doSomething">
// ...
methods: {
doSomething: function () {
// do some thing

If there are a lot of event bindings , Without the support of development tools , There will be a lot of duplicate code to write , Think about it and have a headache . The inefficiency is evident .

To reduce the number of requests , Front end developers usually put a lot of smaller sizes 、 The tiny images are merged into a large, transparent sprite , stay CSS By setting the element background-position To use pictures . If it's a complete manual jigsaw 、 ranging , It will take a lot of time . But in the sprite map plug-in webpack-spriteSmith With the help of the , Small pictures can be automatically assembled into sprite pictures , And generate the corresponding CSS style , Plug ins can help us deal with this kind of unskilled physical work , Double the efficiency .

Another example , Without a front-end scaffold , If you develop a project from scratch , It takes a lot of time to initialize the project , For example, install all kinds of npm package 、 Configure all kinds of Webpack Of loader、 Configure hot load . If the environment is not built smoothly , It's going to take a long time to sort out the problem , A project initialization action alone can take a day or two . With scaffolding tools , Just a simple initialization command ,2 The project can be initialized in minutes . The front end just needs to focus on the business development itself , The efficiency has been greatly improved .

2. Reduce the development difficulty of large projects

First of all, modularization is advocated in front-end engineering 、 Componentization . Decompose the idea of large-scale project into modules , Split into separate modules . The development difficulty of each module has dropped sharply . Also based on version control tools Git, Multiple developers can develop in parallel , Improve development efficiency . When the project iterates later , Because each module is relatively independent , Very low coupling , The adjustment of a function often only needs to modify one of the modules , Risk controllable . There's no need to change a code , A situation that raises a global problem .

secondly , Front end engineering advocates to use perfect process specification and code specification to ensure the quality and maintainability of large-scale applications . Such as through ESlint、stylelint Automatic verification of code , Pass the review 、 Detailed design 、 Development 、 Joint tune 、 test 、 Control of every link such as online , Ensure high quality and timely delivery of the project . Merging code to the main branch must go through code review. Process specification ensures the quality and maintainability of large-scale projects while delivering on time .

It's easier to win the favor of interviewers

I vaguely remember going to an interview six or seven years ago , The interview question is about this style :“ How to achieve horizontal and vertical center ”,“js What is the principle of event delegation ”,“ common css hack What's the way ?”,“$(function(){}) And window.onload What's the difference? ?”

Today's interview questions are about this style :“ Can you talk about it Vue How to implement the principle of bidirectional data binding ?”,“Webpack How to configure Babel?”,“promise and await/async What's the difference ?”

If you want to work in a big company , Front end engineering is the basic quality that needs to have . The business of large companies is often very complex , And it requires a lot of stability . The corresponding front-end engineering degree is very high , Various supporting infrastructure is very mature . For example, meituan comments on the systematic engineering scheme 、 Move component library Vix、 Automated test tool Freekite、Hybrid Solutions for functional experience Titans etc. . To get the favor of these companies , Candidates need to have a deep accumulation in the field of front end Engineering .

The front-end job skills have changed profoundly . Some people even jokingly say that front-end engineers are front-end configuration engineers .

fouber( Zhang Yunlong ) I once said in my blog post :

" The front end is a kind of technical problem with less problems 、 Software development areas with more engineering problems .”

So front end engineering is a necessary skill for every modern front-end person .

Who needs front end Engineering ?

3. Junior and intermediate front end Engineer

For junior and intermediate front-end Engineers , Due to less work experience , The breadth and breadth of technology is not enough , In fact, the cognition of front-end engineering is not enough , First of all, it is difficult to master the front-end engineering as a whole . For these students , The first thing is to learn to " use ”, Step by step to understand the principle . For example, after development , A simple tool to learn how to use a scaffold , Find out how the scaffolding necessary for daily development is realized , Learn the technical points used in it from point to area .

Front end engineers looking forward to promotion

The ability of front-end engineering is also a necessary skill for a senior front-end . Working for many years , If you don't know much about front-end engineering , Even a basic scaffold can't be built by itself , This is a failure . If you take the team in the future , How to instruct the group students , How to lead the team to progress ? If you go to a company promotion , It's not convincing either . Because I want to be promoted T, It is necessary to have deep accumulation and contribution in efficiency and performance optimization .

therefore , No matter what stage you are in , It is very necessary to have a deep understanding of front-end engineering .

Front end applications are becoming more and more complex , The requirement of front-end engineering is higher and higher . Scaffold as an important part of the front-end engineering , Played a crucial role in the development process . Now almost all mainstream front-end frames have their own supporting scaffolding , Undoubtedly, it brings great convenience to developers . But as mentioned above , Many developers have a short career , Or many developers who have worked for many years because of the company's business , No access to front end Engineering .

It doesn't matter if you don't understand , It's important that you see this tutorial , It shows that we have realized the importance of front-end engineering , It's not too late .

The author has a front-end engineering practical course just launched ——《 Perspective front end Engineering 》.

Click to learn about 《 Perspective front end Engineering 》.

This course is based on Vue For example , Combined with the author's engineering practice in the team , Lead you to build a scaffold from scratch , Dismantle the technical points used in scaffold construction one by one , I hope you'll see , Everyone has a deep understanding of scaffolding and engineering ideas .

The course catalog

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

I believe that after finishing this course , We have at least the following gains :

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

interested , I hope you will support me a lot !


I hope everyone can understand the engineering thought behind the scaffold , And you can build a scaffold by hand . I also hope that after you understand the idea of front-end engineering , Explore more ways , Empower your team , Jointly promote the development of front end engineering .

Click to learn about 《 Perspective front end Engineering 》.

Author's brief introduction :

Wang Chao , Now fast Dog Taxi ( primary 58 Express ) Head of front end .

I have worked in Renren 、 qihoo 360,8 Years of working experience in the Internet .

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 .

本文为[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根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  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根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  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