В ближайшее время Ionic и AngularJS получат большие обновления, то есть будут выпущены Ionic 2 и angular2. Это будет следующий большой шаг в развитии мобильных приложений. Мы все очень рады этому, но если вы разрабатываете профессиональное программное обеспечение для клиентов, как мы, вы часто не можете переключиться на фреймворки в бета-фазе.
В настоящее время мы пытаемся, как и многие другие, добиться плавного перехода на новую технологию. Поэтому мы будем готовы, когда выйдет Ionic 2. Вопрос в том, как подготовиться? Мы некоторое время думали об этом и пришли к выводу, что лучше всего начать с нового языка, который использует Ionic 2. Для тех, кто не следил за сценой: angular2 и Ionic 2 рекомендуется писать на ES6 (ES2015) или Typescript. Обе команды разработчиков поддерживают Typescript, и мы тоже.
Вот почему большая часть этого поста будет посвящена тому, как интегрировать Typescript в наш текущий стек генератор-m-ionic и как извлечь выгоду из нового языка.
Интеграция машинописного текста
Во-первых, для тех, кто не слышал о ES6: это фактически следующий уровень JavaScript. Typescript — это расширенный набор ES6, он добавляет больше функций, самая большая из которых — это типы. Да печатает в JavaScript. Чтобы узнать больше об основах, загляните на typescript.org.
Итак, что нам нужно сделать, чтобы написать Typescript в наших приложениях? Потребуется несколько шагов, но не волнуйтесь, пошаговая инструкция есть здесь. В связанном репозитории вы также найдете примеры этого поста в блоге как простого приложения todo.
Так как большинство браузеров не понимают всего ES6 или Typescript, нам приходится транспилировать код из Typescript в JavaScript. Шаг переноса будет выполняться сценариями, которые мы включили на предыдущих шагах, и он должен просто «работать». Если вы опасаетесь нечитаемого кода после транспиляции, у нас есть кое-что для вас: исходные карты. Благодаря исходным картам можно будет отлаживать исходный код (Typescript) в браузере. Браузер, например. сопоставьте операторы журнала и отладчика с соответствующими файлами и строками Typescript при выполнении транспилированного кода JavaScript. Означает, что большую часть времени вы не будете трогать или просматривать транспилированные файлы JavaScript.
Запачкайте руки — написание машинописного текста
Закончили разговор, давайте продолжим писать машинописный текст. Прежде всего, мы создадим контроллер. Просто добавьте новый файл todo-ctrl.ts в ваш основной модуль в папку controllers и вставьте следующий код. Для сравнения мы поместили большинство примеров Typescript и JavaScript рядом, чтобы вы могли лучше сравнить код.
/// <reference path="../../../typings/browser.d.ts" />
class TodoCtrl {
constructor(
private $scope: ng.IScope
) {
this.$scope.$on(
'$ionicView.afterEnter', () => this.hello('World')
);
}
public hello (name) {
console.log(`Hello ${name}!`)
}
}
angular.module('main')
.controller('TodoCtrl', TodoCtrl);
angular.module('main')
.controller('TodoCtrl', function ($scope) {
var self = this;
$scope.$on('$ionicView.afterEnter', function () {
self.hello('World');
});
this.hello = function (name) {
console.log('Hello ' + name + '!');
}
});
Когда наблюдатель (gulp watch) запущен, он будет транспилирован и может быть интерпретирован вашим браузером. Приложение angular будет работать, даже внедрение зависимостей. Потому что он основан на именованных параметрах. С генератором-m-ionic экономится даже минимизация благодаря ng-annotate. Мы также использовали здесь три функции ES6: классы, стрелочную функцию и шаблонные литералы, которые весьма удобны по сравнению со старым эквивалентом ES5.
Это выглядит точно так же для сервиса, просто зарегистрируйте его в своем модуле.
angular.module('main')
.service('TodoService', TodoService)
Использование угловых компонентов
Следующим шагом будет использование компонентов вместо директив. Они работают одинаково, но компоненты гораздо больше похожи на angular2-components и менее сложны, чем директивы. Вы можете получить больше информации о компонентах в этой записи блога.
Простой пример может выглядеть так:
class TodoComponent {
private todo: TodoModule.ITodo;
};
angular.module('main')
.component('todoItem', {
bindings: {
item: '='
},
controller: TodoComponent,
controllerAs: 'todoC',
template: `
<ion-item>
{{todoC.item.description}}
</ion-item>
`
});
angular.module('main')
.component('todoItem', {
bindings: {
item: '='
},
controller: function () {},
controllerAs: 'todoC',
template: `
<ion-item>
{{todoC.item.description}}
</ion-item>
`
});
Как видите, вы можете легко написать большинство частей на Typescript. С моей точки зрения это здорово.
Хорошие функции машинописного текста
Кроме того, я хотел бы поговорить о возможностях, которые вы получаете с Typescript, и о том, как с его помощью вы можете писать более качественный и читаемый код AngularJS. Одной из самых удобных функций является Определения машинописного текста. Для большинства распространенных библиотек и фреймворков существует реестр под названием typings, который предоставляет эти файлы определений. Поэтому вы можете использовать автодополнение кода в своем редакторе или IDE. Но как это работает? Это довольно просто, вам просто нужно добавить путь ссылок к файлу d.ts и аннотацию к любой переменной, например:
/// <reference path="../../../typings/browser.d.ts" /> ... var $ionicLoading: ionic.loading.IonicLoadingService;
В следующий раз, когда вы будете использовать переменную $ionicLoading, редактор покажет вам ее возможные функции или свойства. Это означает: никакого некрасивого переключения между документацией и кодом, когда вы просто забыли название функции. Я думаю, что это очень важно для разработчиков ionic, потому что вам нужно иметь в виду так много разных API, как ionic, angular, cordova, DOM, API браузера и т. д.
Еще одна замечательная особенность Typescript — Интерфейсы. Многие приложения, которые мы пишем, являются тяжелыми бизнес-приложениями. Например, в этих приложениях вам нужно вводить данные в тонны полей ввода. Таким образом, вы получаете большие модели, и иногда вы забываете, какие свойства разрешены, обязательны и какие типы они используют. С Typescript вы можете использовать интерфейсы, и редактор может рассказать вам обо всем этом.
module TodoModule {
'use strict';
export interface ITodo {
id: string;
description: string;
createDate: number;
done: boolean;
note?: string;
}
class TodoService {
public todos: Array<ITodo> = [];
addTodo (description: string) {
this.todos.push({
id: Date.now().toString(),
description: description,
createDate: Date.now(),
done: false
});
}
}
}
'use strict';
angular.module('main')
.service('TodoService', function () {
var self = this;
this.todos = [];
this.addTodo = function (description) {
self.todos.push({
id: Date.now().toString(),
description: description,
createDate: Date.now(),
done: false
})
}
});
В примере кода вы можете видеть, что мы ссылаемся на интерфейс в универсальном массиве, поэтому, когда мы помещаем данные в этот массив, компилятор Typescript может сообщить нам, использовали ли мы все необходимые свойства в правильном типе или нет. Есть много возможностей использовать интерфейсы, но во всех случаях вы получите более читаемый и удобный код без особых усилий.
Что еще?
Есть еще много примеров написания Typescript на ionic1. Я также должен отдать должное ребятам из Ionic, у них была хорошая серия блогов на эту тему. Для немцев у ребят из angularjs.de также был очень хороший пост по этому поводу.
Вы даже можете сделать больше, чтобы ваши приложения выглядели как код angular2, например. используя ng-forward. Или используйте новую модульную систему, представленную ES6. Об этом говорится в сообщении в блоге от замечательных парней из Thoughtram.
В итоге я вполне доволен описанным способом. Вы можете написать современный код Typescript, но он все равно будет похож на Ionic в JavaScript. Это шаг в правильном направлении, и его легко принять. Думаю, поначалу это будет немного незнакомо, но вам не обязательно сразу использовать каждую концепцию. Вместо этого вы можете постепенно улучшать свой код.
Матиас Майер
Первоначально опубликовано на сайте blog.mwaysolutions.com 23 марта 2016 г.
