Quasar vs Android XML: Hangi UI Teknolojisi Daha Verimli?

ChatGPT 4o tarafından üretilmiş görsel

Mobil kullanıcı arayüzü (UI), kullanıcı deneyimini belirleyen en önemli faktörlerden biridir. İyi bir UI tasarımı kullanıcıların uygulama ile etkileşimini kolaylaştırırken kötü bir tasarım, kullanıcıların uygulamayı kullanmada zorlanmasına, istediği özelliği bulamamasına, uygulamayı terk etmesine, hatta kaldırmasına ve Google Play Store veya Apple Store’a girip uygulama hakkında “Virüslü bu, indirmeyin(!)” şeklinde yorumlar yazmasına neden olabilir. Bu yazıda, popüler bir web ve mobil UI framework’ü olan Quasar ile Android için kullanılan XML tabanlı UI yazımı karşılaştırılacaktır.

7 yıl Android geliştiriciliği yapmış ve pek çok farklı kod tabanıyla uğraşmış biri olarak Quasar’ı görünce ne kadar benzerlik bulup şaşırdığımı okuyunca siz de çok şaşıracaksınız. Amacım, her iki teknolojinin de benzerliklerini, güçlü ve zayıf yönlerini inceleyerek hangi senaryolarda daha uygun olduklarını göstermek.

Geliştirme Ortamları ve Araçları:

• Quasar: Quasar CLI, projelerin hızlı bir şekilde oluşturulmasını sağlar ve Vue DevTools ile güçlü bir geliştirme deneyimi sunar. Node.js ve NPM gerektirir. IDE olarak Visual Studio Code kullanabilirsiniz. Visual Studio Code ve tarayıcı üzerinden geliştirmelerinizi yapabilir, test ve debug edebilirsiniz. Android Profiler gibi Android’e has özellikleri kullanmak isterseniz projeyi Android Studio aracılığıyla da açabilirsiniz.

• Android XML: Android Studio, Android geliştirme için resmi IDE’dir ve XML düzenleyici, emülatör ve Profiler gibi birçok araçla birlikte gelir. 7 yıllık bir Android geliştirici olarak Android Studio’yu anlata anlata bitiremem: JDK gerektirir. Emülatör ve gerçek cihaz ile test yapabilir ve debug edebilirsiniz.

Performans ve Optimizasyon

Hangi Teknoloji Daha Hızlı ve Verimli?

• Quasar: Vue.js’in reaktif doğası sayesinde hızlı ve verimli bir geliştirme deneyimi sunar ancak tarayıcı (mobil için webview) tabanlı olduğu için bellek kullanımı ve performans, büyük ölçüde kullanılan tarayıcıya ve cihazın performansına tabidir. Hafif uygulamalarda etkili çalışır ve iOS tarafını da tek kişi geliştirebilir. Bununla birlikte, büyük ve karmaşık uygulamalarda performans düşebilir.

• Android XML: Android’in yerel bellek yönetimi sayesinde çok daha verimli bellek ve batarya kullanımı sağlanır. Büyük projeler tabii ki native ile daha iyi yapılır. Bu konu hâlâ tartışmaya kapalıdır ve muhtemelen öyle de kalacaktır. Performans ve hafıza kullanım testleri, Android Studio’nun Profiler aracı ile megabayt megabayt incelenerek yapılabilir.

Fotoğraf: Onur Binay / Unsplash

Öğrenme Eğrisi ve Geliştirici Deneyimi

Hangi teknolojiyi öğrenmesi ve kullanması daha kolay:

• Quasar: HTML, CSS, Vue.js ve JavaScript bilgisine sahip olanlar için öğrenmesi oldukça kolaydır. Quasar’ın kapsamlı dokümantasyonu ve geniş topluluğu sayesinde hızlıca öğrenilebilir.

• Android XML: Android geliştirme için Kotlin bilgisi gereklidir. XML tabanlı UI yazımı, özellikle yeni başlayanlar için biraz karmaşık olabilir ancak Android Studio’nun sağladığı sürükle bırak gibi araçlar ve dokümantasyon bu süreci kolaylaştırır.

Dokümantasyon ve topluluk desteği:

Her ikisi de geniş ve aktif bir topluluğa sahiptir ve ikisinde de dokümantasyon oldukça detaylı ve öğreticidir. Android dokümanlarını daha ayrıntılı bulmaktayım. Topluluk konusunda da Android tarafını yine daha güçlü görüyorum. Aksini düşünenler için yorum bölümü açıktır. :)

Esneklik ve Uyumluluk:

Farklı Cihazlar ve Platformlar ile Uyumluluk:

• Quasar: Web tabanlı olduğu için, farklı tarayıcılar ve platformlar üzerinde çalışabilir. Ayrıca, Quasar ile mobil uygulamalar (şu yazımda ve şu yazımd a anlattığım gibi Capacitor ile) ve masaüstü uygulamalar (Electron ile) oluşturulabilir.

• Android XML: Yalnızca Android cihazlar için uygundur. Farklı ekran boyutlarına ve çözünürlüklere uyum sağlamak için kullanılan responsive tasarım teknikleri Quasar’dan daha üstündür. Bir ConstraintLayout var ki sorma gitsin.

Hangi Teknolojinin Hangi Senaryolarda Daha Uygun Olduğu:

• Quasar: Web tabanlı uygulamalar, çapraz platform (bayılırsınız cross-platform demeye. Çapraz diyorum, hadi bakalım. 😊) uygulamalar ve hızlı prototip oluşturma için uygundur. Eğer hem web hem iOS hem de Android tarafına tek seferde uygulama geliştirmek isterseniz Quasar ve Vue.js’i tercih edebilirsiniz.

