redux-actions:简化redux的使用

Redux虽然好用,但是里面还是有些重复代码,所以有了redux-actions来简化那些重复代码。

这部分简化工作主要集中在构造action和处理reducers方面。

先来看看原先的actions

import axios from 'axios';
import * as T from './actionTypes';

export const changeBtnText = (text) => {
  return {
    type: T.CHANGE_BTN_TEXT,
    payload: text
  };
};

export const changeBtnTextAsync = () => {
  return (dispatch, getState) => {
    if (!getState().isLoading) {
      dispatch(changeBtnText('正在加载中'));
    }
    axios.get('http://test.com').then(() => {
      if (getState().isLoading) {
        dispatch(changeBtnText('加载完毕'));
      }
    }).catch(() => {
      dispatch(changeBtnText('加载有误'));
    });
  };
};

然后再来看看修改后的:

import axios from 'axios';
import * as T from './actionTypes';
import { createAction } from 'redux-actions';

export const changeBtnText = createAction(T.CHANGE_BTN_TEXT, text => text);

export const changeBtnTextAsync = () => {
  return (dispatch, getState) => {
    if (!getState().isLoading) {
      dispatch(changeBtnText('正在加载中'));
    }
    axios.get('http://test.com').then(() => {
      if (getState().isLoading) {
        dispatch(changeBtnText('加载完毕'));
      }
    }).catch(() => {
      dispatch(changeBtnText('加载有误'));
    });
  };
};

这一块代码替换上面的部分代码后,程序运行结果依然保持不变,也就是说createAction只是对上面的代码进行了简单的封装而已。

这里注意到,异步的action就不要用createAction,因为这个createAction返回的是一个对象,而不是一个函数,就会导致redux-thunk的代码没有起到作用。

这里也可以使用createActions这个函数同时创建多个action,但是讲道理,这个语法很奇怪,用createAction就好。

同样redux-actions对reducer的部分也进行了处理,比如handleAction以及handelActions。

先来看看原先的reducers

import * as T from './actionTypes';

const initialState = {
  btnText: '我是按钮',
};

const pageMainReducer = (state = initialState, action) => {
  switch (action.type) {
    case T.CHANGE_BTN_TEXT:
      return {
        ...state,
        btnText: action.payload
      };
    default:
      return state;
  }
};

export default pageMainReducer;

然后使用handleActions来处理

import { handleActions } from 'redux-actions';
import * as T from './actionTypes';

const initialState = {
  btnText: '我是按钮',
};

const pageMainReducer = handleActions({
  [T.CHANGE_BTN_TEXT]: {
    next(state, action) {
      return {
        ...state,
        btnText: action.payload,
      };
    },
    throw(state) {
      return state;
    },
  },
}, initialState);

export default pageMainReducer;

这里handleActions可以加入异常处理,并且帮助处理了初始值。

注意,无论是createAction还是handleAction都只是对代码做了一点简单的封装,两者可以单独使用,并不是说使用了createAction就必须要用handleAction。

图片 1

Mobile Angular UI的关键字有:

序言

这里要讲的就是一个Redux在React中的应用问题,讲一讲Redux,react-redux,redux-thunk,redux-actions,redux-promise,redux-sage这些包的作用和他们解决的问题。
因为不想把篇幅拉得太长,所以没有太多源码分析和语法讲解,能怎么简单就怎么简单。

Chart.js提供了两种可供您使用的不同构建。
Chart.js和Chart.min.js文件包括Chart.js和附带的颜色解析库。
如果使用此版本,并且您需要使用时间轴,则需要在Chart.js之前包含Moment.js。

Intel XDK

redux-thunk:处理异步action

在上面的代码中,我们点击按钮后,直接修改了按钮的文本,这个文本是个固定的值。

actions.js:

import * as T from './actionTypes';

export const changeBtnText = (text) => {
  return {
    type: T.CHANGE_BTN_TEXT,
    payload: text
  };
};

但是在我们实际生产的过程中,很多情况都是需要去请求服务端拿到数据再修改的,这个过程是一个异步的过程。又或者需要setTimeout去做一些事情。

我们可以去修改这一部分如下:

const mapDispatchToProps = (dispatch) => {
  return {
    changeText: (text) => {
      dispatch(changeBtnText('正在加载中'));
      axios.get('http://test.com').then(() => {
        dispatch(changeBtnText('加载完毕'));
      }).catch(() => {
        dispatch(changeBtnText('加载有误'));
      });
    }
  };
};

