先看几个名词解释:
nodejs
ionic,Cordova,phoneGap,anjularjs
react-native,reactjs
nodeJs 的介绍参见这里,写的很好 http://www.ibm.com/developerworks/cn/opensource/os-nodejs/index.html
总结一下,它是一个V8引擎的封装,V8引擎就是Chrom用来处理javascript的模块,自然,它的作用就是解析并执行javascript。以前这个工作就是游览器的工作,现在不是了,用nodejs就可以了。既然是一个封装,自然又添加了一些内部方法,所以即使会了javascript也需要学习一下才能使用。
phoneGap 的介绍参见 http://www.tricedesigns.com/2012/02/14/what-is-phonegap-other-common-questions/,简单地说,就是一个中间件工具,通过使用它提供的api,能让js具备读取手机信息功能,比如说相机,gps,联系人等。用phonegap写出的手机程序,就是一个运行在Webview中的网页程序。
Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。
ionic
ionic是一个强大的_混合式/hybrid_HTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用:
ionic主要包括三个部分:
- CSS框架 - 提供原生_App质感的CSS样式模拟_。ionic这部分的实现使用了ionicons图标样式库。
- JavaScript框架 - ionic基于AngularJS基础框架开发,遵循AngularJS的框架约束;主要提供了适应移动端UI的 AngularJS的扩展,主要包括指令和服务。此外,ionic使用AngularUI Router来实现前端路由。
- 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。
总结一下,就是ionic是一个成熟的使用了Cordova核心的框架。
react-native: Facebook公布了即将开源的React Native,它基于开源框架React.js,并可用来开发iOS和Android原生应用.
React Native基于React.js实现,而React.js是Facebook推出并开源的一个用来构建用户界面的JavaScript库,其已经应用于构建Instagram网站及Facebook部分网站。React.js 同AngularJS、MeteorJS和Polymer类似,它们都属于Model-Driven Views结构的框架,但是React.js又与他们有不同之处,即React.js使用JavaScript而非HTML来构建用户界面。
React.js ,其实也是一个js库,单独使用时,引入react.js和JSXTransformer.js(如果想用JSX语法的话)这两个js文件,就可以了。
使用React Native开发原生应用的原理是:在JavaScript中用React.js抽象操作系统的原生UI组件,继而代替DOM元素来渲染,比如使用<View>取代<div>,使用<Image>替代<img>等。在后台,React Native运行在主线程之外,而在另一个专门的后台线程里运行JavaScript引擎,两个线程之间通过异步消息协议来通信(有个专门的插件)。
JSX:用Reactjs时,不可避免的要调用个中React的函数,去创建对应的页面元素(比如下面这个a标签,在ios中,最后会被变成一个UIView,不是真正的a标签了)代码写起来很多,就有人发明了这个JSX。JSX 是一種在 Javascript 中使用的 XML 語法,目的是用來轉換成原生的 Javascript。
因为 JSX 最终是输出成 JS 代码来表达的,所以我们可以直接用 React 提供的这些 DOM 构建方法来写模板,比如一个 JSX 写的一个链接: <a href="http://facebook.github.io/react/">Hello!</a> 用 JS 代码来写就成这样了: React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')