Ionic 2 против Ionic 1: прирост производительности, новые инструменты и большой шаг вперед

Проект Ionic стремительно набирает популярность. С более чем 27 000 звезд на GitHub он стал одним из 50 самых популярных проектов с открытым исходным кодом в мире.

А поскольку стабильная версия Ionic 2 была недавно анонсирована, для инженеров самое время проанализировать и понять различия между Ionic 2 и Ionic 1.

На высоком уровне Ionic 2 — это полностью переписанный проект Ionic 1 с Angular >= 2.x. Исходя из моего более чем 2-летнего опыта использования Ionic 1, вот что это будет означать на практике.

Улучшенная производительность обнаружения изменений

Ionic 1 основан на Angular 1.x, а Ionic 2 основан на Angular >= 2.x. Повышение производительности, которое вы получаете, просто используя только Angular >= 2.x, является значительным.

С Angular 1.x для получения производительных приложений требовалось много глубоких знаний фреймворка (таких как $watch , одноразовая привязка и т. д.). С Angular >= 2., приложения x довольно производительны из коробки.

В новой версии Angular был убран знаменитый и порицаемый цикл дайджестов (отслеживание и тестирование каждой переменной приложения при каждом изменении). Вместо этого Angular >= 2.x полагается на Zone.js для отслеживания изменений в приложении (как синхронных, так и асинхронных).

Обнаружение изменений в Angular >= 2.x стоит изучить, чтобы понять, как все работает внутри. В Angular >= 2.x обнаружение изменений всегда выполняется сверху вниз. Использование правильной стратегии обнаружения изменений ( OnPush или Default ) в ваших собственных компонентах имеет первостепенное значение, если вы хотите контролировать производительность своего приложения.

Все компоненты Ionic 2 используют стратегию OnPush , что означает, что обнаружение изменений выполняется не постоянно, а только при изменении входных данных. Эта стратегия также позволяет избежать ненужного рендеринга поддеревьев компонентов. Он в основном уже оптимизирован для вас.

Если вы хотите узнать больше о том, как получить производительное приложение Ionic1, я предлагаю прочитать этот шпаргалку по производительности Ultimate AngularJS и Ionic.

Более быстрая производительность DOM

Манипуляции с Angular Document Object Model (DOM) претерпели значительные изменения. Если вам нужен реактивный пользовательский интерфейс (UI), важны манипуляции с DOM и производительность JavaScript.

Например, создание 1000 строк в таблице занимает 126 миллисекунд с ванильным JavaScript, на 110% больше (264 мс) с Angular. 1.x и только на 40% больше (177 мс) с Angular >= 2. Как видите, производительность Angular >= 2.x лучше, чем Angular 1.x, и аналогична производительности React.

Ionic 2 снова выигрывает от этого повышения производительности, и делает это «бесплатно».

Новый API веб-анимации

Ionic 1 и Ionic 2 по-прежнему полагаются на анимацию CSS для внутренних переходов и анимаций, но поскольку Ionic 2 основан на Angular >= 2.x, разработчики имеют доступ к новому API веб-анимации (W3C) через систему анимации Angular.

Web Animations API — это JavaScript API, который предоставляет разработчикам доступ к анимационному движку браузера. Пока он поддерживается не во всех браузерах, но с полифиллом вы можете использовать его прямо сейчас и наслаждаться одним из самых эффективных и многообещающих способов анимации в Интернете.

Источник

API анимации Angular >= 2.x позволяет легко описывать сложные анимации (вход и выход из разных состояний или групповые анимации) и предоставляет доступ к жизненному циклу анимации с помощью обратных вызовов.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Встроенная нативная прокрутка

Встроенная прокрутка позволяет Ionic 2 прослушивать события прокрутки в поддерживаемых WebView. Это делает
Pull to Refresh , List Reordering или Infinite Scroll возможны без эмуляции этих событий (прокрутка JavaScript).

