Ionic 2 kontra Ionic 1: Wzrost wydajności, nowe narzędzia i duży krok naprzód

Projekt Ionic szybko zyskuje na popularności. Z ponad 27 000 gwiazdami na GitHub, stał się jednym z 50 najpopularniejszych projektów open source na świecie.

A ponieważ niedawno ogłoszono stabilną wersję Ionic 2, nadszedł idealny czas, aby inżynierowie przeanalizowali i zrozumieli różnice między Ionic 2 a Ionic 1.

Na wysokim poziomie Ionic 2 jest kompletnym przepisaniem projektu Ionic 1 z Angular >= 2.x. Z mojego ponad dwuletniego doświadczenia w używaniu Ionic 1, oto co to będzie oznaczać w praktyce.

Zwiększona wydajność wykrywania zmian

Ionic 1 bazuje na Angular 1.x, a Ionic 2 bazuje na Angular >= 2.x. Zwiększenie wydajności, które uzyskujesz tylko przy użyciu samego Angulara >= 2.x, jest znaczące.

W przypadku Angulara 1.x uzyskanie wydajnych aplikacji wymagało dużej wiedzy na temat frameworków (takich jak $watch , Jednorazowe wiązanie i tak dalej). W przypadku Angulara >= 2.,x aplikacje są dość wydajne po wyjęciu z pudełka.

Nowa wersja Angulara porzuciła słynny i potępiony cykl skrótu (śledzenie i testowanie każdej zmiennej aplikacji przy każdej zmianie). Zamiast tego Angular >= 2.x opiera się na Zone.js do śledzenia zmian aplikacji (zarówno synchronicznych, jak i asynchronicznych).

Wykrywanie zmian w Angular >= 2.x jest warte zbadania, aby zrozumieć, jak wszystko działa pod maską. W Angular >= 2.x wykrywanie zmian odbywa się zawsze od góry do dołu. Korzystanie z odpowiedniej strategii wykrywania zmian ( OnPush lub Default ) we własnych komponentach ma ogromne znaczenie, jeśli chcesz kontrolować wydajność swojej aplikacji.

Wszystkie komponenty Ionic 2 wykorzystują strategię OnPush , co oznacza, że ​​wykrywanie zmian nie jest wykonywane przez cały czas, ale tylko wtedy, gdy zmieniają się wejścia. Ta strategia pozwala również uniknąć niepotrzebnego renderowania poddrzew komponentów. W zasadzie jest już zoptymalizowany dla Ciebie.

Jeśli chcesz dowiedzieć się więcej o tym, jak uzyskać wydajną aplikację Ionic1, sugeruję przeczytanie tej ściągawki z wydajnością Ultimate AngularJS i Ionic.

Szybsza wydajność DOM

Manipulacja Angular Document Object Model (DOM) bardzo się rozwinęła. Jeśli potrzebujesz reaktywnego interfejsu użytkownika (UI), ważna jest manipulacja DOM i wydajność JavaScript.

Na przykład utworzenie 1000 wierszy w tabeli zajmuje 126 milisekund w waniliowym JavaScript, 110% więcej (264 ms) w Angularze. 1.x i tylko 40% więcej (177ms) z Angularem >= 2. Jak widać, wydajność Angulara >= 2.x jest lepsza niż Angulara 1.x i jest podobna do wydajności Reacta.

Ionic 2 po raz kolejny korzysta z tego ulepszenia wydajności i robi to „za darmo”.

Nowy interfejs API animacji internetowych

Ionic 1 i Ionic 2 nadal polegają na animacjach CSS dla wewnętrznych przejść i animacji, ale ponieważ Ionic 2 jest oparty na Angular>= 2.x, programiści mają dostęp do nowego API Web Animations (W3C) za pośrednictwem systemu animacji Angular.

Web Animations API to interfejs API JavaScript, który zapewnia programistom dostęp do silnika animacji przeglądarki. Nie jest jeszcze obsługiwany we wszystkich przeglądarkach, ale dzięki wypełniaczowi możesz go używać już teraz i cieszyć się jednym z najbardziej wydajnych i obiecujących sposobów na animowanie sieci.

Źródło

Interfejs API animacji Angular >= 2.x umożliwia łatwe opisywanie złożonych animacji (wchodzenie i wychodzenie z różnych stanów lub animacji grupowych) i zapewnia dostęp do cyklu życia animacji za pośrednictwem wywołań zwrotnych.

 @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%)' })) ]) ]) ] })

Wbudowane przewijanie natywne

Natywne przewijanie pozwala Ionic 2 na nasłuchiwanie zdarzeń przewijania w obsługiwanych widokach WebView. To sprawia, że
Pull to Refresh , List Reordering lub Infinite Scroll jest możliwe bez emulowania tych zdarzeń (przewijanie JavaScript).

