Ionic2优于Ionic1的6个理由
经历了一个从0到有的app的开发，我已经很熟悉Ionic1了，在此期间我曾发现过Ionic1的一些bug，和一些不合理的地方（根基版本 不同，后续我会陆续发表这些文章），我甚至在此期间对Ionic1进行代码改造和Hack，或者对其组件进行增强和封装，在onic2刚刚发布的时候，我 就已经迫不及待的欣赏它的新特性，但是我为此不得不再学习另外一个框架。
如果你已经熟悉Anguar1和Ionic1，那么请不要嚣张（陕西话叫zhang，二声。东北话叫嘚瑟，河南话叫啥？回家问问我妈再告诉 你！），听小明在这里慢慢跟你说，Angular2是一个全新的框架，它从ReactJS以及其他web移动框架借鉴了不少经验和优点，巨大的改进使得开 发体验和性能已经超越了Angular1，而且Ionic2无论是从UI交互效果和跨平台的差异性都优于Ionic1，如果你继续为维护Ionic1的项 目我我无法阻挡，但是如果你正在再发新的APP跨平台项目，我建议你考虑一下Ionic2。
1.组织结构和框架
在Ionic2中，每个组件、页面都只专注于做一件事，它单独有自己的一个目录，有自己的类（Class）、模板文件（Template）和自己的样式文件（在这里我们提倡使用scss）。下面我们看一下在Ionic2中一个小模块是怎样的结构：
home.ts
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(private navCtrl: NavController) {
}
}home.scss
.home {
&.xxx{
}
.xxx{
}
}home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="home">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>app/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
</ion-content> ionic2的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。
2.命令行工具
在开发中，我们总希望能够有一个规范使得我们的开发更具有合理性，同时还能提升我们的开发效率，那么ionic2的CLI完全可以满足你这一点。
ionic generate page MyPage
或者
ionic g page MyPage
我们看一下EM6的代码生成结果：
import {Page, NavController} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/my-page/my-page.html',
})
export class MyPagePage {
static get parameters() {
return [[NavController]];
}
constructor(nav) {
this.nav = nav;
}
}在Ionic2中我们常用的有component、page、pipe、provider等，CLI会根据需求生成模板代码，并放置在规范的目 录下。在这里需要说明一下，ionic2的风格与Angular2格稍有不同，但是希望你能够求同存异，因为我觉得angular2也很有代理，它提倡文 件的命名是带有.后缀的，如组件：xxx.component.ts、管道：xxx.pipe.ts、服务：xxx.service.ts等，详情可以查 看angular官方文档。
3.路由导航
Ionic2的路由导航不同于Ionic1，我们都知道其实Anngular1自带理由是比较弱的，在复杂路由跳转的app中，是很吃力的，我 们一般都是依赖Angular1的插件ui-router，它是基于URL的hash（当然官方也提供配置切换到html5模式），那么ionic1也是 在这个基础之上进行导航封装的，比如说页面导航堆栈。
ionic1的路由设置：
.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("/");
});但是如果你使用Ionic2，事情就变得务必简单，你可以通过导航的push方法入栈页面，和pop方法出栈页面，因此你可以在Ionic2中你可以实现复杂导航。
this.nav.push(MyPage);4.模板的语法结构
ionic2的模板语法与Ionic1非常相似，但是看起来又有点古怪，其实Ionic2的模板语法更为简洁。我们来看一下对比。
- ionic1：
<img ng-src="{{photo.image}}" />- ionic2：
<img [src]="photo.image" />我们看一下 事件调用：
- ionic1：
<button ng-click="doSomething()">- ionic2：
<button (click)="doSomething()">5.它仅仅是javascript而已
ionic1和angular1都有一些特定的语法，但是追其根本只不过是javascript，也许你对EM6认识不是很深，但是你改变不了 它是ECMAscript标准的事实，也就是说作为一个web前端开发的你，逃不了要学习这项新的语言，如果你感兴趣你可可以试试Typescript， 如果你曾经做过后台开发，我敢肯定你会爱上它，那么你使用ionic2的同时，你是在熟悉未来web的新标准，它会让你成为一个更好的web前端开发者。 直到现在仍然有很大一部分前端开发人员不知道angular，不知道reactjs，甚至EM6和typescript，所以你应该感受到一丝优越感。
但是从使用上，EM6/ TS能够让你避免很多问题，比如说：
- jsvascript：
this.someData = null;
var me = this;
doSomething(function(data){
me.someData = data;
});看到了么？你问了使用this指针，不得不在函数外面作为变量me的引用，但是你使用了EM6:
this.someData = null;
doSomething((data) => {
this.someData = data;
})6.编译
ionic从平台上讲是基于cordova的封装（ 不仅仅是它的CLI
），因此ionic工程也是一个标准的cordova工程，也就是说我们最终给跨平台提供的是www目录的资源文件，但是在ionic2中我们都是在 www的同级目录的app目录进行编码，也是因为我们使用EM6或Typescript写的代码浏览器并不能够直接执行，如果你自己观察ionic2的工 程目录，你会发现Gulp.js的脚本多了几个任务的定义，其实是几个ionic的钩子命令，如ionic
serve，ionic build之类的，其目的是在我们打包，或者浏览器模拟时的
命令执行之前，执行一些gulp任务，其中就是对typescript、scss的编译，是不是感觉很方便，而且最终合并编译到www/build/js目录下，并且很难反编译，也就是说你的app如果被人解包，他只能运行，但如果想拿到你的源码是相当困难的。
总结
毫无疑问，我是比较建议大家使用Ionic2的，也许在使用过程中你会发现诸多问题，但是我觉得最终都能的到解决，还有就是从性能上，还是会比 ionic1提升甚多，但是绝不是有人说的10-100倍，没那么夸张，我们的angular框架或者reactjs其实在移动前端方面正在追求极致，既 考虑到的开发的易用性，又考虑运行的流畅性，很多思维和架构是值得我们去深究的。