实际上,我们每天不知道要处理多少这样的代码。

但是问题来了,异步操作相比同步操作多了一个很多确定因素,比如我们展示正在加载中时,可能要先要做异步操作A,而请求后台的过程却非常快,导致加载完毕先出现,而这时候操作A才做完,然后再展示加载中。

所以上面的这个玩法并不能满足这种情况。

这个时候我们需要去通过store.getState获取当前状态,从而判断到底是展示正在加载中还是展示加载完毕。

这个过程就不能放在mapDispatchToProps中了,而需要放在中间件中,因为中间件中可以拿到store。

首先创造store的时候需要应用react-thunk,也就是

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

它的源码超级简单:

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

从这个里面可以看出,它就是加强了dispatch的功能,在dispatch一个action之前,去判断action是否是一个函数,如果是函数,那么就执行这个函数。

那么我们使用起来就很简单了,此时我们修改actions.js

import axios from 'axios';
import * as T from './actionTypes';

export const changeBtnText = (text) => {
  return {
    type: T.CHANGE_BTN_TEXT,
    payload: text
  };
};

export const changeBtnTextAsync = (text) => {
  return (dispatch, getState) => {
    if (!getState().isLoading) {
      dispatch(changeBtnText('正在加载中'));
    }
    axios.get(`http://test.com/${text}`).then(() => {
      if (getState().isLoading) {
        dispatch(changeBtnText('加载完毕'));
      }
    }).catch(() => {
      dispatch(changeBtnText('加载有误'));
    });
  };
};

而原来mapDispatchToProps中的玩法和同步action的玩法是一样的:

const mapDispatchToProps = (dispatch) => {
  return {
    changeText: (text) => {
      dispatch(changeBtnTextAsync(text));
    }
  };
};

通过redux-thunk我们可以简单地进行异步操作,并且可以获取到各个异步操作时期状态的值。

strider  — 
一个开源持续部署/持续集成平台。采用Node.JS/JavaScript编写的,并且使用MongoDB作为后台存储。 

2.支持世界上最好的设备。Beta版兼容Android和iOS,Android上的开发人员还可以使用一些专为Android定制的主题。

总结

总的来说:

  • redux是一个可预测的状态容器,
  • react-redux是将store和react结合起来,使得数据展示和修改对于react项目而言更简单
  • redux中间件就是在dispatch action前对action做一些处理
  • redux-thunk用于对异步做操作
  • redux-actions用于简化redux操作
  • redux-promise可以配合redux-actions用来处理Promise对象,使得异步操作更简单
  • redux-sage可以起到一个控制器的作用,集中处理边际效用,并使得异步操作的写法更优雅。

OK,虽然说不想写那么多,结果还是写了一大堆。

如果您觉得对您还有帮助,那么也请点个赞吧。

图片 2

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5
UI开发。基于最新的HTML5、CSS3和JavaScript标准。

redux-sage:控制器与更优雅的异步处理

我们的异步处理用的是redux-thunk + redux-actions +
redux-promise,其实用起来还是蛮好用的。

但是随着ES6中Generator的出现,人们发现用Generator处理异步可以更简单。

而redux-sage就是用Generator来处理异步。

以下讲的知识是基于Generator的,如果您对这个不甚了解,可以简单了解一下相关知识,大概需要2分钟时间,并不难。

redux-sage文档并没有说自己是处理异步的工具,而是说用来处理边际效应(side
effects),这里的边际效应你可以理解为程序对外部的操作,比如请求后端,比如操作文件。

redux-sage同样是一个redux中间件,它的定位就是通过集中控制action,起到一个类似于MVC中控制器的效果。

同时它的语法使得复杂异步操作不会像promise那样出现很多then的情况,更容易进行各类测试。

这个东西有它的好处,同样也有它不好的地方,那就是比较复杂,有一定的学习成本。

并且我个人而言很不习惯Generator的用法,觉得Promise或者await更好用。

这里还是记录一下用法,毕竟有很多框架都用到了这个。

应用这个中间件和我们的其他中间件没有区别:

import React from 'react';
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import createSagaMiddleware from 'redux-saga';
import {watchDelayChangeBtnText} from './sagas';
import reducer from './reducers';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(promiseMiddleware, sagaMiddleware));

