ihtml5

探索react技术栈-技术选型

Thu, 16 Feb 2017 00:00:00 +0000

一.前言

陆陆续续接触react有一年多了，深感react的简单优雅，急切地想用react去开发程序。但是热情之后，发现react社区的种种问题。比如在社区打打常常提到的 angular vs react。react作为view层的库，并没有给我们提供像angular那样全方位的解决方案。社区很多围绕react的解决方案层出不断，尚没有形成一致的最佳实践。那么，在现有的react解决方案下，我们能否提炼出一个行之有效的方案呢，笔者认为可以从以下几方面入手:

技术选型
项目目录划分
应用程序状态管理
前后台交互
测试
迭代式开发

本文作为探索react技术栈第一篇，首先来聊一聊基于react技术栈的技术选型。

二.技术选型的意义

1.View(react)

使用react来构造view

2.状态管理(redux or mobx)

redux和mobx是社区两个最著名的状态管理框架。可以选择其中一种，因为redux作者是react核心团队的开发者，基于redux的社区也非常庞大，推荐使用redux

3.路由(react-router)

react-router是react社区公认的路由框架，但是这个库更新频繁，api变动比较大，笔者推荐使用其较稳定的v2.8.1

4.样式

当前围绕react的样式解决方案，有三种即传统class声明，css in js,css module

5.语言(Es6)

对浏览器要求不高，即满足ie9+以上的，可以使用es6开发应用，然后通过babel转码，对于浏览器要求较高的，使用es5来编写，并引入pollify来支持浏览器兼容

6.fetch

fetch spec使用promise接口来进行后端接口请求，相比ajax来说，使用更加方便，在项目中，推荐使用fetch的官方实现

7.构建工具(webpack)

webpack是社区公认的优秀打包工具，和react非常搭。配合gulp来完成流畅地前端开发。

8.测试(jest or enzyme)

facebook推出的react测试工具jest和airbnb推出的enzyme都可以用来测试react

9.mock(node or json mock server)

基于react的开发，几乎都是前后端分离，通过mock后端的接口，可以加快前端的开发效率。构建mock接口，一可以通过node来自己编写mock server或者可以通过现有的json mock server比如jsonyeah

10.异步数据流处理

对于简单的异步数据处理我们可以使用redux-thunk或者redux-promise,对于复杂的异步交互，可以使用redux-observable和redux-sagas

高阶组件-基于react的应用程序设计模式(译文)

Wed, 31 Aug 2016 00:00:00 +0000

Higher Order Components: A React Application Design Pattern

An Introduction to Reasonably Pure Functional Programming

Higher-Order Functions in JavaScript

redux源码解读

Sun, 21 Aug 2016 00:00:00 +0000

一.目录分析

1.src

项目的源代码,包括以下几个文件：

index.js

整个redux框架的入口文件作用: 导出redux的几大函数包括createStore,bindActionCreators,combineReducers,compose,applyMiddleware

createStore.js

创建应用唯一的state树

bindActionCreators.js

工具类函数作用: 方便开发者将dispatch和actioncreator当props绑定到组件中

combineReducers.js

将多个reducer,合并成一个reducer,传入到createStore函数中

compose.js

将多个函数组合执行

applyMiddleware

工具类函数 作用: 将中间件如redux-thunk应用到createStore函数上

util/warning.js

自定义的错误信息提示函数

2.docs

redux的文档. 官方网站:www.redux.js.org 中文翻译:cn.redux.js.org

3.build

构建redux所需要的一些文件

4.examples

redux的使用案例,从简单的原生counter到复杂到真实场景的应用,都提供了案例参考

5.test

测试文件目录

6.node_modules

redux源码所依赖的node包

源码分析

1.src/index.js

关键词

源代码使用了es6语法,使用import从文件中导出es6模块 import用法

源码解读

1.导出redux的各个主要模块导出redux的各个主要模块

       // 绑定reducer和state的关系
       import createStore from './createStore'
       // 导出警告函数
       import warning from './utils/warning'
       // 导出自动绑定函数 自动绑定函数，主要生成dispatch(actionCreator(action));
       import bindActionCreators from './bindActionCreators'
       // 导出应用中间件函数,中间件主要作用是将发往reducer的action进行多次修改
       import applyMiddleware from './applyMiddleware'
       /* 合并多个reducer,这样方便每个reducer只处理store的某一个部分数据，最后通过
       * combineReducers函数合并
       */
       import combineReducers from './combineReducers'
       // 将多个函数合并在一起
       import compose from './compose'

