Yeşil Android robotu kırmızı Apple logolu elma tutuyor, iOS ve Android platformlarının karşılaştırmasını sembolize ediyor.

ChatGPT tarafından oluşturulan görsel — kaynak ve telif hakkı yazara aittir.

Herkese merhaba! Peakup’ta Android geliştirici olarak çalışmaya başlayalı 6 ay olmuştu. Gidişat çok güzeldi. Google Play Store’da 5 adet sağlam Android uygulama yayımlamıştık. Buradan uygulamalarımızın listesine göz atabilirsiniz. En son yaptığımız “İzin Yönetimi” Android uygulamamız, 12 Ekim 2019 tarihinde Google Play Store’a yüklenerek kullanıma hazır hâle geldi. Bu tarihten itibaren (yazıyı 1 ay sonrasında yazmıştım), XCode ile Android tarafında yazdığım uygulamaların iOS versiyonlarını yazmaya başladım. SwiftUI ile girişmiştim ki başıma geleceklerden habersizdim.

Biliyorsunuz ki Android ve iOS sistemleri birbirlerinden bir hayli farklı. Bu sistemlerin geliştirilme sürecindeki fark ise bundan çok daha fazla. Yeni bir dil, yeni bir IDE, yeni UI, yeni bir tasarım anlayışı, yeni kullanıcı alışkanlıkları, yeni… derken başlarda açıkçası sudan çıkmış balığa dönmüştüm. Swift ve Kotlin birbirine çok yakın diller olduğu için dil konusunda şanslıydım ama arayüz konusunda ne yazık ki aynı şeyi söyleyemeyeceğim. iOS’ta sürükle bırak kullanılıyordu, koda müdahale etmiyorduk; Android’de ise tam tersi, sürükle bırak kullanmıyorduk. SwiftUI’ın imdadıma yetişip beni kurtaracağını düşünüyor ama yanılıyordum. “SwiftUI’a başlayalım mı başlamayalım mı?” derken Android de Jetpack Compose çıkarıp kafamı altüst etmesin mi?


SwiftUI Nedir?

Google’da, “iOS öğreniyorum; neleri bilmem, öğrenmem gerekir?”, “iOS yedim zehirlendim.”, “iOS kafası”, “iOS olmak istiyorum.”, “iOS bize gelsin.”, “iOS sistem gereksinimleri”… gibi aramalar yapmaya başladım. Dolayısıyla uzun bir araştırma sürecim oldu. 🤗 Apple’ın, Haziran 2019’da WWDC’de SwiftUI isimli yeni bir UI framework yayımladığını öğrendim. Bu framework, UI yazımını bayağı kolaylaştırıyor; ilgili dokümanları ve internetteki çeşitli örnekleri incelediğinizde, işleri kayda değer derecede hızlandırdığını ve çok pratik olduğunu göreceksiniz. Ayrıca öğrenmesi de çok kolay. Bu hevesle “Apple, böyle taş gibi bir UI framework çıkardığına göre, Storyboard sisteminin daha da yüzüne bakmaz,” diye düşünerek hareket ettim ve ilk iOS projemi SwiftUI kullanarak açtım.

Projeyi yazmaya başladıktan sonra fark ettim ki yeni çıktığı için SwiftUI ile ilgili dokümanlar ve örnekler çok azdı. Çıkalı 4 ay olmasına rağmen pek çok class deprecated olmuştu bile ve yerlerine -dokümanlarda anlatılan bazı methodlar dâhil- stabil, çalışan kodlar da koymamışlardı. E tabii 2024'te Apple Store’da SwiftUI kullanan onlarca uygulama var şu an ancak o tarihte ihtiyacım olan bilgilerin çok azını bulabildim.

Mesela yazdığım uygulama için WKWebView bileşenini kullanmak zorundaydım. Bunun SwiftUI ile kullanımını merak ettim. WKWebView içinde değişen linki almak istedim ancak başarıya hızlıca ulaşamadım. Stackoverflow’da (ios — SwiftUI WKWebView detect url changing — Stack Overflow) cevap verildiğindeyse artık çok geçti.

Hiçbir zaman kolay yolu tercih eden bir insan olmadım ancak bir şeyin alması gerekenden fazla vakit almasını da istemedim.

Kumlı bir zemin üzerinde duran ahşap çerçeveli saatli kum saati, zaman akışını simgeliyor.

Photo by Aron Visuals on Unsplash