sagaMiddleware.run(watchDelayChangeBtnText);

创建sage中间件后,然后再将其中间件接入到store中,最后需要用中间件运行sages.js返回的Generator,监控各个action。

现在我们给出sages.js的代码:

import { delay } from 'redux-saga';
import { put, call, takeEvery } from 'redux-saga/effects';
import * as T from './components/pageMain/actionTypes';
import { changeBtnText } from './components/pageMain/actions';

const consoleMsg = (msg) => {
  console.info(msg);
};
/**
 * 处理编辑效应的函数
 */
export function* delayChangeBtnText() {
  yield delay(1000);
  yield put(changeBtnText('123'));
  yield call(consoleMsg, '完成改变');
}
/**
 * 监控Action的函数
 */
export function* watchDelayChangeBtnText() {
  yield takeEvery(T.WATCH_CHANGE_BTN_TEXT, delayChangeBtnText);
}

在redux-sage中有一类用来处理边际效应的函数比如put、call,它们的作用是为了简化操作。

比如put相当于redux的dispatch的作用,而call相当于调用函数。(可以参考上面代码中的例子)

还有另一类函数就是类似于takeEvery,它的作用就是和普通redux中间件一样拦截到action后作出相应处理。

比如上面的代码就是拦截到T.WATCH_CHANGE_BTN_TEXT这个类型的action,然后调用delayChangeBtnText。

然后可以回看我们之前的代码,有这么一行代码:

sagaMiddleware.run(watchDelayChangeBtnText);

这里实际就是引入监控的这个生成器后,再运行监控生成器。

这样我们在代码里面dispatch类型为T.WATCH_CHANGE_BTN_TEXT的action时就会被拦截然后做出相应处理。

当然这里有人可能会提出疑问,难道每一个异步都要这么写吗,那岂不是要run很多次?

当然不是这个样子,我们可以在sage中这么写:

export default function* rootSaga() {
  yield [
    watchDelayChangeBtnText(),
    watchOtherAction()
  ]
}

我们只需要按照这个格式去写,将watchDelayChangeBtnText这样用于监控action的生成器放在上面那个代码的数组中,然后作为一个生成器返回。

现在只需要引用这个rootSaga即可,然后run这个rootSaga。

以后如果要监控更多的action,只需要在sages.js中加上新的监控的生成器即可。

通过这样的处理,我们就将sages.js做成了一个像MVC中的控制器的东西,可以用来处理各种各样的action,处理复杂的异步操作和边际效应。

但是这里要注意,一定要加以区分sages.js中使用监控的action和真正功能用的action,比如加个watch关键字,以免业务复杂后代码混乱。

用法:

PhoneGap

Redux与React的结合:react-redux

Redux是一个可预测的状态容器,跟React这种构建UI的库是两个相互独立的东西。

Redux要应用到React中,很明显action,reducer,dispatch这几个阶段并不需要改变,唯一需要考虑的是redux中的状态需要如何传递给react组件。

很简单,只需要每次要更新数据时运用store.getState获取到当前状态,并将这些数据传递给组件即可。

那么问题来了,如何让每个组件都获取到store呢?

当然是将store作为一个值传递给根组件,然后store就会一级一级往下传,使得每个组件都能获取到store的值。

但是这样太繁琐了,难道每个组件需要写一个传递store的逻辑?为了解决这个问题,那么得用到React的context玩法,通过在根组件上将store放在根组件的context中,然后在子组件中通过context获取到store。

react-redux的主要思路也是如此,通过嵌套组件Provider将store放到context中,通过connect这个高阶组件,来隐藏取store的操作,这样我们就不需要每次去操作context写一大堆代码那么麻烦了。

然后我们再来基于之前的Redux示例代码给出react-redux的使用演示代码,其中action和reduce部分不变,先增加一个组件PageMain:

const PageMain = (props) => {
  return (
    <div>
      <button onClick={() => {
        props.changeText('按钮被点击了');
      }}
      >
        {props.btnText}
      </button>
    </div>
  );
};
// 映射store.getState()的数据到PageMain
const mapStateToProps = (state) => {
  return {
    btnText: state.pageMain.btnText,
  };
};
// 映射使用了store.dispatch的函数到PageMain
const mapDispatchToProps = (dispatch) => {
  return {
    changeText: (text) => {
      dispatch(changeBtnText(text));
    }
  };
};