2.在开发环境下使用压缩版本给予警告

      function isCrushed() {}
       if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' 
        && isCrushed.name !=='isCrushed') {
           warning(
            'You are currently using minified code outside of NODE_ENV === \'production\'. ' +
            'This means that you are running a slower development build of Redux. ' +
            'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' +
            'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' +
            'to ensure you have the correct code for your production build.'
            )
       }

3.导出多个对象

      export {
          createStore,
          compose,
          warning,
          combineReducers,
          bindActionCreators
      }

2.src/utils/warning.js

关键词

export default

javascript中异常处理

javascript中错误处理

阮一峰谈javascript错误处理

源码解读

1.判定console.error是否存在且可用

    // 导出warning函数
    export default function warning(message) {
        // 判断console.error函数是否存在且可用
        if (typeof console !== 'undefined' && typeof console.error == 'function') {
            console.error(message);
        }

    }

2.捕获异常并处理

    try {
        // 抛出异常
        throw new Error(Message)
    } catch(e) {
        // 捕获异常
    }

redux从入门到进阶

初学者

学习步骤：1. 阅读redux的官方文档 2.通过一些小例子熟悉redux的思想 3.复杂案例应用 4.熟悉redux的源码 5.熟悉业界关于redux的最佳实践

Pratice

关于redux的实战经验

制作react教程

Wed, 17 Aug 2016 00:00:00 +0000

1. 参考案例

梁杰讲react

ReactJS Program

react-roadmap

2. 视频

3. 代码示例

react常用设计模式总结(干货)

Wed, 10 Aug 2016 00:00:00 +0000

如何在网站开发中避免低性能使用iframe

Thu, 28 Jul 2016 00:00:00 +0000

iframe

Iframes, onload, and document.domain

iframe异步加载技术及性能

Using Iframes Sparingly

Iframe loading techniques and performance

Modern iframe programing

Using Iframes to Address Third-Party Script Issues and Boost Performance

Non-onload-blocking async JS

高质量前端资源

Fri, 03 Jun 2016 00:00:00 +0000

ES2015 || ES5

From product design to virtual reality

Understanding ECMAScript 6

Javascript design pattern

javascript API文档

如何成为一个JavaScript 大牛？

这篇文章讲述了如何从一个javascript新手成长为javascript大牛的一般过程，非常值得一看。

es6 手册

jstips

每天花两分钟时间就可以了解到一些精选的js实践，这些实践包括性能，hack,语言应用等

如何写一个你自己的jQuery库？

Node.js

Better Node with ES6, Pt. I

CSS

Use Cases For CSS Vertical Media Queries

Styling Broken Images

Css Modules

BEMIT: Taking the BEM Naming Convention a Step Further

Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

ITCSS: SCALABLE AND MAINTAINABLE CSS ARCHITECTURE

React

5 Essential React.js Interview Questions

Automatic Code Splitting for React Router w/ ES6 Imports

Webpack 2 Tree Shaking Configuration

Smart and Dumb Components in React

SurviveJS Training

Structor — a playground for React Apps.

9 things every React.js beginner should know

Tips to optimise rendering of a set of elements in React

Automating documentation for your React components

Leveling Up with React

React Context

React Context Doc

React Virtual DOM vs Incremental DOM vs Ember’s Glimmer: Fight

对比几种主流dom动态更新方案包括Virtual DOM 和 Incremental DOM以及Ember的 Glimmer,最后指出react在可整合性,声明式组件化开发等方面相对做的更好，推荐优先采纳,从这篇文章，可以看出react各方面的优异，是一个可以近中期投入的技术。

Change And Its Detection In JavaScript Frameworks

数据变动检测是界面开发的核心问题。本文讨论了ember,angular,react三种主流框架数据变动检测的方式，分别是ember的数据绑定，手动负责更新dom；angular的脏检查，定时检查那些已注册进观察对象里的片段，如果有变动，就更新这些片段;react的虚拟dom，将界面抽象为虚拟dom树,界面变化时, 前后虚拟dom对比，最小化更新已变动的地方。

react-fiber-architecture

react核心算法探索

React Native

React Native动画研究和对比

react native blog

React Native Animation Book

22 Amazing open source React projects

Building a Store Locator With React Native

Responsive design

media query ie8- 兼容实现总结

css3-mediaqueries-js