Do tej pory przewijanie JavaScript było konieczne, ale interfejsy WebView Chromium (Android) i WKWebView (iOS) ewoluowały i obsługują teraz przewijanie natywne. Jest domyślnie włączona tylko w Androidzie z Ionic 1 (od grudnia 2015) i włączona na wszystkich platformach z Ionic 2.

Natywna obsługa przewijania zapewnia lepszą wydajność i poprawia wrażenia użytkownika, pomagając zapewnić płynne przewijanie dzięki zdarzeniom asynchronicznym.

Ulepszone API komponentów

Ionic 2 daje dostęp do wszystkich komponentów, które rozsławiły Ionic 1, ale teraz są ulepszone i oparte na Angular >= 2.x. Oto lista najpopularniejszych komponentów:

• Przycisk
• Karta
• Ikona
• Lista
• Menu
• Modalny
• pasek narzędzi

Interfejs API komponentów zmienił się nieco między Ionic 1 a Ionic 2. Na przykład komponenty ion-spinner Ionic 1 używają atrybutu icon dla typu przędzarki:

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

Podczas gdy Ionic 2 używa atrybutu name :

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

Jak widać, jeśli znasz API komponentów Ionic 1, będziesz czuł się komfortowo również używając komponentów Ionic 2. Musisz tylko zdawać sobie sprawę z tych różnic.

Dzięki imponującej liście komponentów wszystko, co możesz zrobić z Ionic 1, jest możliwe z Ionic 2, a nawet więcej.

Wprowadzenie pracowników internetowych

Web Workery umożliwiają aplikacji uruchamianie skryptów w wątkach JavaScript w tle. Pracownicy mogą wykonywać żmudne zadania i żądania HTTP poza kontekstem aplikacji (tj. bez ingerencji w interfejs użytkownika). Obecnie Web Workers są obsługiwane przez wszystkie główne przeglądarki.

Tradycyjnie wszystkie frameworki były budowane na bazie i opierały się na obiektach window i document . Jednak u pracowników żadne z nich nie są dostępne. Dzięki nowej architekturze Angular >=2, która oddzieliła renderer , uruchamianie aplikacji w ramach Web Workers (lub dowolnej innej platformy w tym zakresie) jest łatwiejsze.

Ionic 2 zaczyna eksperymentować z wykorzystaniem Web Workers z nowym komponentem ion-img . Na razie ion-img może być używany tylko w ramach listy VirtualScroll. Deleguje wywołanie HTTP obrazu do pracowników sieci Web, a także obsługuje ładowanie z opóźnieniem (tj. pobiera i renderuje tylko obrazy w oknie roboczym). Twoja aplikacja internetowa skupia się teraz tylko na interfejsie użytkownika i pozwala pracownikom zająć się resztą.

Oto przykład, jak z niego korzystać:

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

Pamiętaj, że to dopiero początek i spodziewamy się, że w najbliższej przyszłości pojawi się więcej użytkowników lub pracowników internetowych.

Zalety TypeScript

Jeśli korzystasz z Ionic 2, wiesz już, że używa TypeScript. TypeScript to nadzbiór JavaScript ES2015, który kompiluje się do zwykłego JavaScript. Dzięki TypeScript masz dostęp do wszystkich jego unikalnych funkcji (takich jak interfejsy, domieszki itp.) oraz funkcji ES2015 (takich jak funkcje strzałek, generator, ciągi wielowierszowe itp.).

Spójrzmy na przykład komponentu Angular >= 2.x, który wyświetla imię i nazwisko prezydenta Stanów Zjednoczonych:

 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' }; }

Używamy interfejsu ( IPresident ), który opisuje kształt obiektu prezydenta. Interesujące jest posiadanie interfejsów opisujących to, czym manipulujesz, zwłaszcza jeśli w projekcie jest kilku programistów. Jeśli popełnisz błąd i na przykład użyjesz wartości boolean dla nazwiska prezydenta, Twoje IDE powie Ci, że coś jest nie tak, zanim nastąpi kompilacja.

W praktycznie każdym używanym IDE (Visual Studio Code, Atom, WebStorm itp.) znajdziesz wtyczki umożliwiające autouzupełnianie, sprawdzanie typu i linter.

TypeScript to prawdziwa zaleta dla Ionic 2, ponieważ czyni kod bardziej zrozumiałym, pomaga uniknąć błędów w pisowni i pomaga być bardziej produktywnym (poprzez funkcje takie jak autouzupełnianie, automatyczne importowanie modułów, definicje podpowiedzi po najechaniu kursorem i CTRL + Click , aby przejdź do definicji).

