6年全栈工程师答复：web前台的主要学习什么，现在还有前途吗？一般工资是多少？

首选我不明白你为啥没有对前台工程师这个行业在有肯定理解之后再开展学习，下面备注是说正在学习这个，我就一脸问号了(？？？？？) 可能你还是大学生吧，对于工资多少，不同地区，一线二线，三线四线城市都是有差异的，你可以通过招聘网站去看，眼见为实嘛！（这里推荐：智联招聘，拉勾网，BOSS直聘等…别去58同城，之前有些伙伴跟我说他去58同城上看前台的招聘，惊呆我了！）

首先，你想知道前台是个啥，那么你肯定要知道前台是怎样来的！答复比较长……大家有耐心的可以看下去，综合了少量权威论坛上的资料而来。

前台其实是个很大的范畴。我这里只针对 web 开发的前台而言（下文统称前台）。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前台。它的实质是前台代码在浏览器端被编译、运行、渲染。前台代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript。如图：

前台发展历程

前台也算是经历了一个比较漫长的发展过程，大致历程可以分为以下几个阶段：

上古时代：

这个节点不得不说一下，世界上第一款浏览器 NCSAMosaic，是网景公司（Netscape）在1994年开发出来的，它的初衷是为了方便科研人员查阅资料、文档（这个时候的文档大多是图片形式的）。那个时代的每一个交互，按钮点击、表单提交，都需要等待浏览器响应很长时间，而后重新下载一个新页面给你看，大概是这样：

同年 PHP（超文本预解决器） 脚本语言被开发出来，开启了数据嵌入模板的 MVC 模式，同时期比较相似的做法有以下几种：

• PHP 直接将数据内嵌到 HTML 中。

• ASP 的 ASPX，在 HTML 中嵌入 C# 代码。

• Java 的 JSP 直接将数据嵌入到网页中。

这个时期，浏览器的开发者，以后端开发人员居多，大部分前后台开发是一体的，大致开发流程是：后台收到浏览器的请求 —> 发送静态页面 —> 发送到浏览器。即便是有专门的前台开发，也只是用 HTML 写写页面模板、CSS 给页面排个好看点的版式（要不是我堂堂程序员看不上这点活，你们这些个切图仔就得要饭去~）。

铁器时代（小前台时代）

1995年，这是个好年份，又是这个搞事的网景公司，拜托一位叫布兰登·艾奇的大佬，希望开发出一个相似 Java 的脚本语言，用来提升浏览器的展现效果，加强动态交互能力。结果大佬喝着啤酒抽着烟，十来天就把这个脚本语言写出来了，功能很强大，就是语法一点都不像 Java。这样就渐渐形成了前台的雏形：HTML 为骨架，CSS 为外貌，JavaScript 为交互。

同时期微软等少量公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门，尽管有了比较统一的 ECMA 标准，但是浏览器先于标准在市场上流行开来，成为了事实标准。导致，现在前台工程师还要在做少量政府古老项目的时候，还要去解决浏览器兼容（万恶的 IE 系列）。

不论怎样说，前台开发也算是能写点逻辑代码了，不再是只能画画页面的低端开发了。随着1998年 AJax 的出现，前台开发从 web1.0迈向了web2.0，前台从纯内容的静态展现，发展到了动态网页，富交互，前台数据解决的新时期。这一时期，比较知名的两个富交互动态的浏览器产品是：

• Gmail（2004年）

• Google 地图（2005年）

因为动态交互、数据交互的需求增多，还衍生出了jQuery（2006） 这样优秀的跨浏览器的 js 工具库，主要用于 DOM 操作，数据交互。有些古老的项目，甚至近几年开发的大型项目现在还在使用 jQuery，以至于 jQuery 库现在还在升级，尽管体量上已经远远不及 React、Vue 这些优秀的前台库。

信息时代（大前台时代）

自 2003 以后，前台发展度过了一段比较平稳的时期，各大浏览器厂商除了按部就班的升级自己的浏览器产品之外，没有再作妖搞点其余事情。但是我们程序员们耐不住寂寞啊，工业化推动了信息化的快速到来，浏览器呈现的数据量越来越大，网页动态交互的需求越来越多，JavaScript 通过操作 DOM 的弊端和瓶颈越来越显著（频繁的交互操作，导致页面会很卡慢），仅仅从代码层面去提升页面性能，变得越来越难。于是优秀的大佬们又干了点惊天动地的小事儿：

• 2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。

• 2009 年 AngularJS 诞生、Node诞生。

• 2011 年 ReactJS 诞生。

• 2014 年 VueJS 诞生。

其中，V8 和 node 的出现，使前台开发人员可以用熟习的语法糖编写后端系统，为前台提供了使用同一语言的实现全栈开发的机会（JavaScript不再是一个被嘲笑只能写写页面交互的脚本语言）。React、Angular、Vue 等 MVVM 前台框架的出现，使前台实现了项目真正的应用化（SPA单页面应用），不再依赖后端开发人员解决页面路由 Controller，实现页面跳转的自我管理。同时也推动了前后台的彻底分离（前台项目独立部署，不再依赖相似的 template 文件目录）。在这里解释下 MVVM 模式：

