Yazılım Geliştirme Trendleri 2017/9: Angular

Daha önceki yazımda SPA trendinden bahsetmiştim. Bence gerçek anlamda ilk SPA, Angular 1.x’idi. Ancak Angular ekibi, 1.x ile ortaya koydukları mimarinin, gerçek anlamda ölçeklendirilebilir, güvenilir, uzun vadeli ve kurumsal bir çözüm geliştirmek için yeterli olmadığını öngördü ve Angular 2.0'ın, Angular 1.x’deki kod temeli üzerine değil, yeni bir kod temeli üzerine geliştireceklerini açıkladı.

Bu açıklama yapıldığında, Angular 1.x, mevcut diğer framework’lere göre çok öndeydi. Hem yeni kavramlar ortaya atmış, hem de bu kavramların örnek bir uygulamasını başarıyla ortaya koymuştu. Angular 1.x ile SPA’nın keyfini daha yeni-yeni çıkarmaya başlayanlar için, 1.x’e devam edilmeyecek olması anlaşılması güç bir karardı. Nitekim herkes anlamakta zorlandı, çoğu anlamadı. Küsenler, darılanlar oldu. Angular 1.x’i öğrenmek için büyük bir yatırım yaptığını düşünen kişiler aldatılmış, yarı yokda bırakılmış hissetti. Eski alışkanlıklardan dolayı, herkes daha uzun vadeli bir yola girmek istiyor. 3–4 ay bir mimariyi öğrenip, 4–5 yıl uygulamak istiyorlar. Ancak şuan tüm alanlardaki ilerleme hızı, bu yöntemin artık eskidiğini gösteriyor. Bu konuyu Sürekli İnovasyon Trendi yazımda işlemiştim. Ben sürekli inovasyona ayak uydurulması gerektiğini düşünenlerdenim. Bu yüzden, Angular 1.x ile projelerimi yürütmeye devam ederken, Angular 2.0'ın da yolunu gözledim, çıkan her makaleyi okudum, ilk beta/early release’lerden itibaren de takip etmeye, kullanmaya başladım.

Kimileri, Angular ekibibin, henüz Angular 2.0 üzerine çalışmaya bile başlamadan, böyle bir açıklama yapmasını, hiç stratejik bulmadı. Kamuoyu yönetimi açısından büyük bir hata olarak gördü. Heralde 2.0 hazır olunca, Angular ekibinin tüm 1.x kullanıcılarına hoş bir sürpriz yapmasını daha akıllıca buldular.

Halbuki Angular ekibi tüm günücü şeffaflık ve açık kaynak topluluğu üzerinden alıyor ve gelecekte de almayı hedefliyor. Bunun artık tek geçerli yol olduğunu, tüm dünyanın da bu yolda ilerlediğini, yine Sürekli İnovasyon ve Açık Kaynak Trendi yazımda işlemiştim. Üstelik bu (Angular’ı fonlayan) Google’ın da en başından beri vazgeçmediği, kendisini dünya devi yapan bir strateji. Bir yandan Angular 1.x ile kullanıcılarını oyalayıp, bir yandan 2.0 geliştirmeleri olacak iş değildi. Zaten pratik anlamda da, herşeyin bu kadar şeffaf olduğu bir dünyada uygulanması imkansız birşeyden bahsediyoruz. Bu yüzden bence en doğrusunu yaptılar. Angular 1.x zirvedeyken, Angular 2.0'ın çok daha farklı bir mimaride yeniden yazılacağını duyurdular. Birçokları sırtını döndü, ama Angular gerçekten devrimsel bir mimari ile 1 yıl sonra geri döndü. Ben buradan 2 sonuç çıkarıyorum:

1. Angular ekibi şeffaflığı her şeyin önüne koyuyor. Hiçbir şeyi gizlemek gibi bir niyetleri yok. Bu iyi birşey. İlk anda akıllara gelenin aksine, bu Angular’ı uzun vadeli güvenilir bir partner yapıyor.
2. Google, Angular projesine çok uzun vadeli bakıyor. Lider olan bir framework yaratmışken (1.x), bunu çöpe atabilecek kadar, uzun vadeli bir bakış açıları var.

Teknik Açıdan Angular

