Йонийският проект бързо набира популярност. С повече от 27 000 звезди на GitHub, той се е превърнал в един от 50-те най-популярни проекта с отворен код в целия свят.

И тъй като стабилната версия на Йоний 2 беше наскоро съобщи , е идеалното време за инженерите да анализират и разберат разликите между Ionic 2 и Йоний 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 за проследяване на промени в приложенията (както синхронни, така и асинхронни).

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

Всички компоненти на Ionic 2 използват OnPush стратегия, което означава, че откриването на промяната не се извършва през цялото време, а вместо това, само когато входовете се променят. Тази стратегия също така избягва ненужно изобразяване на поддървета на компонентите. По принцип вече е оптимизиран за вас.

Ако искате да научите повече за това как да получите ефективно приложение Ionic1, предлагам да прочетете това Ultimate AngularJS и Ionic представяне за мами .

По-бързо изпълнение на DOM

Манипулацията с обекти на ъглови документи (DOM) се е развила много. Ако искате реактивен потребителски интерфейс (UI), DOM манипулация и Изпълнение на JavaScript е важно.

	Ъглова v1.5.8	Ъглов v2.2.1	React v15.4.0	Ванилия JS
Създаване на 1k редове	264,96	177.07	177,58	126.05
Актуализиране на 10 000 реда	251,32	178,76	187,73	54.23
Премахване на ред	54.13	50,59	50,57	36,93
Създаване на 10 000 реда	2247,40	1776.01	1839.46	1217,30
Добавяне на 1k редове към таблица с 10k редове	388.07	278,94	311,43	233,57
Изчистване на таблица от 10 000 реда	650,28	320,76	383,62	199,67

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

Ionic 2 отново се възползва от това надграждане на производителността и прави това „безплатно“.

API на новите уеб анимации

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

API за уеб анимации е API на JavaScript, който предоставя на разработчиците достъп до анимационния механизъм на браузъра. то е не се поддържа във всички браузъри все пак, но с a полифил можете да го използвате точно сега и да се насладите на един от най-ефективните и обещаващи начини за анимиране на мрежата.

Източник

API за анимация Angular> = 2.x ви позволява лесно да опишете сложни анимации (влизане и излизане от различни състояния или групови анимации) и ви дава достъп до жизнения цикъл на анимациите чрез обратно извикване.

