Ionic 2 vs. Ionic 1: Performans Kazanımları, Yeni Araçlar ve İleriye Doğru Büyük Bir Adım

İyonik proje hızla popülerlik kazanıyor. GitHub'da 27.000'den fazla yıldızla, dünya çapında en popüler 50 açık kaynak projesinden biri haline geldi.

Ve yakın zamanda Ionic 2'nin kararlı sürümü duyurulduğundan, mühendislerin Ionic 2 ile Ionic 1 arasındaki farkları analiz etmeleri ve anlamaları için mükemmel bir zaman.

Yüksek düzeyde, Ionic 2, Ionic 1 projesinin Angular >= 2.x ile tamamen yeniden yazılmış halidir. Ionic 1'i kullanma konusundaki 2+ yıllık deneyimime göre, bunun pratik anlamda ne anlama geleceği aşağıda açıklanmıştır.

Artırılmış Değişiklik Algılama Performansı

Ionic 1, Angular 1.x'i ve Ionic 2, Angular >= 2.x'i temel alır. Yalnızca Angular >= 2.x'i tek başına kullanarak elde ettiğiniz performans artışı önemlidir.

Angular 1.x ile, performanslı uygulamalar elde etmek için çok fazla derin çerçeve bilgisi gerekiyordu ( $watch , Tek seferlik bağlama vb.). Angular >= 2.,x uygulamaları kutudan çıktığı gibi hemen hemen performans gösterir.

Angular'ın yeni sürümü, ünlü ve reddedilen özet döngüsünü bıraktı (uygulamanın her değişkenini her değişiklikte izleme ve test etme). Bunun yerine Angular >= 2.x, uygulama değişikliklerini (hem eşzamanlı hem de eşzamansız) izlemek için Zone.js'ye güvenir.

Angular'da Değişim Algılama >= 2.x, kaputun altında işlerin nasıl yürüdüğünü anlamak için araştırmaya değer. Angular >= 2.x'de değişiklik tespiti her zaman yukarıdan aşağıya doğru yapılır. Uygulamanızın performansını kontrol etmek istiyorsanız, kendi bileşenlerinizde doğru değişiklik algılama stratejisini ( OnPush veya Default ) kullanmak çok önemlidir.

Tüm Ionic 2 bileşenleri OnPush stratejisini kullanır, yani değişiklik tespiti her zaman değil, bunun yerine yalnızca girişler değiştiğinde yapılır. Bu strateji ayrıca bileşenlerin alt ağaçlarının gereksiz şekilde oluşturulmasını da önler. Temelde zaten sizin için optimize edilmiştir.

Performanslı bir Ionic1 uygulamasını nasıl edineceğiniz hakkında daha fazla bilgi edinmek istiyorsanız, bu Ultimate AngularJS ve Ionic performans hile sayfasını okumanızı öneririm.

Daha Hızlı DOM Performansı

Açısal Belge Nesne Modeli (DOM) manipülasyonu çok gelişti. Reaktif bir Kullanıcı Arayüzü (UI) istiyorsanız, DOM manipülasyonu ve JavaScript performansı önemlidir.

Örneğin, bir tabloda 1.000 satır oluşturmak Vanilla JavaScript ile 126 milisaniye, Angular ile %110 daha fazla (264ms) sürer. 1.x ve Angular >= 2 ile yalnızca %40 (177ms) daha fazla. Gördüğünüz gibi, Angular >= 2.x'in performansı Angular 1.x'ten daha iyidir ve React performansına benzer.

Ionic 2, bir kez daha bu performans yükseltmesinden yararlanıyor ve bunu "ücretsiz" yapıyor.

Yeni Web Animasyonları API'sı

Ionic 1 ve Ionic 2, dahili geçişler ve animasyonlar için hala CSS animasyonlarına güveniyor, ancak Ionic 2 Angular >= 2.x'i temel aldığından, geliştiricilerin Angular animasyon sistemi aracılığıyla yeni Web Animasyonları (W3C) API'sine erişimi var.

Web Animasyonları API'si, geliştiricilere tarayıcının animasyon motoruna erişim sağlayan bir JavaScript API'sidir. Henüz tüm tarayıcılarda desteklenmemektedir, ancak bir çoklu dolgu ile onu hemen şimdi kullanabilir ve Web'i canlandırmanın en performanslı ve gelecek vaat eden yollarından birinin keyfini çıkarabilirsiniz.

Kaynak

Angular >= 2.x animasyon API'si, karmaşık animasyonları (farklı durumlardan veya grup animasyonlarından giriş ve çıkış) kolayca tanımlamanıza olanak tanır ve geri aramalar aracılığıyla animasyonların yaşam döngüsüne erişmenizi sağlar.

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

Yerleşik Yerel Kaydırma

