1e:I[60678,["/_next/static/immutable/chunks/1j82ery8rqsrj.js","/_next/static/immutable/chunks/1vex_gem4_w3u.js","/_next/static/immutable/chunks/0vn4aa_ty8os0.js","/_next/static/immutable/chunks/1ds_wb3f94cks.js","/_next/static/immutable/chunks/1qdz7cv79f25-.js"],"HydrationBoundary"] 1f:T2bf5,

UIKit & SwiftUI : Apa sih yang perlu kita ketahui dari keduanya!

Sering sekali muncul pertanyaan dikomunitas iOS Developer yang menanyakan apa itu SwiftUI? apa itu UIKit? bedanya apa abangku? mulai dari mana?

SwiftUI dan UIKit merupakan dua framework yang disediakan Apple untuk mengembangkan aplikasi pada perangkat-perangkat keluaran Apple. Berarti sekarang kalau mau belajar develop iOS App pakai SwiftUI aja ya bang ? Jawabannya tergantung. Yuk pahami dulu apa sih perbedaan keduanya 🤩

UIKit

UIKit merupakan framework buatan Apple yang lebih dulu ada untuk mengembangkan iOS, macOS, dan tvOS. UIKit menggunakan paradigma pemrograman imperatif dimana developer mendefinisikan BAGAIMANA setiap aspek pada UI (User Interface). Pada UIKit Apple menawarkan Interface Builder Storyboard dan XIB.

SwiftUI

SwiftUI merupakan framework yang diperkenalkan Apple pada WWDC19 yang berbarengan dengan rilisnya iOS 13. SwiftUI menggunakan paradigma pemrograman deklaratif dimana developer fokus pada APA yang ingin ditampikan. SwiftUI memiliki Live Preview yang akan dirender setiap kali ada perubahan code!

Imperatif Vs Deklaratif!

Seperti dimention di atas, SwiftUI dan UIKit memiliki perbedaan mencolok yaitu pada paradigma yang digunakan di masing-masing framework. Berikut penjelasannya:

Imperatif
Paradigma imperatif merupakan paradigma pemrograman yang secara detail mendeskripsikan bagaimana (HOW) program tersebut dieksekusi.

  func sumOfNumbers(upTo n: Int) -> Int {
    var sum = 0
    for i in 1...n {
        sum += i
    }
    return sum
}

print(sumOfNumbers(upTo: 5)) // Output: 15

Deklaratif
Paradigma deklaratif merupakan paradigma pemrograman yang berfokus pada apa (WHAT) yang ingin dihasilkan pada saat program tersebut dieksekusi.

func sumOfNumbers(upTo n: Int) -> Int {
    return (1...n).reduce(0, +)
}

print(sumOfNumbers(upTo: 5)) // Output: 15

Nah udah pada ngerti kan bedanya imperatif dan deklaratif ? Sudah cukup teorinya, nihh sample code perbedaan mendasar SwiftUI dan UIKit

Sample APP

Pada sample app ini kita akan membuat aplikasi sederhana yaitu list grub bajak laut dari anime One Piece. Sample app ini bisa di akses di github saya yang saya sematkan dibawah hasil.

Model & Dummy

import Foundation

struct PirateGroup: Hashable {
        let name: String
        let crew: [String]
}

let sampleData: [PirateGroup] = [
    PirateGroup(
        name: "Straw Hat Pirates",
        crew: ["Luffy", "Zoro", "Nami", "Sanji", "Chopper", "Robin", "Franky", "Brook", "Jinbe"]
    ),
    PirateGroup(
        name: "Red Hair Pirates",
        crew: ["Shanks", "Benn Beckman", "Yasopp", "Lucky Roux", "Rockstar"]
    ),
    PirateGroup(
        name: "Whitebeard Pirates",
        crew: ["Edward Newgate", "Marco", "Jozu", "Vista", "Ace", "Thatch", "Blamenco", "Rakuyo", "Namur", "Blenheim", "Curiel", "Haruta", "Atmos", "Fossa", "Izo", "Squard"]
    ),
    PirateGroup(
        name: "Blackbeard Pirates",
        crew: ["Marshall D. Teach (Blackbeard)", "Jesus Burgess", "Van Augur", "Doc Q", "Laffitte", "Shiliew", "Sanjuan Wolf", "Vasco Shot", "Catarina Devon", "Avalo Pizarro"]
    ),
]

UIKit (Imperative)

Menambahkan TableView

2. Tambahkan Constraint

3. Menambahkan Prototype Cell

4. Ubah style ke Basic dan tambahkan identifier Pirate

5. Tambahkan @IBOutlet lalu binding dengan TableView diStoryBoard

6. Tambahkan extensi UITableViewDelegate & UITableDataSource

7. Override function cellForRowAt, titleForHeaderInSection dan numberOfSection

Code :

Hasil:

GitHub - adedwi1808/UIKitSample