• Model：提供/保存数据

• View：视图

• View-Model：简化的 Controller，唯一的作用就是为 View 提供解决好的数据，不含其它逻辑

至于为啥 MVVM 框架能提升前台的渲染性能，这里简单的总结下原理，由于大量的 DOM 操作是性能瓶颈的罪魁祸首，那通过肯定的分析比较算法，实现同等效果下的最小 DOM 开销是可行的。React、Vue 这类框架大都是通过这类思想实现的，具体实现，大家感兴趣的可以去翻下源码哈，这里不做开展。前台分离也导致前台的分工发生了变化：

后台更加关注数据服务，前台完全控制自己的各种行为，可玩性更高。当然相应的学习成本也越来越大，node的出现也使得前台前后台一起开发成为可能，好多大公司在 2015 年前后就进行了尝试，用 node 作为中间数据转接层，让后台更加专注于数据服务和治理。

全能前台时代

2009年开始，大屏智能手机开始陆续出现，到后来 4G 移动网络的普及。使得前台从单一的基于的 PC 浏览器 展现的 web 应用，开始向手机、平板覆盖（HTML，CSS，JavaScript 也陆续推出了自己的新标准）。前台对于跨端浏览的需求越来越大，前台不再仅仅是 PC web 方面的开发，手机配置，与 app 进行 hybird 开发，变成了常态。甚至于 Facebook 推出了 React-Native，国内微信、支付宝推出小程序，试图整合web、native 开发。为什么会有这样的情形发生呢，网速越来越快，硬件性能越来越好，js 在各个终端的运行能力与 native 开发（IOS、Android）的差距越来越小，就让我们搞事儿（喜欢偷懒）的程序员们想着能不能写一套代码，而后到处运行呢。

能的，这个可以有，React-Native，小程序，以至于后来出现的 Electron，使得用 JavaScript 开发桌面应用都成为了可能（VSCode）。谷歌近两年也推出了 Flutter 的开发语言，可以实现一套代码，多处运行（web、app）。前台真的不再是只能切图，开发静态页面的前台。后台可以搞、爬虫可以搞（node），app 可以写（Weex、RN、Flutter），桌面应用可以开发（Electron）,算法和语言的严谨性还有点短板，但是 TypeScript 的出现，以及后续 ECMA 标准的近一步完善，会使得前台更加的全能化，也可能会出现更多的细分工作领域。

最后，告诉大家“Any application that can be written in JavaScript, will eventually be written in JavaScript.”这是个生态圈的概念（最早见于谷歌教父 在《黑客与画家》中对于浏览器生态的想法），包括浏览器，包括微信、支付宝都已经早早走在了这条“不归路”上。

5G时代来临，各行各业对产品的客户体验需求空前大增。人们在享受互联网带来的便捷也给互联网产品提出了新的需求，这意味着前台开发人员也有了更多的机会和挑战。无论是大小公司，对前台开发工程师的需求都是在快速上涨，薪资待遇也随之上升很快。

前台开发工程师就业机会多，创业机会多，且就业范围广，几乎各行各业都有需要，互联网公司、金融，贸易等等都能进。

1、前台工程化

在前台工程程化中，开发者最重要的基本素养就是通过工具提升效率，前台开发者在这些工具下会持续迭代和优化。

展望2020年前台的发展，前台工程体系肯定会更加闭环，不再是一个脚手架这么简单，而是会结合 IDE，打通业务属性，从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个完成的闭环。

2、跨端开发

今年很多团队转战谷歌常态的 Flutter，特别是 Flutter for Web 的第一个 Release，这让 Web 前台重燃希望、跃跃欲试。

同时，苹果公司也发布了全新的 UI 系统——SwiftUI，同时，开源社区中 SwiftUI for Web已经在路上了，SwiftUI for Android 还会远吗？

跨端开发，Flutter 仍会快速发展，并且会有更多的开发者，Flutter on JS、SwiftUIfor Web&Android 也将是开源动态值得期待的事情，毕竟跨端仍没有一个完美的处理方案。

3、小程序

今年是微信小程序突飞猛进的一年，在微信小程序出现以前，大家在谈 Hybird、ReactNative，但终归只是技术层面的狂欢，始终没有业务属性的注入。小程序的出现，一方面告诉业界在当前设施上 Webview 也没差到哪去，另外一方面告诉业界如何让有能力的商家在超级 APP上进行私域经营。

另一方面，从技术角度说，在上层 DSL 的严格限制下，超级 APP 即可定义符合自己诉求的 Web 标准，弥补当前 Web 标准的不足，最后和用户端配合，结合离线、预加载、定制Webview 能产出相似于 NSR 等各种酷炫的技术模型，让 Web 在端内低成本达到 Native 版的体验，端外也不会像 Weex 一样有点小别扭。

不过因为需要依赖超级APP（微信、支付宝、百度、美团、头条等），因为各家平台采用的具体方案的差异，造成目前小程序的落地方案也不一样，有时候需要开发多套代码。