WKWebView ile olan işim uzun uğraşlar sonucunda çözülmüştü ancak SwiftUI’da bir sayfadan başka bir sayfaya geçmekte bile zorlandım çünkü tüm view’ları NavigationView içerisine eklemeniz gerekiyordu. WKWebView ile oluşturduğum sayfayı o yapının içerisine almak pek mümkün görünmüyordu. Belki yeni başladığım için ben de becerememiş olabilirim. Bu, yaşadığım çeşitli problemlere sadece bir örnekti. Aklım ve gönlüm SwiftUI’da kala kala şimdilik mecburen Storyboard’a dönmüştüm. Bazı Quora soruları ve makaleler de bu görüşümü destekleyecek nitelikteydi. Storyboard sistemi ile yaptığım uygulama 2 hafta sürdü. SwiftUI’a verdiğim 1 haftada bunun çeyreği kadar ilerleyememiştim.

Ufak bir kod örneği vermek istiyorum:

swift
import SwiftUI

struct AlbumDetail: View {
 var album: Album

 var body: some View {
  List(album.songs) { song in
   HStack {
    Image(album.cover)
    VStack(alignment: .leading) {
     Text(song.title)
     Text(song.artist.name).foregroundStyle(.secondary)
    }
   }
  }
 }
}

Bu, bildiğiniz DeclarativeUI yapısı. Kısalığı, netliği, anlaşılırlığı ve açıklığıyla resmen gözlerimi kamaştırdı. SwiftUI hakkında detaylı bilgi için sizi Apple dokümanına davet ediyorum. Keşke Android’de de böyle rahat bir sistem olsa diyordum ki 2019 Ekim ayında yapılan Android Dev Summit’te Android Jetpack Compose isimli bir UI Framework kullanıma açıldı.


Android Jetpack Compose

“React, Litho, Vue.js, Flutter gibi teknolojilerden esinlenilen Declarative UI Toolkit’tir.” – Compose tanıtım videosu.

İlk olarak 2019 Google I/O’da tanıtılan bu framework, o zamanlar bayağı havada kalmıştı çünkü henüz yenilebilen bir şey değildi. Deneyemiyorduk, ne olduğunu bile tahmin edememiştik; bize sadece birkaç satır kod gösterilmişti. “Böyle bir şey yapıyoruz, gelecek bu, haberiniz olsun diye gösteriyoruz,” demişlerdi; 23 Ekim 2019’da yapılan Android Dev Summit’te ise resmen tanıttılar, gösterdiler. Android Studio 4.0 indirip Jetpack Compose’u deneyebileceğimizi söyleyerek bizi iyice heyecanlandırdılar.

Gördüğümüz kadarıyla Compose işimizi çok hızlandıracak, UI yazımını çok kolaylaştıracak; daha okunabilir, daha hızlı anlaşılabilir, birkaç ay sonra döndüğümüzde “Şair burada ne demek istemiş?” diye daha az düşüneceğimiz kaliteli kod üretmemizi sağlayacak. XML dosyalarındaki kalabalık kodu güzel bir yolla azaltacak gibi görünüyor. Heyecanla ilk fırsatta denemeyi ve ağzını yemeyi bekliyorum. E tabii içimden bir ses, “Acele etme, stabil değildir; stabil olduğu zaman daha çok konuşulacak, daha çok rüyayı süsleyecek,” diyor. Compose için de bir kod örneği sunarak değerlendirmeye geçiyorum.

Yazar tarafından alınan ekran görüntüsü

Yazar tarafından alınan ekran görüntüsü

Öyle “Text” yazıp, parantez açıp içine yazdığım text’in önizlemede hemencecik TextView’a dönüşmesi ne güzelmiş. Altyapısını çok merak etmekle beraber, geliştiricilerin yakasına yapışıp “Bu hantal Android sisteminde bunu nasıl böyle yapabildiniz?” diye sormak istiyordum. 🤗

Android Jetpack Compose hakkında detaylı bilgi alabilmeniz için doküman ve eğitim bağlantısını buraya ekliyorum. Tanıdık geldi mi syntax yapısı? Gördüğünüz üzere Android’in getirdiği Jetpack Compose View Toolkit’i de SwiftUI gibi DeclarativeUI yapısına sahip.


Farkları

Evet, benzerlik şaşırtıcı. Hatta ürkütücü derecede şaşırtıcı. Yeminle kopyala-yapıştır yapıp 3–5 harf değiştirdim mi var ya iki tarafın da arayüzünü bitirmiş olurum. Hem de responsive, her cihaza uyumlu.

