Tujuan Pembelajaran

Memahami kode apa yang bisa di-share antara web dan mobile
Mampu merancang shared package yang platform-agnostic
Mengerti strategi abstraksi untuk code sharing

Analogi

Diagram


      Shared Code = Resep Masakan:
- Web = restoran fine dining (bahan diolah dengan cara web)
- Mobile = food truck (bahan diolah dengan cara mobile)
- Shared = buku resep (bahan + instruksi, netral)

Resepnya sama, implementasinya berbeda. Yang dishare adalah pengetahuan, bukan hasil masakan.

Shared code seperti buku resep — berisi pengetahuan (types, logic, API) yang netral. Web dan mobile masing-masing implementasi dengan alat mereka sendiri.

Penjelasan Konsep

Tidak semua kode bisa di-share antara React web dan React Native. Kode yang BISA: (1) TypeScript types/interfaces. (2) Pure function business logic. (3) API client (fetch wrapper, interceptors). (4) Validation (Zod/Yup schemas). (5) Constants and enums. (6) Date formatting, currency calculation. (7) State management logic (Zustand store structure).

Kode yang TIDAK bisa: (1) UI components — beda primitif (div vs View). (2) Styling — CSS vs StyleSheet. (3) Navigation — React Router vs React Navigation. (4) Platform APIs — Web APIs vs React Native APIs. (5) Animation — CSS transitions vs Animated/Reanimated.

Abstraction pattern: (1) Definisikan interface di shared package. (2) Implementasi spesifik di masing-masing project. (3) Dependency injection untuk pilih implementasi.

File convention: (1) Button.tsx — web implementation. (2) Button.native.tsx — mobile implementation. (3) Shared logic di useButton.ts — import by both.

API client sharing: (1) Shared: definisikan API contract (endpoints, request/response types). (2) Shared: buat API client class/functions. (3) Platform-specific: storage (localStorage vs MMKV), auth (cookie vs token), network (fetch vs custom).

Testing shared code: shared package harus punya unit tests sendiri — tested tanpa platform dependency.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami kode apa yang bisa di-share antara web dan mobile., mampu merancang shared package yang platform-agnostic., dan mengerti strategi abstraksi untuk 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 Shared Code, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Shared code seperti buku resep — berisi pengetahuan (types, logic, API) yang netral. Web dan mobile masing-masing implementasi dengan alat mereka sendiri. 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 typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Zod schema di-share — web dan mobile pakai validasi yang sama. Types dari Zod inference juga di-share. Business logic shared, UI beda sendiri.

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

typescript

// packages/shared/src/validation.ts
import { z } from "zod";

export const LoginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

export type LoginInput = z.infer<typeof LoginSchema>;

// Web dan mobile sama-sama import ini
import { LoginSchema, type LoginInput } from "@project/shared";

Penjelasan Kode

Zod schema di-share — web dan mobile pakai validasi yang sama. Types dari Zod inference juga di-share. Business logic shared, UI beda sendiri.

Prompt AI

Desain struktur shared package untuk aplikasi e-commerce: (a) shared types (Product, Order, User), (b) validation (Zod), (c) API client dengan platform adapter (storage, auth), (d) utility functions (currency format, date format). Berikan file structure.

Pertanyaan Reflektif

Cek codebase-mu. Berapa banyak kode yang diduplikasi antara web dan mobile? Seberapa besar effort untuk extract ke shared package?