// 这个地方也可以简写,react-redux会自动做处理
const mapDispatchToProps = {
  changeText: changeBtnText
};

export default connect(mapStateToProps, mapDispatchToProps)(PageMain);

注意上面的state.pageMain.btnText,这个pageMain是我用redux的combineReducers将多个reducer合并后给的原先的reducer一个命名。

它的代码如下:

import { combineReducers } from 'redux';
import pageMain from './components/pageMain/reducers';

const reducer = combineReducers({
  pageMain
});

export default reducer;

然后修改index.js:

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import reducer from './reducers';
import PageMain from './components/pageMain';

const store = createStore(reducer);

const App = () => (
  <Provider store={store}>
    <PageMain />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('app'));

 

Titanium studio
还提供了一些code模板。你可以熟悉一下这些模板,相关的教程也很快会推出。

Redux

先看看百度百科上面Redux的一张图:

图片 3

这是Redux在Github上的介绍:Redux用于js程序,是一个可预测的状态容器。

在这里我们首先要明白的是什么叫可预测?什么叫状态容器?

什么叫状态?实际上就是变量,对话框显示或隐藏的变量,一杯奶茶多少钱的变量。

那么这个状态容器,实际上就是一个存放这些变量的变量。

你创建了一个全局变量叫Store,然后将代码中控制各个状态的变量存放在里面,那么现在Store就叫做状态容器。

什么叫可预测?

你在操作这个Store的时候,总是用Store.price的方式来设置值,这种操作数据的方式很原始,对于复杂的系统而言永远都不知道程序在运行的过程中发生了什么。

那么现在我们都通过发送一个Action去做修改,而Store在接收到Action后会使用Reducer对Action传递的数据做处理,最后应用到Store中。

相对于Store.price的方式来修改者,这种方式无疑更麻烦,但是这种方式的好处就是,每一个Action里面都可以写日志,可以记录各种状态的变动,这就是可预测。

所以如果你的程序很简单,你完全没有必要去用Redux。

看看Redux的示例代码:

actionTypes.js:

export const CHANGE_BTN_TEXT = 'CHANGE_BTN_TEXT';

actions.js:

import * as T from './actionTypes';

export const changeBtnText = (text) => {
  return {
    type: T.CHANGE_BTN_TEXT,
    payload: text
  };
};

reducers.js:

import * as T from './actionTypes';

const initialState = {
  btnText: '我是按钮',
};

const pageMainReducer = (state = initialState, action) => {
  switch (action.type) {
    case T.CHANGE_BTN_TEXT:
      return {
        ...state,
        btnText: action.payload
      };
    default:
      return state;
  }
};

export default pageMainReducer;

index.js

import { createStore } from 'redux';
import reducer from './reducers';
import { changeBtnText } from './actions';

const store = createStore(reducer);
// 开始监听,每次state更新,那么就会打印出当前状态
const unsubscribe = store.subscribe(() => {
  console.info(store.getState());
});
// 发送消息
store.dispatch(changeBtnText('点击了按钮'));
// 停止监听state的更新
unsubscribe();

这里就不解释什么语法作用了,网上这样的资料太多了。

图片 4

在这篇文章中,我们讨论了一些HTML5的移动开发框架,HTML5标准正式发布之后,很多开发者对HTML5又重燃了希望,相信这是个美好的时代,相信它会给我们带来更多的惊喜。

redux-promise:redux-actions的好基友,轻松创建和处理异步action

还记得上面在使用redux-actions的createAction时,我们对异步的action无法处理。

因为我们使用createAction后返回的是一个对象,而不是一个函数,就会导致redux-thunk的代码没有起到作用。

而现在我们将使用redux-promise来处理这类情况。

可以看看之前我们使用 createAction的例子:

export const changeBtnText = createAction(T.CHANGE_BTN_TEXT, text => text);

现在我们先加入redux-promise中间件:

import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import promiseMiddleware from 'redux-promise';
import reducer from './reducers';

const store = createStore(reducer, applyMiddleware(thunk, createLogger, promiseMiddleware));

然后再处理异步action:

export const changeBtnTextAsync = createAction(T.CHANGE_BTN_TEXT_ASYNC, (text) => {
  return axios.get(`http://test.com/${text}`);
});

可以看到我们这里返回的是一个Promise对象.(axios的get方法结果就是Promise对象)