css3-mediaqueries.js 能使得绝大部分浏览器都能支持media query,用法和正常使用媒介查询一样

Hack

A new micro clearfix hack

Styleguide

baidu fe styleguide

google styleguide

Build tool (Webpack,Gulp,RollUp,Babel)

阮一峰讲webpack

babel将es2015的代码转换成什么样子

Debug

Chrome 实用调试技巧

functional-programming

函数式编程术语解析

【转载】著名数据可视化网站&博客汇总

Wed, 20 Apr 2016 10:53:00 +0000

Visualising Data

Visualising Data 是Andy Kirk 创建的比较有名的可视化博客，介绍最新的可视化技术、软件资源和应用实践。

Information is beautiful

Informationisbeautiful 是David McCandless的可视化网站，展示他的精美的可视化作品,颂扬了精美的数据设计。网站还进行可视化竞赛，赞助商们提供数据，可视化爱好者们提交可视化作品，优胜者将获得奖励。

Flowingdata

Flowingdata 是可视化专家Nathan Yau 建立的著名的可视化案例网站，提供了一些令人震惊图表。

Information Aesthetics

Information Aesthetics是由Andrew Vande Moere设计和维护的著名可视化案例网站，宗旨是探索信息可视化和创造性设计之间的密切关系。转载了许多细节精致的图表和可视化数据，涉及政治、经济、金融及其他类型。

FILWD

FILWD (Fell in love with data)以享受从数据中获取信息的乐趣为宗旨，并不提供可视化相关的资讯和案例分享，着重于数据可视化的经验分享，致力于在可视化的研究和实践之间建立桥梁。

Visual Business Intelligence

Visual Business Intelligence 是和商业图表相关的一个博客，介绍商业图表可视化的案例、设计经验，评论可视化的趋势和资源。

Datavisualization

Datavisualization 是数据可视化和信息图表的资讯网站，分享可视化资源，发布自身的可视化研究成果，也转载评论他人的优秀案例。

视物 | 致知

视物·致知是一群热爱信息可视化和数据分析的程序员建立的可视化中文站点，分享最新的可视化案例和经验。

图表汇

图表汇是一个专注于信息图表（INFOGRAPHICS）的学习与分享的主题博客平台，学习和交流信息可视化（InformationVisualization）的理论、技巧和方法，共享信息可视化之美！

visualizing.org

visualizing.org是面向多种人群的可视化站点，任何人都可以分享、评论可视化作品，创作者可以上传自己的作品，团体组织可以发布自己的数据，学校老师也可以组织一些可视化比赛。

Visual complexity

visual complexity 是可视化专家Manuel Lima创建的关于复杂网络的可视化博客，致力于研究复杂网络的可视化方法和原则。汇集了大量的工程项目图表。图表都进行了分类并提供缩略图，以便于对海量信息进行检索。

number27

number27是we feel fine 的作者之一Jonathan Harris创建的博客。他的惊人的作品融合了计算机，人类学，虚拟艺术、叙事等元素。

Edward Tufte

Edward Tufte 介绍了来源广泛的信息可视化图表。每张图表都有独立评注，其中有一些令人难以置信的有趣图片。Edward Tufte是信息图表设计的一代宗师。

visual.ly

visual.ly 是非常专业的可视化站点，收集了数千件可视化作品。用户可以搜索可视化实例，上传自己的可视化作品，利用其软件生成自己的图形化简历。

Many Eyes

Many Eyes提供了工具让你创建自己的可视化数据，同时还可浏览别人的作品。他们也拥有一个很大的图库。

Well-formed Data

Well-formed Data 这个blog的题材：交互界面设计、信息图形、数据及统计可视化等。所附评注非常有趣，就某些话题进入了深入的探讨。

The New York Times纽约时报

在The New York Times的网站上花一点力气找到最好的图表绝对是值得的。它们拥有商业领域最好的信息图形，保证平均水平的读者能轻易理解那些实际上非常复杂的数据。

Cool Infographics

Cool Infographics 是一个令人敬畏的blog——信息可视化的编年史及大量搜集来的可视化数据。只要你所能想得到的话题，这儿都有。基于tag的架构便于你查找特定类别的图表。

Simple Complexity（最近维护2012.6.14）

Simple Complexity 这个网站展示了一些简化复杂信息的可视化数据，用一种易于理解的方式来体现他们的真实意图。也包括一些关于如何图表优化的教程。

Strange Maps