До сих пор прокрутка JavaScript была необходима, но веб-представления Chromium (Android) и WKWebView (iOS) эволюционировали и теперь поддерживают встроенную прокрутку. Он включен по умолчанию только на Android с Ionic 1 (с декабря 2015 г.) и включен на всех платформах с Ionic 2.

Встроенная поддержка прокрутки повышает производительность и улучшает взаимодействие с пользователем, помогая обеспечить плавную прокрутку благодаря асинхронным событиям.

Улучшенный API компонентов

Ionic 2 дает вам доступ ко всем компонентам, которые сделали Ionic 1 знаменитым, но теперь улучшены и основаны на Angular >= 2.x. Вот список наиболее распространенных компонентов:

• Кнопка
• Карта
• Значок
• Список
• Меню
• Модальный
• Панель инструментов

API компонентов немного изменился между Ionic 1 и Ionic 2. Например, компоненты Ionic 1 ion-spinner используют атрибут icon для типа счетчика:

 <ion-spinner icon="bubbles"></ion-spinner>

В то время как Ionic 2 использует атрибут name :

 <ion-spinner name="bubbles"></ion-spinner>

Как видите, если вы знакомы с API компонентов Ionic 1, вы также будете чувствовать себя комфортно, используя компоненты Ionic 2. Вам просто нужно знать об этих различиях.

Благодаря внушительному списку компонентов все, что вы можете сделать с Ionic 1, можно сделать с Ionic 2, и даже больше.

Введение веб-воркеров

Web Workers позволяют вашему приложению запускать сценарии в фоновых потоках JavaScript. Рабочие могут выполнять утомительные задачи и HTTP-запросы вне контекста вашего приложения (т. е. без вмешательства в пользовательский интерфейс). Сегодня Web Workers поддерживаются всеми основными браузерами.

Традиционно все фреймворки строились поверх объектов window и document и опирались на них. Тем не менее, в рабочих ни один из них не доступен. Благодаря новой архитектуре Angular >=2, которая отделяет renderer , запуск приложения в Web Workers (или любой другой платформе, если на то пошло) упрощается.

Ionic 2 начинает экспериментировать с использованием Web Workers с новым компонентом ion-img . На данный момент ion-img можно использовать только в списке VirtualScroll. Он делегирует HTTP-вызов изображения веб-воркерам, а также поддерживает ленивую загрузку (т. е. получение и рендеринг изображений только в области просмотра). Ваше веб-приложение теперь фокусируется только на пользовательском интерфейсе и позволяет работникам делать все остальное.

Вот пример того, как его использовать:

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

Имейте в виду, что это только начало, и мы ожидаем увидеть больше использования или веб-воркеров в ближайшем будущем.

Преимущества TypeScript

Если вы использовали Ionic 2, вы уже знаете, что он использует TypeScript. TypeScript — это надмножество JavaScript ES2015, которое компилируется в обычный JavaScript. С TypeScript у вас есть доступ ко всем его уникальным функциям (таким как интерфейсы, примеси и т. д.) и функциям ES2015 (таким как стрелочные функции, генератор, многострочные строки и т. д.).

Давайте рассмотрим пример компонента Angular >= 2.x, отображающего имя президента США:

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

Мы используем интерфейс ( IPresident ), который описывает форму объекта президента. Интересно иметь интерфейсы, описывающие то, чем вы манипулируете, особенно если над проектом работает несколько разработчиков. Если вы допустили ошибку и, например, использовали boolean для имени президента, ваша IDE сообщит вам, что что-то не так, еще до того, как произойдет компиляция.

Практически в любой IDE, которую вы используете (Visual Studio Code, Atom, WebStorm и т. п.), вы найдете плагины для включения автозаполнения, проверки типов и линтера.

TypeScript — это реальное преимущество для Ionic 2, так как он делает ваш код более понятным, помогает избежать ошибок при наборе текста и помогает вам работать более продуктивно (благодаря таким функциям, как автозаполнение, автоматический импорт модулей, определения всплывающих подсказок при наведении и CTRL + Click to). перейти к определениям).

