这些年，前端开发已然今非昔比
发表于2016-03-24
多年前，有知名企业前端前辈如是说：前端是做什么的？在一个网页上你看到的就是前端工程师做的。也有人说：前端是设计师在UED最亲密的合作伙伴。很显然，这些概念放之今日都显得太片面。
诚然，让时光倒流几年，回到div+css刚刚统治网页设计前端领域的时代，将设计师制作的设计稿用html+css的形式高质量的还原，并最终呈现给互联网用户，这几乎就是前端工程师的全部。如果还能用Javascript（后简称：JS）给页面增加一些动画或其他交互效果（如：无缝滚动、选项卡等），那简直堪称大神了。所以那个年代，前端开发者并没有大放异彩的条件，地位显然还很低，而那时IE6还是事实上得标准。
随着历史的发展，时逢谷歌Gmail网页版邮件服务问世，Web富应用时代逐渐到来。Gmail使用的异步刷新（Ajax）模式，为网页前端开发开启了新纪元。Ajax技术可以让同一个网页中的内容在互不影响的情况下分批次的在必要的时候进行更新。这极大程度上降低了网页白屏时间，在用户浏览的同时进行内容更新而不刷新页面，保证了用户访问的流畅性，降低了用户等待成本。因此，这一时期Ajax被大范围应用到网页应用中，而前端工程师也顺应潮流，纷纷投身JS异步编程。Ajax的使用让许多企业尝到了甜头，前端工程师的地位逐渐得到了提升，很多开发者逐渐在这一领域崭露头角，各种异步框架（Prototype、jQuery等），各种异步实现方案（页面懒加载、延迟加载等）层出不穷。
然而，Ajax激起的浪潮远不止于此。随着Ajax技术日趋成熟，越来越多的前端开发者已经深入了解了它。开发者们发现传统Web技术，由于页面结构和数据的组装都在服务端完成，而在请求响应过程中通过网络传输的是大段完整的html片段，甚至整个页面。这给服务器带来了很大的负担，也浪费了很多的带宽资源，也间接增加了用户等待成本，并且在后端模版（例如：针对PHP的Smarty、面向JAVA的Velocity等）的复用上会存在麻烦。为了解决这些问题，优化体验，数据与结构分离，前后端分离的呼声逐渐高涨。服务端只负责数据的计算与存取，而数据在网络中以JSON格式的纯文本字符串的形式传递，大部分页面结构的拼装工作由前端完成。这样的技术方案优势是很明显的：前后端职责明确，相互独立，工作上几乎互不干扰；单个请求传输内容上减少了大量的html片段，只保留数据，并且JSON对前后端友好，减少带宽浪费；结构与样式完全由前端自己控制，降低前后端耦合等等！在这样形势的驱动下，前端工程师们也交出了傲人的成绩，诸多优秀的前端模版引擎（Mustache、artTemplate、xTemplate等）应运而生。当然，这也给新时代的前端工程师们提出了更高的要求：了解页面渲染原理、HTTP工作原理、算法及数据结构等等。无可厚非，此时的前端工程师已然不可或缺。
任何事物都具备两面性，前端开发日趋重要的同时也伴随着诸多负面问题。大量的前端业务逻辑大大增加了前端JS代码量，前端代码的模块化、按需加载、依赖管理势在必行。大量的业务逻辑也意味着大量前端bug的降临，新旧版本代码的独立性、版本升级与代码回滚问题必须重视。一时间sea.js、require.js等模块管理库风生水起，前端架构概念逐渐成型，svn、git等版本控制工具也渐渐进入前端领域，前端已不再是单纯的页面仔，不再是单纯的html、css和js。
前端代码量的剧增，一方面单个js文件代码量过多，导致代码维护成本增加，问题定位难度增大，给开发调试造成了一定困难。另一方面同样伴随着网络传输时间长的问题，使页面加载性能受损。因此，开发者们不得不将文件拆分成多个文件，充分利用浏览器的并发能力以节省这一成本，也让那些可复用的公共资源得以独立管理和维护。但是，文件越拆越多终究让页面的HTTP请求数量给页面性能带来了压力。静态资源的压缩、请求的合并被推上了前端舞台。从早期的YUI Compressor，到如今基于Node.js的grunt、gulp等，不断推陈出新，静态资源压缩也已经历了几世变化。而在请求合并方面，恐怕由阿里系推出的nginx-concat模块当仁不让成为了最优选择。而这一切也要求我们前端开发工程师来完成。
正当开发者们忙于处理如何减少HTTP请求数，如何提升用户体验的时候， Web前端开发工程师又迎来了新的挑战。在移动互联网行业如日中天的今天，如何实现离线存储，理想状态是在没有网络的环境中也能让我们的WebApp能够正常的运作，当然至少要能保证部分内容能够正常访问。这兴许是在传统互联网中无法想象的事情，但是随着HTML5标准的一步步确定，现代互联网前端拥有了localStorage、sessionStorage等本地存储技术，甚至拥有了建立本地数据库，通过JS调用API完成CURD操作的能力，这一切让离线存储成为了可能，但这也意味着我们的前端工程师需要掌握更多更复杂的技能。
行文至此，我们看到了JS在前端开发中由最初的跑龙套，到现在大放异彩的主角光环。当然这远远不够，新近推出的ES2015标准（包括Promise+、Generator、Set、Map等等）为JS的未来发展开拓了广阔的空间。不仅如此，在表现（css）方面，前端的变化同样是一日千里。从最初的固定布局，到后来的栅格系统，再到自适应、响应式布局，一步一步见证着css设计的日渐强大。为了更加灵活简便的进行css设计，各种css预处理技术（LESS、SASS、Stylus）日渐流行，从此前端开发工程师也可以像写程序一样编写css样式了。
此外，css3的出现，让网页更小更美。圆角、阴影、背景渐变，以及font-face配合网页图标字体，让网页中图标资源的使用得到了有效控制。过渡、动画，带给网页飞一般的流畅体验，将界面层面的动画交给css实现，让JS可以更专注的完成业务逻辑处理。其良好用户体验却不兼容陈旧浏览器（例如：IE6等）的特性，也间接成为了陈旧浏览器淡出舞台的催化剂。
最近刚了解到一个“合久必分，分久必合”的前端问题。记得以前为了高效利用浏览器并发，许多大公司选择提供多个图片资源域名（诸如：img1.alicdn.com、img2.alicdn.com等），但是，如今移动Web肆虐，无线性能优化又提出了“域名收敛”的概念，现在淘宝的图片似乎只剩下了gw.alicdn.com一个图片域名，这也许归功于HTTPDNS。谁知道多年以后又会是什么样。
何止这些，当今的前端开发工程师们可谓无所不能。虽然Node.js尚不算前端必备技能，但却也成为每场前端面试必问的话题。虽然PHP/JAVA等属于后端编程语言，但却在每一份前端招聘信息中总会加上一条“至少熟悉一门后端语言（Node.js/PHP/JAVA等）”。此外，还有诸如Angular、React等新兴新型前端框架各领风骚。所以，越来越多的高级前端开发工程师在逐渐演变成全栈工程师，然而我们也不能忽视一些后端开发人员转做前端从而踏上全栈之路的事实。
最后，我还想说说时下热门话题：Google高级测试工程师——李世乭与谷歌智能机器人AlphaGo的围棋人机大战正在如火如荼的进行。然而，李世乭的落后也证明人工智能必将在未来掀起波涛。那么未来的前端如何与人工智能结合，这值得我们思考。