早期桌面应用的开发主要借助原生 C/C++ API 进行，由于需要反复经历编译过程，且无法分离界面 UI 与业务代码，开发调试极为不便。后期出现的 QT 和 WPF 在一定程度上解决了界面代码分离和跨平台的问题，却依然无法避免较长时间的编译过程。近几年伴随互联网行业的迅猛发展，尤其是 NodeJS、Chromium 这类基于 W3C 标准开源应用的不断涌现，原生代码与 Web 浏览器开发逐步走向融合，Electron 正是在这种背景下诞生的。

Electron 是由 Github 开发，通过将Chromium和NodeJS整合为一个运行时环境，实现使用 HTML、CSS、JavaScript 构建跨平台的桌面应用程序的目的。Electron 源于 2013 年 Github 社区提供的开源编辑器 Atom，后于 2014 年在社区开源，并在 2016 年的 5 月和 8 月，通过了 Mac App Store 和 Windows Store 的上架许可，VSCode、Skype 等著名开源或商业应用程序，都是基于 Electron 打造。为了方便编写测试用例，笔者在 Github 搭建了一个简单的 Electron 种子项目Octopus，读者可以基于此来运行本文涉及的示例代码。

全文翻译自React 16.6.0 英文文档，适当精简了生产环境不经常使用的内容，并对部分较为复杂的概念进行了更加翔实的解读，以及与 Vue2 进行了一些特性方面的比较。本文首先会介绍React 16带来的一系列变化与新特性，然后解读 React 官方文档Docs当中Quick Start和Advanced Guides的内容，最后基于项目上的使用实践，开源了一个较为完整的脚手架项目Rhino，适合已经具备组件式前端框架开发经验的同学快速上手。

2017 年 9 月 Facebook 释出React v16.0.x，宣布使用对商业使用更加友好的 MIT license 开源许可，并带来了全新的render()函数返回类型、更加健壮的错误处理机制、全新的Fragment和Portal 特性，并完全重写了类库的核心架构，带来更为优异服务器端渲染性能的同时，有效缩小了类库代码本身的体积，更重要的意义在于杜绝了 Preact 等衍生框架对 React 社区所造成的分裂。

Vue 是一款高度封装的、开箱即用的、一栈式的前端框架，既可以结合 webpack 进行编译式前端开发，也适用基于 gulp、grunt 等自动化工具直接挂载至全局window使用。本文成文于 Vue2.4.x 版本发布之初，笔者生产环境当前使用的最新版本为 2.6.12。在经历多个前端重度交互项目的开发实践之后，笔者结合官方文档对 Vue 技术栈进行了全面的梳理、归纳和注解，因此本文可以作为 Vue2 官方《Get Started》 的补充性读物。

Vue 2 框架体系及技术栈日趋完善，相较于React+Reflux/Redux/MobX技术栈，Vue 更加贴近 W3C 技术规范（例如实现仍处于 W3C 草案阶段的<template>、<slot>、is等新特性，提供了良好易用的模板书写环境），并且开源生态更加完整且易于配置，将 React 手动编码才能处理的细节，整合成为最佳实践并抽象为语法糖（比如 Vuex 中提供的store的模块化特性），使得开发人员得以将注意力聚焦于业务逻辑本身。

Flux是由 Facebook 在 2014 年 7 月提出的一种 React 应用体系架构，主要用于解决多层级组件之间数据传递以及状态管理的问题。并由此派生出了Reflux、Redux、MobX等一系列单向数据流框架。为 Web 前端页面实现组件化拆分之后，组件间的通信与协同机制提供了一套较为完善的方法学。其核心理念在于将所有应用状态放置在Store内进行统一管理，视图层组件只能通过触发Action修改Store中的应用状态。

本文首先系统的概括 Facebook 官方的Flux以及单向数据流思想，然后遵循近几年Flux 衍生框架的发展历程，逐步进行概括性的分析与比较，并顺带介绍了 Vue 技术栈当中的类 Flux 框架 VueX，最后，由于通常将Action视为 Flux 工作流的核心与起点，本文还对《Flux Standard Action》自述文档进行了翻译，以期更为全面的展现 Flux 生态的演进过程。

Webpack 是现代 Web 应用程序的静态模块打包工具，它会递归的构建应用程序各个模块的依赖关系图，然后将所有模块打包成一个或多个bundle。目前 Webpack 已经更新至 4.29.6 版本，增加了诸多打包和执行性能相关的支持，是目前应用最广泛、社区最活跃的 Web 前端代码打包方案。而更新版本的 Webpack 5 已经进入 Beta 发布阶段，未来将会带来更多构建性能的提升，本文依然以更为稳定的 Webpack 4 为讲解对象。

