Ionic——下一代 APP 开发框架

http://www.tuicool.com/articles/iY3ENvY

最近 Facebook React 团队释出了 React Native, 用来构建 Mobile Native 应用. 非常给力的口号即是标题所指: Learn Once, Use Anywhere.

我突然觉得, 他们正好把我思想的口号给用去了( 不过我没想到这么美的词 ), 因为我已经在更早的时候就决定要讲一讲 Ionic 了, 这个口号也同样是: Learn Once, Use Anywhere, 但是, 加了一句, For AngularJS.

开始 Ionic 之前, 我们要先回顾下历史.

Web 领域的历程

Web 领域从 1995 年第一个真正的网站建立到 2015 年, 发展的飞起. 整体而言, 我认为经历了以下发展阶段:

1. 原始期 - 拼接字串( 用 C, C++, Bash 编写 CGI )
2. 语言期 - 专为 Web 而生的语言 php, 商业化项目 jsp
3. MVC 框架期 - Java 秀的飞起, 最著名的当属 J2EE, 以及后起之秀 Spring
4. MVC 框架颠峰期 - 当属 Rails, 将动态语言的优势发挥到极致, 以及各种语言衍生的一大批类 Rails 框架
5. 前后端分离期 - 目前所处的 "混乱" 时期

我认为, 前后端分离是必然的趋势, 切看我的分析.

前后端分离的必然原因

Web 刚兴起的时候, 它真的只是 "Web", 它只管浏览器的渲染, 大家头疼的只是各家浏览器的兼容性问题. 于是乎, jQuery, Bootstrap 等和它们的组件们层出不穷, 来解决这类问题.

随着 Web3.0 的到来( 我参考 <文明之光> 发明的词, 意指移动端 Web 的起步 ), 我们发现, 现在的问题不是浏览器的问题了, 而是伴随着各种各样的屏幕, 以及各种各样的嵌入Web. 而且, 最擅长构建界面的 Web 技术还没有打入 APP 阵营.

我们以前的经验似乎都不够用了, 但是, 我们发现, 如果不把浏览器当浏览器, 而把它们当作数据处理层( 这要求浏览器拥有很高的计算能力, 以前这不可想像, 而但是, 一个 iPhone5 的手机处理能力超过几年前的一个 PC ), 服务器只提供数据( 目前最流行的方案即 Restful API ), 如此, 我们就可以解决 Web3.0 下的主要的问题:

1. 屏幕的多样性( Web 渲染技术是目前最强大的 UI 渲染技术, 没有之一, 可以渲染各种屏幕效果无压力 )
2. 用户体验 ( 在移动网络还不够给力的时候, 前端代码预先下载简直完美 )

通过这样的革新, Web 技术自然而然渗入到原生 App 的领域. 其优势在于:

1. 开发效率更高( 我认为等到 Web APP 技术成熟, 至少十倍于原生 App 开发效率 )
2. 跨平台开发( Web APP 可以做到基本跨平台使用, 并且随着技术推进, 可以做到接近原生性能 )
3. 最重要的一点, 学一次, 到处用.( 当你掌握了前后端分离的开发技术, 你既可以写 APP, 又可以做网站, 不仅 iOS, 而且 Android, 甚至于 WinPhone )

既然如此, 是时候影响到原有的 Web 开发技术了:

在 Web3.0 的发展下, 传统的 MVC 框架, 会转变为前后端分离的开发方式. 这样, 你就可以学一次, 到处用.

AngularJS 领域下的 Learn once, Use Anywhere 新秀: Ionic

AngularJS 是一个类似于 Rails 的全栈式的前端框架, 它拥有自己的路由, 控制器, 作用域, 和组件, 非常适合作为前端的全栈基础框架. 而 Ionic 正是基于它而完成一个框架:

1. Ionic 目标是开发原生 APP 而不是 Web APP, 从体验上如此.
2. Ionic 可以操作大部分原生 API, 因为它基于 Cordova ( 一个可以用 JS 操作原生 API 的基础项目 )
3. Ionic 是面向未来的框架, 换句话说, 它是为新手机准备的.( 官方仅支持 iOS6+, Android4.1+ )

Ionic 的技术构成为:

1. AngularJS 为基础, 在其上封装了众多组件, 如 侧面滑动, Tabs, 刷新, 无限滚动等等你能想到的与原生 APP 类似的组件.
2. 一套 CSS 样式, 一方面配合上面的组件, 另一方面并提供给你使用.
3. 一套改进的工作流, 基于我之前那篇 Web 工作流里用到的所有的工具.( 默认是 NodeJS, Gulp, Bower )
4. 一套命令行工具, 帮助你快速开发, 测试, 构建, 发布你的 APP.

Ionic 工作流非常简单:

1. ionic start myapp [template]
2. 像 AngularJS 应用一样写自己的页面与控制器( 与原生效果几乎一致 )
3. ionic platform add ios
4. ionic build ios
5. ionic emulate ios

一些国内的例子:

1. CNodeJS
2. WBlogApp
3. Ionic ShowCase

就在最近, Ionic 上线了 LiveReload 功能, 你可以在模拟器与测试机器( 没错, 是你的手机 )上, 得到实时的代码刷新功能.( 此刻, 我想, 真正的 iOS 工程师还在编译他们的 xcode 吧.)

如果你就是工程师, 马上去试试吧: http://ionicframework.com/getting-started/

在这个领域, Ionic 的野心就跟 Web2.0 时代的集大成者 Rails 一样大, 都想建立整个开发流的生态环境.

反哺 Web2.0

一旦你的团队计划一并开发 APP, Web APP, 以及网站, 那么, 最佳的选择即是一套前后端分离的技术栈, 它可能是这样:

1. AngularJS( 前端框架 )
2. Ionic ( APP 全栈框架 )
3. Angular UI ( Bootstrap for AngularJS )
4. Rails / ExpressJS / Go( API 后台 )

现在, 我们可以不再使用传统的 MVC 框架的 Web 开发工作流, 而只需要关心前后端分离后的工作流:

1. API 开发与测试
2. 前端工作流( 类似于 Yeoman )

你既不需要学习传统的 MVC 中的 复杂的 form 处理流程, 也不用关心 session, cache 等在 Web3.0 不存在的问题, 只需要关注好前后端分离之后的问题即可:

1. SEO ( 已经有服务端渲染的方案解决了: https://prerender.io/ )
2. 用户体验 ( 因为前后端分离后网页也变的更快, 也许模拟的慢一点, 会让某些人更习惯点 )
3. 与原生 APP 相比性能的优化

最后, 使用 AngularJS 与 Ionic, 运用同一种思想开发 APP 与网站, 这就是:

Learn Once, Use Anywhere.

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

目前的手机APP有三类：原生APP，WebAPP，HybridApp；HybridApp结合了前两类APP各自的优点，越来越流行。

Cordova就是一个中间件，让我们把WebAPP打包成HybridAPP，并且它提供了非常多的插件，方便我们使用原生APP的功能。

Ionic是一个界面样式库，仿照原生的ios和android界面；同时它是基于AngularJs的。

本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境，包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。

关于Android开发环境的搭建，以及Cordova的下载使用，我们上一篇已经说明：《Cordova环境搭建 & HelloWorld》

这一篇，我们来使用 AngularJS+Ionic+Cordova 快速地做出我们第一个HybridAPP，开始吧！

开始步骤网站上有： http://ionicframework.com/getting-started/

官网css组件：http://ionicframework.com/docs/components/#header

1 安装Ionic和Cordova

官网 http://ionicframework.com/

国内 http://www.ionic.wang/

命令行安装ionic

$ npm install -g cordova ionic

2 新建一个Ionic项目

$ ionic start myApp tabs

3 运行我们刚才创建的Ionic项目

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
$ ionic emulate android (模拟器运行)
$ ionic run android (连接上手机运行)

首次运行虚拟机可能里边没有安装上我们的应用，可以新开一个cmd，运行：

$ adb install [APK-PATH]

然后虚拟机里边就能找到应用并打开了。

4 在浏览器预览并实时刷新

$ ionic serve

我们选择localhost，并把浏览器调成mobile模式；

然后我们进入编辑器修改项目文件夹www中的代码，看到，浏览器已经可以跟着我们的保存实时刷新，非常好用！！！

也可以使用指定IP地址来启动serve，这样方便用手机来预览：

ionic serve --address 192.168.xxx.xxx

安卓手机中导航显示在顶部的问题

http://bbs.phonegap100.com/thread-1495-1-1.html