Yerel kaydırma, Ionic 2'nin desteklenen Web Görünümlerinde kaydırma olaylarını dinlemesini sağlar. Yapar
Pull to Refresh , List Reordering veya Infinite Scroll bu olayları taklit etmeden mümkündür (JavaScript kaydırma).

Şimdiye kadar JavaScript kaydırma gerekliydi, ancak Chromium (Android) ve WKWebView (iOS) Web Görünümleri gelişti ve şimdi yerel kaydırmayı destekliyor. Yalnızca Ionic 1 ile Android'de (Aralık 2015'ten beri) varsayılan olarak etkindir ve Ionic 2 ile tüm platformlarda etkinleştirilmiştir.

Yerel kaydırma desteği, daha iyi performans sağlar ve eşzamansız olaylar sayesinde sorunsuz kaydırma sağlamaya yardımcı olarak kullanıcı deneyimini iyileştirir.

Geliştirilmiş Bileşenler API'sı

Ionic 2, Ionic 1'i ünlü yapan, ancak şimdi geliştirilmiş ve Angular >= 2.x'e dayalı tüm bileşenlere erişmenizi sağlar. İşte en yaygın bileşenlerin listesi:

• Buton
• kart
• Simge
• Liste
• Menü
• kalıcı
• araç çubuğu

API bileşenleri, Ionic 1 ve Ionic 2 arasında biraz değişti. Örneğin, Ionic 1 ion-spinner bileşenleri, döndürücü türü için icon özniteliğini kullanır:

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

Ionic 2 name niteliğini kullanırken:

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

Gördüğünüz gibi, Ionic 1 bileşen API'sine aşina iseniz, Ionic 2 bileşenlerini kullanırken de kendinizi rahat hissedeceksiniz. Sadece bu farklılıkların farkında olmanız gerekecek.

Etkileyici bir bileşen listesiyle, Ionic 1 ile yapabileceğiniz her şey, Ionic 2 ile ve hatta daha fazlası ile yapılabilir.

Web Çalışanlarının Tanıtımı

Web Çalışanları, uygulamanızın arka plan JavaScript dizilerinde komut dosyaları çalıştırmasına izin verir. Çalışanlar, uygulama bağlamınızın dışında (yani, kullanıcı arayüzüne müdahale etmeden) sıkıcı görevleri ve HTTP isteklerini gerçekleştirebilir. Bugün, Web Çalışanları tüm büyük tarayıcılar tarafından desteklenmektedir.

Geleneksel olarak, tüm çerçeveler, window ve document nesnelerinin üzerine inşa edildi ve bunlara güvenildi. Ancak işçilerde de mevcut değildir. renderer ayrıştıran yeni Angular >=2 mimarisiyle, uygulamayı Web Workers (veya bu konuda başka bir platform) içinde çalıştırmak daha kolay hale getirildi.

Ionic 2, yeni ion-img bileşeniyle Web Workers kullanımını denemeye başlıyor. Şimdilik ion-img yalnızca VirtualScroll listesinde kullanılabilir. Görüntü HTTP çağrısını Web Çalışanlarına devreder ve ayrıca tembel yüklemeyi de destekler (yani, yalnızca görünüm alanında görüntüleri alır ve oluşturur). Web uygulamanız artık yalnızca kullanıcı arayüzüne odaklanıyor ve gerisini işçilere bırakıyor.

İşte nasıl kullanılacağına bir örnek:

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

Bunun yalnızca başlangıç ​​olduğunu ve yakın gelecekte daha fazla kullanım veya Web Çalışanı görmeyi beklediğimizi unutmayın.

TypeScript Avantajları

Ionic 2 kullanıyorsanız, TypeScript kullandığını zaten biliyorsunuzdur. TypeScript, düz JavaScript'i derleyen bir JavaScript ES2015 üst kümesidir. TypeScript ile, tüm benzersiz özelliklerine (arayüzler, karışımlar vb.) ve ES2015 özelliklerine (ok işlevleri, oluşturucu, çok satırlı dizeler vb.) erişebilirsiniz.

Bir Birleşik Devletler başkanının adını görüntüleyen bir Angular >= 2.x bileşeni örneğine bakalım:

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

Başkanın Nesne şeklini tanımlayan bir Arayüz ( IPresident ) kullanıyoruz. Özellikle bir projede birkaç geliştirici varsa, neyi manipüle ettiğinizi açıklayan arayüzlere sahip olmak ilginçtir. Bir hata yaparsanız ve örneğin başkan adı için bir boolean kullanırsanız, IDE'niz derleme gerçekleşmeden önce bile size bir şeylerin yanlış olduğunu söyleyecektir.

Kullandığınız hemen hemen her IDE'de (Visual Studio Code, Atom, WebStorm veya benzeri), otomatik tamamlamayı, tip kontrolünü ve bir linter'i etkinleştirmek için eklentiler bulacaksınız.