Legacy kod ile olan bağları:

  • UIView ve UIViewRepresentable sınıfları SwiftUI ile kullanılabilir ancak SwiftUI, temelde yeni View protokolüne dayanır. UIViewRepresentable sınıfı, eski UIKit bazlı bileşenleri SwiftUI içinde kullanmak için bir köprü görevi görür. SwiftUI, UIViewController yerine UIHostingController içerisinde barındırılır

  • Jetpack Compose tamamen @Composable fonksiyonlar ile çalışır ve eski Android XML bazlı layout sistemini kullanmaz.

Orta çağ savaşçıları Android ve Apple logolarını kale kalkanlarına taşıyarak karşı karşıya duruyor.

ChatGPT tarafından oluşturulan görsel — kaynak ve telif hakkı yazara aittir.

SwiftUI sınıfları ve Composable:

  • SwiftUI'da kullanılan yapılar struct olarak tanımlanır ve bu struct'lar View protokolünü uygular. (Inheritance yerine protocol composition kullanılır.)

  • Compose'da @Composable fonksiyonlar, UI bileşenlerini tanımlamak için kullanılır. Bunlar sınıflarla değil, fonksiyonlarla gerçekleştirilir ve gerçekten de sınıfla bir bağlantıları yoktur. Bu fonksiyonlar sayesinde tamamen yeni bir UI yapısı kurulabilir.

Kod yazma zorunlulukları:

  • SwiftUI’da body: View { } bloğu, her View için zorunlu olarak tanımlanması gereken bir yapıdır.

  • Compose'da bir @Composable fonksiyonun tanımı, bir UI parçasını render etmek için yeterlidir ve özel bir kalıp zorunluluğu yoktur.

View dizilimi:

  • Her iki platform da dikey (Column ve VStack) ve yatay (Row ve HStack) düzenlemeleri destekler. SwiftUI ve Compose arasında bu dizilim yapılarının isimlendirilmesi dışında fonksiyonellik olarak büyük farklar yoktur. (Declarative UI yapısında olduğu için bi’ zahmet)

SwiftUI “Bir kere yaz, her yerde kullan,” mantığından ziyade, “Bir kere öğren, her yerde yaz,” mantığına hitap ederken Compose, tamamen tekrar kullanılabilir bir mantık sunuyor. Compose open source iken SwiftUI hâliyle değil.

csv
Compose,SwiftUI
Row,HStack
Column,VStack
Stack,ZStack

Stil başlığında da birkaç fark olduğu görünüyor. Alttaki kod parçacığında gördüğünüz satırlar kendi içlerinde aynı işi yapıyor.

less
Button("Button Name", color = Color.Green, onClick = {}) // Compose

Button("Button Name", action: {}).foregroundColor(Color.green) // SwiftUI


Ortak Özellikleri

  1. Her iki teknolojiyle de özel view objeleri üretebilirsiniz. Her iki framework da bileşen tabanlı (component-based) yaklaşımı benimser ve yeniden kullanılabilir UI bileşenleri oluşturmayı kolaylaştırır.

  2. Bu toolkit’lerin en iyi yanı ise preview hizmetleri. SwiftuUI, canlı preview ile geliyor. Hatta SwiftUI preview sayesinde bunlarla etkileşime bile girebiliyorsunuz. Compose Preview ile Android Studio da live preview özelliğine sahip.

  3. SwiftUI’da macOS Catalina ve iOS 13 zorunluluğu, Compose tarafında Android Studio 4.0 ve uygulamanızın API Level 21 üstü olması lazım.

Farklar, benzerlikler uzayıp gider. Şimdilik burada bırakalım, ileride toolkitler geliştikçe buraları da güncelleriz.

Şimdi derin ve cevabını merak ettiğim bir soru var aklımda. İnşallah sizin aklınızda da uyanmıştır bu soru. Yazıyı buraya kadar okuduysanız bence uyanmalı. 🙂 Neden 2 dev şirket birden, ardı ardına DeclarativeUI yapısına sahip yeni UI Toolkit ve Framework yayınlar? Nedir ki bu DeclarativeUI? Bir sonraki yazıda da ondan bahsedelim.


Kaynakça

http://nilhcem.com/swift-is-like-kotlin
2019 Ekim Android Dev Summit Youtube
http://intelligiblebabble.com/compose-from-first-principles/
https://quickbirdstudios.com/blog/swiftui-vs-android-jetpack-compose/
https://medium.com/@ZoeWave/swiftui-jetpack-compose-db29036532df