• Android XML: Yüksek performans, büyük kapsam ve donanım özelliklerine erişim gerektiren projeler için daha uygundur.

Her İki Teknolojide de Bir UI Bileşeni Oluşturmanın Adımları:

Yeterince edebiyat yaptıysam koda geçebiliriz.

• Quasar: Vue.js tabanlı bir framework olduğu için bileşenler Vue bileşenleri olarak oluşturulur:

<template>
  <q-btn label="Click me" @click="handleClick"></q-btn>
</template>
<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

Dikkat etmenizi istediğim asıl Quasar satırı:

<q-btn label="Click me" @click="handleClick"></q-btn>

Android geliştirici olup da bu yapıyı bir yerlerden tanıdık bulan var mı? O hâlde hemen örneğe geçelim.

• Android XML: Android’de, bir buton oluşturmak için Jetpack Compose’dan önce XML kullanılırdı. Bu XML dosyası, genellikle bir Activity veya Fragment ile ilişkilendirilir:

<Button
 android:id="@+id/button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Click me"
 android:onClick="handleClick"/>

Kod örneklerini artıralım:

<div>
    <!-- Button with icon and size -->
    <q-btn
      label="Click me"
      @click="handleClick"
      icon="alarm"
      color="primary"
      :size="buttonSize"
    ></q-btn>

    <!-- Input Field with placeholder -->
    <q-input
      v-model="inputValue"
      label="Enter text"
      filled
      stack-label
      :hint="inputHint"
    ></q-input>

    <!-- Checkbox -->
    <q-checkbox
      v-model="checked"
      label="I agree"
    ></q-checkbox>

    <!-- Icon with size -->
    <q-icon
      name="home"
      :size="iconSize"
      color="secondary"
    ></q-icon>
  </div>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <!-- Button with icon and size -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me"
        android:drawableLeft="@drawable/ic_alarm"
        android:backgroundTint="@color/colorPrimary"
        android:textSize="18sp"
        android:onClick="handleClick"/>

    <!-- Input Field with placeholder -->
    <EditText
        android:id="@+id/inputField"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter text"
        android:textColorHint="@color/colorHint"
        android:background="@drawable/input_background"/>

    <!-- Checkbox -->
    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I agree"/>

    <!-- Icon with size -->
    <ImageView
        android:id="@+id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_home"
        android:tint="@color/colorSecondary"/>
</LinearLayout>

icon=”alarm” mı? color=”primary” mi?

Sevgili Android’ci, en şaşıracağın noktaya geldik:

Quasar’da Google Material Design desteği var. Bildiğin Google’ın adresine giderek ikon ve renk seçip kopyala yapıştır yapıyorsun ve Alt + Tab yaptığın anda tarayıcıda görüyorsun. Android’den alışık olduğun tüm renk ve ikon isimleri aynen geçerli.

Benzerlik Gösterdikleri Noktalar

Geliştirme Paradigmalarının Benzerliği:

Android’de yıllarca bileşen tabanlı bir yapıda çalışan bir geliştirici, Quasar’ın bileşen tabanlı yaklaşımı sayesinde bu yapıya kolayca adapte olabilir. Örneğin, Android’de bir Activity veya Fragment içerisindeki bileşenleri yönetmek, Quasar’da bir Vue bileşeni içerisinde bileşenleri yönetmekle oldukça benzerdir.

UI Bileşenlerinin ve Özelliklerinin Benzerliği:

Quasar’da q-btn, q-input , q-checkbox gibi bileşenlerin kullanımı, Android'deki Button, EditText , CheckBox bileşenlerinin kullanımıyla benzerlik gösterir. Her iki platformda da bileşenlerin çeşitli özelliklerini (örn. renk, boyut, ikon) belirlemek neredeyse aynıdır.

Programlama Dillerinin Benzerliği:

Java ve Kotlin gibi nesne yönelimli programlama dillerini kullanmaya alışık olan bir geliştirici, JavaScript’e geçişte zorlanmaz. Her iki dilde de sınıflar, nesneler ve fonksiyonlar benzer şekilde kullanılır.

Dokümantasyon ve Topluluk Desteği:

Geliştiriciler, karşılaştıkları sorunları Quasar’ın kapsamlı dokümantasyonu ve aktif topluluğu sayesinde hızlıca çözebilir. Bu, özellikle yeni bir framework öğrenirken büyük bir avantajdır.

Esnek ve Modüler Yapılar:

Quasar ve Android, modüler yapı ve bileşen bazlı geliştirme yaklaşımını benimser. Bu, geliştiricilerin kodlarını daha organize ve sürdürülebilir hâle getirir.

Sonuç: Bir Android Geliştiricisi, Quasar’a Geçerken Neden Çok Zorlanmaz?

Syntax yapısı, bileşen isimlendirme, attribute, material design kullanımı gibi özellikler yukarıda da değindiğim gibi bana çok benzer geldi ve Android’den Quasar, Vue.js’e geçmemi en kolaylaştıran sebepler oldular. Quasar’da nasıl yapacağımı merak ettiğim ve bulmaya çalıştığım bir özelliği, çoğu zaman “Android’de bunun ismi şuydu, burada da olsa olsa budur.” diye düşünüp tahmin ederek çözebiliyorum. En kötü ihtimalle, Google’da veya AI’da bu şekilde aratıyorum ve buluyorum. Quasar Vue.js’e geçişimde karşılaştığım zorlukları bir başka yazıda işleyeceğim.

Daha önce de dediğim gibi, tek bir teknolojiye bağımlılık, sizlere diğer teknolojilerdeki güzel özellikleri kaybetmekten başka bir şey getirmez.