Все новые интерфейсы командной строки v2

Ionic CLI v2 добавляет способ создания страниц, компонентов, конвейеров и директив непосредственно через командную строку.

Например, если вы хотите создать новую страницу с именем MyPage , вы можете запустить следующую команду:

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

Команда будет следовать соглашениям и создаст для вас три файла:

HTML-файл для вашего шаблона. Файл SASS для стиля вашего компонента. Файл TypeScript для логики вашего компонента.

Вот как выглядит сгенерированный файл my-page.ts :

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

Принудительное соблюдение соглашений с помощью интерфейса командной строки отлично подходит, когда вы работаете в команде. Angular 2.x и Ionic 2 отлично помогают лучше понять, какой должна быть архитектура приложения Angular. Конечно, вы можете отступить от условностей, если хотите.

Улучшенная упаковка

Ionic 1 полагается на экосистему Gulp для объединения приложений, а Ionic 2 позволяет вам выбирать ваши любимые инструменты. Ionic 2 предоставляет собственный набор инструментов в виде отдельного проекта: ionic-app-scripts.

ionic-app-scripts основаны на идее, что разработчики вообще не должны беспокоиться о конфигурации упаковки. Единственная зависимость, связанная с упаковкой, которую ваш проект будет иметь с Ionic 2, — это @ionic/app-scripts . По умолчанию он использует Webpack, но вы также можете использовать Rollup.

В Ionic 2 и CLI v2 assets , а также файлы TypeScript находятся в одной папке src . Теперь www генерируется при каждой сборке и поэтому должен быть удален из системы контроля версий.

Внедрение инструмента отчетов об ошибках

Новый интерфейс командной строки также представил отличный инструмент для создания отчетов об ошибках. Чтобы получить его, вам нужно установить версию Ionic >= 2.1:

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

Теперь каждый раз, когда у вас возникают ошибки, будет появляться модальное окно с полезной информацией об этом. Например:

Быть уведомленным об ошибках времени выполнения как можно скорее во время разработки невероятно ценно, и Ionic 2 проделал большую работу в этом отношении.

Преимущества заблаговременной компиляции (AoT)

Компиляция с опережением времени (AoT) — это небольшая революция в экосистеме Angular. Представленный в Angular 2.x, AoT позволяет предварительно компилировать шаблоны на этапе сборки, а не компилировать браузер на лету.

Хотя может показаться, что это не большая разница, на самом деле это так. С AoT нам не нужно поставлять компилятор шаблонов вместе с приложением. Это имеет два преимущества. Во-первых, пакет будет меньше, что напрямую влияет на сеть и, следовательно, ускоряет загрузку вашего приложения. Во-вторых, приложение будет загружаться быстрее, потому что компиляция шаблона на лету больше не требуется.

Ionic 2 использует все преимущества Angular 2.x AoT для бесплатной оптимизации размера и времени загрузки вашего приложения.

Ionic 2 — огромный шаг вперед

В целом, Ionic 2 — это огромный шаг вперед для индустрии гибридных мобильных устройств. Хотя набор компонентов Ionic 2 аналогичен компонентам Ionic 1, Ionic 2 предлагает множество инструментов и улучшений производительности.

Действительно, с такими инструментами, как TypeScript, ionic-app-scripts и Ionic CLI, разработчики Ionic 2 могут быть более продуктивными, могут создавать более удобный для сопровождения код и получать предупреждения об ошибках во время выполнения, как только они происходят.

Ionic 2 также обеспечивает бесплатное повышение производительности по сравнению с Ionic 1, в частности, за счет устранения или уменьшения его узких мест (связанных с обнаружением изменений, анимацией, временем загрузки и т. д.).

С Ionic 2 ваши приложения будут чувствовать себя более родными, чем когда-либо. Выньте его для вращения. Вы будете рады, что сделали.