随着移动设备的升级、网络速度的提高，用户对于 web 应用的要求越来越高，web 应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码，提出了模块化的概念来组织代码。webpack 作为一种模块化打包工具，随着 react 的流行也越来越流行。

webpack 在官方文档上解释为什么又做一个模块打包工具的时候，是这样说的：

The most pressing reason for developing another module bundler was Code Splitting and that static assets should fit seamlessly together through modularization.

开发一个新的模块打包工具最重要的原因就是 Code Splitting，并且还要保证静态资源也可以无缝集成到模块化中。其中 Code Splitting 是 webpack 提供的一个重要功能，通过这个功能可以实现按需加载，减少首次加载时间。

随着 Javascript 语言的发展，ES6 规范为我们带来了许多新的内容，其中生成器 Generators 是一项重要的特性。利用这一特性，我们可以简化迭代器的创建，更加令人兴奋的，是 Generators 允许我们在函数执行过程中暂停、并在将来某一时刻恢复执行。这一特性改变了以往函数必须执行完成才返回的特点，将这一特性应用到异步代码编写中，可以有效的简化异步方法的写法，同时避免陷入回调地狱。

本文将对 Generators 进行简单介绍，然后结合笔者在 C#上的一点经验，重点探讨 Generators 运行机制及在 ES5 的实现原理。

每次必说题外话

话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个 CSS 问题，一直很喜欢 CSS 的，能 CSS 解决的问题绝对不用 JS，于是就抽时间整整看。

什么是斜线拼接

回到本文主题上，” 斜线拼接“ 是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

眼力好的筒子应该就能发现，上面这张图是两个帅锅拼接在一起的，看中间的斜线。

但是呢，刚接到这个需求的时候，开发是抓狂的—— 第一反应就是用 canvas 画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨 JS，O__O "…

不过依稀记得，CSS 貌似有个遮罩的特性，可以实现图片的部分显示的效果的。

gulp 已经成为很多项目的标配了，gulp 的插件生态也十分繁荣，截至 2015.1.5，npm 上已经有 10190 款 gulp 插件供我们使用。我们完全可以傻瓜式地搭起一套构建。

然而，我们经常会遇到一种情况，我们好不容易按照文档传入对应的参数调用了插件，却发现结果不如预期，这时候我们就要一点点去排错，这就要求我们对 gulp 插件的工作原理有一定的了解。本文以实现一个 gulp 插件为例，讲解一下 gulp 插件是如何工作的。

原文：https://blog.risingstack.com/react-js-best-practices-for-2016/

作者：Péter Márton

译者按：近几个月 React 相关话题依旧火热，相信越来越多的开发者在尝试这样一项技术，我们团队也在 PC 和移动端不断总结经验。2016 来了，这应该是 React 走向成熟的一年，不管你是新手，还是已经对 React 有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~

========================译文分割线===========================

2015 可以算是 React 之年了，关于其版本发布和开发者大会的话题遍布全球。关于去年 React 的发展里程碑详情，可以查看我们整理的 React 2015 这一年。

2016 年最有趣的问题可能是，我们该如何编写一个应用呢，有什么推荐的库或框架？

作为一个长时间使用 React.js 的开发者，我已经有自己的答案和最佳实践了，但你可能不会同意我说的所有点。我对你的想法和意见很感兴趣，请留言进行讨论。

如果你只是刚开始接触 React.js，请阅读 React.js 教程，或 Pete Hunt 的 React howto。

最近 ReactNative（以下简称 RN）在前端的热度越来越高，不少同学开始在业务中尝试使用 RN，这里着重介绍一下 RN 中动画的使用与实现原理。

一、 动画重要性

        世界上最难的学问就是研究人。在你的动画不会过于耗费资源，以至拖慢用户的设备的前提下，动画可以显著改善用户界面体验。

        可以简单的把页面动画分为以下几个类型：

        1、页面元素动画：比如轮播图等，由用户操作催化；

        2、loading 动画：减少用户视觉等待时间；

        3、装饰动画：尽量避免，会分散用户注意力，值得也不值得；

        4、广告动画：增加广告的转化率；

        5、情节动画：多用于 SPA；

        以 loading 动画为例说明动画的重要性：为了提升用户体验、增加用户粘性，大家从开发的角度看首先想到的会是从前到后的性能优化，从而减少用户打开页面时的等待时间，你或许考虑到了要增加带宽、减少页面的 http 请求、使用数据缓存、优化数据库、使用负载均衡等，但是由于业务限制和用户复杂的体验环境，总会遇到一些瓶颈。这时候，我们需要做的就是如何减少用户的视觉等待时间，哪怕是给一朵转动的菊花，但千万不要不理她，让人盲目的等待就是你业务流失的方式。不客气的说，有时候一朵性感菊花的作用并不亚于你去优化数据库。

原文链接

前言

本文不是 webpack 入门文章，如果对 webpack 还不了解，请前往题叶的 Webpack 入门，或者阮老师的 Webpack-Demos。

为什么要使用 Webpack

1. 与 react 一类模块化开发的框架搭配着用比较好。
2. 属于配置型的构建工具，比较用容易上手，160 行代码可大致实现 gulp400 行才能实现的功能。
3. webpack 使用内存来对构建内容进行缓存，构建过程中会比较快。

第 3 点我想稍微论述一下，如果看过我之前写的 《如何写一个 webpack 插件（一）》，会发现，webpack 会将文件内容存在 compilation 这个大的 object 里面，方便各种插件，loader 间的调用。虽然 gulp 也用到了流 (pipe) 这样的内存处理方式，但感觉 webpack 更进一步。gulp 是每一个任务 (task) 用一个流，而 webpack 是共享一个流。

刚入门 React 可能会因为 React 的单向数据流的特性而遇到组件间沟通的麻烦，这篇文章主要就说一说如何解决组件间沟通的问题。

1. 组件间的关系

1.1 父子组件

ReactJS 中数据的流动是单向的，父组件的数据可以通过设置子组件的 props 传递数据给子组件。如果想让子组件改变父组件的数据，可以在父组件中传一个 callback(回调函数) 给子组件，子组件内调用这个 callback 即可改变父组件的数据。

前言:

在一个喜欢尝鲜的团队里面工作，总会碰到这种情况. 前一个项目用的这个框架这种构建，下一个项目就变成新的框架那种构建，上来就 blablabla 先学一通，刚觉得安心，接到个另外需求，到手一看. 又变了一套 T,T ， 又要重复上述步骤.. 如果能在各种框架和开发思路里面游刃有余，当然是最好的，可是多少总会对开发同学产生一些影响，那么各个框架之间的差异到底有多大呢？切换来去又会影响到哪些开发体验呢？且看我边做示例边分解…