Tüm bu geçmişi, niyetleri, stratejileri bir yana bırakıp, teknik açıdan ürünü (Angular 2.x) değerlendirelim. Çünkü niyetler veya pazarlama stratejileri ne olursa olsun, başarılı olup olmayacağı gene teknik değerlendirmeler belirleyecek.

TypeScript

JavaScript Trendi yazımda, JavaScript’in nasıl bir hızla geliştiğini anlatmıştım. Bu gelişmelerden geri kalmak mümkün değil. Mevcut tarayıcılar içindeki javascript versiyonuna bağlı kalarak çözüm geliştirmeye kalkışmak artık rekabetin yıllarca gerisinde kalmak anlamına geliyor. Eğer bu değerlendirmeye katılıyorsanız iki seçeneğiniz var.

• ES Next (gelecekteki JavaScript) için bir transpiler (Örnek: Babel) kullanacaksınız
• ES Next üzerine Type sistemi sunan bir transpiler kullanacaksınız (ki bu TypeScript oluyor)

İlla bir transpilation süreci olacak ise, ben TypeScript seçimini doğru bulanlardanım. Çünkü Type sistemi kesinlikle daha öngörülebilir, hızlı ve hatasız kod yazmanızı sağlıyor. Üstelik TypeScript’de type’ın varlığı her an sizin tercihinize bağlı. İsterseniz kodun bir bölümünü type’sız geliştirebilirsiniz.

IoC Container

Angular tüm mimariyi IoC container ile birbirine bağlıyor. Son derece modüler bir genişlemeyi mümkün kılan IoC container bence her türlü proje için olmazsa olmazlardan. IoC Container Trendi başlıklı yazımda bu konuyu işlemiştim.

HTML Template / Kod Ayrımı

Angular’da kod ve görselleştirme (şablon) ayrımı çok basit olarak ortaya konulmuş. Her bileşenin (component) kod, ve görsel (HTML/CSS) tarafları ayrı ayrı ele alınmış. Dolayısıyla görsellik ve işlevsillik anlamında aynı bileşende bile iş bölümü yapmak son derece kolay.

Router

Sunucuya gitmeden, sayfalar arası geçiş yapmanızı ve buna paralel olarak tarayıcınızın adres barını yönetmenizi sağlayan Router, Angular’ın en kuvvetli olduğu alanlardan biri. Basit bir Json nesnesi ile yönetiliyor. Anlaması ve kullanması kolay ancak en önemli özelliği Lazy Loading / Pre Loading gibi “production” ortamı için kritik öneme sahip yükleme seçeneklerinin mevcut olması. Lazy Loading ile bir SPA uygulamasını birçok modüle ayırabilir, yalnızca kullanıcı ilgili modüle ulaşmak isterse bu modülün yüklenmesini sağlayabilirsiniz. Öte yandan Pre Loading seçeneğinde kullanıcı ilk olarak bir modül ile karşılanır, arka tarafta ek modüller yüklenmeye devam eder.

Testing

Angular bugüne kadar incelediğim mimariler arasında test edilebilir kod yazmaya en yatkın olanı. Ek olarak, birinci günden test edilebilir bir mimari ve hazır testler ile yola çıkıyorsunuz. Angular’ı geliştiren ekip için, test konusu en öncelikli konulardan. Eğer siz de testing’e önem veriyorsanız, Angular ile rahat ilerleyeceksiniz. Eğer testing’i atlamayı tercih eden bir yapınız varsa da (hiç önermiyorum) Angular karşınıza çıkmayacak.

RxJS

Daha önce Rx Trendine ilişkin bir yazı kaleme almıştım. Özellikle daha interaktif, daha canlı ve etkileşimi daha yüksek (event-driven) modern uygulamalar geliştirmek isteyenlerin Rx kullanması bir standart olmak üzere. Angular, RxJS ile tam bir evlilik içinde geliyor. Yeni HttpClient’i direkt Observable’lar ile veriyi taşıyor. Veri uygulamanın bir ucundan diğer ucuna Observable’lar, Subscription’lar, Rx Operatörler ve gerçekleşen Event’ler ile akıyor.

Forms

