Web前端的现状与未来

Web前端的发展历史

Web前端的由来

1991年8月，Tim Berners-Lee发布了第一个简单的，基于文本，包含几个链接的网站。但此后的网站发展一直很缓慢，这是因为早期的网页完全由单调地文本和图片所构成，对人们而言，毫无吸引力。

到了2005年，互联网开始进入Web2.0时代，由于AJAX技术的出现，各种类似桌面软件的Web应用开始大量涌现。由此，网站建设发生了巨大的变革。与此同时，“前端”这个词开始在国内逐渐流行开来。

Web前端简介

前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。相反存储用户信息、业务数据的服务端通常称之为后端。

前端这个词是从网页制作演变过来的，名称上有明显时代特征。在Web 1.0时代，网站基本上都是静态的，加上用户使用网站以浏览为主。开发方式基本上前端table布局，后端ASP为主。在Web 2.0时代，随着HTML、CSS的规范得以标准化，此时网站前端开始改用DIV+CSS布局，后端使用ASP、ASP.NET、JAVA、PHP等语言。

到现在，前端技术已经发展到HTML5、CSS3、EcmaScript6。前后端的协作模式也开始采用前后端分离模式，相对于传统的开发方式，前后端分离的优势在于前后端团队可以并行开发，两端业务独立升级且不会为对方带来额外影响。

Web前端的技术

Web三剑客：HTML、CSS、JavaScript。

我将他们三个之间的关系比喻为：只有HTML的网站是毛坯房，加上CSS就是精装修，再加上JavaScript那就是带有智能家居系统的豪宅。

HTML（HyperText Markup Language）是超文本标记语言，最初的HTML是Tim Berners-Lee为规范科研文档格式制定的，用来书写网页结构。我们常说的HTML5（H5）于2008年发布，泛指下一代HTML规范（不会有H6、H7、H8……）。

CSS（Cascading Style Sheets）是层叠样式表，负责控制页面表现。我们常说的CSS3于2001年完成了工作草案，同样泛指下一代CSS规范（不会有CSS4、CSS5……）。

JavaScript官方名称是EcmaScript，负责控制页面交互，比如点击、轮播之类的。目前最新版本是第6版，简称ES6。同样ES6也代表下一代EcmaScript规范。

ECMAScript 和 JavaScript 的关系

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

摘自 阮一峰ES6入门 - ECMAScript-和-JavaScript-的关系

Web前端开发的发展方向

业内前端开发人员基本有以下工作方向，方向不分好坏，只是业务不同而已，技术的本质是要为业务服务。以下方向在实际工作中会出现夹杂的情况，都是正常现象，越小地公司夹杂越严重。

界面展现用户体验与可访问方向

该方向典型产品如淘宝网、京东网、各大公司官网等。

这也是大多数Web前端工程师从事的方向，俗称“页面仔”。业内的大多数最佳实践基本来源于此：如Vue、React、Angular等JS框架；如BootStrap、 Element UI、Ant Design等UI框架；如Nodejs、Webpack、Glup等脚手架工具。

好看是产品的最低要求、好看加好用才是真正意义上的产品。对产品糟糕的第一印象，会流失掉大部分客户，这就是为什么大公司不遗余力地招聘优秀前端的原因。

可访问方向又称为无障碍方向，这是在国内兴起比较晚的技术。主要是服务于色盲、色弱或视弱的用户。

偏后的js/nodejs方向

该方向典型产品如Express、第三方NPM包等。

众所周知，由于现在SPA模式流行，前后端分离的网页是没办法进行SEO的，这时候只能通过SSR完成。

前端常用的脚手架如Webpack、Glup等，常用的NPM包都是这个方向的同学来完成的。

audio/video音视频富媒体方向

该方向有如优酷、爱奇艺、B站、网易云等服务用户的产品，也有腾讯云、阿里云等服务开发者的产品，主要用来开发直播之类的功能。

该方向主要提供富媒体解决方案。业内比较著名的框架有Video.js，Flv.js。

SVG/Canvas/WebGL动效创意与数据可视化方向

该方向主要有Google Charts、ECharts、Highcharts、D3等框架。

数据可视化方向最常用的场景有BI（Business Intelligence，商业智能）方向、Dashboard方向等，以一个直观的形式展示数据，用来辅助决策的制定。

工具建设文档管理内部建站的前端运维方向

该方向主要用GitBook、Github Pages、Hexo等框架。

Web前端的技能栈

欲成为专业的前端工程师，以下技能栈必不可少。不要被吓到，工作过程中会慢慢接触到的。这是每一名优秀前端工程师的必由之路。

大图地址：https://image-static.segmentfault.com/262/018/2620180636-5a4b946c2426b

Web前端的未来

Web前端的未来发展

主要体现在前端新领域的出现。除了目前浏览器、服务器、移动端上的应用开发技术变革和探索外，前端也出现新的应用场景。比如VR、物联网Web化、Web人工智能等。前端不仅自身发展快，推广使用也极其迅速，例如移动互联网Web的普及也就两三年时间。 近几年，Web VR和物联网Web化的概念渐渐出现，目前物联网Web化的草案已经形成；Web支付的API正在实施，Chrome 81将支持Web支付。

Web前端的未来值得期待

现在的Web前端开发越来越注重用户体验。无论底层技术的支持上，还是跨平台兼容的需求上，都为迎来前端的繁荣局面做好了准备。前端工程师的位置会越来越重要，相信 Web前端开发的明天会更好。

前端不仅可以开发网页，在跨平台应用上仍有不俗的表现。如Facebook开源的React Native跨平台开发框架，一次编写即可生成iOS、Android原生应用；随着PWA技术的出现，web应用不再受网络环境束缚。

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。

——Atwood定律（Jeff Atwood在2007年提出）

我是如何看待Web前端开发一职的

前端是集程序员的严谨与设计师的艺术融合的一个职位，是离目标用户最近的开发岗位，是产品与用户之间的桥梁。

欲做好前端一职，能够与项目组中各个角色正常沟通，要懂一些设计的知识，以能够把握到设计师的细节；要懂一些交互的知识，以能够把握到产品经理的体验；要懂一些后端的知识，以能够与后端同学快速排查问题……

Web前端方向那么多，找准适合自己的最重要，一专多精才符合市场需求。

以上，感谢阅读。