Tujuan Pembelajaran

Memahami apa itu brownfield app development
Mampu mengintegrasikan React Native ke iOS dan Android existing
Mengerti trade-off antara greenfield vs brownfield

Analogi

Diagram


      Greenfield = Bangun Rumah dari Nol:
- Kebebasan total
- Tapi lama dan mahal

Brownfield = Renovasi Rumah Lama:
- Tambah kamar baru (React Native) ke rumah existing (Native)
- Lebih cepat, lebih murah
- Tapi harus kompatibel dengan struktur lama

Brownfield seperti renovasi rumah — tambah teknologi baru ke aplikasi yang sudah ada. Lebih pragmatis untuk aplikasi enterprise.

Penjelasan Konsep

Brownfield adalah integrasi React Native ke aplikasi native yang SUDAH ADA (Swift/ObjC iOS, Kotlin/Java Android). Berbeda dengan greenfield — bikin app baru dari nol dengan React Native.

When brownfield: (1) Perusahaan punya aplikasi native besar, ingin tambah fitur baru pakai React Native. (2) Migrasi bertahap — satu screen per sprint. (3) Tim mobile web-heavy, ingin kontribusi ke mobile.

Expo brownfield: Expo Modules API — buat custom native module yang kompatibel dengan Expo. Kamu bisa: (1) Embed React Native screen di native app. (2) Embed native screen di React Native app. (3) Hybrid — beberapa screen RN, beberapa native.

Integrasi iOS: (1) Tambah React Native dependency via CocoaPods. (2) Buat RCTRootView. (3) Set bridge + module. (4) Present React Native view controller.

Integrasi Android: (1) Tambah React Native dependency via Gradle. (2) Buat ReactRootView. (3) Set ReactInstanceManager. (4) Tambah ReactRootView ke layout.

Communication: Native ↔ React Native via Native Modules (bridge). React Native bisa panggil native API, native bisa panggil JS function.

Challenges: (1) Navigation — native navigation stack harus kompatibel dengan React Navigation. (2) Bundle size — 2 runtime (native + React Native). (3) Debugging — dua platform, dua toolchain. (4) Team — butuh developer yang paham native + React Native.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami apa itu brownfield app development., mampu mengintegrasikan React Native ke iOS dan Android existing., dan mengerti trade-off antara greenfield vs brownfield. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Brownfield Integration, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Brownfield seperti renovasi rumah — tambah teknologi baru ke aplikasi yang sudah ada. Lebih pragmatis untuk aplikasi enterprise. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa swift. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. RCTRootView untuk embed React Native di iOS. Bundle URL untuk development (Metro) atau production (bundled). initialProperties untuk passing data dari native ke RN.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

swift

// iOS: embed React Native screen di native app
import React

let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
let rootView = RCTRootView(bundleURL: jsCodeLocation!, moduleName: "MyReactNativeScreen", initialProperties: nil, launchOptions: nil)
let viewController = UIViewController()
viewController.view = rootView
present(viewController, animated: true)

Penjelasan Kode

RCTRootView untuk embed React Native di iOS. Bundle URL untuk development (Metro) atau production (bundled). initialProperties untuk passing data dari native ke RN.

Prompt AI

Perusahaan punya aplikasi iOS native (SwiftUI) dengan 20 screen. Mereka ingin tambah 3 screen baru pakai React Native. Bagaimana strategi integrasi: (a) navigation bridging, (b) communication native↔RN, (c) deployment strategy, (d) team structure.

Pertanyaan Reflektif

Apakah perusahaanmu lebih cocok greenfield atau brownfield? Kenapa?