前端开发做什么？需要具备什么能力？前景如何？

刘建强

了解前端开发，要从Web应用说起。基于浏览器（APP相当于定制的浏览器）和网络服务器，即以浏览器访问服务器、服务器响应浏览器这种模式提供服务的系统叫Web应用。Web应用可分为前端（在浏览器中执行的部分）和后端（在服务器中执行的部分）。前端开发又分为小前端（传统前端）和大前端。
传统前端（小前端），也称web前端、web客户端、通常是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页，包括网站的表现层和结构层，通俗点就是用户可以看到的部分，前端与后端（服务端）相对应，前端调取后端（服务端）的数据展现给用户。小前端工程师的职责是以Web技术（HTML、CSS、JavaScript、DOM、Ajax等）实现基于浏览器的用户界面。
小前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。简单地说，能够从 App 屏幕和浏览器上看到的东西都属于前端。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。
传统的前端和后端分工挺合理啊，为什么还会出现一个大前端呢？由于NodeJs的出现。Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
原来前后端通常是用不同语言不同技术栈实现的。当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样，代码无法复用，非常浪费人力、物力。Node.js出现后，前端工程师不需要依赖于后端程序语言，从而将前后端技术栈统一起来，甚至可以将前后端、安卓移动端和IOS移动端技术栈都统一起来。大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。
大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。
=======================================================
以上介绍了前端、大前端、小前端分别是做什么的。那前端开发需要具备什么样的能力呢？以下是比较全面的前端开发知识图谱。对于初级小前端，熟悉各种浏览器、Web相关的协议和一种编辑器就可以入门了。对于高级大前端，对知识图谱掌握的越多越牛掰！

• 熟悉各种浏览器：Internet Explorer、ChromeFirefox、Safari、OperaEdge、Netscape。
  

