ionic 2 介绍

1、兼容性

根据官方说明，支持的平台和最低版本以下：

Ionic 1

• iOS 7+
• Android 4.1+

Ionic 2

• iOS 8+
• Windows 10 Universal App
• Android 4.4+ （使用Crosswalk能够最低支持4.1）

官方说明

2、性能对比

根据官方文档，再也不经过使用 JavaScript 的 scrolling，应用在 iOS 和 Android 滑动时帧率能够达到60FPS，这得益于2.0 final 版实现的 Virtual Scroll。

经过列表建立10000个items，Ionic 一、Ionic 二、Native 的表现以下：

Ionic 1

和 Native 相比不是很流畅，区别明显。

Ionic 2

和 Ionic 1 相比明显流畅不少，接近原生。

3、Ionic 2 相比 Ionic 1 的优势

一、组织结构清晰

Ionic 1 的文件组织结构：

Ionic 2 的文件组织结构：

经过这种默认的文件组织，一切很是整洁、 有条理，也更容易构建模块化的代码。

二、更强大的 CLI 工具

经过 Ionic 2 CLI 便可自动生成须要的 pages、providers、tabs、pipes 而且会配置好须要的文件和必要的代码，好比以下命令：

ionic g page MyPage

便可生成以下组织的文件：

my-page.ts 内生成的代码以下：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
 
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
 
  }
}

三、调试更方便

• Error Handling：

当开发时遇到编译错误，经过ionic serve命令，详细的错误信息会直接显示在浏览器窗口。

• Ionic Serve Lab：

经过ionic serve --lab命令，可预览应用在不一样平台的显示效果：

四、导航跳转

Ionic 1 中跳转是经过 URLS 来进行：

.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
  .state('intro', {
    url: '/',
    templateUrl: 'templates/intro.html',
    controller: 'IntroCtrl'
  })
  .state('main', {
    url: '/main',
    templateUrl: 'templates/main.html',
    controller: 'MainCtrl'
  });
 
  $urlRouterProvider.otherwise("/");
 
});

而后经过 activate 这些 states 来连接到这些 URLS，而 Ionic 2 不一样于 Ionic 1 的这种 web 式的跳转，而是经过 pages 的 pushed 和 popped，更 native 一些：

this.nav.push(MyPage);

五、语法更简洁

Ionic 1:

![]({{photo.image}})

Ionic 2:

<img [src]="photo.image" />

Ionic 1:

<button ng-click="doSomething()">

Ionic 2:

<button (click)="doSomething()">

六、语言更简单安全

Ionic 2 建议使用 TypeScript 进行开发，这样能够享受到ES6带来的简洁语法和泛型等安全特性，以使构建大型项目更安全、稳定、易于调试。

4、Ionic 2 相比 Ionic 1 的缺点

Ionic 2 相比 Ionic 1，打包后的 app size 会大很多。

5、ES6 新特性

一、Classes

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

二、Modules

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593
 
//  someApp.js
import * as math from "lib/math"
console.log("2PI = " + math.sum(math.pi, math.pi))
 
//  otherApp.js
import { sum, pi } from "lib/math"
console.log("2PI = " + sum(pi, pi))

三、Promises

doSomething().then((response) => {
    console.log(response);
});

四、Block Scoping

for (let i = 0; i < a.length; i++) {
    let x = a[i];
}

五、Fat Arrow Functions

someFunction((response) => {
    console.log(response);
});

这样就能避免不少this的坑，好比：

var me = this;

someFunction(function(response){
    console.log(me.someVariable);
});

6、TypeScript 特性

TypeScript 是由微软开发的一种基于 JavaScript 语法的语言，且已经支持了 ES6 、 ES7 语法。你能够理解它为 JavaScript 的超集，也能够理解为 JavaScript 的加强版。

它主要解决了如下问题：

一、编译期类型检查

JavaScript 代码:

var name;                   //定义变量

function getName(type) {    //定义函数
    return ...
}

class Person {              //ES7 下的类定义
    name = '';
    age = 18;

    getName() {
        ...
    }

    getAge() {

    }
}

TypeScript 代码：

var name: string; //定义变量

function getName(type: string):string {  //定义函数
    return ...
}

class Person {              //类定义
    private name: string = '';
    private age: number = 18;

    public getName(): string {
        ...
    }

    public getAge(): number {

    }
}

二、代码智能提示

TypeScript 语言天生是带有类型信息的，能够完美识别出一个对象的类型，它自身有哪些属性和方法，而后调用这些方法时，也能智能匹配出它的函数原型。写起来更不易出错。

三、JavaScript 混合编程

TypeScript 和 JavaScript 能够在一个工程里面混合编程， TypeScript 的文件后缀是 .ts ， JavaScript 的文件后缀是 .js 仅此而已。 ts 文件里面依然用 import 或者 require 来引入一个 module 。

四、其它

其余几个不错的新增语法点：

• TypeScript 提供了 enum
• TypeScript 提供了泛型
• TypeScript 提供了接口
• TypeScript 提供了元组
• TypeScript 提供了类型推导

参考资料

• 7 Reasons Why Ionic 2 Is Better Than Ionic 1
• LEARN ANGULAR 2
• Announcing Ionic 2.0.0 Final
• 让咱们一块儿来学习 RxJS
• TypeScript - JavaScript that scales.