2017年Web前端技术综述

Web前端应用发展的历史大概经历了三个阶段：第一个阶段使用的是简单的静态页面，第二个阶段使用得是ASP、JSP、PHP等动态脚本语言，第三个阶段是Web2.0阶段，其核心技术是AJAX，同时伴随着SPA的兴起。

SPA vs. MPA

从字面上理解，SPA（单页面应用程序）整个应用只有一个页面，只加载一次Web静态资源，包括HTML+CSS+javascript，在导航过程中不需要重新加载渲染整个页面。而MPA恰恰相反，也就是每个页面都需要独立完整的从后端加载和渲染，早期的网站大多属于MPA。

那么SPA和MPA各自有哪些优缺点呢？

SPA第一次加载页面因为要加载很多静态资源，速度比较慢，但是之后前后端仅仅需要传递纯数据，页面渲染完全由前端完成，既节省了带宽，也提高了渲染速度。MPA则反之，用户的每次导航、提交表单都需要由后端生成一个完整的页面，前后端之间传递了大量重复类似的标记语言文本，通信效率较低。但是由于在首页加载速度上，MPA相对有优势，所以有些应用出于用户体验的考虑，结合server side render和SPA的混合方式。
从系统架构角度考虑，SPA最重要的革新在于实现了前后端的解耦，Server端不必既要考虑业务逻辑又要考虑页面展示，只要聚焦于业务，将前端需要的数据开放出来即可。后端聚焦于数据之后，可以被多种前端所共享，比如Web应用，Mobile应用，甚至是AR/VR等，即所谓的大前端。对于Web前端，因为静态资源都已经加载，导航、渲染等界面逻辑都放在浏览器端，所以可以使用如chrome developer tool或者firebug等工具独立调试。NodeJS的出现，甚至让Web应用开发和业务开发从语言层面进行了完全解耦。
SPA和MPA各有优劣，虽说SPA面临SEO困难，易受XSS攻击等问题，但总体上说，优点多于缺点，问题正在解决，SPA已经成为Web 2.0时代的主流方式。

三驾马车

Web应用万变不离其宗，位于Web技术核心地位的仍旧是HTML、CSS、JavaScript三驾马车。

HTML5提供了更丰富的语义化标签、富媒体支持、离线存储、移动设备支持等特性，支撑了不断涌现的各种业务需求，比如视频网站、网页游戏等。CSS3提供了更加丰富且实用的规范，各种特效、变换等效果增强了网页的表现能力，媒体查询方便了网页适配多种终端。互联网时代，各种应用层出不穷，仅仅依靠HTML和CSS无法满足用户对网页交互和表现能力的需求，JavaScript成为浏览器端最主要的编程语言。

伴随着Web前端业务越来越复杂，开发、调试愈加困难，前端技术在开发维护效率、扩展性、健壮性等内外需求的驱动下出现了各种各样的技术。根据GitHub网站的统计，2017年Javascript相关的pull requests遥遥领先于其他语言，比第二名的Python和第三名的Java的总和还多。人说2017年最火爆的是AI，AI带来Python的空前繁荣，但即便如此又奈我何？

当初，JavaScript之父Brendan Eich借鉴了C语言的语法、Java的内存管理、Scheme语言的函数式编程以及Self的原型链继承思想，仅仅花了10天就设计出这门语言，但仓促的设计导致各种问题饱受诟病，于是有人说JavaScript是一门天生残疾的语言。自1995年诞生之后JavaScript一直缓慢发展，目前最广泛支持的版本是2009年发布的ES5版本，经过了多年的潜心打磨，TC39作为JavaScript官方机构，终于于2015年发布了ES6。ES6做出了很多实质性的升级，比如块变量、class、native promise、模块化等。最近几年，Javascript的版本发布逐渐年度例行化，2016年发布了ES7，2017年发布了ES8，JavaScript正向着标准、高效、简洁、健壮的方向迈进。

前端技术栈

框架是什么？模式是什么？都是不得已而为之的事情。当家里的桌子上堆满了爆米花、手机、内衣、蟑螂药和洗