AngularJS(Angular 1) ile yapılmış bir projeniz var ve Angular 2′ ye geçmeyi düşünüyorsunuz. Öncelikle Sakın KORKMAYIN! Framework lerin major versiyon yükseltmelerinde hep endişe duyulur. Çünkü köklü değişiklikler yapılmıştır ve versiyon güncellemesi yapmanız durumunda, kodunuz büyük kısmının çalışmaması, çalışsa bile, projenin tamamiyle test edilmesi gerekecektir. 

Yukarıda bahsettiğim endişelerden ötürü bir araştırma yaptım ve HABERLER ÇOK GÜZEL. Google yine gücünü ve kalitesini göstermiş. Çok yumuşak ve kontrollü bir geçiş olacak. AngularJS’ in baş geliştiricilerinden Brad Green(https://plus.google.com/+BradGreen/posts) in verdiği bilgiler hepimizin yüzünü güldürecek cinsten.

Bu yazımız uzun soluklu olacak. Çünkü şuana kadar Angular 2 ve geçiş süreci ile ilgili elde ettiğim tüm bilgileri en ince detayına kadar sizinle paylaşmak istiyorum. Geçiş işlemi ciddi bir iş ve eğerki bu işi yapacaksanız, süreci çok iyi bilmeniz ve yönetmeniz gerekiyor.

Güzel Haberler;

  • Angular 1 ve Angular 2 aynı anda projenizde çalışabilecek.
  • Angular 1 ve Angular 2 component lerini aynı view’ da kullanabileceksiniz.
  • Angular 1 ve 2 nin data binding yapısını birbirinden farklı olmasına rağmen yine her iki yapıyı birlikte kullanabileceksiniz.

Haberler güzel gözüküyor, ama niye güncelleme yapayım ?

Framework lerin yeni versiyonlarının çıkmasının tek amacı, daha iyisini sunabilmektir. En basit sebep, neden daha iyisi olmasındır. Lakin konu AngularJS Framework’ üne geldiğinde, 2.versiyon u sadece daha iyi olarak değilde ÇOK DAHA İYİ ve olması gerektiği gibi olarak değerlendirebiliriz.

Angular 2, 1.versiyona göre daha iyi bir performans sergiliyor. Daha güçlü bir template sistemi var. Lazy loading özelliği var. API daha basitleştirilmiş. Daha kolay debugging. Daha çok test edilebilir.

Performans’ ını inceleyelim;

Render ve re-render işlemlerinin 3 ile 5 kat oranında daha hızlı gerçekleştiği görülmüş. Bund, daha düşük hafıza kullanımı, dependency injection’ ın getirdiği özellikler ve Template precompilation’ ın etkili olduğu söylenebilir.

Render’ ın gelişimi;

Server-side rendering:

Template’ lerimiz server katmanında render edilebiliyor. Bu sayede, açılış sayfalarımızın hızını arttırabiliyoruz. Ayrıca Google bot gibi web crawlers lar sitemizi sorunsuzca indeksleyebiliyor.

Web Workers:

Uygulamanızın arayüzünün daha akıcı ve kesintisiz olması için, Angular Framework’ ün kodunun çoğu ve kendi yazdığınız kodlar Web Worker ile çalışacaktır.

“Angular 1 ve 2′ yi birlikte Kullanmak”

Angular 1 ile yazılmış uygulamanızı Angular 2 ile sıfırdan yazmak size zaman ve dolayısıyla maddi açıdan bir külfet getirir. LAKİN, uygulamanızı kısım kısım Angular 2′ ye geçirmeye ne dersiniz ? Şöyle düşünün; Uygulamanızda aynı anda hem Angular 1 hemde Angular 2 çalışıyor. Parça parça, sayfanızın kısımlarını Angular 2 ile yazıyorsunuz. Örneğin ilk olarak sidebar’ ı Angular 2 ye geçirmeye karar verdiniz. Aşağıdaki grafikteki gibi.

angular 1 and angular 2 together

Bunu yapabilmek şunların birlikte çalışması gerekiyor;

  • Dependency injection
  • Component nesting
  • Transclusion
  • Change detection

Bunun mümkün olması için Google AngularJS Geliştirici ekibinin yazdığı ng-upgrade(https://github.com/angular/ngUpgrade) kütüphanesini ve Angular 2 frameworkünü projemize dahil etmemiz gerekiyor. Bu sayede Angular 1 ve Angular 2 yi birlikte kullanabiliriz.

https://docs.google.com/document/d/1xvBZoFuNq9hsgRhPPZOJC-Z48AHEbIBPlOCBTSD8m0Y adresinde AngularJS’ in yaratıcısı Misko’ nun yapmış olduğu örnekler bulunuyor. İncelemenizi tavsiye ederim.

Halen ne yaptığımız konusunda kafasında soru işaretleri olan arkadaşlar olabilir diye tekrar ediyorum. Bir projemiz var. Angular 1 ile yazılmış. Fakat artık Angular 2 ye geçmek istiyoruz. Ama projenin tamamını bir kerede Angular 2 ile yazmak çok uzun ve pahalı olacağı için PARÇA PARÇA Angular 2 ye geçeceğiz. Yani artık projemizde hem Angular 1 hemde Angular 2 çalışacak. Tam ortada da ng-upgrade kütüphanesi olacak. Adım adım Angular 1 modüllerimizi Angular 2 ye geçireceğiz. Bu süreç içinde, projemizin bir kısmı Angular 1, bir kısmıda Angular 2 olarak yazılmış olacak.

ng-upgrade kütüphanesini projeye nasıl dahil edeceğiz ? ve projeyi bu şekilde başlatacağız ?”

Normalde angular uygulamamızı aşağıdaki gibi kurarız ve Framework tarafından otomatik olarak başlatılır.

app değişken ismine ve uygulama ismine takılmıyorsunuz umarım, çünkü bunlar sizde istediğiniz gibi olabilir.

Uygulamamızı normalde yukarıdaki şekilde tanımlayıp, başlatılmasını sağlıyorken, ng-upgrade ile başlatmak için aşağıdaki şekle sokuyoruz.

UpgradeAdapter kütüphanesinden bir adapter oluşturduk ve bu adapter üzerinden uygulamamızı bootstrap ettik yani başlattık. Bu sayede uygulamanın kontrolü adapter a geçti.

Aşağıdaki anlatımlarda bu adapter ı kullanacağız.

Dependency Injection çözümü

Angular 1 root injector, Angular 2 ise hierarchical injector kullanıyor. Yapıları çok farklı. Fakat her iki injector da, birbirlerinin servislerini kullanabilmeliler, aksi halde Angular 1 ile yazılmış bir servis’ i Angular 2 ile yazacağımız bir component’ te kullanamayız ki bu durumda Angular 1 ve 2 aynı anda çalışamaz. İşte projeye dahil ettiğimiz ng-upgrade kütüphanesi burda devreye giriyor. ng-upgrade kütüphanesi, otomatik olarak, Angular 1 ile yazılmış servisinizi Angular 2 de kullanabilmenizi sağlıyor.

Keza Angular 2 ile yazılmış servisinizide Angular 1 ile yazılmış kısımlarda kullanabileceksiniz, lakin bunun için ufak bir mapping configuration yazmanız gerekiyor.

Her iki versiyonda da directive olarak, template lere sahip componentler oluştururuz. Fakat bu component ler her iki framework tarafından da kullanılabilir olmalı. Peki nasıl ?

Örneğin, Angular 2 için bir component yazdınız.

Peki Angular 1 yazılan yerde nasıl kullanıcam ? ng-upgrade kütüphanesini projemize dahil etmiştik ve bir adapter oluşturmuştuk. İşte onun downgradeNg2Component metodu ile aşağıdaki örnekteki gibi, Angular 2 componentinden bir angular 1 component i oluşturuyoruz.

Bu kadar basit.

ng-upgrade ile geçiş işlemleri bu kadarla kalmıyor, daha bir sürü özelliği var. Bunları ilerleyen konularda incelemeye devam edeceğiz.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir