Mengembangkan aplikasi iOS menggunakan SwiftUI (Part 1)

Apa itu Swiftui ?

Pada WWDC 2019 Apple mengenalkan beberapa technology baru dalam mengembangkan aplikasi pada platform mereka salah satunya SwiftUI. SwiftUI adalah sebuah framework UI deklaratif yang dirancang untuk menyederhanakan pengembangan antarmuka pengguna untuk aplikasi di semua platform Apple, termasuk iOS, macOS, watchOS, dan tvOS. SwiftUI memungkinkan pengembang untuk membangun antarmuka pengguna menggunakan sintaks deklaratif, artinya mereka menggambarkan hasil UI yang diinginkan, dan kerangka kerja menangani detail implementasi yang mendasarinya.

Sesuai dengan namanya SwiftUI dibangun menggunakan bahasa pemrograman Swift yang juga dikembangkan oleh Apple. SwiftUI terintegrasi dengan mulus dengan Swift dan memanfaatkan fitur dan sintaksisnya yang kuat. Ini menyediakan berbagai komponen, kontrol, dan layout yang dapat digunakan pengembang untuk membuat antarmuka yang menarik secara visual dan interaktif. Salah satu keunggulan utama SwiftUI adalah kemampuannya untuk memberikan pratinjau UI secara realtime dan pengembang pun dapat langsung berinteraksi dengan UI melalui pratinjau tersebut tanpa perlu mengompilasi dan mejalankan seluruh kode yang ada pada aplikasi

Perbedaan swiftUI dan Uikit

SwiftUI dan UIKit adalah dua kerangka kerja pengembangan antarmuka pengguna (UI) yang digunakan dalam pengembangan aplikasi iOS dan macOS dengan menggunakan bahasa pemrograman Swift. Meskipun keduanya digunakan untuk membuat antarmuka pengguna, ada beberapa perbedaan utama antara SwiftUI dan UIKit:

1. Pendekatan Pemrograman:

• SwiftUI: SwiftUI adalah kerangka kerja UI deklaratif yang berarti Anda mendefinisikan bagaimana antarmuka pengguna harus terlihat dan berperilaku. Anda menggunakan pendekatan deklaratif dengan menggambarkan “apa” yang ingin Anda capai, dan SwiftUI secara otomatis mengurus “bagaimana” mengimplementasikannya.
• UIKit: UIKit adalah kerangka kerja UI prosedural yang berarti Anda secara manual mengontrol langkah-langkah untuk membuat dan mengelola antarmuka pengguna. Anda perlu menentukan setiap langkah dengan kode secara eksplisit.

2. Penulisan Kode:

• SwiftUI: SwiftUI menggunakan sintaksis Swift yang lebih ringkas dan deklaratif. Anda dapat menggabungkan kode antarmuka pengguna dengan kode bisnis Anda dengan mudah karena semuanya dalam bahasa Swift.
• UIKit: UIKit menggunakan sintaksis Objective-C yang lebih verbose. Meskipun Anda masih bisa menggunakan Swift dengan UIKit, Anda perlu menggunakan konversi dan integrasi dengan Objective-C untuk beberapa bagian antarmuka pengguna yang kompleks.

3. Kompatibilitas Platform:

• SwiftUI: SwiftUI diperkenalkan pada tahun 2019, jadi dukungannya terbatas pada iOS 13 dan versi di atasnya, macOS 10.15 dan versi di atasnya, dan watchOS 6 dan versi di atasnya.
• UIKit: UIKit telah ada sejak awalnya iOS, jadi dukungannya meluas ke versi iOS yang lebih lama, macOS, dan watchOS. Jadi, jika Anda ingin mendukung versi platform yang lebih tua, UIKit adalah pilihan yang lebih baik.

4. Konstruksi Antarmuka Pengguna:

• SwiftUI: SwiftUI menggunakan pendekatan berbasis komponen, di mana Anda dapat menggabungkan dan menyusun komponen-komponen antarmuka pengguna yang ada secara modular dan reusable. Ini memberikan fleksibilitas dan efisiensi dalam pembuatan antarmuka pengguna yang konsisten.
• UIKit: UIKit menggunakan pendekatan berbasis hierarki view controller, di mana Anda harus menggunakan view controller dan mengelola tumpang tindih tugas antara komponen-komponen UI yang berbeda. Ini dapat menjadi sedikit lebih kompleks untuk antarmuka pengguna yang kompleks dan dapat menghasilkan kode yang lebih banyak.

5. Live Preview dan Debugging:

• SwiftUI: SwiftUI menyediakan fitur live preview yang memungkinkan Anda melihat dan memodifikasi antarmuka pengguna secara real-time saat Anda menulis kode. Ini memudahkan pengembangan antarmuka pengguna yang cepat dan eksperimental.
• UIKit: UIKit tidak memiliki dukungan live preview yang serupa kecuali jika kamu menggunakan storyboard ataupun xib untuk mendukung proses penyusunan user interface namun terkadang penggunaan storyboard dan xib yang banyak membuat project xcode lebih lama untuk dibuild sehinggan jika kamu hanya menggunakan Uikit tanpa bantuan storyboard atau pun xib kamu perlu membangun dan menjalankan aplikasi untuk melihat perubahan antarmuka pengguna, yang bisa memakan waktu lebih lama dalam pengembangan dan debug.

Contoh

Swiftui:

struct ContentView: View {
    @State private var name: String = ""
    
    var body: some View {
        VStack {
            Text("Halo, \(name)!")
                .font(.largeTitle)
                .padding()
            
            TextField("Masukkan Nama", text: $name)
                .padding()
        }
    }
}

Uikit:

import UIKit

class ViewController: UIViewController {
    private let nameLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 24)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let nameTextField: UITextField = {
        let textField = UITextField()
        textField.translatesAutoresizingMaskIntoConstraints = false
        return textField
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(nameLabel)
        view.addSubview(nameTextField)
        
        NSLayoutConstraint.activate([
            nameLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            nameLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 100),
            
            nameTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            nameTextField.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 20),
            nameTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            nameTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
        
        nameTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
    }
    
    @objc private func textFieldDidChange() {
        nameLabel.text = "Halo, \(nameTextField.text ?? "")!"
    }
}

Dalam contoh ini, perbedaan utama terletak pada pendekatan deklaratif SwiftUI yang memungkinkan kita untuk mendeskripsikan komponen UI dan mengelompokkannya dengan cara yang lebih sederhana dan ringkas, sementara pada UIKit, kita harus secara eksplisit membuat dan mengelola setiap komponen UI serta mengatur tata letaknya menggunakan konstrain.

aruna.id