Form yönetimi için 2 seçenek sunuluyor. Hem “template driven” hem de “code driven”. İki yöntemin de var olması isabetli bir karar olmuş çünkü bu şekilde hem basit formlarda zaman kaybetmiyor, hem de karışık formları temiz bir kod altyapısı ile yönetebiliyorsunuz.

Desktop / Mobil Uygulama Geliştirme

Angular, soyut ve üst sınıf bir mimari sunuyor. Son celsede bu mimariyi Web uygulaması olarak somutlaştırabiliyorsunuz. Aynı yapıyı kullanarak mobil uygulama (Native Script) veya masaüstü (Electron) uygulama olarak da somutlaştırmak mümkün. Bu anlamda Angular’ın hedefi son derece yüksek. Özellikle birçok alanın (web/mobil/desktop) hedeflendiği projelerde, Angular, ortak bir kod yapısı üzerine özelleştirilebilir önyüzler sunabilme kabiliyetine sahip.

Angular CLI

Eğer 2+ yıl üzerinde çalışacağınız, bir hayli özelleştirilmiş bir uygulama hedefliyorsanız, Angular CLI büyük bir değer katmayabilir. Ancak eğer 10'larca küçük projeyi yanyana (paralel) yürütmek gibi bir hedefiniz var ise, Angular CLI hayatınızı çok-çok kolaylaştırabilir.

Kurumsal Uygulama Geliştirme

Kurumsal uygulama (enterprise application) geliştirmek için Angular çok uygun bir ortam sağlıyor:

• IoC Container sayesinde kurumsal birçok katman (logging, data, error handling, i18n vb.) geliştirmek ve projeye entegre etmek kolay.
• Projeyi anlamlı parçalara (modül) ayırmak, takım çalışması ve işbirliği içinde proje geliştirmek kolay.
• Her seviyede Testing’e hazır.
• Hiç Angular bilmeyen bir kişinin, ilk 3–6 ayında neyi, nasıl öğrenmesi gerektiği çok açık.
• Orta/İleri seviyede Angular uygulama geliştirmiş bir kişinin, sizin projenize dahil olması nispeten daha kolay.
• TypeScript kurumsal yazılım için daha uygun.

Angular Material

Google’ın tasarım ve UX kütüphanesi. Angular ile uyum içinde ilerliyor.

NgRX (Redux)

SPA’larda uygulama büyüdükçe, merkezi bir “state” yönetimi zorunluluk haline geliyor. Angular, React’taki bu harika pattern’i NgRX ile kendine dahil etmiş.

Angular ve React’ın Ortak ve Ayrışan Yönleri

Bir kişinin Angular’a ve React’a aynı derinlikte hakim olması zor. Ancak Angular ile birkaç büyük proje deneyimi yaşamış, React ile ise başlangıç seviyesinde bilgi sahibi olan biri olarak, şu ortak ve ayrışan yönleri olduğunu söylemeyebilirim:

• Her ikisi de son derece modern.
• Her ikisi de, birbirinin iyi yönlerini kendine dahil etmeyi benimsemiş. (Angular Material ve Redux örneklerindeki gibi)
• Her ikisi de, senior seviyesinde yazılımcılara bağımlı.
• Her ikisi de çok yeni bir zeminde ilerliyor ve bazı konular henüz aydınlanmış değil. (pre rendering, seo ..)
• Her ikisi için de pre-rendering vb. konularda NodeJS öncelikli sunucu platformu.
• Her ikisi de çok hızlı ilerliyor.
• Angular daha standart. Ancak React üzerine yapacağınız birkaç kütüphane seçimden sonra ortaya çıkaracağınız framework’ü Angular ile karşılaştırmak gerekir.
• React’da çok iyi bir liderlik yok ise, proje baş aşağı da gidebilir. Angular’da bu daha zor.

**

Eğer sıfırdan yazılım kariyerine başlamak istiyorsanız, 3 aylık yoğun programlar düzenliyorum. Bilgi için: https://www.yenikodyazilimkursu.com/

—

Test Invite online sınav sistemi ile tanışın: İşe alım sınavları, Genel Yetenek Testleri ve İngilizce Seviye Tespit Testleri

Video kayıtlı ve zorunlu tam ekran ile güvenli online sınavlar yapmak için: https://www.testinvite.com/lang/tr/online-sinav-sistemi.html