我们还记得redux-thunk中间件,它会去判断action是否是一个函数,如果是就执行。

而我们这里的redux-promise中间件,他会在dispatch时,判断如果action不是类似

{
  type:'',
  payload: ''
}

这样的结构,也就是
FSA,那么就去判断是否为promise对象,如果是就执行action.then的玩法。

很明显,我们createAction后的结果是FSA,所以会走下面这个分支,它会去判断action.payload是否为promise对象,是的话那就

action.payload
  .then(result => dispatch({ ...action, payload: result }))
  .catch(error => {
    dispatch({ ...action, payload: error, error: true });
    return Promise.reject(error);
  })

也就是说我们的代码最后会转变为:

axios.get(`http://test.com/${text}`)
  .then(result => dispatch({ ...action, payload: result }))
  .catch(error => {
    dispatch({ ...action, payload: error, error: true });
    return Promise.reject(error);
  })

这个中间件的代码也很简单,总共19行,大家可以在github上直接看看。

Ghost  —一个简单,强大的发布平台。

Mobile Angular UI是使用 bootstrap
3 和 AngularJS 的响应式移动开发HTML5框架。

Redux的中间件

之前我们讲到Redux是个可预测的状态容器,这个可预测在于对数据的每一次修改都可以进行相应的处理和记录。

假如现在我们需要在每次修改数据时,记录修改的内容,我们可以在每一个dispatch前面加上一个console.info记录修改的内容。

但是这样太繁琐了,所以我们可以直接修改store.dispatch:

let next = store.dispatch
store.dispatch = (action)=> {
  console.info('修改内容为:', action)
  next(action)
}

Redux中也有同样的功能,那就是applyMiddleware。直译过来就是“应用中间件”,它的作用就是改造dispatch函数,跟上面的玩法基本雷同。

来一段演示代码:

import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers';

const store = createStore(reducer, applyMiddleware(curStore => next => action => {
  console.info(curStore.getState(), action);
  return next(action);
}));

看起来挺奇怪的玩法,但是理解起来并不难。通过这种返回函数的方法,使得applyMiddleware内部以及我们使用时可以处理store和action,并且这里next的应用就是为了使用多个中间件而存在的。

而通常我们没有必要自己写中间件,比如日志的记录就已经有了成熟的中间件:redux-logger,这里给一个简单的例子:

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
import reducer from './reducers';

const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

这样就可以记录所有action及其发送前后的state的日志,我们可以了解到代码实际运行时到底发生了什么。

图片 5

IONIC

图片 6

详细了解可以看一看 the Mobile Angular UI demo
page,上面有Mobile Angular
UI的实践,如果你想了解的更深入一些,我建议你读一读 getting started with
Mobile Angular
UI。

PouchDB 是一个受Apache
CouchDB启发的开源JavaScript数据库,旨在在浏览器中良好运行。

问题是,是否有人可以开发一个框架,让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识,而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢?

Webpack 
— 一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。它的主要目的是将JavaScript文件捆绑在浏览器中使用,但它也能够转换,捆绑或打包任何资源或资产。 

目前已经有很多的框架可以帮助你开发跨平台的移动应用,在这篇文章中,我们只介绍最牛的7个。

图片 7

第一段PhoneGap代码是在2008年8月的iPhoneDevCamp上写成的。创建它的一个主要动力是基于一个几乎每一个单独
的iPhone开发新手都要面对的简单事实:Objective-C是一个对Web开发人员来说非常陌生的环境,并且Web开发人员的数量远远多于
Objective-C开发人员的数量。

Grunt  —JavaScript任务运行器。

就在那一年,PhoneGap获了奖并开始支持Android平台,对人数不断增长的移动开发人员变得越来越有用,这些人员需要在更多的平台上获得代码支持。

图片 8

Kendo
UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。

图片 9

Sencha Touch

ggraph – 图形可视化的凌乱数据

响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西。Mobile
Angular
UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。

Ace的目标是创建一个基于浏览器的编辑器,匹配和扩展现有的本地编辑器(如TextMate,Vim或Eclipse)的功能、可用性和性能。
它可以轻松地嵌入任何网页或JavaScript应用程序。 Ace被开发为Cloud9
IDE的主要编辑器。

Titanium是混合式移动应用开发的一站式解决方案,你只需要下载 Titanium
studio就可以解决所有的事情,Titanium
SDK包含了很多手机平台的APIs和后端云服务。

 

 

