Flutter: Pes etmeyenler için yeni bir Mobile SDK

Rocky, 1976 yapımı bir klasik. Sadece vazgeçenlerin yenildiğini öğreten, azmin ve kararlılığın önemini her sahnesinde vurgulayan bir film. Ne zaman merdivenleri hızlı hızlı çıksam, zor gelen işlerle karşılaşsam, bir kütüphane daha denesem aklımda. Her yeni mobil geliştirme kitine inandığımda şapka takasım, üzerime deri mont giyesim, “Eye of the Tiger” dinleyesim geliyor.

“It hurts now, but one day it will be your warm up.” — Rocky Balboa

Uzun bir giriş oldu ama nedensiz değil. Mobil geliştirme ile 2011 yılında tanıştım. Askere gitmeden önce aldığım Galaxy S beni çok heyecanlandırmıştı. Sabırsızlık ile geçen 5 aydan sonra döner dönmez Android üzerinde uygulama geliştirmeye başladım. Yaklaşık 3 yıl bu şekilde devam etti ve mobil geliştirerek para kazanmaya başladım. Android 2, 3, 4 gibi bütün sorunlu sürümlere sektirmeden bulaştım! Acı çektim, kan tükürdüm ama çilem daha dolmamıştı… 2018'de, 1 seneye yakın React Native ile geliştirme yaptım. Yine bir teknolojiye tam çalışmıyorken adapte olmuştuk, yine bir grup deli ile birlikte bütün eksik parçaları tamamlamaya çalışıyorduk.

“Life’s not about how hard of a hit you can give. It’s about how many you can take, and still keep moving forward.” — Rocky Balboa

Bu kadar acıdan sonra içim umutsuzluk ile doluyken kendime şu cümleyi tekrarlıyordum: “En azından React Native ile ne yapılabileceğini gördük.”

Sonra bulutlar dağıldı, acılar unutuldu ama aldığım ders projeye RN (React Native) ile devam etme isteğimi söndürmüştü. Tam acaba ne yapsam diye düşünürken eskiden duyduğum bir proje aklıma geldi: Flutter. O zamanlar alpha olduğu için hiç bulaşmamıştım, artık beta sürümüne geçmiş :) tada: Karşınızda yeni bir SDK, Flutter 🎉. Google tarafından geliştirilen, iOS ve Android üzerinde çalışan, Dart ile kodlanan bir kütüphane ve tabi ki beta.

“Going in one more round when you don’t think you can — that’s what makes all the difference in your life.” — Rocky Balboa

Genel Bilgiler

Yaklaşık 2 haftadır vakit buldukça Flutter kullanarak çeşitli senaryolarda basit uygulamalar yazmaya çalışıyorum. Kısmen gerçeğe yakın bazı sorunlar ile karşılaştım. Hem bunları yazayım hem de sizlerle ne olup bittiği hakkında bir makale paylaşayım istedim.

Flutter’ın kendisini ifade ederken özellikle belirttiği 3 özelliği var. Bunlar;

• Fast Development : Hot Reload özelliği ile yaptığınız değişikliklerin hemen emulator/simulatör/cihaz tarafından algılanmasını sağlıyor. Hot Reload çalışmadığında ise app’i baştan başlatıyor. Benim deneyimlediğim kadarı ile bu özellik başarılı çalışıyor. Build/Rebuild ve Hot Reload işlemleri hızlı oluyor ve konsantrasyonunuz dağılmadan çalışabiliyorsunuz.
• Expressive and Flexible UI : Genel olarak katmanlı bir mimari, alışılagelmiş bir widget yapısı ve yüksek performans sunduğu için korkmadan UI hazırlayabiliyorsunuz. Bütün çizim işleri Flutter içerisinde yapıldığından dolayı platform bazlı kısıtlara takılmıyorsunuz.
• Native Performance : Aslında Flutter’ın performanslı olmasının ana nedeni Dart dili. Yazdığınız Dart kodu cihaz içerisinde native koda çevrilip kendi motoru üzerinde çalışıyor. Tüm çizim operasyonları native bir şekilde gerçekleşiyor. Ayrıca Tree Shaking ve Locksless GC gibi ek özellikleri ile yine performans ve optimizasyon ihtiyaçlarını karşılıyor.

“To beat me, he’s gonna have to kill me, and to kill me, he’s gonna have to have the heart to stand in front of me, and to do that, he’s gotta be willing to die himself and I don’t know if he’s ready to do that.” — Rocky Balboa