Strange Maps 上有许多基于图表的地图，涵盖古今。地图里所带的标注，其中最有趣的是那些历史地图。

Wall Stats

Wall Stats 用海报招贴的形式制作了“美国个人可自由支配收入的统计”图表。它们还提供了其他关于政治及经济议题的图表。

Data Mining

Data Mining 涉及的领域为数据可视化、社会化媒体和数据挖掘。这个Blog从包括《美国国家地理》及《经济学人》在内的其它媒体上聚合了大量的信息可视化图形。

Infographics News

Infographics News主要提供新闻类信息可视化图像，也发布了一些和新闻相关的不同寻常的图表

Chart Porn

Chart Porn 提供来至全国各地的图示和图表，设计精美，涉及广泛。按话题分类，易于检索。

Behance Network

网站 Behance Network 基于Tag机制，内容涉及信息架构及其他一些特定类型。可以按作者进行检索。

Good Magazine

Good Magazine 推荐了一些极有趣的原创图表，从“水危机”到“食品券的增长”到“奥巴马对投票率的影响”。

Matthew Ericson

这个BLOG展示了图表设计师Matthew Ericson及其他人的创作作品。

NiXLOG Infographics

NiXLOG 上从互联网上聚合了大量信息可视化的内容，还包括一份原创图表：关于苹果电脑及其消费观如何普及的演变历程。

Virtual Water

Virtual Water是一个专业blog，主题是用水量的统计。他们用招贴的形式展现信息并（全部或部分地）出版发行。

History Shots

History Shots是一个商业网站，出售各种主题的数据图表及可视化产品（招贴、明信片等）。他们的主要提供历史事件、时代及包括政治、军事、体育或其它有趣科目在内的数据图表。这是一个相当有趣的网站，你可以在屏幕赏缩放图片进行浏览。

Nicolasrapp.com

nicolasrapp.com 是一个信息设计blog，其作者为美联社进行创作。

DataViz

DataViz 搜集了许多漂亮的数据化设计。尽管没有标注，但是那些图片已经完全足够说明自己了。

iGraphics Explained

iGraphics Explained –对于图表和数据可视化的有效性和制作方式，这个blog希望能阐明一些启示。他们展示了一些来至互联网的精美图表，这是一个启发创意的好去处，你还可以在这里认识到哪些图表形式是有效，而哪些不是的。

信息图形的Flickr群组 Flickr 群组可以成为信息和灵感的源泉。下面案例中的图表，大部分来至世界各地的不同时期。这是一个获取想法和感知全球图表设计趋势的好地方。

Infografia | Infographics

拥有700多张图表的群组，由120多位成员上传。

Infografistas.com / Infographics News

拥有350个类目的发布，来源的种类繁多。

Visual Information

包含650类目的群组。从餐馆到图书馆地图都有。

The Info Graphics Pool

这个可能是Flickr里这一类群组中规模最大的了，拥有超过700名成员和1800个类目。

帮助你提升react技能的一些资源(译文)

Wed, 20 Apr 2016 00:00:00 +0000

React.js是facebook的一个开源项目。根据分析库使用的服务统计数据，大量的网站和应用使用react；例如比较有名的Netflix,Imgur和Feedly已经在使用它，这也证明了react的潜力。

强大的javascript的库是一个很好的工具，可以构建出现代可靠的网站和应用。否则，如果使用第三方库，即使开发者投入很多精力去学习实践，也很难说能够有一个好的产出。

对于那些寻找学习react资料的初学者，我们已经收集了一系列有用的工具，资源和文章，这些资料可以帮助你们快速，简单地学会基本的react，甚至可以构建出有价值的东西。下面这些入门资料可以给你一些帮助。

快速简单地学会react.js

jsfiddle

jsfiddle是一个你可以获得技巧和很多开发经验的训练场。它分为几块区域支持在线预览。可以将你的代码块分享给你的朋友们

TouchstoneJS

TouchStone.js是一个使用react.js开发的框架。它给你提供了开发混合应用的一些必要工具，包括强大，功能丰富的组件库，使用这些组件你可以构建界面优雅，结构清晰，底层功能强大的混合应用。

Elemental UI

Elemental是一系列符合Material Desgin规范的工具。你可以通过react组件的style属性重写默认的主题

React Toolbox

React Toolbox结合了Material Desgin和React.js 和前一个例子有许多地方很像，the library comprises integral elements that owe their beauty to brand new Google Design language。它使用了css modules,webpack和es6.