Ionic HTML5 移动框架发布 Alpha 预览版

  • Burke Holland
  • 孙镜涛

2013 年 12 月 30 日

话题:JavaScript移动HTML5语言 & 开发

Ionic是一个新的、可以使用 HTML5 构建混合移动应用的用户界面框架,它自称为是“本地与 HTML5 的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tab bars)和触发开关(toggle switches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单

Ionic 宣称他们极度强调性能,并且通过限制 DOM 交互、完全移除 jQuery 以及使用像 translate(z) 这种特定的硬件加速的 CSS 滤镜触发移动设备上 GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

专注于性能也意味着 Ionic 仅支持 iOS6 及更高版本和 Android 4.1 及更高版本。“在过去一年左右的时间里,设备更新换代的速度更快,但是 HTML5 框架依然非常保守”,Drifty(Ionic 背后的公司)的 CTO Max Lynch 说。“对于 Ionic,我们非常具有侵略性地做出了仅支持新设备的决定,同时会为触控手势、动画和本地样式的 UI 元素添加大量支持”。

AngularJS 基础

该框架基于流行的来自于 Google 的AngularJS 框架实现,Ionic 利用 AngularJS 提供应用结构,而 Ionic 本身则关注用户界面。这意味着所有的视图、应用路由和控制器都是由 AngularJS 处理的。Ionic 为它自己的组件提供了一组指令,因此开发者能够使用 Angular 创建自定义 HTML 元素的能力定义 Ionic UI 组件。例如,可以使用“list”指令创建一个带有惯性滚动条的 Ionic 移动列表。

<list>
<item ng-repeat="item in items" item="item"></item>
</list>

Ionic 对触控、视图间动画、消毒 HTML 以实现安全输入和 XHR 调用的支持也依赖于 Angular。

Ionic 提到他们计划在将来支持其他的框架,例如EmberJS 和 Knockout

响应

对于该版本的响应包括与试图使用 HTML5 构建本地应用相关的常见争论,同时还有一些人对该框架不支持 Android 4.1 之前的版本表示担忧。用户 ValentineC 这样写道:

“虽然我同意支持 iOS6 及以上版本的决定,但是我相信 Android 平台的升级路线还不是很明确。我现在工作的这个项目就使用中国设计的手机,由于产品之间的差异,很多手机都使用了旧版本的 Android。希望你们会重新考虑这个决定”。

可用性

当前版本的 Ionic 是一个Alpha 版本。作为一个 NPM 类库你可以通过命令行安装它,它会使用 Ionic 种子为你生成需要的项目,项目内容包括使用 Ionic 和 AngularJS 构建一个应用所需要的所有内容:

  • sudo npm install –g ionic
  • ionic start myproject

Ionic 是一个开源项目,它基于MIT 许可提供。

查看英文原文:Ionic HTML5 Mobile Framework Alpha Preview

JavaScript移动HTML5语言 & 开发