Flutter Nedir? Devrim Etkisi Oluştur mu?

Download this page in PDF format

Evet. eğer  bu konuda Türkçe kaynak aradığın için burada olduğunu düşünüyorum. 1 yıldan uzun zamandır oluşan bilgi birikimi mi sana aktarıyor olacağım!  Soruların olursa yorum bölümüne yazmayı unutma!

Mobil Uygulama Geliştirme Süreci

Mobil uygulama geliştirme nispeten yeni bir çalışma alanıdır.3rd parti geliştiriciler, on yıldan daha kısa bir süredir mobil uygulamalar geliştirebildiler, bu yüzden bu alan sürekli gelişmektedir.

OEM SDKs’lar 

Apple iOS SDK’sını 2008’de ve Google Android SDK’sını 2009’da piyasaya sürdü. Bu iki SDK, farklı dillere dayanıyordu: Sırasıyla Objective-C ve Java sonradan ise bu dillerin yerini IOS tarafında Swift, Android tarafında ise Kotlin aldı.

Yukarıdaki diagrama baktığımızda bir mobil uygulamada Widgetlar oluşur ve bu widgetlar bir

ekran tuvaline işlenir ve oluşan olaylar tekrardan bu widgetlara geri gönderilir. Diğer yandan cihazın kamera, ses ve diğer kısımlarına erişmek için platform ile konuşulur. Görülen bu basit mimaride  IOS ve ANDROİD tarafında widgetlar farklı olduğundan yazılım dili belli olmadığından ayrı ayrı uygulama geliştirmeniz gerekir.

Uygulama Geliştirme Çeşitliliğini inceleyelim

Webview ile oluşan frameworkler

İngilizce tabir ile belirtmek gerekirse ilk cross-platform olarak geliştirilen SDK ana yapı olarak JavaScript ve WebViews’a dayanıyordu. PhoneGap, Apache Cordova, Ionic ve diğerleri. Apple, iOS SDK’sını piyasaya sürmeden önce, üçüncü taraf geliştiricilerin iPhone için webapps oluşturmalarını teşvik etti ve böylece web teknolojilerini kullanarak platformlar arası uygulamalar oluşturmak kolaylaştı.

Reactive View ile oluşan frameworkler

Reactif frameworkler ise ( Reacjs, React Native ) WebView aksine daha popüler olmaya başladılar sebebi ise WebViewlara göre performans olarak daha iyi olması ve Native olarak uygulama geliştirme imkanı sunması oldu. 2015 Yılında React Native facebook tarafında açık kaynak kodlu olarak dağıtılmaya başlamasından sonra bir çok geliştirici Javascript altyapısını bildikleri için hızlıca React Native geçiş yaptı çünkü native uygulamaya yakın performans alınıyordu.

Evet React Native bu sayede çok popüler oldu olmayı  hak ediyor, ancak Javacript tabanlı olan React Native ‘in cihazdaki Widgetları oluşturabilmesi malesef doğrudan olamıyor mutlaka arada köprü ile ( Bridge ) erişim sağlanması gerekiyor. Platformlardaki Hizmetlerin aksine Widgetlara çok daha fazla erişim olur. Animasyonlar , sayfa geçişleri, ekrana dokunmalar v.s ) buda arada köprüden dolayı performans düşmeşine neden olmaktadır. Dolayısı ile farklı bir yapı olmadığı için geliştiriciler çoğunlukla React Native tercih etmiştir.

ve Flutter Doğdu.

Gelelim Flutter’a. Flutter Google tarafından geliştirilen açık kaynaklı mobil uygulama geliştirme SDK’sıdır diyebiliriz. Arıştırmalarına göre 2013 yılında Google tarafında Google Glass için 40M$ bedel ile satın alınan flutter o zamanlar Jest ve Mimik tanıma firması olarak Google’a katılmıştır akabinde yıllar için  bu ekip Flutter’ı geliştirerek bugünki cross-platform native uygulama geliştirme yapısına dönüşmüştür.

Flutter yine google tarafında geliştirilen DART programlama dilini kullanmaktadır. Syntax olarak Javascript’e çok benzeyen bir yapıya sahiptir. Flutter ‘ın kendi deyimiyle herşey eklenti ( Widget) ‘tır.  Flutter React Native gibi reactive uygulamalar sunar her iki platforma da native uygulama çıktısı verir. Yani tek yazılım dili ( dart) ile IOS ve ANDROID uygulama geliştirme imkanı sunar  react native ‘in aksine arada bir köprü kullanmaz ve doğrudan Platform ile ilişki kurar dolayısı ile performans kaybı yaşamaz doğrudan işlemci üzerinde derlenir.

Flutter’in bir JavaScript köprüsü gerektirmeden reaktif görünümler sunan tek mobil SDK olması, Flutter’i ilginç ve denemeye değer hale getirmek için yeterli olmalı, ancak Flutter hakkında çok daha devrimci bir şey var ve bu da widget’lardır.

1- Widget’ların görünümü ve hissi her şeyden önemlidir. Widget’lar çeşitli ekran boyutlarında da dahil olmak üzere iyi görünmelidir. Ayrıca doğal yani native uygulama hissi vermelidir.

2- Widget’lar hızlı bir şekilde render olmalıdır.