Webpack 提出了入口entry、输出output、加载器loader、插件plugin这四个核心概念，本文将会在简单介绍 Webpack 相关基础概念之后，对其原生实现的import模块导入机制进行分析，以清晰的展现 Wepback 在底层所进行的工作；最后逐步备注笔者在开发、生产环境下使用到的各类插件和加载器，并分享在aves和rhino两个开源脚手架项目当中（分别基于 Vue2 和 React16）所使用到的最佳配置实践。

伴随着 W3C 协议规范的不断更新，以及现代化浏览器技术的快速进步，Web 前端技术整体取得了日新月异发展，交互体验更加丰富与多样化，与此同时业务逻辑也在极速的膨胀。开发人员函需从大量 DOM 底层处理的劳动中解放出来，更加从容的面对纷繁复杂的各式交互需求。本文开头先简单的梳理一下历史，然后基于现代化前端框架的主要特性，逐一与 Backbone 进行比较和剖析。

从前端技术发展趋势的角度而言，目前层出不穷的现代化前端框架的诞生，都可以认为是 Angular 和 Backbone 等古典前端框架设计思想走向融合之后的产物。虽然截至到本文执笔的时间点，Backbone 已经略微old school，但之所以依然单独对 Backbone 着重笔墨，主要是在组件化和作用域控制等方面，Backbone 更加接近于现代化前端框架的设计理念，而这两点又正好是同一时期的 Angular 并没有解决好的问题。

开发小组在 2015 年 11 月的时候，就已经开始尝试使用webpack+babel+react+reflux技术栈，但是团队对这种编译式前端开发的反馈并不友好，一方面 webpack 1.x 版本的打包效率仍然较差，每次保存操作后页面 reload 的速度缓慢如蜗牛，非常影响开发过程中的心情愉悦指数。另一方面，团队的同学们对于传统jQuery+backbone+handlebar+requirejs开发方式带有思维惯性，不太能接受 JSX 和 ES6 模块化的写法。

对于 React 的组件化思想，笔者本人非常推崇，但是遗憾 facebook 并未提供出解决组件间通讯的官方实现，其 Virtual DOM 与 Webpack.sourcemap 结合使用后，debug 变成一件非常困难的事情，并未在实际开发中体现其性能和效率上的优势。且因为社区驱动的 Reflux**、Redux** 的存在，实质上又为开发带来了额外的复杂度。更具有决定因素的是，截至在 2015 年底 React 依然停留在 0.14.x 版本，技术栈本身还处于不断成熟的过程，API 也一直在调整与变化。最终从技术成熟度的角度考量，还是稳妥的选择了 **Angular 1.6.x** 版本。

JavaScript 是一款基于原型的的多范式动态脚本语言，支持命令式、函数式以及面向对象式的编程风格。其标准化工作主要由欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）负责，其语言标准被称为ECMAScript，其它组织可以遵循该标准开发各自的 JavaScript 实现，例如 Firefox 内置的 SpiderMonkey 以及 Chrome 内置的 V8 解析引擎（ECMAScript 规范文档主要针对解析引擎的开发人员，而非 JavaScript 脚本的编写人员）。

2012 年之后推出的 Web 浏览器都完整实现了 ECMAScript 5.1 标准，而 2015 年发布的 ECMAScript 6 标准（官方称为 ECMAScript 2015，俗称为 ES6），目前已经被 Firefox 和 Chromium 以及 NodeJS 进行了较为完整的实现，所以本文将会基于此介绍 JavaScript 的重点语法特性，以及一些较为用常用的核心工具函数，本文在写作过程当中参考了 Mozilla 开发者社区的 《JavaScript Guide》 和 《JavaScript Reference》 两篇官方文档。

伴随Vue、Angular、React等编译式前端框架的崛起，前端开发人员逐渐从繁琐的 DOM 操作当中解脱出来。但是在项目实践过程当中，依然存有诸多问题需要通过直接操作 DOM 来解决，虽然现代化浏览器已经支持selectAll()等 HTML5 新特性，但是针对一些强调页面兼容性的场景，为了屏蔽各款浏览器解析引擎所遵循规范的差异，依然需要借助于jQuery来完成 DOM 文档操作。

因此jQuery这款诞生于 2006 年的 JavaScript 库，依然在现代化前端开发当中扮演着较为重要角色。本文结合笔者 Web 前端开发工作当中积累的实践经验，较为系统的总结了jQuery实践过程当中一些比较容易被开发人员所忽略的问题。例如 jQuery 对象与 DOM 对象的相互转换、jQuery 选择器性能、异步对象$.Deferred()以及 JavaScript 性能优化相关的话题。