TypeScript, Ionic 2 için gerçek bir avantajdır, çünkü kodunuzu daha anlaşılır kılar, yazım hatalarından kaçınmanıza yardımcı olur ve daha üretken olmanıza yardımcı olur (otomatik tamamlama, modüllerin otomatik içe aktarılması, fareyle üzerine gelindiğinde araç ipucu tanımları ve CTRL + Click gibi özellikler aracılığıyla) tanımlara gidin).

Tamamen Yeni CLI v2

Ionic CLI v2, doğrudan komut satırı aracılığıyla Sayfalar, Bileşenler, Borular ve Yönergeler oluşturmanın bir yolunu ekler.

Örneğin, MyPage adında yeni bir sayfa oluşturmak istiyorsanız, çalıştırabileceğiniz komut şudur:

 $ 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

Komut, kuralları takip edecek ve sizin için üç dosya oluşturacaktır:

Şablonunuz için bir HTML dosyası. Bileşen stiliniz için bir SASS dosyası. Bileşen mantığınız için bir TypeScript dosyası.

Oluşturulan my-page.ts dosyası şöyle görünür:

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

Bir ekip üzerinde çalışırken, CLI kullanımı yoluyla kuralların uygulanması harikadır. Angular 2.x ve Ionic 2, Angular uygulama mimarisinin ne olması gerektiğinin daha iyi anlaşılmasına yardımcı olmak için harika bir iş çıkarıyor. Tabii ki, isterseniz sözleşmelerden ayrılmakta özgürsünüz.

Geliştirilmiş Paketleme

Ionic 1, uygulamaları bir araya getirmek için Gulp ekosistemine güvenirken, Ionic 2 favori araçlarınızı seçmenize izin verir. Ionic 2, ayrı bir proje olarak kendi araç koleksiyonunu sağlar: ionic-app-scripts.

ionic-app-scripts , geliştiricilerin paketleme konfigürasyonu hakkında hiç endişelenmemesi gerektiği fikrine dayanmaktadır. Projenizin Ionic 2 ile sahip olacağı tek paketleme bağımlılığı @ionic/app-scripts . Varsayılan olarak Webpack'i kullanır, ancak Rollup'u da kullanabilirsiniz.

Ionic 2 ve CLI v2 ile assets ve TypeScript dosyaları aynı src klasöründe yaşar. www artık her derleme sırasında oluşturuluyor ve bu nedenle sürüm kontrol takibinden çıkarılmalıdır.

Hata Raporlama Aracının Tanıtımı

Yeni CLI ayrıca harika bir Hata Raporlama aracını da tanıttı. Bunu elde etmek için İyonik sürüm >= 2.1 yüklemeniz gerekir:

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

Artık her hata yaptığınızda, bununla ilgili anlamlı bilgiler içeren bir modal açılır. Örneğin:

Geliştirme sırasında çalışma zamanı hatalarından en kısa sürede haberdar olmak inanılmaz derecede değerlidir ve Ionic 2 bu konuda harika bir iş çıkarmıştır.

Zaman Öncesi Derlemesinin (AoT) Faydaları

Ahead of Time Derleme (AoT), Angular ekosisteminde küçük bir devrimdir. Angular 2.x ile tanıtılan AoT, şablonların tarayıcı tarafından anında derlenmek yerine bir derleme adımında önceden derlenmesine olanak tanır.

Bu büyük bir fark gibi görünmese de, aslında öyle. AoT ile şablon derleyiciyi uygulama ile birlikte göndermemiz gerekmez. Bunun iki avantajı vardır. İlk olarak, paket daha küçük olacaktır, bu da ağı doğrudan etkiler ve bu nedenle uygulamanızın daha hızlı indirilmesini sağlar. İkincisi, anında şablon derlemesi gerekmediğinden uygulama daha hızlı önyüklenir.

Ionic 2, uygulamanızın boyutunu ve yükleme süresini ücretsiz olarak optimize etmek için Angular 2.x AoT'nin tüm avantajlarından yararlanır.

İyonik 2 İleriye Doğru Büyük Bir Adım

Genel olarak, Ionic 2, hibrit mobil endüstrisi için ileriye doğru atılmış büyük bir adımdır. Ionic 2 bileşenleri seti, Ionic 1 bileşenlerine benzese de, Ionic 2 birçok araç ve performans iyileştirmesi sunar.

Gerçekten de TypeScript, ionic-app-scripts ve Ionic CLI gibi araçlarla Ionic 2 geliştiricileri daha üretken olabilir, bakımı daha kolay kodlar üretebilir ve çalışma zamanı hataları meydana gelir gelmez uyarılır.

Ionic 2 ayrıca, özellikle darboğazlarını (değişiklik algılama, animasyonlar, yükleme süresi vb. ile ilgili) ortadan kaldırarak veya azaltarak Ionic 1'e göre ücretsiz bir performans artışı sağlar.

Ionic 2 ile uygulamalarınız her zamankinden daha yerel hissedecek. Bir tur atmak için çıkarın. Yaptığına sevineceksin.