Flutter diğer Mobil SDK’lerden farklı yaklaşımları ile ilgi çekici geldi özetlemek gerekirse. Flutter bir kabuk kullanarak işletim sistemi ile olan iletişimi belli noktalarda düzenlemiş. Bu kabuk sistem, donanım v.b. gibi erişimlerde bize yardımcı olurken hem de ekrana çizilen her pixeli kontrol ediyor. Bu şu demek, bulunduğu işletim sisteminden sadece bir canvas alıyor ve sonrasında ekranda gördüğünüz herşey Flutter’ın çizdiği pixellerden ibaret oluyor. İşletim sisteminin UI bileşenlerine benzediğine kanmayın, çalışan hep Flutter kodu. Tam olarak bu noktada güçlü olduğunu düşündürdü bana. Yani ekrana native olarak pixel pixel UI çizmek aslında işletim sisteminin yaptığı şeyin tam olarak aynısı. Dolayısı ile önyüz ve performans konularında neden bu kadar iddaalı olduklarını anlayabiliyorum.

Geliştirme

En başta Dart dili ile yazıldığından bahsetmiştim. Eğer benim gibi bilmediğiniz bir dilse, uyarmam gerekir ki; Flutter dokümanları ile Dart dokümanlarını bir arada kullanmanız gerekli. Flutter, dilin özelliklerini kullanmaya çalışan bir kütüphane. Bu nedenle ilk olarak biraz Dart hakkında okuma yapmanızı öneririm. Dil hakkında bilgi edinmek için tur dokümanları son derece ideal. Yine detaylar ve farklı senaryolar için buradan ek dokümanlara ulaşabilirsiniz. Yıkılmayın, pes etmeyin, güzel bir dil.

“Every champion was once a contender who refused to give up.” — Rocky Balboa

Genel olarak dili beğendiğimi ve JS -> TypeScript -> Dart senaryosunun güzel bir geçiş olduğunu belirtmek isterim. Dart Javascript’e transpile edilebilen bir dil, temel syntax olarak çok farklı değil ve evet underscore ile başlayanlar private oluyor.

Flutter hakkında ilk olarak ekosistemini anlatarak başlamak istiyorum. React-Native benzeri teknolojiler ile çalıştıysanız bilirsiniz ki tool’lar dağınık ve farklı topluluklara aittir. Flutter ise ekosistemini tek bir çatı altından yönetiyor.

Bunların içinde;

• Test
• Build
• Packager
• IDE pluginleri
• Debugger
• Profiler
• Compiler var.

Bütün ekosistem sizin için hazır ve örnekleri ile kullanılabilir geliyor. Hatta başlangıç dokümanlarını takip ederek ilerlediğinizde, bu saydıklarımı sorun yaşamadan kullanabilir hale getirebiliyorsunuz.

Ben VSCode ile ilerlemeyi seçtim. İşe Flutter’ı yükleyetek başladım. Yükleme işlemi bittikten sonra flutter doctor ile kendi kendine bir kontrol gerçekleştirecek ve size eksik bir kalem var mı raporlayacaktır.

Ekran görüntüsünden de görebileceğiniz gibi yönlendirici ve anlaşılır bir bilgilendirme yapıyorlar. Ben sadece VSCode ile ilerlemeye karar verdiğim için IDE’ler arasında sadece onu onaylaması yeterli.

VSCode için 2 adet eklenti yükledim, Dart ve Flutter. Dart, dart dili için destek sağlıyor. Flutter ise SDK ile iletişim kuruyor, debugging ve test gibi konuları hallediyor. Run dediğinizde emulator/simulator un açık olması yeterli, bağlanıp app’i içeri atma debugger bağlantısını yapma kısmı otomatik gerçekleşiyor. Bildiğim kadarı ile IntelliJ eklentisi daha çok özelliğe sahip ama hiç kurup denemediğim için bilgi veremeyeceğim.

Dil ve araçları genel olarak çok güzel olsa da, kod yazarken yaşadığım en büyük sıkıntı JSX benzeri bir şekilde akıcı şekilde hiyerarşi verememek oldu. Kodun okunurluğu az ve biraz da sinir bozucu bana kalırsa. Yakında Flutter kullanarak yazacağım büyük bir projede acı çekmemek için React dünyasında sevdiğim bazı özellikleri (StyledComponents, JSX v.b.) taklit etmeye çalışacağım. Bunlar dışında kavramlar çok benzer.

Paketleme