Całkowicie nowy CLI v2

Ionic CLI v2 dodaje sposób na generowanie stron, komponentów, potoków i dyrektyw bezpośrednio z wiersza poleceń.

Na przykład, jeśli chcesz utworzyć nową stronę o nazwie MyPage , oto polecenie, które możesz uruchomić:

 $ 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

Polecenie zastosuje się do konwencji i utworzy dla Ciebie trzy pliki:

Plik HTML dla Twojego szablonu. Plik SASS dla Twojego stylu komponentu. Plik TypeScript dla logiki składnika.

Oto jak wygląda wygenerowany plik 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'); } }

Egzekwowanie konwencji za pomocą interfejsu CLI jest świetne, gdy pracujesz w zespole. Angular 2.x i Ionic 2 wykonują świetną robotę, pomagając lepiej zrozumieć, czym powinna być architektura aplikacji Angular. Oczywiście możesz swobodnie odejść od konwencji, jeśli chcesz.

Ulepszone opakowanie

Ionic 1 opiera się na ekosystemie Gulp, aby łączyć aplikacje, podczas gdy Ionic 2 pozwala wybrać ulubione narzędzia. Ionic 2 zapewnia własną kolekcję narzędzi jako oddzielny projekt: ionic-app-scripts.

ionic-app-scripts opierają się na założeniu, że programiści nie powinni w ogóle martwić się konfiguracją pakietów. Jedyną zależnością związaną z pakowaniem, którą Twój projekt będzie miał w Ionic 2, jest @ionic/app-scripts . Domyślnie używa Webpacka, ale możesz również użyć Rollupa.

W Ionic 2 i CLI v2 assets oraz pliki TypeScript znajdują się w tym samym folderze src . Strona www jest teraz generowana podczas każdej kompilacji i dlatego powinna zostać usunięta ze śledzenia kontroli wersji.

Wprowadzenie narzędzia do raportowania błędów

Nowy interfejs CLI wprowadził również świetne narzędzie do raportowania błędów. Aby go uzyskać, musisz zainstalować wersję Ionic >= 2.1:

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

Teraz za każdym razem, gdy pojawią się błędy, pojawi się modalne z istotnymi informacjami na ten temat. Na przykład:

Otrzymywanie powiadomień o błędach w czasie wykonywania tak szybko, jak to możliwe podczas tworzenia, jest niezwykle cenne, a Ionic 2 wykonał świetną robotę w tym zakresie.

Korzyści z kompilacji z wyprzedzeniem (AoT)

Kompilacja z wyprzedzeniem (AoT) to mała rewolucja w ekosystemie Angulara. Wprowadzony w Angular 2.x, AoT umożliwia wstępne kompilowanie szablonów na etapie kompilacji, zamiast kompilowania w locie przez przeglądarkę.

Chociaż może to nie wydawać się dużą różnicą, w rzeczywistości tak jest. Dzięki AoT nie musimy dostarczać kompilatora szablonów wraz z aplikacją. Ma to dwie zalety. Po pierwsze, pakiet będzie mniejszy, co bezpośrednio wpływa na sieć, a tym samym przyspiesza pobieranie aplikacji. Po drugie, aplikacja ładuje się szybciej, ponieważ kompilacja szablonów w locie nie jest już konieczna.

Ionic 2 w pełni wykorzystuje możliwości Angular 2.x AoT, aby bezpłatnie zoptymalizować rozmiar i czas ładowania aplikacji.

Ionic 2 to ogromny krok naprzód

Ogólnie rzecz biorąc, Ionic 2 to ogromny krok naprzód dla branży hybrydowych urządzeń mobilnych. Chociaż zestaw komponentów Ionic 2 jest podobny do komponentów Ionic 1, Ionic 2 oferuje wiele narzędzi i poprawę wydajności.

Rzeczywiście, dzięki takim narzędziom, jak TypeScript, ionic-app-scripts i Ionic CLI, programiści Ionic 2 mogą być bardziej produktywni, mogą tworzyć łatwiejszy w utrzymaniu kod i są ostrzegani o błędach w czasie wykonywania, gdy tylko się pojawią.

Ionic 2 zapewnia również bezpłatny wzrost wydajności w stosunku do Ionic 1, w szczególności poprzez eliminację lub zmniejszenie jego wąskich gardeł (związanych z wykrywaniem zmian, animacjami, czasem ładowania itd.).

Dzięki Ionic 2 Twoje aplikacje będą bardziej natywne niż kiedykolwiek. Wyjmij go na przejażdżkę. Będziesz zadowolony, że to zrobiłeś.