4、Serverless 让前台离业务更近

当前的前台工程师大多都是科班出身，虽不能和正宗的服务端开发同学比，但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层，来满足这部分诉求，但仍旧摆脱不掉 运维、机器分配 这条拦路虎。

2019 年几乎所有知道名字的公司都在谈 Serverless（尽管并没有人知道如何落地 Serverless），随着 Serverless 的逐渐落地，BFF 这层的代码会摆脱运维、机器分配等复杂的问题，同时大概率会由前台同学写这部分代码，服务端同学专注中台系统的实现。从业务上说，业务的试错成本也会大幅度降低。

5、5G

2019年一个绕不开的话题就是5G。首先，5G 带宽的增幅提升带来传统 Web前台复杂度的进一步提升，好像 2G 到 4G 变化过程中从 WAP 的纯文本超链接时代变化到 4G 全图片视频时代。5G 对于web前台的变化必将是巨大的，但一定不会一蹴而就。由于相应的配套设备也需要逐渐完善，如硬件性能和浏览器的解决速度。服务端渲染（SSR）一定是其中一个捷径，轻前台重后端，5G 是桥梁，把渲染放后端，不像同构那么简单，需要关注和优化渲染性能。WebAssembly 或者许会在这个机遇下得到快速发展，由于它可以无缝对接后端多种语言，前后端渲染的优化也会带来前台研发模式和技术架构的变化。

其次，5G 带来的万物互联，?将带来有别于智能手机和普通 PC 的多样化的应用场景，VR、可穿戴设施、穿载系统、智能投影、智能交互等会把 Web 带到各种各样的垂直领域，这也意味着前台将有更多广阔的空间。相信随着5G的大规模商业，会诞生一批新的互联网巨头。

以上，大家能了解多少就了解多少，其实对于初学者来说，大家是接触不到这个层次的，新技术的学习，更多的是锻炼1-5年的前台开发工程师。总的以上就是答复前台究竟有没有前途，学完之后是不是找不到工作了，或者者钱少了。这个你不用担心，技术在手，天下你有。技术不行怎样办？学啊，做程序员，你不学是拿不到多少钱的，多的是3,5年工龄的程序员被倒勾，抱怨工资没有应届生的高，说实话，抱怨是没有用的。

Web前台的工资情况：

全国前台开发平均工资：￥9541元/月，最低工资2K-3K，最高工资20K-30K。

北京前台开发平均工资：￥13220元/月，最低工资4.5K-6K，最高工资30K-50K。

上海前台开发平均工资：￥13460元/月，最低工资4.5K-6K，最高工资30K-50K。

（这个是某联统计的，开头就说过了，你们大可去招聘网看，不过注意了，很多线下机构假装成招聘公司的，以后大家学完面试，也要注意这一点！至于如何躲避这种情况，可以到咱们的学习圈来，把秘诀交给你）

Web前台学习包括了几个方面的内容：

第一阶段：HTML+CSS:HTML、CSS基础、div+css布局

JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础

JQuery基础使用：悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用

第二阶段：HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设施简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：HTTP服务和AJAX编程

WEB服务器基础：服务器基础知识、Apache服务器和其余WEB服务器详情、Apache服务器搭建、HTTP详情。

PHP基础：PHP基础语法、使用PHP解决简单的GET或者者POST请求、

AJAX上篇：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细详情方法、兼容性解决方法、Ajax框架的封装、Ajax中缓存问题、XML详情和使用。

AJAX下篇：JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：面向对象进阶

面向对象终极篇：从内存角度到了解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：继承性、多态性、封装性、接口。

设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理商模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：封装一个属于自己的框架

框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：模块化组件开发

面向组件编程：面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：主流的流行框架

Web开发工作流：GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：Angular.js、Backbone.js、Knockout/Ember。

常用库：React.js、Vue.js、Zepto.js。

第八阶段：HTML5原生移动应用开发

Cordova：WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境调试、Cordova实战（创立项目，配置，编译，调试，部署发布）。

Ionic：Ionic简介和同类比照、模板项目解析、常见组件及使用、结合Angular构建APP、常奏效果（下拉刷新，上拉加载，侧滑导航，选项卡）。

React Native：React Native简介、React Native环境配置、创立项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：Node.js全栈开发：

快速入门：Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与用户端、http://Socket.IO。

Web开发基础：HTTP协议，请求响应解决过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其余常见MVC框架。

Node.js开发电子商务实战：需求与设计、账户模块注册登录、会员中心模块、前端展现模块、购物车，订单结算、在线客服即时通讯模块。

设计模式、数据结构、算法、框架设计原理（前台的高级知识，主要学习语言的底层、项目的原理）

答复中有提过咱们的学习圈，也是我跟朋友们一起建立的学习基地，我也会在里面免费给大家传授前台知识，帮助大家处理前台学习上的迷茫，找到正确的方向来学习，技术也是最新的技术，大家可以放心。

感兴趣的小伙伴，可以加入进来：web前台学习③