最近 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 ， 又要重复上述步骤.. 如果能在各种框架和开发思路里面游刃有余，当然是最好的，可是多少总会对开发同学产生一些影响，那么各个框架之间的差异到底有多大呢？切换来去又会影响到哪些开发体验呢？且看我边做示例边分解…

原文地址

最近，项目用了 React，配套使用了 Webpack，毕竟热替换（react-hot-loader）吸引力确实高，开发模式下使用 webpack 构建其实也够用，并且相对 gulp-webpack 来说，模块的编译等待时间大大缩小，这是生命啊！ 发布时，借助 gulp 来进行其他方面的处理，如合图，打包等。或许把这些边幅修一修、支持下，Webpack 估计就要逆天了吧？

写在最前

我们都是前端工程师，无论你现在是页面仔，还是 Node 服务开发者，抑或是全端大神，毋庸置疑的是，我们都是前端工程师，我们生来就对追求页面的极致拥有敏锐的触觉，无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现，都是我们孜孜不倦的追求目标。即使这些在别人眼里，只是跟其他的页面一样没什么不同，但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的，就是我们最熟悉的老朋友，CSS。不讲枯燥的语法，抛开 js，让我们一起来看业务中那别致的纯 CSS 实现，让我们一起来追求那更好的页面实现，希望我带着你走完这段旅程后，你能收获一些惊喜甚至灵感。

做移动 web 页面，受移动网络网速和终端性能影响，我们经常要关注首屏内容展示时间（以下简称首屏时间）这个指标，它衡量着我们的页面是否能在用户耐心消磨完之前展示出来，很大程度影响着用户的使用满意度。

怎么获取首屏时间呢？

我们经常要先问自己：页面是怎么加载数据？

A：加载完静态资源后通过 ajax 请求去后台获取数据，数据回来后渲染内容

在 2014 年，W3C 公布了 service worker 的草案，service worker 提供了很多新的能力，使得 web app 拥有与 native app 相同的离线体验、消息推送体验。
service worker 是一段脚本，与 web worker 一样，也是在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 web 交互行为。native app 可以做到离线使用、消息推送、后台自动更新，service worker 的出现是正是为了使得 web app 也可以具有类似的能力。

素材：

期望效果：http://v.youku.com/v_show/id_XMjY2NTc1MzYw.html