React 16.6.x 全新全译

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

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

阅读更多

Vue 2 技术栈归纳与精粹

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 数据流两三事儿

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

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

阅读更多

Webpack 4 核心配置剖析

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

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

阅读更多

为什么认为 Backbone 是现代化前端框架的基石

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

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

阅读更多

AngularJS 1.6.x 最佳实践总结

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

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

阅读更多

基于 ES6 的 JavaScript 简明语法书

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),目前已经被 FirefoxChromium 以及 NodeJS 进行了较为完整的实现,所以本文将会基于此介绍 JavaScript 的重点语法特性,以及一些较为用常用的核心工具函数,本文在写作过程当中参考了 Mozilla 开发者社区的 《JavaScript Guide》《JavaScript Reference》 两篇官方文档。

阅读更多

jQuery 那些容易被忽略的问题

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

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

阅读更多