SwiftUI (Deklaratif)

Tambahkan List + tambahkan modifier .listStyle(PlainListStyle())

2. Tambahkan view Section lalu masukkan header dan lakukan perulangan nama crew didalam section menggunakan ForEach

Code:

Hasil:

GitHub - adedwi1808/SwiftUISample

Hal Penting Lainnya

Kompatibilitas
UIKit sudah ada sejak lama, sehingga menggunakan UIKit dapat digunakan untuk mengembangkan aplikasi pada platform-platform apple. Sedangkan pada SwiftUI memiliki keterbatasan yaitu iOS 13 dan lebih baru.

Learning Curve
SwiftUI merupakan pilihan yang bagus bagi pemula yang ingin memulai belajar menjadi iOS Developer. Namun, tidak menutup kemungkinan akan ada waktunya tampilan yang diinginkan hanya dapat dibuat melalui UIKit. Tidak hanya itu, banyak sekali project/iOS App yang sudah ada di industri dibangun menggunakan UIKit sehingga memiliki pengetahuan mengenai UIKit sangatlah penting untuk dimiliki.

SwiftUI + UIKit

source: Cuma Fans Garis Keras yang Tahu 7 Fusion di Dragon Ball Ini, Kamu Tahu Gak? (ggwp.id)

Kita bisa gabungin keduanya ? Yess, kita bisa menggabungkan keduanya. Kita bisa menggunakan UIHostingController untuk memasukkan SwiftUI view kedalam UIKit. Begitu juga pada SwiftUI kita bisa menggunakan UIViewRepresentable untuk memasukkan view yang dibuat menggunakan UIKit.

Bagaimana Masa Depan SwiftUI?

Jika kita perhatikan WWDC akhir-akhir ini Apple memberikan teknologi-teknologi yang luar biasa pada SwiftUI. Bahkan pada perangkat terbaru Apple yaitu Vision Pro pun menggunakan SwiftUI untuk membuat Spatial App. Tidak hanya itu, dengan menggunakan SwiftUI kita juga dapat membuat widget-widget keren di project kita menggunakan WidgetKit. Keren bukan?

Kesimpulan

SwiftUI merupakan teknologi yang akan sangat menjanjikan sebagai solusi untuk menjawab kebutuhan industri yang menginginkan segala sesuatunya cepat. Namun, tidak menutup kemungkinan aplikasi yang akan kalian temui di dunia kerja masih menggunakan UIKit. Jadi tetap pelajari SwiftUI bagi yang cocok dengan SwiftUI dan jangan tinggalkan UIKit karena kalian pasti akan bertemu dengan UIKit pada dunia kerja.

Terakhir, dalam memilih framework di atas pertimbangkanlah kompatibilitas, kompleksitas dan kebutuhan bisnis lainnya. Apakah anda memerlukan dukungan iOS 13 atau lebih lama? Aplikasi ingin cepat dipublish? Apakah tim memungkinkan? Bagaimana dengan kompeleksitas aplikasi? Pahami teknologinya! Pilih dengan bijak!

Terima kasih sudah membaca, semoga bermanfaat 👋🏻

Instagram: Code With Rockett 🚀 / Ade Dwi Prayitno

LinekdIn: Ade Dwi Prayitno

Github: adedwi1808

Referensi:

Declarative vs Imperative Programming [iOS] | by isa nur fajar | Medium

Answering the big question: should you learn SwiftUI, UIKit, or both? — a free SwiftUI by Example tutorial (hackingwithswift.com)

SwiftUI vs. UIKit: Evaluating the Battle For iOS Development | LinkedIn

How to Choose Between SwiftUI and UIKit. | by Gopal Sorathiya | Globant | Medium

UIKit integration | Apple Developer Documentation

15:["$","$L1e",null,{"state":{"mutations":[],"queries":[{"dehydratedAt":1787805140123,"state":{"data":[{"author":"Ade Dwi Prayitno","categories":["swiftui","uikit","xcode","ios-developer","swift"],"content":"$1f","description":"","enclosure":{},"guid":"https://medium.com/p/d9669fbb0b31","link":"https://medium.com/@adedwip1808/uikit-swiftui-apa-sih-yang-perlu-kita-ketahui-dari-keduanya-d9669fbb0b31?source=rss-ce1cde707bc4------2","pubDate":"Tue, 13 Feb 2024 06:02:42 GMT","thumbnail":"https://cdn-images-1.medium.com/max/1024/1*-h9TB6z8Vuis4sLq56DjIA.jpeg","title":"UIKit & SwiftUI : Apa sih yang perlu kita ketahui dari keduanya!"}],"dataUpdateCount":1,"dataUpdatedAt":1787805140123,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":["articles"],"queryHash":"[\"articles\"]"}]},"children":["$L20","$L21"]}]

Articles

UIKit & SwiftUI : Apa sih yang perlu kita ketahui dari keduanya!