【近几年前端技术盘点以及 2016 年技术发展方向】
    Friday, July 8, 2016
    8:01 PM

    |

    | | —- |

    | Tags: #微博 |

    计算机生成了可选文字:
    IT程序猿
    07/08/2016
    【近几年前端技术盘点以及 2016 年技术发展方向】Web 发展了几十个春秋,风起云涌,千变万化。我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走。http://t.cn/R4OMxV7(来自: 小胡子哥 )
    ![计算机生成了可选文字: 本 文 来 自 : 小 战 子 哥 版 权 归 届 原 作 者 近 几 年 前 端 技 术 盘 点 以 及 2 6 年 技 术 发 展 方 向 @仃 程 厚 猿 & & 酷 勤 网 制 作 web 发 展 了 几 十 个 春 秋 , 风 起 云 涌 , 千 变 万 化 。 我 很 庆 幸 己 没 有 完 整 地 历 过 这 些 年 头 , 而 是 站 在 前 人 的 膀 上 行 走 。 web 技 术 发 展 的 速 度 让 人 感 觉 那 几 乎 不 是 继 承 式 的 迭 代 , 而 是 一 次 又 一 次 的 变 革 , 一 次 又 一 次 的 创 造 。 这 几 年 的 前 端 , 更 为 之 甚 ! ? 我 要 说 话 我 从 12 年 底 开 始 接 触 前 端 , 12 年 之 前 的 前 端 发 展 情 兄 只 能 从 上 一 辈 的 笔 触 中 领 会 。 本 文 会 盘 点 从 09 年 开 始 到 巧 年 间 前 端 技 术 的 革 新 , 同 时 也 会 从 多 个 度 , 解 读 近 几 年 前 端 技 术 发 展 的 君 在 因 素 , 其 中 穿 届 了 若 干 对 前 端 演 进 的 拙 见 , 唯 免 会 有 错 误 和 , 望 读 者 可 以 补 充 和 斧 正 。 ? 我 要 说 话 那 些 年 , 一 度 追 捧 , 一 度 放 弃 下 面 , 花 一 些 篇 幅 简 单 回 顾 下 09 年 到 巧 年 前 端 的 发 展 历 程 ( Update 、 2016 / 01 / 03 , 感谢@法海 师 兄 对 文 章 部 分 内 容 的 校 , 很 多 技 术 出 觋 的 时 间 有 所 偏 差 , 但 不 影 响 阅 读 ) 。 ? 我 要 说 话 09 年 , 基 础 类 库 完 善 , 寻 求 突 破 09 年 之 前 , JavaScript 还 处 于 对 身 语 言 的 完 善 过 程 中 而 到 了 09 年 , JavaScript 类 库 已 颇 为 成 等 都 已 发 布 了 好 几 个 熟 , jQuery/Prot0type//DOJ0 stable 版 本 , 各 大 类 库 也 是 相 互 吸 收 优 点 , 不 断 完 善 并 提 高 身 性 能 , 然 而 功 能 上 已 没 有 太 多 增 加 的 头 。 部 分 框 架 开 始 了 思 想 上 的 转 变 , 更 加 注 重 前 端 开 发 的 组 织 和 结 构 条 理 性 强 了 很 多 , 如 YUI 等 。 ? 我 要 说 话 从 ECMAScript 范 的 争 执 , 开 启 了 测 跪 器 引 擎 大 战 , 各 大 厂 商 也 趁 机 爪 分 [E 份 额 , Chrome 和 hrefox 在 这 场 战 役 中 取 得 大 胜 , 1/8 也 敲 响 了 前 端 的 大 门 。 为 了 迎 合 市 场 的 激 烈 竟 争 , [E 开 始 了 廾 级 之 旅 , 09 年 初 发 布 [E8 全 面 兼 容 CSS2.10 ? 我 要 说 话 而 此 时 , Node.js 和 3G Mobile 这 叻 口 巨 兽 开 始 浮 出 水 面 , Web 标 准 也 开 始 向 HTML5 、 ECMAScnpt5.O 靠 胧 。 ? 我 要 说 话 10 年 , 看 齐 标 准 , 关 注 web 性 能 无 疑 问 , 这 一 年 , 各 大 巨 头 都 看 清 了 HTML5 是 web 发 展 的 耒 来 , 在 保 留 原 来 前 端 技 术 的 状 态 下 , 都 簇 着 拉 扯 HTML5 的 裙 摆 富 客 F 端 应 也 在 这 一 年 蓬 勃 生 长 , ExtJS/Dojo 身 变 为 企 业 级 框 架 , 各 类 组 件 化 概 念 和 产 品 如 约 而 至 。 ? 我 要 说 话 延 续 着 09 年 的 变 化 , 10 年 的 前 端 显 得 颇 为 沉 寂 , 然 而 在 标 准 的 运 和 睢 动 上 , 各 大 厂 商 也 是 十 分 卖 力 。 [E 9 出 来 了 顸 览 第 三 版 , IPhone 的 safari 已 能 够 支 恃 众 多 HTML5 内 容 Canvas/Video/Audio/Geolocation/Storage/Applicati01 Cache/Web SQL Database 等 。 ? 我 要 说 话 WBC 宣 布 成 立 Web 性 能 工 作 组 , Google 和 Mozilla 纷 纷 睢 出 应 商 店 , 测 览 器 调 试 工 具 也 丰 富 了 起 来 , 人 们 开 始 更 多 地 关 注 开 发 体 验 和 性 能 问 题 。 ? 我 要 说 话 凵 年 , HTML5 扛 大 旗 , Flash 堪 忧 2011 年 HTML5 的 技 术 发 展 和 推 广 都 向 前 迈 进 了 一 大 步 语 义 明 确 的 标 签 体 系 、 简 ; 吉 明 了 的 富 媒 体 支 恃 本 地 数 据 的 储 存 技 术 、 canvas 等 等 各 类 技 术 被 广 泛 应 。 这 一 年 , 很 多 web 开 发 者 也 面 临 一 项 技 术 的 抉 降 , HTML5 or Flash ? 从 Flash Player 11 、 1 开 始 , Adobe 不 再 继 续 开 发 面 向 移 动 设 备 测 跪 器 的 Flash 届 件 , 积 极 投 身 于 HTML5 , 这 意 味 着 Flash 技 术 的 凋 零 。 ? 我 要 说 话 这 一 年 , HTML5 游 戏 火 爆 到 了 一 个 高 潮 , 移 动 端 开 发 工 具 和 调 试 工 具 也 日 益 成 熟 。 jQuery 已 成 为 大 小 公 司 日 常 开 发 的 标 配 , 成 干 上 万 的 JQ 届 件 让 网 页 开 发 变 得 尤 为 轻 松 而 随 之 而 来 的 也 是 页 面 的 臃 肿 和 性 能 调 优 的 深 入 探 索 。 ? 我 要 说 话 Node.js 已 1 肖 然 崛 起 在 glthub 上 的 访 问 量 已 超 过 了 Ralls , 国 内 的 云 应 开 始 尝 试 使 Node.Js , Node.js 相 关 工 具 也 纷 纷 出 来 。 ? 我 要 说 话 12 年 , 响 应 式 开 发 , 工 程 化 推 进 随 着 硬 件 技 术 的 发 展 , 各 手 机 厂 商 又 开 始 骚 动 起 来 , 为 了 占 有 更 多 的 市 场 , 不 断 提 高 产 品 的 性 价 比 , 体 也 得 到 了 不 断 的 优 化 。 借 着 先 前 叻 年 HTML5 刮 起 的 东 风 , 移 动 端 上 的 web 开 发 也 颥 抖 了 起 来 。 移 动 端 的 开 发 挑 战 不 亚 于 PC 上 对 多 个 测 览 器 的 支 恃 , 这 一 年 , 萌 生 了 众 多 移 动 端 框 架 , 如 Sencha Touch/Zeptojs/JQ Mobile 等 , 相 对 PC 端 框 架 , 它 们 更 加 轻 便 。 ? 我 要 说 话 而 移 动 端 的 崛 起 带 来 了 许 多 终 端 开 发 难 题 : 多 终 端 适 配 多 分 辨 率 适 配 , 远 程 调 试 等 等 , 而 随 着 这 些 唯 题 一 个 个 被 解 决 , 移 动 端 生 长 的 头 变 得 更 加 强 盛 。 此 时 Twitter 也 惟 出 了 Bootstrap , 这 个 蔔 端 开 发 工 具 包 不 仅 方 便 了 前 端 也 方 便 了 后 端 同 学 它 的 出 现 让 快 速 建 站 更 加 简 单 ? 我 要 说 话 程 思 想 的 切 换 , 迎 来 了 CoffeeScript 和 TypeScript 这 呐 个 顸 处 理 语 言 的 出 觋 又 为 JavaScript 引 来 了 不 少 其 他 方 向 转 型 过 来 的 开 发 者 」 avascript 的 兄 弟 Node.js , 也 在 命 令 行 领 域 开 拓 了 一 片 不 小 的 疆 域 , 县 至 有 动 Perl 和 Ruby 地 位 的 趋 势 。 ? 我 要 说 话 在 前 端 工 程 化 上 , 几 个 派 系 相 互 争 斗 , 产 出 了 AMD 、 CMD 、 UMD 等 范 , 也 衍 生 了 SeaJS 、 Require 」 S 等 忄 莫 块 化 工 具 。 前 端 在 这 一 年 很 有 跳 跃 感 。 ? 我 要 说 话 13 年 , 爆 发 式 增 长 , 百 花 齐 放 范 和 标 准 上 有 不 少 产 出 。 web Components 的 出 觋 前 端 开 发 开 辟 了 新 思 路 ; WebDriver 范 的 出 来 推 动 了 自 动 化 测 试 的 进 程 , ECMAScript 6 的 范 草 案 落 地 , we ba p p 工 作 小 组 在 这 一 年 也 是 相 当 活 跃 。 ? 我 要 说 话 Chrome 测 跪 器 在 这 一 年 也 有 了 很 大 的 突 破 , 开 始 支 恃 SPDY, 使 BlinkKR 代 webkt 作 为 Chromium 的 新 渲 染 引 擎 , Chrome DevTools 的 调 试 体 验 大 幅 度 提 升 。 这 一 年 中 , Chrome 连 同 其 他 测 览 器 厂 商 快 速 惟 动 了 各 项 草 案 规 范 的 实 现 。 7 我 要 说 话 言 能 力 上 依 旧 在 增 强 , 并 且 从 JS 开 始 扩 散 到 CSS , LESS 、 SASS 和 Stylus 等 CSS 顸 处 理 语 言 开 始 走 俏 , we b 开 发 变 得 更 加 紧 凑 。 ? 我 要 说 话 而 在 无 线 端 , 应 不 再 局 限 于 Webapp , 由 于 流 畅 度 、 性 能 等 方 面 不 能 满 足 F 体 的 需 求 , 各 大 公 司 开 始 转 向 Native 方 向 的 研 究 , 进 而 出 觋 了 HybridQ PhoneGap 的 繁 菜 , 它 们 为 巧 调 了 提 供 更 多 的 设 备 APLO ? 我 要 说 话 Node.js 大 放 异 彩 很 多 公 司 在 生 产 环 境 中 使 Node.js 同 时 也 出 觋 了 诸 如 Express 、 Meteor 等 小 巧 的 快 速 褡 建 Node.Js server 的 应 框 架 。 ? 我 要 说 话 各 测 跪 器 的 调 试 也 是 种 类 繁 多 、 功 能 丰 富 , PhantomJS 在 动 化 测 试 上 开 始 取 代 selenium , 出 现 了 众 多 的 远 程 调 试 方 案 和 工 具 。 ? 我 要 说 话 前 端 工 程 化 开 始 普 及 , 各 公 司 开 始 推 出 自 己 的 前 端 集 成 开 发 解 决 方 案 。 ? 我 要 说 话 14 年 , 移 动 端 的 崛 起 , HTML5 和 ES6 落 地 HTML5 正 式 定 稿 , 这 意 味 着 , web page 正 式 演 变 为 web application, ES6 华 丽 丽 走 进 前 端 , 走 的 很 重 , 它 的 等 特 性 已 完 全 让 这 门 语 言 具 备 了 开 发 大 型 Module/Class 应 的 能 力 。 ? 我 要 说 话 大 而 厚 的 基 础 库 难 以 满 足 灵 活 场 景 , Mobile 要 求 极 致 体 验 , MV 库 浦 眷 而 来 , 如 vue/angular/knockout 等 我 要 说 话 Web Components 跨 终 端 组 件 快 速 发 展 , 移 动 端 开 发 迎 来 一 次 升 华 。 Node.js 前 后 端 分 离 的 流 行 , 中 间 层 的 出 觋 改 变 了 前 后 端 的 合 作 忄 莫 式 。 2014 是 颠 式 的 一 年 , 前 端 发 展 在 这 一 年 开 始 形 成 了 一 个 短 皙 的 喼 定 格 局 。 ? 我 要 说 话 巧 年 , 观 念 的 转 变 , 步 入 前 端 工 业 化 生 产 今 年 格 外 引 人 注 目 的 框 架 是 , 类 Reacto Facebook 在 ReactJs Conf 2015 大 会 上 推 出 了 基 于 JavaScript 的 开 源 框 架 React Native , 它 结 合 了 Web 应 和 Native 应 的 优 , 可 以 使 」 avaScnpt 来 开 发 IOS 和 Android 原 生 应 。 在 」 avaScript 中 React 抽 象 操 作 系 统 原 生 的 UI 组 件 , 代 替 DOM 元 素 来 渲 染 等 。 敲 一 次 代 码 能 够 运 行 在 多 个 平 台 上 , 其 优 可 见 一 斑 。 除 了 React , 还 有 手 机 淘 宝 睢 出 的 weex 框 架 , 它 吸 收 了 vue.js 的 编 程 精 华 编 程 风 格 更 加 简 约 。 ? 我 要 说 话 在 众 多 构 建 工 具 中 , 如 今 潇 洒 存 活 的 并 不 多 。 体 验 完 grunt 和 browserify 后 , gulp 顺 而 至 , 尔 后 又 出 现 了 等 。 而 包 管 理 工 具 , 历 了 webpack 、 jspm components 、 bower 、 spm 后 , npm 开 始 芏 导 整 个 市 场 。 ? 我 要 说 话 Node js 的 应 已 浦 天 盖 地 , 各 大 公 司 前 端 都 吧 Nodejs 作 为 分 离 前 后 端 的 主 要 手 段 , 并 且 在 测 试 、 监 腔 等 方 面 沉 定 了 大 量 内 容 。 不 过 , 这 个 市 场 是 很 苛 刻 的 , Nodejs 的 性 能 唯 以 达 到 C/C + + 的 水 平 , 那 么 接 下 来 要 做 的 就 是 要 提 升 性 能 至 少 得 唼 近 C/C + + 。 ? 我 要 说 话 @法海 师 兄 注 : 对 时 间 点 的 总 结 是 , 其 实 很 多 技 术 方 案 很 早 就 出 现 了 , 只 不 过 没 有 大 忄 莫 应 , 因 此 , 对 于 上 文 中 时 间 点 的 谬 误 , 你 可 以 将 语 甸 从 「 xxx 出 觋 了 ] 改 成 rxxx 得 到 广 泛 应 ] 。 其 实 我 发 觋 , 问 题 在 于 一 个 技 术 领 域 的 新 起 和 发 展 并 不 是 一 年 内 能 完 成 的 , 一 个 技 术 方 案 的 出 觋 和 广 泛 应 也 不 是 一 年 内 能 落 地 的 , 所 以 执 着 于 以 [ 年 ] 为 时 间 点 来 编 史 , 会 画 地 为 牢 。 ? 我 要 说 话 web 规 范 标 准 最 开 始 , 我 们 看 到 的 JavaScript 还 R 是 一 个 简 单 的 脚 本 语 配 合 着 AJAX , 在 网 页 上 翻 腾 了 好 几 个 年 头 。 随 着 互 联 网 趋 越 来 越 明 显 , 互 联 网 业 务 量 和 业 务 复 杂 度 不 断 堆 加 很 多 网 页 变 得 相 当 复 杂 , 如 让 我 们 震 惊 了 好 一 会 几 的 Gmall , 交 互 复 杂 , 体 验 优 良 。 为 了 更 好 的 多 人 协 作 , 代 码 中 的 Utils 库 越 来 越 大 , 在 这 些 库 中 , 基 础 部 分 更 多 的 是 对 JavaScript 语 言 本 身 的 拓 展 , 比 如 String 力 repeat 函 数 , 再 加 一 个 trim 函 数 , 再 加 一 个 endWith 函 数 等 等 。 ? 我 要 说 话 复 杂 的 业 务 中 会 常 看 到 一 层 又 一 层 的 回 调 处 理 , 回 调 的 嵌 套 让 代 码 的 可 读 性 变 的 很 差 而 且 很 唯 将 多 个 异 步 并 行 处 理 为 了 改 变 这 种 程 范 式 , 我 们 做 了 很 多 的 思 考 , 使 事 件 监 听 , 使 各 种 手 段 拉 直 回 调 平 坦 地 调 。 ? 我 要 说 话 悒 悒 的 , 如 果 你 在 关 注 WBC 小 组 的 动 向 , 会 发 觋 , 那 些 被 认 可 的 , 并 且 被 广 泛 重 复 定 义 的 东 西 , 都 被 纳 入 了 标 准 。 最 开始 的 jQuery/prototype , 前 者 主 要 是 对 氵 刘 览 器 做 兼 容 处 理 让 开 发 者 不 再 吧 精 力 放 到 斑 跪 器 的 差 异 上 , 后 者 是 对 言 本 身 的 拓 展 , 对 」 avascnpt 各 种 类 型 做 拓 展 , 并 且 提 供 了 一 套 拓 展 任 何 对 象 的 功 能 集 。 而 觋 在 的 开 发 , 我 们 很 大 程 度 上 不 再 依 托 这 些 类 库 。 规 范 和 标 准 已 吧 这 些 差 异 都 统 一 了 , String 中 带 了 includes/startsWlth/endsWith/repeat/padStart/padEr 等 函 数 , Array 带 了 from/forEach/of/keys/values/find/findndex 函 数 、 一 ? 我 要 说 话 范 的 标 准 是 为 了 让 开 发 者 得 到 更 好 的 编 程 体 验 , 编 程 不 是 目 标 , 目 标 是 将 程 生 产 力 转 化 成 实 际 效 益 , 越 少 的 迴 碍 对 开 发 者 越 有 利 。 各 浏 跪 器 厂 商 当 然 也 认 识 到 了 这 一 点 , 他 们 不 断 地 提 升 己 产 品 的 体 验 , 将 标 准 中 的 新 特 性 都 融 合 进 去 , 比 如 ES6 中 的 Promise/Generator/Class/M0dule 等 等 。 在 这 些 内 容 普 及 之 前 , 我 们 不 需 要 加 入 jQuery/prototype 这 些 [ 不 纯 粹 ] 的 午 西 , 而 是 添 加 叻 个 shim*Q polyfill , 如 es5-shim , htm15shiv 等 等 待 到 山 花 烂 漫 时 , 再 轻 松 掉 这 些 补 丁 程 序 。 ? 我 要 说 话 这 叻 年 工 程 化 很 热 , WBC 小 组 也 看 到 了 , 这 就 是 市 场 的 需 求 , 为 了 完 成 一 个 大 型 应 的 程 , 薪 必 须 忄 莫 块 化 、 组 件 化 , 于 是 在 范 中 也 出 觋 了 Module & Module Loader Node.js 的 到 来 , 让 很 多 前 端 工 程 师 开 始 唼 触 数 据 库 操 作 面 对 巨 量 的 异 步 , 我 们 忍 气 吞 声 写 了 无 数 的 回 调 地 獄 , 尽 管 使 了 很 多 Promise 相 关 的 操 作 , 程 序 结 构 依 然 松 散 唯 以 阅 读 , 于 是 范 中 也 开 始 出 觋 了 async/awalt 等 对 的 上 层 装 。 文 字 已 不 能 满 足 当 代 人 的 沟 通 Generator 需 求 , 音 视 频 等 富 媒 体 传 输 击 进 了 我 们 的 生 活 , 于 是 规 范 中 也 出 来 了 WebRTC/WebAudio 等 规 范 。 ? 我 要 说 话 只 要 规 范 出 来 了 , 后 续 市 面 上 就 会 根 据 范 来 实 觋 一 套 shiv , 这 些 shiv 提 供 了 同 样 的 API 提 供 了 同 样 的 编 程 体 验 。 当 氵 刘 跪 器 我 进 化 完 成 之 后 , 这 些 shiv 也 将 成 为 历 史 , 被 开 发 者 遗 弃 在 代 码 的 注 释 之 中 。 这 些 都 是 范 和 标 准 的 魅 力 , 它 的 存 在 , 就 是 让 开 发 者 吧 精 力 投 入 到 自 己 的 业 务 之 中 编 程 和 范 式 的 工 作 交 给 它 。 ? 我 要 说 话 在 这 里 可 以 看 到 , WBC 各 个 小 组 最 近 都 在 干 啥 。 标 准 不 能 括 一 切 。 ? 我 要 说 话 生 态 的 自 我 完 善 自 我 拓 展 技 术 的 更 迭 过 于 频 繁 , 我 们 能 够 晰 地 看 到 , 很 多 人 还 在 更 迭 前 一 波 县 至 是 前 好 几 波 的 产 品 。 ? 我 要 说 话 当 年 的 [E6 , 在 战 场 上 鏖 战 了 10 多 个 年 头 , 依 然 屹 立 不 到 而 觋 在 它 在 市 面 上 依 然 有 自 分 之 一 左 右 的 占 有 率 , 这 种 小 强 精 神 不 得 不 让 人 肃 然 起 敬 。 “ R 要 F 在 , 我 们 得 追 随 “ , 这 可 能 是 很 多 公 司 的 服 务 理 念 , 因 为 F 就 是 灣 在 的 利 润 。 正 是 因 为 这 种 服 务 理 念 , 成 就 了 [E6 一 个 又 一 个 的 5 年 ! 然 而 低 本 版 的 [ E 已 不 仅 仅 是 被 前 端 从 业 人 员 抵 制 和 排 斥 了 , 网 络 安 全 、 网 络 运 维 、 QA 等 等 , 各 个 技 术 岗 位 的 人 员 都 开 始 对 他 不 屑 , 它 的 存 在 对 工 作 效 率 、 对 安 全 、 对 很 多 方 面 产 生 了 极 为 不 良 的 影 响 县 至 影 响 到 一 些 核 心 内 容 的 推 广 , 所 以 2016 将 是 低 版 本 [E 消 亡 的 一 年 , 我 也 呼 吁 业 界 所 有 的 朋 友 举 起 义 旗 反 抗 起 来 ! ? 我 要 说 话 庆 幸 的 是 也 有 人 开 始 吃 螃 蟹 了 。 从 支 付 宝 到 天 猫 到 淘 宝 阝 可 里 巴 巴 在 很 多 业 务 上 已 芏 ( béi ) 动 ( b 囗 尜 囗 囗 囗 融 囗 E6 和 [E7 的 支 恃 , 县 至 在 统 一 接 入 层 直 接 做 了 302 跳 转 , 提 亍 F 更 新 斑 览 器 或 者 引 导 流 量 到 无 线 端 。 这 是 一 个 好 的 开 始 , 我 们 期 望 这 也 是 业 界 达 成 廿 识 的 开 始 ! ? 我 要 说 话 HTTP 协 议 , 从 1 、 0 快 速 过 度 到 了 1 、 1 , 整 个 互 联 网 的 上 层 建 筑 变 的 十 分 隐 固 。 当 然 , 我 也 了 解 到 依 然 有 很 多 产 品 还 是 保 時 了 1 0 的 状 态 , 据 说 电 信 公 司 的 很 多 产 品 就 是 使 HTTP/I 、 0 进 行 通 讯 , 这 无 疑 让 人 惊 愕 。 为 了 追 求 更 高 的 效 率 , 减 少 网 络 传 输 中 的 无 效 流 量 , WBC 工 作 组 对 HTTP 协 议 也 做 了 重 新 的 定 义 , SPDY 是 13 年 比 较 火 热 的 一 个 话 题 , Firefox 和 Chrome 都 陆 续 开 始 支 恃 SPDY , 后 来 在 SPDY 的 基 础 上 做 了 升 级 , 正 式 定 义 为 HTTP/2 、 0 , 它 的 一 个 很 大 特 点 就 是 多 路 复 , 这 个 小 小 的 特 点 改 变 了 我 们 前 端 程 的 很 多 优 化 忄 莫 式 , 比 如 ? 我 要 说 话 · 域 名 不 是 越 多 越 好 , 为 了 能 够 充 分 利 测 览 器 的 连 接 数 , 我 们 给 」 S 和 CSS 开 一 《 域 名 , 给 ] mg 开 好 几 个 域 名 , 网 页 打 开 的 时 佞 , 恰 到 好 处 的 利 测 览 器 的 连 接 数 上 眼 眼 制 。 HTTP/2 0 的 多 路 复 , 就 是 可 以 在 一 个 HTTP 请 求 中 进 行 多 个 资 源 的 传 输 , 如 果 域 名 散 列 , 反 而 不 能 利 这 个 特 性 · 资 源 合 并 没 有 任 何 优 , 以 前 的 资 源 合 并 是 为 了 减 少 请 求 数 以 节 约 建 立 TCP 链 接 的 网 络 开 钅 肖 和 头 部 传 输 的 流 量 开 钅 肖 而 在 HTTP/2 、 0 中 , 一 个 HTTP 请 求 上 完 全 可 以 吧 所 有 的 资 源 全 部 睢 送 过 来 , 如 果 合 并 了 资 源 , 反 而 不 能 良 好 运 测 览 器 对 资 源 的 缓 存 。 当 然 , 除 了 多 路 复 , 还 有 很 多 其 他 的 优 化 , 比 如 传 输 的 数 据 为 二 进 制 流 , H EA D 头 会 被 压 缩 处 理 , 服 务 器 可 以 向 客 户 端 睢 送 内 容 等 。 在 这 个 技 术 水 平 指 数 式 增 长 的 年 代 , 我 相 信 以 后 的 革 新 不 会 比 消 灭 [ E6 痛 苦 ? 我 要 说 话 忄 莫 块 加 载 上 , 过 了 各 派 系 的 争 论 之 后 , 流 传 下 来 几 个 不 错 的 产 品 seaJS 、 Require 」 s 等 , 那 么 那 个 馍 块 加 载 器 将 成 为 工 具 平 台 中 短 皙 的 终 点 呢 ? 似 乎 这 些 都 不 是 。 当 我 们 睃 照 范 中 的 方 式 进 行 馍 块 定 义 , 睃 照 范 中 的 方 式 加 载 定 义 的 忄 莫 块 时 , 加 载 这 个 流 程 显 得 不 那 么 重 要 了 , 因 为 这 些 事 情 最 后 都 会 变 成 shiv/polyflll 的 事 情 , 最 终 会 变 成 测 览 器 的 固 有 届 性 。 ? 我 要 说 话 当 一 个 东 西 在 社 区 中 被 暴 力 追 捧 的 时 佞 , 会 有 很 多 衍 生 的 产 品 出 来 , 当 这 些 衍 生 物 根 深 蒂 固 时 , 可 能 又 会 出 觋 一 个 更 加 原 生 更 加 符 合 开 发 习 愠 的 东 西 出 来 。 像 JQuery , 我 们 为 它 写 的 届 件 不 计 其 数 , 而 在 工 程 化 的 需 求 冲 击 下 , 它 却 显 得 那 么 的 弱 不 禁 风 , 因 为 它 关 注 的 点 和 当 前 的 发 展 态 势 不 太 吻 合 , 仅 此 而 已 。 ? 我 要 说 话 Mobile 的 发 展 驱 动 着 战 场 的 转 移 记 得 当 年 韋 着 No 如 a5230 学 兀 了 HTML 和 JavaScript 的 入 门 , 那 屏 尺 寸 也 就 是 三 个 手 指 的 度 , 紧 紧 攥 在 手 里 看 着 页 面 混 排 效 果 极 差 的 网 页 文 裆 。 ? 我 要 说 话 觋 如 今 , iPhone 都 出 到 6s 了 , 一 个 版 本 一 个 尺 寸 , 而 且 尺 寸 越 来 越 大 , 还 有 各 种 高 不 一 的 Android 机 器 , 种 类 繁 多 。 以 前 的 触 屏 是 电 迴 式 , 只 支 時 单 点 触 碰 , 而 觋 在 电 容 式 的 触 屏 精 度 更 高 , 还 支 恃 多 指 触 腔 , 这 如 丝 般 顺 滑 的 体 验 在 三 些 年 前 是 完 全 体 会 不 到 的 。 曾 手 机 开 一 个 程 序 久 了 就 会 卡 , 动 不 动 还 会 动 重 启 , 而 觋 在 的 手 机 开 一 堆 程 序 , 完 全 无 感 知 , 这 就 是 硬 件 发 展 前 后 的 差 异 。 ? 我 要 说 话 手 机 已 成 为 了 人 们 生 活 中 不 可 或 缺 的 一 部 分 , 县 至 成 为 了 一 些 人 身 体 的 一 部 分 , 淘 宝 今 年 双 十 一 的 数 据 显 亍 国 内 移 动 端 的 消 比 例 已 远 远 超 过 了 PC 端 , 占 比 68 ‰ 。 面 对 庞 大 的 户 , 我 们 的 技 术 是 否 做 好 了 充 足 的 准 备 , 这 里 还 得 打 一 个 问 号 。 ? 我 要 说 话 PC 上 那 一 套 验 不 是 直 唼 到 移 动 端 就 可 以 使 了 , 在 移 动 端 还 需 要 解 决 更 多 的 问 题 : ? 我 要 说 话 · 多 分 辨 率 问 题 , 这 里 涉 及 到 了 响 应 式 设 计 和 前 端 响 应 式 技 术 · 不 同 网 络 环 境 的 网 页 加 载 优 化 问 题 , 2g/3g/4g/wifi · 手 指 交 互 带 来 的 一 系 列 体 问 题 · 为 了 提 升 F 体 验 , 将 web Native 化 一 一 类 React 技 术 带 来 的 一 系 列 问 题 · 远 程 调 试 问 题 · 移 动 安 全 问 题 等 等 上 面 提 到 的 问 题 很 多 已 有 了 优 秀 的 解 决 方 案 , 当 然 也 有 很 多 耒 提 及 的 。 WebApp 的 性 能 、 流 畅 度 和 定 性 远 远 不 如 原 生 应 , 同 时 它 也 无 法 良 好 地 运 设 备 提 供 的 原 生 功 能 这 些 都 是 大 家 转 投 Native 的 原 因 。 ? 我 要 说 话 端 的 融 合 不 同 分 辨 率 的 手 机 , 不 同 物 理 尺 寸 的 终 端 , 为 了 保 恃 良 好 的 视 觉 体 和 F 体 验 , 我 们 不 得 不 为 每 一 个 尺 寸 写 一 份 Media Query 代 码 , 那 么 对 应 的 , 设 计 师 也 需 要 设 计 多 套 版 式 供 前 端 使 , 这 给 设 计 师 、 前 端 和 测 试 带 来 了 无 尽 的 麻 烦 。 为 此 , 我 们 通 过 前 端 技 术 重 塑 屏 , 重 新 定 义 像 素 尺 寸 , 使 流 式 布 局 , 通 过 自 分 比 来 响 应 不 同 的 终 端 尺 寸 。 这 是 端 的 融 合 。 ? 我 要 说 话 后 续 的 Mobile 的 技 术 发 展 方 向 上 , 应 该 是 相 当 明 确 的 。 很 多 公 司 都 是 三 套 人 马 维 沪 三 端 的 程 序 , ℃ S 、 Android 和 web , 而 这 三 端 做 的 事 情 都 是 一 样 的 , 一 样 的 界 面 , 一 样 的 后 端 唼 口 , 一 样 的 交 互 方 式 。 为 了 能 够 快 速 响 应 业 务 的 变 更 , 我 们 不 得 不 将 三 端 合 并 为 一 端 对 待 , 一 套 程 序 编 程 成 三 端 代 码 , 然 后 发 布 到 三 个 平 台 上 。 这 也 是 端 的 融 合 React 系 列 技 术 发 展 到 此 , 绝 对 不 是 终 点 , 它 只 是 一 《 探 路 灯 , 给 我 们 照 明 了 方 向 。 ? 我 要 说 话 技 术 需 要 为 业 务 做 保 障 , 而 好 的 技 术 是 能 够 及 时 响 应 业 务 的 变 化 , 我 们 不 可 能 投 入 大 量 的 人 力 在 we b 的 修 补 工 作 上 通 过 开 发 统 一 工 具 , 屏 蔽 端 和 端 之 间 的 差 异 , 统 一 开 发 忄 莫 式 和 开 发 体 验 , 这 才 是 Mobile 的 耒 来 。 ? 我 要 说 话 当 然 , 回 到 我 们 之 前 说 的 范 和 标 准 , 我 们 目 前 所 做 的 「 屏 蔽 差 异 」 工 作 , 今 后 , 也 会 有 统 一 的 标 准 来 规 范 , 目 前 手 机 厂 商 没 有 这 个 廿 i 尸 , 是 因 为 还 处 于 当 年 C h ro m e 、 Fl re fo x 抢 占 [E6 市 场 份 额 的 阶 段 。 端 的 最 终 融 合 在 于 一 个 统 一 的 准 , 以 及 强 有 力 的 执 行 。 ? 我 要 说 话 栈 的 融 合 我 刚 接 触 前 端 的 时 佞 , 还 没 有 听 说 「 全 栈 ] , web 技 术 栈 往 」 \ 里 说 , 包 含 了 从 前 端 设 计 、 交 互 、 前 端 实 觋 、 网 络 数 据 传 输 、 后 端 实 觋 、 后 端 运 维 和 数 据 库 等 几 个 方 面 , 能 短 时 间 内 从 无 到 有 实 觋 这 么 一 套 系 统 , 并 且 能 够 抗 得 住 一 定 流 量 冲 击 的 人 , 我 们 可 以 称 之 为 全 栈 工 程 师 。 能 够 有 架 构 有 条 理 地 实 觋 这 套 系 统 , 并 且 抗 得 住 大 流 量 、 有 集 成 测 试 、 有 监 腔 的 , 这 种 我 们 可 以 称 之 为 资 深 全 栈 工 程 师 。 现 在 不 乏 这 种 人 才 , 也 不 乏 吹 为 这 种 人 。 ? 我 要 说 话 栈 的 融 合 得 益 于 Nodejs 的 出 觋 , 作 为 前 后 端 分 离 的 桥 梁 , 它 拉 近 了 前 端 工 程 师 与 后 端 的 距 离 , 有 的 人 在 这 座 鞒 梁 上 卖 力 行 击 , 渐 渐 的 也 从 前 端 击 进 了 后 端 , 县 至 击 进 了 后 端 的 运 维 。 至 此 , 前 端 也 有 了 部 署 和 发 布 整 个 应 的 能 力 , 这 是 一 个 质 的 突 破 。 ? 我 要 说 话 使 Node.js , 简 单 几 行 程 序 便 能 实 觋 一 个 web 服 务 器 、 便 能 褡 建 一 个 多 人 聊 天 的 网 页 , 它 的 便 捷 性 可 见 一 斑 。 NPM 社 区 的 发 展 , 沉 淀 了 成 干 上 万 的 组 件 包 , 一 行 命 令 即 可 获 取 , 这 种 组 件 拼 凑 式 的 开 发 , 任 何 功 能 的 实 觋 都 不 会 显 得 太 复 杂 , 而 这 里 的 [ 不 复 杂 」 也 蕴 含 了 无 数 的 坑 坑 洼 洼 , 在 这 一 层 的 融 合 上 也 会 遇 上 不 少 迴 碍 : ? 我 要 说 话 · 冗 余 的 庞 大 的 包 内 容 , 为 了 使 一 个 小 功 能 , 我 们 从 网 络 上 拉 取 下 来 一 个 巨 大 的 包 而 且 这 里 的 [ 巨 大 ] 对 很 多 人 来 说 都 是 无 感 知 的 , 很 少 会 有 人 进 入 node modules 去 吉 看 依 赖 的 第 三 方 包 是 如 何 实 现 的 , 实 际 情 兄 可 能 会 相 当 震 撼 , 第 三 方 包 还 引 了 一 堆 第 三 方 包 , 这 些 包 都 会 在 Node.js 执 行 的 时 佞 被 收 纳 进 去 , 放 在 内 存 中 · 烈 的 迭 代 , 今 年 的 Node.js 被 人 嫌 弃 迭 代 太 了 ( 当 然 , 这 是 表 面 原 因 ) 走 出 了 一 个 分 支 io.js , 发 展 了 一 会 几 , 进 度 苷 超 了 Nodejs , 后 来 觉 得 一 家 人 不 干 呐 家 活 , 又 合 并 回 去 了 。 虽 说 上 层 API 几 乎 没 有 变 化 , 但 是 底 层 却 被 翻 了 一 个 天 。 · 偶 尔 的 巨 大 洞 , 每 隔 一 端 时 间 就 会 暴 露 Node.js 存 在 洞 , 这 些 洞 的 补 救 借 施 就 是 立 即 廾 级 版 本 号 比 较 让 人 心 受 1 臼 · 后 端 意 i 尸 不 强 烈 , 前 端 占 领 了 中 间 层 的 开 发 , 有 的 时 候 还 干 这 后 端 的 活 几 , 然 而 却 没 有 后 端 沉 淀 多 年 固 有 的 意 识 , 测 试 和 监 腔 做 的 相 当 潦 草 JavaScrip t 从 客 F 端 的 脚 本 语 言 纵 身 跃 进 进 入 了 后 端 行 列 , 而 今 也 开 始 深 入 到 移 动 端 Native 领 域 , 确 实 是 无 孔 不 入 , 这 可 能 就 是 语 言 的 特 性 , 也 可 能 是 技 术 本 身 在 寻 求 融 合 点 , 吧 有 差 异 的 地 方 全 部 躺 平 , 然 后 统 一 的 方 式 去 关 注 业 务 , 关 注 户 。 端 和 栈 也 在 融 合 。 ? 我 要 说 话 后 端 服 务 化 , 云 數 据 , 云 安 全 F 体 验 变 得 越 来 越 重 要 , 响 应 式 技 术 的 发 展 也 是 后 网 页 应 的 一 大 特 点 , 端 和 端 之 间 的 差 异 R 是 在 表 觋 上 , 数 据 这 一 层 差 异 不 是 特 别 大 , 很 多 应 PC 和 Mobile 廿 一 套 接 口 或 者 Mobile 的 接 口 在 PC 接 口 的 基 础 上 做 了 一 层 包 装 , 对 接 口 字 段 做 了 些 许 减 。 后 端 为 了 响 应 各 个 端 之 间 的 数 据 需 求 , 也 需 要 关 注 数 据 的 可 利 性 , 唼 口 包 装 的 拓 展 性 等 , 这 是 后 端 服 务 化 的 一 个 表 觋 。 移 动 端 的 开 发 上 , 前 后 端 间 隙 十 分 明 显 , 越 来 越 多 移 动 端 应 的 发 布 已 脱 离 了 后 端 , 前 端 完 全 通 过 异 步 方 式 获 取 数 据 。 ? 我 要 说 话 业 务 变 化 很 快 很 快 快 , 今 天 这 个 产 品 被 并 购 , 明 天 那 个 业 务 被 砍 掉 , 每 个 人 负 责 的 业 务 线 可 能 冷 不 丁 地 就 变 了 。 很 多 大 公 司 的 决 策 是 由 上 往 下 的 , 上 面 微 动 , 下 面 可 能 就 是 大 动 可 能 某 个 部 门 就 不 存 在 了 , 也 可 能 被 划 分 成 几 个 产 品 部 门 。 ? 我 要 说 话 所 以 「 大 后 台 , 小 前 台 ] 的 趋 必 然 十 成 。 前 端 , 无 疑 问 , 在 这 个 前 台 之 中 。 前 台 的 特 点 是 灵 活 的 , 多 变 的 , 可 快 速 重 组 的 。 对 后 台 而 言 , 为 了 响 应 前 台 的 变 化 , 需 要 提 供 更 细 粒 化 的 API , 将 数 据 打 散 , 打 得 更 加 零 碎 , 零 碎 的 数 据 于 重 组 , 这 是 在 考 后 端 的 架 构 能 力 。 如 今 , 很 多 前 端 也 都 是 半 栈 工 程 师 , 盘 踞 在 前 后 端 中 间 层 上 , 然 而 如 何 迎 唼 这 种 后 端 服 务 化 的 馍 式 , 似 乎 这 个 准 备 还 是 不 够 充 足 的 。 ? 我 要 说 话 GraphQL 的 出 觋 场 景 跟 React 类 似 , React 是 前 端 应 对 不 同 场 景 的 一 种 强 有 力 手 段 , 而 GraphQL 则 是 后 端 应 对 不 同 需 求 场 景 的 一 次 尝 试 , web APIs 将 会 成 为 web App 和 Mobile App 的 一 《 中 心 点 , 前 端 基 于 后 端 的 RESTful 服 务 构 建 应 , 这 里 面 存 在 太 多 耒 知 的 问 题 需 要 探 索 , 这 让 一 个 大 数 据 下 探 索 的 新 起 点 , 也 给 前 端 开 发 者 创 造 了 无 数 的 可 能 。 ? 我 要 说 话 这 几 年 各 类 网 盘 , 各 个 云 服 务 商 都 在 抢 占 市 场 有 提 供 图 片 储 存 的 , 有 提 供 CDN 静 态 资 源 缓 存 的 , 有 提 供 大 文 件 储 存 的 , 也 有 卖 数 据 库 服 务 的 。 种 类 繁 多 , 而 旧 根 到 底 都 是 , 你 付 钱 给 我 , 我 提 供 储 存 和 安 全 , 还 提 供 方 便 的 SDK 让 你 获 取 己 的 数 据 云 服 务 卖 的 是 一 套 服 务 , 它 是 吧 所 有 人 的 数 据 风 险 集 于 一 身 , 强 硬 的 技 术 做 安 全 防 御 。 云 , 賦 予 了 我 们 无 穷 的 想 象 空 间 。 ? 我 要 说 话 三 辆 马 车 , 我 们 还 差 一 辆 开 发 功 能 对 很 多 人 来 说 是 轻 松 活 几 , 基 本 的 前 端 语 言 加 些 复 杂 的 特 效 , 实 觋 成 本 不 会 很 高 , 即 便 是 褡 建 一 个 网 站 , 使 Node.js 社 区 中 的 框 架 也 能 够 轻 松 实 觋 。 然 后 极 少 人 会 去 关 庄 每 个 功 能 点 的 测 试 , 一 个 项 目 下 来 基 本 看 不 到 测 试 例 更 不 说 会 去 做 监 腔 相 关 的 事 情 。 结 果 就 是 , 踏 过 了 无 数 的 坑 洼 之 后 终 于 上 线 了 , 而 后 续 加 功 能 的 时 佞 发 觋 , 加 了 东 西 就 跑 不 通 , 新 内 容 影 响 了 之 前 的 逻 辑 , R 好 去 修 复 之 前 的 逻 辑 , 修 好 之 后 发 现 更 早 之 前 的 逻 辑 又 不 通 了 整 个 修 复 过 程 就 像 玩 多 米 诺 骨 牌 。 ? 我 要 说 话 程 序 开 发 = 板 斧 : 功 能 、 测 试 和 监 控 。 在 github 上 可 以 看 到 很 多 程 序 都 加 入 了 時 续 集 成 , 这 是 一 个 好 兆 头 , 意 味 着 我 们 写 的 程 序 也 越 来 越 壮 , 至 少 贡 给 世 人 使 的 程 序 是 壮 的 。 很 多 程 序 的 代 码 盖 率 也 达 到 了 90 ‰ + , 这 些 数 据 都 是 重 视 测 试 的 证 据 。 ? 我 要 说 话 然 而 , 三 辆 马 车 , 我 们 最 后 一 辆 依 然 没 有 开 动 起 来 。 很 多 公 司 都 会 有 己 的 log 平 台 , 每 个 F 访 问 页 面 中 的 任 何 一 个 链 接 都 会 将 F 信 息 和 访 问 信 息 以 log 日 志 十 式 收 集 到 log 平 台 上 然 后 通 过 监 腔 平 台 或 者 离 线 分 析 的 方 式 , 获 取 业 务 数 据 或 者 技 术 数 据 , 进 行 分 析 和 二 次 开 发 。 这 些 东 西 在 大 公 司 见 的 很 多 而 这 方 面 的 东 西 在 前 端 尤 其 是 使 Node.js 做 程 序 开 发 的 前 端 身 上 , 看 到 的 并 不 多 。 ? 我 要 说 话 2016 年 , 我 觉 得 技 术 上 的 新 创 造 会 俏 微 缓 和 些 , 这 叻 年 很 多 人 已 被 新 技 术 冲 击 得 有 些 找 不 着 方 向 了 , 同 一 类 东 西 前 者 还 没 学 完 , 后 者 开 始 火 爆 了 , 紧 接 着 又 是 一 阵 技 术 的 凋 零 和 新 技 术 的 出 觋 , 这 样 倡 久 了 也 会 有 一 丝 的 疲 倦 。 而 更 多 的 会 关 注 , 如 何 更 好 地 服 务 多 端 , 如 何 更 大 幅 度 地 提 升 开 发 体 和 F 体 逾 , 很 多 技 术 都 会 往 性 能 、 往 极 致 这 个 方 向 上 钅 占 研 。 ? 我 要 说 话 写 长 文 真 不 轻 松 。 写 到 这 里 , 感 觉 说 的 不 通 诱 , 还 有 很 多 想 说 的 , 但 是 个 人 理 解 力 有 限 , 也 唯 以 表 达 全 面 。 技 术 的 变 化 很 快 , 今 天 说 过 的 东 西 , 到 了 明 大 可 能 过 时 了 。 我 们 不 透 耒 来 , 只 能 吧 觋 有 的 东 西 好 好 消 化 吸 收 下 , 留 下 一 个 话 柄 , 给 读 者 吧 。 ? 我 要 说 话 来 自 叁 考 资 料 http : / / hikejun 工 om / b g / 2010 / 02 / 08 / 2009 年 前 端 技 术 领 域 回 顾 / By 张 克 军 http://www.infoq.com/cn/news/2011/01/infoq- 2010-front-end-sumby 崔 康 http://developer.51cto.com/art/201112/307846 七 武 海 http://www.csdn.net/article/1970-01- 01 / 2815164By 李 晶 http://cnberg 、 com/archive/2013-fe/By Berg http://www.lnfoq 、 com/cn/articles/2014- review-front-end-partBy 黄 丹 https://medium.com/@shuuvar/web- development-trends-for-2015-and-beyond- ( 2d3 ( 1ef5718By Shiju Varghese https://github.com/kuitos/kuitos.github.io/issuef Kultos http://t.cn/R4Vn5De
    查看源微博
    已使用 Microsoft OneNote 2016 创建。