2. 熟悉Web相关的协议：HTTP/1.1 、HTTP/2 、WebSocket。
3. 熟练Web三剑客：HTML (HyperText Markup Language)、CSS (Cascading Style Sheets)、JavaScript，Web三剑客的相关概念、标准和编辑工具。
4. 熟练一种编辑器：Sublime Text、WebStorm、Atom[GitHub]、Vim、Emacs、Brackets[GitHub]、Light Table[GitHub]、Visual Studio、Visual Studio Code (Linux & Mac)[GitHub]、Dreamweaver、FrontPage / SharePoint Designer。
5.  熟悉渲染引擎：Trident (IE)、Blink / prev. WebKit (Chrome)、Gecko (Firefox)、WebKit (Safari)、Blink / prev. Presto (Opera)、EdgeHTML (Edge)。
6.  熟悉脚本引擎：JScript (IE8- / ASP)、Chakra (IE9+ / Edge)、V8 (Chrome / Opera / Nodejs / MongoDB) [GitHub]、SpiderMonkey (Firefox)、JavaScriptCore (Safari)。
7.  熟悉运行时相关的概念和实现：Cookie、Local Cache、Session Storage、Local Storage、Components(Extensions、Plugins）、Resources(Images、Icons、Fonts、Audios、Videos）。
8.  熟悉前端代码编译：精简、编译、合并、混淆、图像优化、单元测试
9.  熟悉前端代码编译工具：Grunt [GitHub]、Gulp [GitHub]、Brunch [GitHub]、Yeoman、Broccoli [GitHub]。
10.  熟悉前端调试：Developer Tools、Firebug [GitHub]。
11.  熟练前端基础工具：Node.js [GitHub]、Phantom.js [GitHub]、SpiderMonkey。
12.  了解前端代码质量控制：JSLint [GitHub]、JSHint [GitHub]、jscs [GitHub]、Closure Linter。
13.  熟练包管理工具：npm [GitHub]、Bower [GitHub]。
14.  熟悉前端测试工具：QUnit [GitHub]、Jasmine [GitHub]、Mocha [GitHub]、Selenium GitHub]、WebDriverIO [GitHub]、Protractor、Chai [GitHub]、Sinon.JS [GitHub]、Karma [GitHub]、nodeunit [GitHub]、tape [GitHub]、nightmare [GitHub]；在线工具（Sauce Labs、Browser Stack、Browser Shots、Browserling、Browser Sandbox、Cross Browser Testing、Browsera、SortSite）。
15.  熟悉前端库：基础库（jQuery [GitHub]、Prototype [GitHub]、Zepto [GitHub]、MooTool [GitHub]）、模块化（ES6 Module、CommonJS（webpack [GitHub]、browserify [GitHub]）、AMD（RequireJS[GitHub]）、UMD（umd [GitHub]））
16.  熟悉前端库框架：AngularJS [GitHub]、Backbone [GitHub]、Knockout [GitHub]、Ember [GitHub]、React [GitHub]、polymer [GitHub]、Deft.js [GitHub]、Vue [GitHub]、Riot [GitHub]。
17.  熟悉UI框架：Bootstrap [GitHub]、Semantic UI [GitHub]、Foundation [GitHub]、Material UI [GitHub]、WinJS [GitHub]、Pure [GitHub]、Amaze UI [GitHub]。
18.  熟悉WebSocket：Socket.io [GitHub]、web-socket-js [GitHub]。
19.  熟悉数据可视化：D3 [GitHub]、Echarts [GitHub]、HighCharts [GitHub]、Vis.js [GitHub]、Flot [GitHub]。
20.  熟悉WebGL：Three.js [GitHub]、Babylon.js [GitHub]、Pixi.js [GitHub]。
21.  熟悉CSS3 动画：Animate.css [GitHub]、bounce.js [GitHub]、Effeckt.css [GitHub]、move.js [GitHub]。
22.  了解前端代码流程控制：ES6（Promise、Generator）、ES7（yield、await、async [GitHub]、co [GitHub]、Promise（Bluebird [GitHub]、q [GitHub]、when.js [GitHub]））
23.  熟悉函数式编程：bacon.js [GitHub]、immutable.js [GitHub]、ramda [GitHub]、underscore.js [GitHub]、lodash [GitHub]、ReactiveX [GitHub]。
24.  熟悉手机 UI 框架：jQuery Mobile [GitHub]、Jo [GitHub]、Dojo Mobile、Lungo [GitHub]。
25.  熟悉CSS 预处理器：LESS（LESS [GitHub]、Hat [GitHub]）、Sass(SCSS)（Compass [GitHub]、Bourbon [GitHub]、Gumby [GitHub]）、Stylus（nib [GitHub]）。
26.  熟悉前端未来标准：babel [GitHub]。
27.  熟悉前端模板引擎：Handlebars [GitHub]、Haml [GitHub]、Slim [GitHub]、Jade GitHub]、Ejs、Spacebars、mustache [GitHub]。
28.  熟悉前端统一化：Normalize [GitHub]、Reset。
29.  了解前端最佳实践：SEO、Responsiveness、CDN。
30.  熟悉前端安全：Sandbox、XSS、CORS。
31.  熟悉前端中间语言：CoffeeScript [GitHub]、TypeScript [GitHub]、ClojureScript [GitHub]、JSX (Facebook)。
32.  熟悉大前端移动应用开发：PhoneGap / Cordova [GitHub]、MUI [GitHub]、React Native [GitHub]、Ionic [GitHub]。
33.  熟悉大前端桌面应用开发：Electron [GitHub]、NW.js [GitHub]。
前端需要掌握的技能很多，除了程序编程能力，还需要一定的美学基础。对于初学者，入行前端一定要有耐心，练好HTML、CSS、JavaScript，这Web三剑客的基本功，多仿着做几个做网站，就入门了。只要HTML、CSS、JavaScript，这Web三剑客的基本功扎实，其它前端技术栈熟悉起来就会轻而易举。尤其是要学好JavaScript，JavaScript是一种运行在浏览器中的解释型的编程语言。在当今Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互，你没有其它选择。
=======================================================
了解了前端开发是做什么的、以及前端开发需要具备什么样的能力，那前端开发的职业前景如何呢？
前端开发是所有开发者中需求最大的职业。因为所有的应用，不管是网站、桌面程序、APP、公众号还是小程序，可以不需要后端服务，但都需要前端展示。前端开发是所有开发者中对新手接纳度最高的职业，开发者入行，一般都是从前端学习开始。这是因为前端开发对业务的安稳性影响较小，试错的成本较低。
前端开发，别看知识图谱中的知识点较多，但大多数都相对容易搞定，入门相对容易。WEB前端，作为互联网时代用户体验的掌控者，尤其是随着大前端技术栈的成熟，前端开发有无所不能的趋势。掌握了前端技术，就可以实现任何一个中等规模以下的应用（大规模高并发应用还是需要更多的技术栈支持），前端开发与用户距离最近，也是最锻炼程序员综合能力的开发者职业。
那前端开发有什么不好呢？那就是前线情况是多变的。前端开发面对的需求经常多变，重复性较高；而且前端技术栈的更新比后端技术栈的更新换代要快很多，学习的效率要比后端要更高，需要付出较多时间去面对新的框架和技术栈。一句话，做前端可以内心轻松的累着。
前端开发工程师在一线城市的平均月薪在一万五左右，资深的前端和大前端工程师月薪在两万元以上。薪酬的高低取决于技能、学识和为人处世的综合能力。掌握了前端开发技能是挑战高薪的一种有效的易行途径，记得技能、学识（学历）、为人处世的能力都要全面提升哦。