3- Modern uygulamalar için, widget’lar genişletilebilir ve özelleştirilebilir olmalıdır. Geliştiriciler, yeni widget’lar ekleyebilmeli ve kendine göre özelleştrebilmelidir.

Flutter, native görünümlü, hızlı, kişiselleştirilebilir ve genişletilebilir widget’lar içeren yeni bir mimariye sahiptir. Flutter OEM widget’larını (veya DOM WebViews) kullanmıyor, kendi widget’larını oluşturuyor.!

Yukarıdaki digrama bakıldığından Flutter’ın mimarisi tamamen diğer mimarilere göre farklılık gösteriyor. Flutter Widgetlero ve Renderı olayını doğrudan uygulama içerisinden Platforma aktarıyor. Flutter’in platform tarafında tüm ihtiyacı olan kısımlar cihazın ekranında oluşup sonradan Platform içinde Camera, Lokasyon , Sensor gibi cihaz donanımlarına erişim sağlıyor.

Sol tarafta yer alan veriyi kodlama ve kod çözme yapan Dart programı (yeşil renkte) ve yerel platform kodu (iOS veya Android için mavi renkte) arasında hala bir arabirim( köprü) var ancak bu bir JavaScript köprüsünden daha hızlı çalışıyor.

Burada şöyle bir sorun ortaya çıkıyor belkide bazılarınıza göre sorun da olmaya bilir. Widget’ları ve oluşturucuyu(render) uygulamaya taşımak, uygulamanın boyutunu ekiler. Android’deki bir Flutter uygulamasının minimum boyutu bugün itibari ile yaklaşık 4.28MB’tır.(Bakınız)aslında bu, benzer araçlarla oluşturulan minimum uygulama boyutuna çok yakındır.

Uygulama Düzeni

Flutter’daki en büyük iyileştirmeden birisi ise , uygulama içerisine yerleştireceğiniz Widgetların bir takım kurallara dayanarak boyutunu kontrol edebileceğiniz kolay bir yapıya sahip olmasıdır.

Geleneksel olarak, Uygulama düzeni herhangi bir parçacığa (sanal olarak) uygulanabilecek geniş bir kural kümesi kullanır. Kurallar çoklu düzen yöntemleri uygular. İyi bilinen bir örnek olarak CSS mizanpajını ele alalım (Android ve iOS’taki düzen temelde benzer olsa da). CSS, HTML öğelerine (widget’lara) uygulanan özelliklere (kurallara) sahiptir. CSS3 ise toplamda 375 özelliği sahiptir.

CSS (çoklu) kutu modelleri, yüzer elemanlar, tablolar, çoklu metin sütunları gibi bir dizi düzen modeli içerir. Flexbox ve grid gibi ek düzen modelleri daha sonra eklendiler çünkü geliştiriciler ve tasarımcılar mizanpaj üzerinde daha fazla kontrole ihtiyaç duyuyordu ve istedikleri şeyi elde etmek için tablolar ve saydam görüntüler kullanıyorlardı. Geleneksel düzende yeni düzen modelleri geliştirici tarafından eklenmezdi  ve bu nedenle CSS’ye flexbox ve grid eklenerek tüm tarayıcılarda kullanılır hale getirildi.

Geleneksel mizanpajla ilgili bir başka problem, kuralların birbirleriyle etkileşebildiği (ve hatta çatıştığı) ve öğelere genellikle onlarca kural uygulanmış olmasıdır. Bu düzeni yavaşlatır daha da kötüsü, düzen performansı tipik olarak N-karesidir, böylece eleman sayısı arttıkça düzen daha da yavaşlar.

Flutter’ın şuanki hali, Google’da Chrome tarayıcı ekibinin üyeleri tarafından gerçekleştirilen bir deneme olarak başladı. Geleneksel düzen modelini göz ardı edersek daha hızlı bir render yapılıp yapılamayacağını görmek istediler ve birkaç hafta sonra, önemli performans kazanımları elde ettiler.

Genel olarak baktığımızda;

1. Çoğu mizanpaj nispeten basittir, örneğin: kayan bir sayfadaki metin, boyutu ve konumu yalnızca ekranın boyutuna bağlı olan sabit dikdörtgenler ve belki bazı tablolar, yüzer öğeler vb.
2. Çoğu düzen bir widget’ın alt kümesidir ve bu alt ağaç genellikle bir düzen modelini kullanır, bu nedenle bu widget’lar tarafından yalnızca çok az sayıda kuralın desteklenmesi gerekmektedir.

Peki ekip ne gördü?

1. Hepsini düzene koyduğumuzda düzenin önemli ölçüde basitleştirilebileceğini fark ettik
2. Herhangi bir pencere parçacığına uygulanabilecek büyük bir düzen kümesi yerine, her bir widget kendi basit düzen modelini belirleyecektir.
3. Her bir widget’ın göz önünde bulundurulması gereken daha küçük bir düzen kuralları kümesi olduğundan, düzen yoğun şekilde optimize edilebilir.
4. Düzeni daha da basitleştirmek için neredeyse her şeyi bir widget’e çevirdik.

4. maddeye baktığımızda işte o yüzden Flutter’da neredeyse herşey Widget’lardan oluşuyor!

import 'package:flutter/material.dart';


void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  Scaffold(
      body: Center(
      child: Text("Merhaba Dünya"),
      ),
      ),
    );
  }
}