@Component({ template: `

• {{hero.name}}

`, 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 да слуша събития при превъртане в поддържаните WebViews. Това прави
Pull to Refresh, List Reordering или Infinite Scroll възможно без емулиране на тези събития (превъртане на JavaScript).

Родно превъртане
Йоний 1	Йоний 2
️ Android	️ Android
ios	️ iOS
Windows Phone	Phone Windows Phone

Досега скролирането на JavaScript беше необходимо, но Chromium (Android) и WKWebView (iOS) WebViews се развиха и вече поддържат родно скролиране. По подразбиране е активиран само за Android с Ionic 1 (от декември 2015 г.) и за всички платформи с Ionic 2.

Поддръжката на родно превъртане носи по-добра производителност и подобрява потребителското изживяване, като помага да се осигури плавно превъртане благодарение на асинхронни събития.

Подобрен API за компоненти

Ionic 2 ви дава достъп до всички компоненти които направиха Ionic 1 известен, но сега са подобрени и базирани на Angular> = 2.x. Ето списъка с най-често срещаните компоненти:

• Бутон
• Карта
• Икона
• Списък
• Меню
• Капитал
• Лента с инструменти

API на компонентите се промени малко между Ionic 1 и Ionic 2. Например, Ionic 1 ion-spinner компоненти използват icon атрибут за типа въртяща се машина:

name

Докато Ionic 2 използва window атрибут:

document

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

С впечатляващ списък с компоненти, всичко, което можете да направите с Ionic 1, е изпълнимо с Ionic 2 и дори повече.

Въвеждане на уеб работници

Работници в мрежата позволете на приложението ви да изпълнява скриптове във фонови нишки на JavaScript. Работниците могат да изпълняват досадни задачи и HTTP заявки извън контекста на вашето приложение (т.е. без намеса в потребителския интерфейс). Днес уеб работниците са поддържа се от всички основни браузъри .

Традиционно всички рамки се изграждаха върху и разчитаха на renderer и ion-img обекти. Въпреки това, при работещите няма нито едно от двете. С новата архитектура Angular> = 2, която отдели ion-img, стартирането на приложението в Web Workers (или друга платформа за това) е улеснено.

Ionic 2 започва да експериментира с използването на Web Workers с новото import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{president.name}}

` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; } съставна част. Засега IPresident може да се използва само в VirtualScroll списък. Той делегира HTTP повикването на изображението на уеб работниците и също така поддържа лениво зареждане (т.е. само извличане и изобразяване на изображения в прозореца за гледане). Вашето уеб приложение сега се фокусира само върху потребителския интерфейс и позволява на работниците да свършат останалото.

Ето пример за това как да го използвате:

boolean

Имайте предвид, че това е само началото и че очакваме да видим повече употреба или уеб работници в близко бъдеще.

Предимства на TypeScript

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

Нека разгледаме пример за Angular> = 2.x компонент, който показва име на президент на САЩ:

CTRL + Click

Използваме интерфейс (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 за името на президента вашата IDE ще ви каже, че нещо не е наред дори преди компилацията да се случи.

На практика във всяка IDE, която използвате (Visual Studio Code, Atom, WebStorm или други подобни), ще намерите плъгини, които да позволят автоматично довършване, проверка на типа и свързване.

TypeScript е истинско предимство за Ionic 2, тъй като прави кода ви по-разбираем, помага ви да избягвате грешки в типа и ви помага да бъдете по-продуктивни (чрез функции като автоматично довършване, автоматично импортиране на модули, дефиниции на подсказки при нанасяне и my-page.ts за да преминете към определения).

Всички нови CLI v2

Ionic CLI v2 добавя начин за генериране на страници, компоненти, тръби и директиви директно чрез командния ред.

Например, ако искате да създадете нова страница с име 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'); } } , ето командата, която можете да изпълните:

ionic-app-scripts

Командата ще следва конвенциите и ще създаде три файла за вас:

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

Ето какво генерира @ionic/app-scripts файлът изглежда така:

assets

Прилагането на конвенции чрез използване на CLI е чудесно, когато работите в екип. Angular 2.x и Ionic 2 вършат чудесна работа, като помагат да се насърчи по-доброто разбиране на това каква трябва да бъде архитектурата на приложението Angular. Разбира се, можете да се отклоните от конвенциите, ако искате.

Подобрена опаковка

Ionic 1 разчита на екосистемата Gulp за обединяване на приложения, докато Ionic 2 ви позволява да изберете любимите си инструменти. Ionic 2 предоставя собствена колекция от инструменти като отделен проект: ionic-app-скриптове .

src се основава на идеята, че разработчиците изобщо не трябва да се притесняват от конфигурацията на опаковката. Единствената зависимост, свързана с опаковката, която вашият проект ще има с Ionic 2 е www. По подразбиране използва Webpack но можете да използвате Навивам както добре.

С Ionic 2 и CLI v2, $ npm install -g ionic $ ionic -v # should return at least 2.1.12 , както и файловете TypeScript, живеят в една и съща ionic-app-scripts папка.

|_+_|

сега се генерира по време на всяка компилация и следователно трябва да бъде премахната от проследяването на контрола на версиите.

Въвеждане на инструмент за докладване на грешки

Новият CLI също представи страхотен инструмент за докладване на грешки. За да го получите, трябва да инсталирате Ionic версия> = 2.1:

Сега всеки път, когато имате грешки, ще се появи модал със значима информация за него. Например:

Да бъдеш уведомен за грешки по време на работа възможно най-скоро по време на разработката е изключително ценно и Ionic 2 свърши чудесна работа в това отношение.

Ползи от компилацията във времето (AoT)

Пред съставянето на времето (AoT) е малка революция в ъгловата екосистема. Въведен с Angular 2.x, AoT позволява предварително да се компилират шаблони в стъпка на изграждане, вместо да се компилират в движение от браузъра.

Макар че това може да не изглежда голяма разлика, всъщност е така. С AoT не трябва да изпращаме компилатора на шаблони с приложението. Това има две предимства. Първо, пакетът ще бъде по-малък, което пряко влияе върху мрежата и следователно прави приложението ви по-бързо за изтегляне. Второ, приложението ще се стартира по-бързо, защото компилирането на шаблони в движение вече не е необходимо.

Ionic 2 се възползва напълно от Angular 2.x AoT, за да оптимизира безплатно размера и времето за зареждане на вашето приложение.

Ionic 2 е огромна стъпка напред

Като цяло Ionic 2 е огромна стъпка напред за хибридната мобилна индустрия. Въпреки че наборът от компоненти на Ionic 2 е подобен на компонентите на Ionic 1, Ionic 2 предлага много инструменти и подобрение на производителността.

Всъщност с инструменти като TypeScript,

и йонен CLI, Разработчици на Ionic 2 могат да бъдат по-продуктивни, могат да създадат по-поддържаем код и да бъдат предупредени за грешки по време на работа веднага щом се случат.

Ionic 2 също осигурява безплатно подобряване на производителността спрямо Ionic 1, по-специално чрез премахване или намаляване на неговите тесни места (свързани с откриване на промени, анимации, време за зареждане и т.н.).

С Ionic 2 вашите приложения ще се чувстват по-родни от всякога. Извадете го за въртене. Ще се радвате, че сте го направили.

Свързани: 9-те най-често срещани грешки, които йонийските разработчици допускат