medium-editor – Medium.com
WYSIWYG编辑器的克隆. 使用可改写的API来实现富文本解决方案。

Mobile Angular UI

Fabric.js 是一个让开发人员能够使用HTML5
canvas元素的框架,它是一个在canvas元素上的交互式对象模型。
它也是一个SVG-to-canvas解析器。

4.数据集成。提供了强大的数据包,通过Ajax、JSONp、YQL等方式绑定到组件模板,写入本地离线存储。

 

大家可以到PhoneGap
documentation官方文档开始对PhoneGap的学习。

 

1.基于最新的WEB标准 –
HTML5,CSS3,JavaScript。整个库在压缩和gzip后大约80KB,通过禁用一些组件还会使它更小。

在线示例.

PhoneGap 恐怕是最老的一个框架了,相信很多人都已经听说过甚至使用过它,但是PhoneGap是基于开源的 Cordova 商业版本。

 

Intel XDK 是Inter开发的一款跨平台开发工具,我们可以很容易的通过Intel
XDK开发应用,你需要做的只是下载他们的应用开发工具
,有Linux、Windows和Mac版,它还提供了很多个开发框架,比如Twitter
bootstrap, jQuery Mobile 和 Topcoat.

图片 10

Kendo UI

图片 11

3.增强的触摸事件。在touchstart、touchend等标准事件基础上,增加了一组自定义事件数据集成,如tap、swipe、pinch、rotate等。

图片 12

我们现在目前市面上最为流行的一种框架就是混合开发框架,它可以用最少的人来做更多的多的事,是一些中小公司所欣赏的框架,下面我来给大家分享一下:开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了。如果你总听别人说HTML5的移动应用太慢,我只能告诉你应该有一些主见,首先HTML5会越来越好,移动端的硬件也会越来越强,怎么说呢,你仔细看一看你手机上的应用吧,很多应用已经悄悄的使用混合式开发了,如果像你说的它们很慢,你发现它们了吗?

var db = new PouchDB('dbname');

db.put({
  _id: 'dave@gmail.com',
  name: 'David',
  age: 69
});

db.changes().on('change', function() {
  console.log('Ch-Ch-Changes');
});

db.replicate.to('http://example.com/mydb');

Appcelerator Titanium

babel 
— 图片 13 Babel是一个编写下一代JavaScript的编译器。

  • Bootstrap 3

  • AngularJS

  • Bootstrap 3 Mobile组件,比如switches,
    overlays和sidebars,这些都是bootstrap中没有的。

  • AngularJS modules, 比如 angular-route, angular-touch 和
    angular-animate

Gulp  — 流构建系统

下面是Sencha官方给出的几点特性

Countly 
—基于插件的实时移动,Web和桌面分析平台,具有超过10个不同的SDK。
Countly还包括针对移动设备的大量推送通知和崩溃报告服务。

Titanium使用 Alloy,Alloy是一个快速开发的手机应用MVC框架,
模块式开发可以大大减小开发时间,提高代码复用。

eme  — 一个优雅的Markdown编辑器

Appcelerator’s Titanium 不同于其它框架的是,它是一个开源的框架。

D3  — 
用于使用Web标准可视化数据的JavaScript库。
D3帮助您使用SVG,Canvas和HTML将数据带入生活。
D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合,为您提供现代浏览器的全部功能以及为您的数据设计合适自由的可视界面。

Sencha Touch可以让你的Web App看起来像Native
App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的
WEB标准,全面兼容Android和Apple iOS设备。

转自:CTOLib ,

IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript
MVVM框架和 AngularJS来增强应用。提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。即将发布的AngularJS
2.0将会专注于移动开发,相信IONIC一定会取得不错的成就 。

 

IONIC的开发团队将尽快开发出一种通过IONIC
creator提供开发者快速创建IONIC应用的方式。我们将很快就会看到一个支持拖拉功能的可视化开发工具,几分钟内开发一个app将不再只是吹xx。 

图片 14

结论

Chart.js  — 
一个使用canvas元素实现简单HTML5图表。

Sencha
Touch 同样也是HTML5手机应用跨平台开发框架,运行iOS/Android/Blackberry。它已经诞生很多年了,现在已经成为很常用的混合式编程开发框架。

发表评论

电子邮件地址不会被公开。 必填项已用*标注