Bundle çıkmak için izlenen yöntem alıştığımız gibi. Flutter’ı kullanarak Android ve iOS için 2 farklı hazırlık sürecimiz var ve dokümanlarında detaylı anlatmış. İsterseniz iOS ve Android süreçlerine bakabilirsiniz. Belirtmek isterim ki benim ihtiyaçlarım doğrultusunda bir farklılık görmedim.

“If you’re willing to go through all the battling you got to go through to get where you want to get, who’s got the right to stop you?” — Rocky Balboa

Çıkan paket boyularına baktığımda boş bir uygulamanın ortalama 7,5mb a kadar düştüğünü (silinen bağımlılıklara ve importlara göre) gördüm. Başlangıç rakamları RN paketlerine göre biraz daha fazla yer tutuyor ama uygulama büyüdükçe artış oranı düşer mi, daha verimli olur mu bilemiyorum.

React Native vs Flutter

Şimdi böyle bir karşılaştırma yapmaya ne gerek var diyebilirsiniz. Aslında yeni bir SDK kullanmak için bir nedene ihtiyacımız yok. Sadece canımız istese yeterli ama gözüme görünen bariz farklılıkları belirtirsem birilerinin işine yarayacağını düşündüğümden yazmak istedim.

Teknoloji seçerken aklıma takılan ilk konu, tek başıma mı yoksa ekip olarak mı kullanacağım sorusu oluyor.

ReactNative JS ve CSS’in gücünü arkasına aldığı için doğuştan daha şanslı başlıyor. Bu teknolojileri bilen insan sayısı daha fazla, birçok doküman var ve eksik implementasyon derdi yok. Örneğin ReactNative de text-shadow standart css ile verilirken Flutter’da bunun henüz bir karşılığı yok, insanlar yan yollar ile aynı efekti yaratmaya çalışıyor. Bunun gibi birçok eksik olduğunu gördüm.

Flutter için Dart kullanmanın rahatlığı inanılmaz bir artı. JS dünyasının kaosu ve optimize edilmemişliği ile tip desteği için fazladan taklalar atmak zorunda olmanız (flow, TS) işinizi çok zorlaştırıyor. Build işlemlerinde cache invalidation’lardan tutun build süreleri ve kullandığınız kütüphanelerin stabilitesi komple sorun yaratıyor ve ReactNative bu sorunların tepesinde oturarak geliyor. Öte yandan Flutter ise stabil bir Dart dünyasının üzerine kurulu, geliştirme araçları ve kütüphaneleri daha stabil ve az kademeli. Tek gelişmesi gereken Flutter’ın kendisi ve bu da hızlıca gerçekleşen bir durum.

Yine ReactNative için performans çok belirsiz bir bölgede. Çok hızlı ya da çok yavaş çalışan uygulamalar yazabilirsiniz. Bu tabi Flutter için de geçerli ama daha belirli ve kolay anlaşılabiliyor. ReactNative için dikkat ediyorum konuştuğum kişiler hala ne native ne değil tam olarak hakim değiller ve bu algısal bir problem yaratıyor.

Yazdığınız kodun okunurluğu v.b. gibi konularda esnekliği ve pişmişliğinden dolayı ReactNative dünyası öne geçiyor. İlk olarak Flutter için kullandığımız build pramitleri sinir bozucu ve JSX’in sağladığı rahatlığı arıyor gözüm. StyledComponents benzeri bir stil çözümü olmadığı için çoğu zaman inheritance veya composition ile kodu temizlemeye çalışıyorum ama yine yetersiz kaldığını düşünüyorum.

OS’a daha yakın özellikleri kullanırken (net, animation v.b.) ReactNative çok problem yaşatıyor. Flutter ile bu kadar detaylı bir kullanım senaryosu denemedim ama genel fikrim daha düzgün olduğu yönünde.

Genel olarak 2 SDK ile yaşadıklarım bunlar. Basit bir şekilde yaşadıklarımı anlatmaya çalıştım. Umarım karar vereceklere bir ön bilgi ve fikir verebilmişimdir.

Şunu belirtmek isterim, ReactNative ile başladığımız ve bir noktaya getirdiğimiz bir app var, bunu tekrar Flutter ile yazmaya karar verdim en azında umut etmek ve denemek adına Flutter’ı değerli görüyorum. İlerde bir makale ile yeni tecrübelerimi paylaşıyor olurum.

Sorularınız, fikirleriniz için yazarsanız çok sevinirim.

Esen kalın.