Çarpraz platform mobil uygulama geliştirme çatısı Ionic‘in geçtiğimiz aylarda yeni sürümü olan Ionic 4 duyuruldu.

Ionic Framework ekibi tarafından yayımlanan bu sürümün getirdiği çok fazla sayıda yenilik bulunuyor, öyleki tamamını bir yazıya sığdırmak biraz zor. Bu yazıda performans açısından yapılan değişiklikleri birden fazla framework’e olan uyumluluğu analiz edeceğiz. Halen eski bir Ionic uygulamasını sürdürüyorsanız, en son sürüme yükseltme yapmanın zorlukları konusunda endişeleriniz olabilir. Hiç korkmayın bu geçiş sürecini kolaylaştırmak için minik bir geçiş rehberi aşağıda sizi bekliyor olacak.

Ionic Framework son kez sıfırdan, bir daha yazıldı. Artık tüm UI kontrolleri açık web standartları üzerinde inşa edilmiş, birer web bileşeni. Sonuc olarak, Ionic bileşenleri artık Angular’a sıkı sıkıya bağlı değil. Bu da demek oluyor ki React ve Vue gibi mevcut favoriler veya gelecekte popüler olabilecek herhangi bir JavaScript framework’ü için uyumluluğa kapı açıyor. Bu aynı zamanda, 4.0’dan sonraki versiyonların altında yatan teknolojinin aynı kalacağı için güncellenmesinin daha kolay olacağı anlamına geliyor.

Ionic 3, sık sık karmaşa ve karışıklığa neden olan özel yönlendirici uygulamalarının yanı sıra özel komut satırına ve oluşturma araçlarına sahipti. Şimdi ise Ionic, her bir özel framework araçlarını ve mimarilerini desteklediğinden kendi teknolojilerinizi entegre etmek çok daha kolay bir hale geldi.

Web Bileşenleri – Stencil

İonik 4’teki en büyük değişikliklerden biri, her bileşenin web bileşenlerine taşınmasıdır. Stencil’i kendi ihtiyaçları için inşa etmelerindeki ana sebep budur. Ionic 4, web bileşenleri için bir derleyici olan Stencil’i temel alır. TypeScript tabanlıdır ve Angular, Vue, React ve Polymer’ın en iyi bölümlerinden ilham alır.

Team Ionic, Polimer Zirvesi 2017’de Stencil’i tanıttı. Stencil’in en iyi yanı, çok fazla çaba sarf etmeden üretime gönderilebilecek şaşırtıcı uygulamalar geliştirmek için en iyi araçlarla birlikte çalışması. Stencil, React, Preact gibi diğer çerçevelerde kullanılabilecek ve hatta hiç bir çerçeveye sahip olmayan temiz web bileşenlerini bir araya getirir.

Ionic 4’te Sunulan Yeni Bileşenler

ion-content

Kaydırılabilir alanı kontrol etmek için, kullanımı kolay bir içerik alanı sağlar.

ion-ripple-effect

Dalgalanma efekti bileşeni. Bu efekt tasarıma mürekkep dalgalanma efekti ekler.

ion-backdrop

Bu, diğer bileşenlerin üzerine binen tam ekran bir bileşendir.

ion-picker

Uygulamanın bir sıra düğme ve sütun görüntüler.

ion-skeleton-text

Skeleton Text, yer tutucu içeriğini oluşturmak için kullanılır. Öğe belirtilen genişlikte gri bir blok oluşturur.

ion-select-popover

Popover, geçerli sayfanın en üstünde görünen ve gezinme çubuğuna sığmayan eylemleri aşmak için kullanılan bir iletişim kutusudur.

ion-show-when

Bir sorgu doğru olarak değerlendirildiğinde alt içeriğini gösterir.

ion-searchbar

Arama yapmak için kullanılabilecek bir metin alanını temsil eden 9 farklı arama çubuğu stili.

ion-reorder

Bir öğenin sırasını değiştirmek için sürüklenmesini sağlayan bir bileşendir.

Yine önemli değişikliklerden biri kullanılan CLI tarafında. Angular kullananlar Angular CLI, Vue kullananlar Vue CLI kullabilir.

Tüm Bu Değişiklikler Angular Kulanıcıları için Kötü Bir Durum mu?

Ionic 4.0’ın framework erişimini genişletmesi Angular’ı geride bırakacağı anlamına gelmiyor. Hatta Angular 2019 ve sonrasında Ionic kullanıcıları için büyük bir odak olacak. Bugün Ionic 4 Angular 7’yi destekliyor ve gelecekte de başlıca Angular versiyonlarını desteklemeye devam edecek.

Truly Cross-Platform

Ionic’in bu özelliği  native IOS ve Android uygulamalarının yanı sıra Progressive Web Apps ve hatta Electron tabanlı yerel masaüstü uygulamalarını içerir. Ionic uygulamalar yalnızca herhangi bir platformda çalışmaz, özellikle üzerinde çalıştıkları platforma bakmak ve native hissettirmek için özel olarak tasarlanmıştır. Bu yaklaşımın avantajı, iOS, Android, masaüstünde ve daha fazlasında çalışan uygulamaları oluşturma zamanını ve maliyetini büyük ölçüde azaltmasıdır.

Uygulamanızı Önceki Ionic Sürümlerinden Ionic 4’e Nasıl Geçirirsiniz?

Bu geçiş, AngularJS’den Angular 7’ye geçişe benzetilebilir. Bu sürümler arasında pek çok mimari fark vardır, bu nedenle uygulama kodlarından bazılarının yeniden yazılması gerekir. İyi tarafı çoğunlukla, sizin bildiğiniz ve Ionic 1’den sevdiğiniz Ionic UI bileşenlerinin fazla değişmemiş olmasıdır.

Mevcut Ionic 3 uygulamanızı Ionic 4 uygulamasına geçirme sürecini düşünüyorsanız, Ionic Framework ekibinin geçiş adımlarıyla ilgili yazmış olduğu ayrıntılı belgeye göz atabilirsiniz.

Yukarıda belirtilen belgelerin yanı sıra, kodunuzu otomatik olarak inceleyen ve Ionic 3 uygulamanızı Ionic 4 uygulamasına geçirmek için hangi değişiklikleri uygulamanız gerektiğini ortaya çıkaran bir araç olan migrasyon linterini kullanabilirsiniz. Ionic 3’den Ionic 4’e geçişin, Ionic 1’den Ionic 3’e geçişin olduğu gibi tüm uygulamanızı yeniden yazmanız gerekmediğini vurgulamak önemlidir.

Geçiş adımları link : https://beta.ionicframework.com/docs/building/migration/

Migrasyon Linteri link : https://github.com/ionic-team/v4-migration-tslint