Tujuan Pembelajaran

Memahami strategi code sharing antara Next.js web dan Expo mobile
Mampu merancang arsitektur yang memaksimalkan reuse
Mengerti batasan praktis code sharing

Analogi

Diagram


      Web + Mobile Code Sharing = Restoran + Food Truck:
- Shared kitchen (shared code) — masak sekali, sajikan di mana saja
- Restoran (web) — pengalaman duduk, fine dining
- Food truck (mobile) — pengalaman on-the-go, cepat

Dapur yang sama, penyajian yang berbeda.
Yang dimasak di dapur: types, API calls, validation, state logic.
Yang spesifik tempat: UI components, navigation, platform APIs.

Web + mobile seperti restoran dan food truck — dapur (code) yang sama, penyajian (UI) yang berbeda. Masak sekali, sajikan di mana saja.

Penjelasan Konsep

Code sharing antara web (Next.js) dan mobile (Expo) adalah holy grail dari efficiency. Dengan React sebagai fondasi bersama, 30-50% kode bisa di-share.

Shareable layers (dari paling banyak ke paling sedikit): (1) TypeScript types — 100% share. (2) Validation (Zod) — 100% share. (3) API client — 80% share (fetch wrapper, interceptors, auth flow). (4) State management (Zustand) — 70% share (store logic, actions). (5) Business logic — 60% share (pure functions). (6) Hooks — 40% share (general hooks, tapi banyak yang platform-specific). (7) UI — 0-10% share (React Native Web bisa bridging beberapa component).

Architecture: (1) Monorepo dengan Turborepo. (2) /packages/shared — types, validation, utils, API client. (3) /apps/web — Next.js. (4) /apps/mobile — Expo. (5) Masing-masing punya UI layer sendiri. (6) Shared business logic diimpor ke kedua project.

React Native Web: alternatif ekstrim — satu codebase untuk web, iOS, Android. Web render komponen RN. Tapi keterbatasan: styling tidak se-fleksibel CSS, performa tidak sebaik Next.js, SEO tidak optimal.

Hybrid approach (rekomendasi): (1) Shared core logic (types, validation, API, state). (2) UI spesifik per platform — Next.js + Tailwind untuk web, React Native + StyleSheet untuk mobile. (3) Tidak memaksakan code sharing untuk hal yang memang berbeda.

Measure code sharing: ada metric ‘code reuse percentage’. Target realistis: 30-50% untuk tim yang baru mulai sharing. Mature team: 50-70%. Tidak pernah 100% — platform akan selalu punya perbedaan.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami strategi code sharing antara Next.js web dan Expo mobile., mampu merancang arsitektur yang memaksimalkan reuse., dan mengerti batasan praktis code sharing. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Web + Mobile Code Sharing Strategy, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Web + mobile seperti restoran dan food truck — dapur (code) yang sama, penyajian (UI) yang berbeda. Masak sekali, sajikan di mana saja. 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 tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. API client di shared package — import dari web dan mobile dengan kode yang SAMA. Tidak ada duplikasi. Types dari shared package yang sama.

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

tsx

// packages/shared/src/api/client.ts
import type { User, Post } from "../types";

export async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`https://api.myapp.com/users/${id}`);
  return res.json();
}

// Web: import { fetchUser } from "@project/shared";
// Mobile: import { fetchUser } from "@project/shared";
// SAME CODE, NO DUPLICATION

Penjelasan Kode

API client di shared package — import dari web dan mobile dengan kode yang SAMA. Tidak ada duplikasi. Types dari shared package yang sama.

Prompt AI

Desain arsitektur full-stack monorepo: (a) Next.js web app, (b) Expo mobile app, (c) Hono API server, (d) shared: types (Drizzle schema + Zod validation), API client, utils, constants. Berikan struktur direktori lengkap dan contoh import di web + mobile.

Pertanyaan Reflektif

Setelah menyelesaikan 12 modul Mobile Development ini, apa insight terbesarmu tentang membangun aplikasi mobile? Apa yang paling berbeda ekspektasi vs realita?