Panduan Lengkap LynxJS untuk Pemula: Framework Cross-Platform Berbasis Rust

Dilema Developer Mobile di Era Serba Cepat

Pernah nggak sih kamu ngalamin frustrasi karena harus bikin aplikasi yang jalan di iOS dan Android sekaligus? Terus kamu harus maintain dua codebase berbeda, belum lagi kalau ada bug di salah satu platform—langsung deh kepala pusing mikirin solusinya. Atau mungkin kamu udah coba framework lintas platform lain tapi performanya kurang memuaskan? Animasinya patah-patah, scrolling terasa berat, dan pengguna mengeluh aplikasi lemot.

Masalah klasik ini emang jadi momok buat banyak developer. Di satu sisi, kita pengen efisiensi dengan nulis kode sekali jalan di semua platform. Tapi di sisi lain, kita juga nggak mau mengorbankan performa aplikasi. Apalagi kalau kamu kerja di startup atau agensi yang harus mengirimkan proyek dengan deadline ketat—pilihan framework yang tepat bisa jadi penentu kesuksesan proyek.

Kenalan dengan LynxJS: Si Anak Baru dari ByteDance

Nah, di sinilah LynxJS hadir sebagai solusi yang menarik buat dicoba. Framework ini dikembangkan sama ByteDance, perusahan teknologi raksasa di balik TikTok yang kita kenal. LynxJS bukan sembarangan framework—dia dibangun dengan fondasi Rust yang terkenal dengan performa tinggi dan keamanan memorinya.

Yang bikin LynxJS menarik adalah pendekatannya yang beda. Framework ini nggak cuma janji manis soal "tulis sekali, jalan di mana saja", tapi bener-bener dirancang dengan performa sebagai prioritas utama. ByteDance sendiri udah pakai teknologi ini di beberapa produk mereka yang punya jutaan pengguna, jadi kredibilitasnya udah teruji di dunia nyata.

LynxJS memungkinkan kamu nulis aplikasi menggunakan JavaScript atau TypeScript—bahasa yang udah familiar buat banyak developer web. Tapi di balik layar, semua dijalankan oleh engine berbasis Rust yang super cepat. Ini kombinasi yang dahsyat: produktivitas tinggi dari JavaScript dengan performa native dari Rust.

Kenapa Harus Belajar LynxJS di 2025?

Sekarang pertanyaannya, kenapa sih kamu harus berinvestasi waktu belajar LynxJS di tengah banyaknya pilihan framework lain? Ada beberapa alasan kuat yang perlu kamu pertimbangkan.

Performa Seperti Aplikasi Native yang Nyata

LynxJS nggak cuma klaim doang soal performa. Berkat arsitektur berbasis Rust, framework ini bisa memberikan pengalaman yang mendekati aplikasi native. Animasi mulus, rendering cepat, dan pengelolaan memori yang efisien—semua ini penting banget buat bikin aplikasi yang ramah pengguna. Kalau kamu pernah bikin aplikasi e-commerce atau media sosial yang butuh scroll panjang dengan banyak konten, kamu pasti paham betapa pentingnya performa.

Ekosistem JavaScript yang Familiar

Kamu nggak perlu belajar bahasa pemrograman baru dari nol. Kalau kamu udah nyaman dengan JavaScript atau TypeScript, kamu bisa langsung terjun ke LynxJS. Ini mengurangi kurva pembelajaran dan bikin transisi jadi lebih mulus. Selain itu, kamu bisa memanfaatkan pustaka npm yang udah ada—meskipun dengan beberapa batasan tertentu yang wajar.

Dukungan dari Perusahaan Besar

ByteDance bukan perusahan sembarang. Mereka punya sumber daya buat terus mengembangkan dan memelihara LynxJS dalam jangka panjang. Ini penting banget karena kamu nggak mau kan berinvestasi waktu belajar framework yang tiba-tiba ditinggalkan pengembangnya? Rekam jejak ByteDance dalam bikin produk yang scalable juga jadi jaminan kalau LynxJS dirancang buat menangani aplikasi dengan trafik tinggi.

Tren Pengembangan Lintas Platform di 2025

Di tahun 2025, kebutuhan akan solusi pengembangan lintas platform makin tinggi. Perusahaan pengen memotong biaya tapi tetap mengirimkan aplikasi berkualitas. LynxJS datang di waktu yang tepat dengan solusi yang seimbang antara performa, pengalaman developer, dan kemudahan pemeliharaan. Framework ini juga aktif dikembangkan dengan fitur-fitur baru yang mengurangi kesenjangan dengan pengembangan native.

Waktu yang Tepat buat Adopsi Awal

Meskipun masih relatif baru dibanding framework yang udah mapan, ini justru kesempatan bagus buat kamu. Jadi pengguna awal artinya kamu bisa membangun keahlian sebelum pasar kebanjiran developer LynxJS. Mengeksplorasi teknologi baru yang punya potensi besar adalah investasi yang cerdas—dan LynxJS pasti masuk kategori ini.

Kalau kamu developer yang seneng mengeksplorasi teknologi baru dan pengen punya skill yang berharga di pasar kerja, ini waktu yang pas buat mulai belajar LynxJS. Di artikel ini, kita bakal bahas secara lengkap mulai dari konsep dasar sampai implementasi dunia nyata. Siap? Ayo kita mulai!

Memahami LynxJS: Framework Lintas Platform Modern

LynxJS adalah framework lintas platform yang memungkinkan developer membangun aplikasi mobile dan web menggunakan satu codebase. Bayangin aja, kamu nulis kode sekali terus aplikasinya bisa jalan di Android, iOS, dan bahkan web browser—tanpa harus bikin tiga versi berbeda. Ini jadi solusi yang efisien banget buat tim kecil atau developer yang kerja sendiri.

Yang bikin LynxJS unik adalah arsitekturnya yang dibangun di atas Rust. Berbeda dengan framework JavaScript tradisional yang sepenuhnya berjalan di layer JavaScript, LynxJS memanfaatkan performa tinggi dari Rust sebagai pondasinya. Engine rendering, manajemen memori, dan operasi-operasi kritikal lainnya ditangani oleh Rust, sementara kamu sebagai developer tetap nyaman nulis kode pakai JavaScript atau TypeScript. Filosofi "performa dulu, fitur menyusul" jadi DNA dari framework ini—hasilnya adalah aplikasi yang cepat, efisien, dan hemat memori.

Peluncuran sebagai Proyek Open Source

Di bulan Maret 2025, ByteDance resmi merilis LynxJS sebagai proyek open source. Keputusan ini cukup strategis karena mereka pengen membangun komunitas developer yang kuat di sekitar teknologi ini. Dengan membuka source code-nya, developer di seluruh dunia bisa kontribusi, melaporkan bug, dan ngasih masukan buat perkembangan framework.

Status open source juga ngasih transparansi penuh soal gimana LynxJS bekerja. Kamu bisa liat sendiri implementasi internalnya, belajar dari kode mereka, bahkan fork proyeknya kalau mau bikin versi kustommu sendiri. Repository LynxJS di GitHub udah mulai ramai dengan kontributor dari berbagai negara—ada diskusi aktif soal roadmap fitur, perbaikan bug, dan praktik terbaik. Komunitas yang tumbuh organik kayak gini biasanya jadi indikator bagus kalau sebuah teknologi punya masa depan cerah.

Platform yang Didukung: Tiga Pilar Utama

LynxJS hadir dengan dukungan tiga platform utama: Android, iOS, dan Web. Ketiga platform ini mencakup hampir seluruh spektrum kebutuhan development modern. Mari kita bahas satu per satu gimana LynxJS bekerja di masing-masing platform.

Android: Kompilasi Native, Bukan WebView

Di platform Android, LynxJS compile kode kamu jadi aplikasi yang bener-bener native—bukan jalan di dalam webview. Runtime LynxJS langsung berinteraksi dengan Android SDK, jadi kamu bisa akses fitur platform kayak kamera, GPS, dan notifikasi tanpa batasan berarti. Proses build-nya menghasilkan APK standar yang bisa kamu distribusikan lewat Google Play Store dengan ukuran yang relatif kecil berkat efisiensi Rust.

iOS: Generate Xcode Project Siap Pakai

Support iOS di LynxJS juga comprehensive. Framework ini bisa generate Xcode project yang langsung bisa kamu build jadi aplikasi iOS native. Semua API iOS bisa diakses, mulai dari UIKit sampe fitur-fitur terbaru kayak integrasi komponen SwiftUI. Yang perlu diingat, kamu tetep butuh macOS buat build aplikasi iOS—ini limitasi dari Apple sendiri. Tapi workflow-nya udah disederhanakan sampe kamu nggak perlu paham detail rumit soal provisioning profile kalau cuma mau development.

Web: Progressive Web App dengan WebAssembly

Dukungan platform web jadi nilai tambah yang signifikan. Kamu bisa deploy aplikasi sebagai web app yang bisa diakses lewat browser modern—cocok banget buat distribusi cepat tanpa harus masuk app store. LynxJS generate progressive web app yang bisa di-install di home screen, kerja offline, dan punya performa mendekati native app. Arsitektur berbasis Rust tetep ngasih keuntungan karena operasi berat di-compile jadi WebAssembly yang jauh lebih cepat dari JavaScript biasa.

Satu Codebase, Tiga Platform: Contoh Nyata

Misalnya kamu lagi bikin aplikasi manajemen keuangan pribadi. Dengan LynxJS, kamu bisa bikin satu codebase yang jadi aplikasi Android buat pengguna Play Store, aplikasi iOS buat pengguna Apple, dan web app buat mereka yang pengen akses cepat lewat browser. Semua dari satu repository kode dengan maintenance yang jauh lebih mudah. Fleksibilitas ini ngasih ketenangan pikiran buat scaling aplikasimu di masa depan—kamu bisa fokus ke fitur dan user experience daripada ngurusin technical debt dari multiple codebase.

Write Once, Render Anywhere: Janji yang Akhirnya Terpenuhi

Pernah denger janji "tulis sekali, jalan di mana saja" dari framework lain? Biasanya endingnya kecewa kan? Kode yang katanya universal ternyata butuh banyak penyesuaian platform-specific, atau performanya jelek di salah satu platform. LynxJS ngambil pendekatan yang lebih jujur dan realistis.

Framework ini nggak janji kalau kode kamu bakal identik 100% di semua platform. Yang dijamin adalah logic bisnis dan mayoritas UI component bisa di-share tanpa perlu tulis ulang. Komponen yang kamu bikin bakal ter-render sesuai karakteristik platform—pakai Material Design di Android, Human Interface Guidelines di iOS, dan standar web component di browser. State management dan business logic tetep konsisten di semua platform, cukup ditulis sekali tanpa harus jadi expert di semua ekosistem.

Performa Tinggi: Kecepatan Rust Bertemu Arsitektur Cerdas

Ini adalah area dimana LynxJS bener-bener bikin developer takjub. Bayangin kamu lagi scroll feed Instagram atau TikTok—smooth banget kan? Nah, teknologi serupa yang dipakai ByteDance buat bikin aplikasi mereka secepat itu, sekarang tersedia buat kamu pakai lewat LynxJS.

Dual-Threaded Architecture: Rahasia di Balik Kelancaran

LynxJS menggunakan dual-threaded architecture yang memisahkan UI thread dan JavaScript thread. Bayangkan ada dua pekerja yang kerja paralel: Pekerja pertama (UI thread) terus ngurusin tampilan dan respon terhadap sentuhan pengguna dengan sangat cepat. Pekerja kedua (JavaScript thread) ngerjain kalkulasi, fetch data dari API, atau proses logika bisnis yang kompleks. Keduanya berkomunikasi lewat message passing yang efisien.

Pemisahan ini crucial banget. Operasi JavaScript yang berat nggak bakal bikin UI jadi freeze atau nge-lag. Pengguna tetep bisa scroll atau tap button meskipun aplikasi lagi prosess data di background. Pernah ngalamin aplikasi yang tiba-tiba nge-lag saat scroll list panjang? Itu biasanya karena JavaScript lagi sibuk dan blocking UI thread—masalah yang jarang terjadi di LynxJS.

Memory Management yang Cerdas

Engine Rust di balik layar nghandle memory management dengan lebih cerdas dibanding JavaScript tradisional. Rust ngasih jaminan memory safety tanpa perlu garbage collector—artinya nggak ada lagi moment awkward dimana aplikasimu tiba-tiba freeze sebentar karena sistem lagi beresin sampah memori. Ini ngasih performa yang lebih predictable dan smooth, terutama di device dengan RAM terbatas. Aplikasi yang kamu bikin bisa jalan lancar bahkan di smartphone entry-level yang masih banyak dipakai di Indonesia.

Web-Inspired Design: Nggak Perlu Belajar dari Nol

Ini salah satu keputusan desain paling brilian dari LynxJS. Kalau kamu udah pernah bikin website dengan React dan CSS, kamu basically udah punya 70% skill yang dibutuhkan buat bikin aplikasi mobile dengan LynxJS. Serius, semudah itu.

CSS yang Familiar, Langsung Pakai

Sistem styling di LynxJS pakai CSS yang hampir identik dengan yang kamu gunakan di web development. Flexbox buat layout? Ada. Hex color? Bisa. Margin padding? Standard. Shadow dan border-radius? Semuanya familiar. Nggak ada sintaks aneh atau konsep baru yang bikin pusing.

// Contoh real: Card untuk course di BuildWithAngga
import { View, Text, StyleSheet } from 'lynxjs';

const CourseCard = ({ title, instructor, price, thumbnail }) => {
  return (
    <View style={styles.card}>
      <View style={styles.thumbnail}>
        <Text style={styles.badge}>BEST SELLER</Text>
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.instructor}>by {instructor}</Text>
        <View style={styles.footer}>
          <Text style={styles.price}>Rp {price.toLocaleString()}</Text>
          <Text style={styles.rating}>⭐ 4.9 (2.3k)</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    overflow: 'hidden',
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
  },
  thumbnail: {
    height: 180,
    backgroundColor: '#667eea',
    justifyContent: 'flex-start',
    padding: 12,
  },
  badge: {
    backgroundColor: '#fbbf24',
    color: '#78350f',
    fontSize: 11,
    fontWeight: 'bold',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
    alignSelf: 'flex-start',
  },
  content: {
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1a1a1a',
    marginBottom: 6,
  },
  instructor: {
    fontSize: 14,
    color: '#6b7280',
    marginBottom: 12,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  price: {
    fontSize: 18,
    fontWeight: '700',
    color: '#10b981',
  },
  rating: {
    fontSize: 14,
    color: '#6b7280',
  },
});

export default CourseCard;

Liat kode di atas? Kalau kamu familiar dengan React Native atau styling di web, kamu pasti langsung paham. Nggak ada learning curve yang curam. Kamu bisa langsung produktif dari hari pertama.

Pola React yang Proven

Component-nya juga mengikuti pola React yang udah proven di jutaan aplikasi. Functional component, hooks kayak useState dan useEffect, props dan state management—semuanya sama. Tim developer kamu yang udah pengalaman dengan React bisa langsung kontribusi ke proyek LynxJS dalam hitungan hari, bukan minggu atau bulan. Ini ngasih ROI yang cepat buat investasi training.

Open Source dengan Lisensi Apache 2.0: Kebebasan Penuh

LynxJS dirilis dengan lisensi Apache 2.0—salah satu lisensi open source paling permisif dan ramah bisnis. Ini bukan sekedar open source biasa, tapi kebebasan yang bener-bener complete.

Bebas Pakai, Bebas Modifikasi

Dengan lisensi ini, kamu bisa pakai LynxJS buat proyek komersial tanpa bayar royalti. Mau fork dan modifikasi? Silakan. Butuh integrasi khusus dengan hardware tertentu atau pengen optimize buat use case yang sangat niche? Go ahead. Kamu bahkan nggak harus publish modifikasimu kembali ke publik—meskipun kontribusi selalu diapresiasi komunitas.

Transparansi dan Keamanan

Aspek transparansi ini penting banget dari perspektif security. Kamu atau tim security-mu bisa audit source code LynxJS buat memastikan nggak ada backdoor atau vulnerability yang mengkhawatirkan. Crucial banget buat aplikasi yang handle data sensitif seperti aplikasi finansial atau healthcare. Community-driven security audit juga berarti bug biasanya terdeteksi dan di-patch lebih cepat dibanding software proprietary.

Nggak Ada Vendor Lock-In

Meskipun ByteDance suatu saat memutuskan buat nggak aktif develop LynxJS lagi, komunitas bisa ambil alih dan terus maintain project. Kamu nggak terjebak dengan vendor lock-in dimana masa depan stack teknologi kamu tergantung pada keputusan bisnis satu perusahaan. Ini risk mitigation yang smart buat proyek dengan timeline panjang atau aplikasi enterprise yang butuh long-term support.

Kombinasi keempat keunggulan ini—cross-platform yang realistis, performa tinggi dari arsitektur cerdas, kemudahan dari web technology, dan kebebasan open source—bikin LynxJS jadi pilihan menarik buat project berikutnya. Kamu dapet best of both worlds: produktivitas tinggi tanpa korbanin performa atau fleksibilitas.

Arsitektur Dual-Threaded: Pemisahan yang Cerdas

Buat paham gimana LynxJS bisa secepat itu, kita perlu ngerti dulu konsep arsitektur dual-threaded yang jadi jantungnya. Bayangkan kamu punya dua koki di dapur: satu fokus masak (background thread), satunya lagi fokus plating dan servis ke pelanggan (main thread). Mereka kerja paralel tanpa ganggu satu sama lain—ini yang bikin restoran kamu efisien.

Main Thread: Rendering yang Kilat

Thread pertama adalah main thread yang fokus penuh buat rendering UI dan menangani interaksi pengguna. Thread ini menjalankan versi lightweight dari kode kamu yang cuma berisi logic rendering. Karena main thread nggak dibebani sama operasi berat kayak fetch data atau kalkulasi kompleks, dia bisa super responsif. Pengguna bisa liat first screen dengan sangat cepat—instant launch yang jadi karakteristik aplikasi TikTok.

Main thread di-powered sama PrimJS, JavaScript engine yang sangat ringan berbasis QuickJS. Engine ini dirancang khusus buat startup time yang kilat dan footprint memori yang kecil.

Background Thread: Tempat Logic Bekerja

Thread kedua adalah background thread yang menjalankan complete React runtime. Semua logic bisnis, fetch data dari API, parsing JSON, kalkulasi kompleks, sampai state management—semuanya terjadi di sini. Thread ini terisolasi dari UI, jadi operasi seberat apapun nggak bakal bikin tampilan jadi membeku.

Misalnya kamu bikin fitur penyaringan course di aplikasi BuildWithAngga. Ketika pengguna milih beberapa kategori, background thread yang memproses dan menyaring data. Sementara itu, main thread tetep responsif—pengguna masih bisa scroll atau klik tombol lain tanpa ngerasa aplikasi macet.

Message Passing: Komunikasi Antar Thread

Kedua thread ini berkomunikasi lewat mekanisme message passing yang sangat efisien, dibangun dengan Rust. Background thread mengirim pesan berisi pembaruan state, main thread menerima dan melakukan render. Prosesnya asynchronous jadi nggak ada blocking. Dalam prakteknya, kamu sebagai developer nggak perlu memikirkan detail komunikasi ini—framework yang menangani otomatis.

ReactLynx: React yang Dioptimasi untuk LynxJS

ReactLynx adalah implementasi React khusus yang dioptimalkan buat LynxJS. Ini berbasis Preact dengan fokus ke performa dan integrasi mendalam dengan arsitektur dual-threaded Lynx.

Sintaks yang Familiar

ReactLynx menggunakan sintaks dan konsep yang sama dengan React—JSX, hooks, functional components. Kamu bisa pakai semua hooks standar kayak useState, useEffect, useContext. Behaviornya konsisten dengan React 17, jadi skill React yang kamu punya langsung transferable.

Yang bikin berbeda adalah penggunaan native components dengan lowercase: <view>, <text>, <image> instead of HTML elements. Components ini di-map langsung ke platform-specific UI—UIKit di iOS, Android Views di Android.

Styling dengan CSS Murni

ReactLynx support penuh buat CSS murni. Kamu nggak perlu pakai inline styles atau custom styling system. Cukup tulis CSS biasa di file terpisah dan reference lewat className.

import { useState } from '@lynx-js/react'
import './Card.css'

export function CourseCard({ course }) {
  const [bookmarked, setBookmarked] = useState(false)

  const handleBookmark = () => {
    'background only'
    setBookmarked(!bookmarked)
  }

  return (
    <view className="card">
      <text className="title">{course.title}</text>
      <text className="price">Rp {course.price.toLocaleString()}</text>
      <view
        className={bookmarked ? "bookmark active" : "bookmark"}
        bindtap={handleBookmark}
      >
        <text>★</text>
      </view>
    </view>
  )
}

Background Only Directive

ReactLynx punya konsep unik namanya "background only" directive. String literal 'background only' ngasih hint ke compiler buat nggak include kode tersebut di main thread bundle. Event handlers dan side effects biasanya perlu directive ini buat performa optimal.

Fetch Data dengan useEffect

Pattern fetch data sama persis dengan React biasa:

import { useState, useEffect } from '@lynx-js/react'

export function CourseList() {
  const [courses, setCourses] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    'background only'

    const loadCourses = async () => {
      try {
        const response = await fetch('<https://api.buildwithangga.com/courses>')
        const data = await response.json()
        setCourses(data.courses)
      } catch (error) {
        console.error('Gagal memuat courses:', error)
      } finally {
        setLoading(false)
      }
    }

    loadCourses()
  }, [])

  if (loading) {
    return <text>Memuat courses...</text>
  }

  return (
    <scroll-view>
      {courses.map(course => (
        <CourseCard key={course.id} course={course} />
      ))}
    </scroll-view>
  )
}

Context API untuk State Global

ReactLynx sepenuhnya mendukung Context API buat share data antar component:

import { createContext, useContext, useState } from '@lynx-js/react'

const CartContext = createContext()

export function CartProvider({ children }) {
  const [items, setItems] = useState([])

  const addToCart = (course) => {
    'background only'
    setItems(prev => [...prev, course])
  }

  return (
    <CartContext.Provider value={{ items, addToCart }}>
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  return useContext(CartContext)
}

Kombinasi arsitektur dual-threaded dengan ReactLynx yang teroptimasi bikin LynxJS mampu menangani aplikasi kompleks dengan mulus. Kamu dapat pengalaman developer yang familiar dari React, tapi dengan performa yang mendekati aplikasi native. Instant launch, smooth animations, dan UI yang super responsif—semua ini possible berkat design decisions yang cerdas dari tim LynxJS.

Persiapan: Instalasi Dependencies

Sebelum mulai coding, kita perlu setup environment dulu. LynxJS punya cara yang unik buat development—mereka pakai aplikasi namanya Lynx Explorer sebagai sandbox buat testing aplikasi kamu. Ini bikin proses development jadi lebih cepat karena nggak perlu build native app setiap kali mau testing.

Prasyarat yang Dibutuhkan

Pastikan kamu udah punya Node.js versi 18 atau lebih baru terinstall di komputer. Kalau belum, download dulu dari nodejs.org. Selain itu, kamu juga butuh text editor atau IDE—Visual Studio Code adalah pilihan yang populer dan gratis.

Download Lynx Explorer

Lynx Explorer adalah aplikasi mobile yang jadi wadah buat menjalankan kode LynxJS kamu. Kamu bisa download aplikasi ini dari berbagai sumber:

Untuk Android, download dari Play Store atau untuk iOS download dari App Store. Kedua versi ini dipublish sama kontributor komunitas. Alternatif lain, kalau kamu punya Mac dan mau pakai iOS simulator, tim Lynx nyediain pre-built binaries khusus buat simulator.

Kunjungi halaman Quick Start resmi LynxJS di https://lynxjs.org/guide/start/quick-start untuk mendapatkan link download Lynx Explorer sesuai platform kamu dan panduan lengkap instalasi.

Install Xcode (Khusus macOS)

Kalau kamu pakai Mac dan pengen jalanin iOS simulator, kamu perlu install Xcode dulu. Buka Mac App Store, cari "Xcode", terus klik Install atau Update kalau udah punya versi lama. Xcode ukurannya cukup besar jadi prosesnya mungkin makan waktu lumayan lama.

Membuat Project Hello World

Sekarang kita bikin project pertama. LynxJS nyediain starter template lewat rspeedy yang bikin proses setup jadi super cepat dan gampang.

Inisialisasi Project dengan rspeedy

Jalankan command berikut di terminal:

npm create rspeedy@latest

Command ini bakal jalanin interactive setup wizard. Kamu bakal ditanya beberapa pertanyaan:

1. Project name: Ketik nama project kamu, misalnya bwa-lynx
2. Template: Pilih template yang sesuai (biasanya ada pilihan basic, typescript, dll)
3. Package manager: Pilih npm, yarn, pnpm, atau bun sesuai preferensi

Setelah menjawab semua pertanyaan, rspeedy bakal otomatis generate struktur project dan install semua dependencies yang dibutuhkan. Prosesnya mungkin makan waktu beberapa menit tergantung kecepatan internet.

Install Dependencies

Setelah project ter-generate, kamu perlu install dependencies secara manual. Masuk ke folder project:

cd bwa-lynx

Terus install semua package yang dibutuhkan:

npm install

Proses instalasi ini bakal download semua package yang didefinisikan di package.json. Tunggu sampai selesai, prosesnya mungkin makan waktu beberapa menit tergantung kecepatan internet.

Cek Tampilan Awal Project

Setelah instalasi selesai, kamu bisa langsung jalanin development server buat liat tampilan awal dari project:

npm run dev

Development server bakal start dan menampilkan QR code di terminal. Kamu bisa scan QR code ini dengan Lynx Explorer buat liat tampilan default dari template yang di-generate rspeedy. Ini berguna buat memastikan semuanya terinstall dengan benar sebelum kita mulai modifikasi kode.

Struktur Folder Project

Struktur project yang di-generate rspeedy kurang lebih kayak gini:

bwa-lynx/
├── src/
│   ├── App.tsx
│   ├── App.css
│   ├── index.tsx
│   └── assets/
├── package.json
├── tsconfig.json
└── node_modules/

Simple dan clean. Semua kode aplikasi kamu bakal ada di folder src, styling di file CSS terpisah.

Hello World: Kode Pertama Kamu

Sekarang waktunya nulis kode. Buka file src/App.tsx dengan text editor dan ganti kode default-nya dengan kode berikut:

import { useState } from '@lynx-js/react'
import './App.css'

export function App() {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState('Selamat datang di BuildWithAngga!')

  const handlePress = () => {
    setCount(count + 1)
    setMessage(`Kamu udah klik ${count + 1} kali!`)
  }

  return (
    <view className="container">
      <view className="header">
        <text className="title">Hello LynxJS</text>
        <text className="subtitle">Framework Cross-Platform by ByteDance</text>
      </view>

      <view className="content">
        <text className="message">{message}</text>
        <text className="counter">Counter: {count}</text>

        <view className="button" bindtap={handlePress}>
          <text className="button-text">Klik Aku!</text>
        </view>
      </view>

      <view className="footer">
        <text className="footer-text">
          Belajar coding di BuildWithAngga 🚀
        </text>
      </view>
    </view>
  )
}

Sekarang buka file src/App.css dan ganti dengan styling berikut:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f8f9fa;
}

.header {
  background-color: #667eea;
  padding: 32px;
  padding-top: 60px;
  align-items: center;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  color: #e0e7ff;
}

.content {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.message {
  font-size: 18px;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 500;
}

.counter {
  font-size: 32px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 32px;
}

.button {
  background-color: #667eea;
  padding: 12px 32px;
  border-radius: 8px;
}

.button-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.footer {
  padding: 20px;
  align-items: center;
  border-top-width: 1px;
  border-top-color: #e5e7eb;
}

.footer-text {
  font-size: 14px;
  color: #6b7280;
}

Penjelasan Kode

Mari kita bedah kode di atas biar kamu paham setiap bagiannya:

Import Statement

import { useState } from '@lynx-js/react'
import './App.css'

Baris pertama mengimpor hook useState dari package @lynx-js/react buat mengelola state. Baris kedua mengimpor file CSS buat styling. LynxJS pakai pendekatan web-like dengan CSS terpisah, bukan inline styles.

Component dan State

export function App() {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState('Selamat datang di BuildWithAngga!')

Kita bikin functional component namanya App. Di dalemnya ada dua state: count buat nyimpen jumlah klik, dan message buat nyimpen teks yang ditampilkan. Ini pola standar React yang pasti udah familiar.

Event Handler

const handlePress = () => {
  setCount(count + 1)
  setMessage(`Kamu udah klik ${count + 1} kali!`)
}

Fungsi ini dipanggil setiap kali tombol diklik. Dia menambah nilai count dan memperbarui message dengan informasi jumlah klik terbaru. Perhatikan kita pakai template literal buat bikin pesan yang dinamis.

Native Components dengan Lowercase

<view className="container">
  <text className="title">Hello LynxJS</text>
</view>

LynxJS menggunakan native components dengan lowercase: <view>, <text>, <image>. Ini bukan HTML elements tapi native components yang di-map ke platform-specific UI—UIKit di iOS, Android Views di Android, atau DOM di web. Setiap component dikasih styling lewat className yang mereferensi ke CSS.

Event Binding

<view className="button" bindtap={handlePress}>
  <text className="button-text">Klik Aku!</text>
</view>

Buat handle tap/click event, LynxJS pakai bindtap attribute. Ini berbeda dengan onClick di React web. LynxJS punya sistem event naming sendiri yang dioptimasi buat performa.

Styling dengan CSS

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Styling di LynxJS pakai CSS murni yang ditulis di file terpisah. Kamu bisa pakai Flexbox, margin, padding, color, font properties—semua syntax CSS yang familiar. Ini jauh lebih natural dibanding inline styles atau custom styling system.

Menjalankan Aplikasi

Setelah kode selesai ditulis dan dependencies sudah terinstall, saatnya jalanin aplikasi. Prosesnya cukup unik karena kita pakai Lynx Explorer sebagai runtime.

Start Development Server

Di terminal, jalankan command:

npm run dev

Development server bakal start dan kamu bakal liat QR code muncul di terminal. QR code ini berisi URL ke bundle aplikasi kamu yang di-serve sama development server.

Jalankan di Lynx Explorer

Ada dua cara buat jalanin aplikasi di Lynx Explorer:

Cara 1: Scan QR Code

Kalau kamu pakai device fisik (Android atau iOS), buka aplikasi Lynx Explorer terus scan QR code yang muncul di terminal. Aplikasi kamu bakal langsung kebuka di Lynx Explorer dengan smooth.

Cara 2: Copy URL Manual

Kalau kamu pakai simulator atau emulator:

1. Copy bundle URL yang muncul di terminal
2. Buka Lynx Explorer di simulator atau emulator
3. Cari field input yang bertuliskan "Enter Card URL"
4. Paste URL yang udah kamu copy tadi
5. Tekan tombol "Go"

Aplikasi kamu bakal dimuat dan jalan di simulator. Pertama kali mungkin agak lama, tapi setelahnya bakal cepet.

Hot Reload Otomatis

Sekarang coba edit file src/App.tsx—misalnya ubah teks "Hello LynxJS" jadi "Halo BuildWithAngga". Save file-nya, terus liat ke Lynx Explorer. Kamu bakal liat UI otomatis ter-update tanpa perlu refresh manual. Ini fitur hot reload yang bikin development cycle jadi sangat cepat dan produktif.

Modifikasi dan Eksperimen

Sekarang kamu punya aplikasi yang jalan, coba modifikasi kodenya buat ngerasain development experience. Beberapa ide eksperimen:

1. Ubah warna tema - Ganti warna background header dari ungu (#667eea) jadi warna brand BuildWithAngga di file CSS
2. Tambah tombol reset - Bikin view button baru dengan bindtap yang nge-reset counter ke nol
3. Bikin bilingual - Tambah state baru buat bahasa, tampilkan pesan dalam bahasa Indonesia dan Inggris bergantian
4. Experimenten dengan CSS - Coba tambahin box-shadow, gradient, atau border buat bikin UI lebih menarik
5. Counter countdown - Ubah logic counter jadi countdown dari 10 ke 0 dengan validasi kalau udah 0
6. Animasi sederhana - Coba pakai CSS transition atau animation buat efek saat counter berubah

Setiap kali kamu save file (baik .tsx atau .css), hot reload bakal kerja dan nampilin hasil eksperimenmu instantly. Nggak perlu restart server atau reload manual—perubahannya langsung keliatan. Ini bikin iteration cycle jadi sangat cepat dan development experience jadi menyenangkan.

Selamat, kamu udah berhasil bikin aplikasi pertama dengan LynxJS! Meskipun sederhana, aplikasi ini udah demonstrasiin konsep penting: component structure dengan native elements, state management, event handling dengan bindtap, dan styling dengan CSS. Dari sini kamu bisa mulai explore fitur-fitur lebih advanced dan bikin aplikasi yang lebih kompleks seperti aplikasi course catalog BuildWithAngga lengkap dengan filter kategori, search functionality, dan detail page.

Deskripsi Project: Aplikasi Cuaca Real-Time

Setelah paham dasar-dasar LynxJS, sekarang waktunya bikin project yang lebih seru dan praktis. Kita bakal bikin aplikasi cuaca real-time yang nggak cuma fungsional, tapi juga punya tampilan yang ciamik dengan animasi smooth. Aplikasi ini bakal nampilin informasi cuaca terkini dari berbagai kota, lengkap dengan animasi yang berubah sesuai kondisi cuaca—cerah, hujan, atau berawan.

Project ini perfect buat kamu yang pengen praktek langsung gimana cara integrasi API eksternal, handle data fetching, bikin animasi yang smooth, dan yang paling penting: merasain sendiri gimana LynxJS handle performa di aplikasi yang lebih kompleks. Kita bakal pakai OpenWeatherMap API yang gratis dan gampang dipakai, jadi kamu nggak perlu khawatir soal biaya.

Yang bikin project ini menarik adalah kombinasi antara functionality dan visual appeal. Banyak tutorial weather app yang cuma fokus ke fetch data doang, tapi kita bakal tambahin layer animasi dan design yang bikin aplikasi terasa alive. Ini juga kesempatan bagus buat ngerasain gimana LynxJS handle animasi CSS—salah satu kekuatan framework ini yang sering di-underestimate.

Fitur yang Akan Dibuat

Aplikasi weather kita bakal punya beberapa fitur utama yang comprehensive tapi tetep simple buat dipahami pemula. Mari kita breakdown satu per satu apa aja yang bakal kita bikin:

Fetch Data Cuaca dari OpenWeatherMap API

Fitur pertama dan paling fundamental adalah kemampuan buat ambil data cuaca real-time dari OpenWeatherMap API. Kita bakal request informasi kayak temperatur, kondisi cuaca (sunny, rainy, cloudy), humidity, wind speed, dan detail lainnya. API ini reliable dan punya dokumentasi yang bagus, jadi perfect buat learning project.

Kita juga bakal implement error handling yang proper. Gimana kalau koneksi internet bermasalah? Gimana kalau API down? Aplikasi kita harus bisa handle situasi-situasi kayak gini dengan graceful, nggak langsung crash atau freeze. User bakal liat pesan error yang informatif instead of aplikasi yang nge-hang.

Animasi Transisi Cuaca yang Dynamic

Ini adalah fitur yang bikin aplikasi kita stand out. Kita bakal bikin animasi yang berubah secara dynamic berdasarkan kondisi cuaca. Kalau cerah, bakal ada animasi matahari dengan efek shining. Kalau hujan, ada animasi tetes air yang jatuh. Kalau berawan, ada pergerakan awan yang smooth.

Animasinya nggak cuma sekedar eye candy—mereka juga functional karena ngasih visual feedback yang jelas tentang kondisi cuaca. User bisa langsung ngerti cuacanya gimana cuma dari liat animasinya, bahkan sebelum baca detail angkanya. Plus, animasi yang smooth juga demonstrasiin performa LynxJS yang excellent.

Card Design dengan Gradient Menarik

Design matters, dan kita bakal bikin weather card yang modern dengan gradient background yang eye-catching. Gradientnya bakal disesuaikan dengan kondisi cuaca—warm gradients buat cuaca cerah, cool gradients buat hujan, soft gradients buat berawan. Ini bikin aplikasi terasa lebih immersive dan pleasant buat dipakai.

Kita juga bakal pakai spacing, typography, dan layout yang proper. Card-nya bakal punya shadow yang subtle, rounded corners yang smooth, dan informasi yang ditata dengan hirarki yang jelas. Semuanya dirancang buat maximize readability sambil tetep aesthetically pleasing.

Responsive Layout untuk Mobile dan Web

Salah satu kekuatan LynxJS adalah kemampuan lintas platform, dan kita bakal manfaatin itu. Layout aplikasi kita bakal responsive—artinya tampilan bakal menyesuaikan dengan ukuran layar. Di mobile, card bakal full-width dengan layout vertikal. Di web atau tablet dengan layar lebih lebar, kita bisa tampilin multiple cards side-by-side.

Flexbox dan CSS media queries bakal jadi tools utama kita buat achieve responsive design ini. Dan karena LynxJS support CSS murni, prosesnya bakal straightforward tanpa perlu library tambahan atau workaround yang ribet.

Setup Project Structure

Sekarang kita lanjutkan project bwa-lynx yang udah kita bikin sebelumnya. Kita akan transform project Hello World sederhana tadi jadi aplikasi weather yang lebih kompleks.

Organize Struktur Folder

Pertama, kita perlu organize struktur folder buat bikin project lebih scalable. Buat beberapa folder baru di dalam src:

cd bwa-lynx
mkdir src/components
mkdir src/services
mkdir src/utils
mkdir src/types
mkdir src/styles

Struktur project kamu sekarang bakal kayak gini:

bwa-lynx/
├── src/
│   ├── components/
│   │   ├── WeatherCard.tsx
│   │   ├── WeatherCard.css
│   │   └── LoadingSpinner.tsx
│   ├── services/
│   │   └── weatherApi.ts
│   ├── utils/
│   │   └── helpers.ts
│   ├── types/
│   │   └── weather.ts
│   ├── styles/
│   │   └── animations.css
│   ├── App.tsx
│   ├── App.css
│   └── index.ts
├── package.json
└── tsconfig.json

Penjelasan Struktur Folder:

• components/: Tempat semua React components kita
• services/: Logic untuk API calls dan data fetching
• utils/: Helper functions yang reusable
• types/: TypeScript type definitions
• styles/: CSS files untuk animasi dan styling global

Dengan struktur kayak gini, kode kita jadi lebih organized dan gampang di-maintain. Setiap bagian punya tempatnya masing-masing, nggak campur-campur jadi satu file besar.

Setup API Key OpenWeatherMap

Sebelum lanjut coding, kamu perlu daftar di OpenWeatherMap buat dapetin API key gratis:

1. Kunjungi https://openweathermap.org/api
2. Sign up buat akun baru (gratis)
3. Setelah login, pergi ke API keys section
4. Copy API key kamu

Sekarang kita buat file konfigurasi buat menyimpan API key. Bikin file src/config.ts:

// src/config.ts
export const CONFIG = {
  WEATHER_API_KEY: 'your_api_key_here', // Ganti dengan API key asli kamu
}

Ganti 'your_api_key_here' dengan API key yang udah kamu dapetin dari OpenWeatherMap.

Tambahkan config.ts ke .gitignore

Penting banget buat menambahkan file ini ke .gitignore supaya API key nggak ter-commit ke repository. Buka file .gitignore dan tambahkan:

src/config.ts

Jangan pernah commit API key ke repository public! Sekarang kita siap lanjut ke tahap integrasi API!

Integrasi API OpenWeatherMap

Sekarang kita integrate OpenWeatherMap API buat fetch data cuaca. Kita bakal bikin service layer yang handle semua komunikasi dengan API.

Definisi TypeScript Types

Pertama, bikin type definitions buat weather data. Buka src/types/weather.ts:

export interface WeatherData {
  city: string
  temperature: number
  condition: string
  description: string
  humidity: number
  windSpeed: number
  icon: string
}

export interface WeatherResponse {
  main: {
    temp: number
    humidity: number
  }
  weather: Array<{
    main: string
    description: string
    icon: string
  }>
  wind: {
    speed: number
  }
  name: string
}

Types ini ngasih structure yang jelas dan type safety waktu kita handle data dari API.

Buat Weather API Service

Sekarang bikin service buat handle API calls. Buka src/services/weatherApi.ts:

import type { WeatherData, WeatherResponse } from '../types/weather'
import { CONFIG } from '../config'

const API_KEY = CONFIG.WEATHER_API_KEY
const BASE_URL = '<https://api.openweathermap.org/data/2.5/weather>'

export async function fetchWeatherByCity(city: string): Promise<WeatherData> {
  'background only'

  try {
    const url = `${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`
    const response = await fetch(url)

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`)
    }

    const data: WeatherResponse = await response.json()

    return {
      city: data.name,
      temperature: Math.round(data.main.temp),
      condition: data.weather[0].main,
      description: data.weather[0].description,
      humidity: data.main.humidity,
      windSpeed: data.wind.speed,
      icon: data.weather[0].icon
    }
  } catch (error) {
    console.error('Error fetching weather:', error)
    throw error
  }
}

export async function fetchWeatherByCoordinates(
  lat: number,
  lon: number
): Promise<WeatherData> {
  'background only'

  try {
    const url = `${BASE_URL}?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
    const response = await fetch(url)

    if (!response.ok) {
      throw new Error(`Gagal mengambil data cuaca: ${response.status}`)
    }

    const data: WeatherResponse = await response.json()

    return {
      city: data.name,
      temperature: Math.round(data.main.temp),
      condition: data.weather[0].main,
      description: data.weather[0].description,
      humidity: data.main.humidity,
      windSpeed: data.wind.speed,
      icon: data.weather[0].icon
    }
  } catch (error) {
    console.error('Error fetching weather data:', error)
    throw error
  }
}

Penjelasan Kode Service:

Service ini punya dua fungsi utama:

1. fetchWeatherByCity: Fetch data cuaca berdasarkan nama kota
2. fetchWeatherByCoordinates: Fetch data cuaca berdasarkan koordinat GPS

Kedua fungsi mengembalikan object WeatherData yang udah di-transform dari response API. Kita juga tambahkan error handling yang proper dengan try-catch. Perhatikan penggunaan 'background only' directive karena ini adalah operasi async yang harus jalan di background thread.

Buat Helper Functions

Bikin beberapa helper functions di src/utils/helpers.ts:

export function getWeatherGradient(condition: string): string {
  const gradients: Record<string, string> = {
    Clear: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    Clouds: 'linear-gradient(135deg, #757f9a 0%, #d7dde8 100%)',
    Rain: 'linear-gradient(135deg, #4b6cb7 0%, #182848 100%)',
    Snow: 'linear-gradient(135deg, #e6f7ff 0%, #b3d9ff 100%)',
    Thunderstorm: 'linear-gradient(135deg, #434343 0%, #000000 100%)',
  }

  return gradients[condition] || gradients.Clear
}

export function getWeatherEmoji(condition: string): string {
  const emojis: Record<string, string> = {
    Clear: '☀️',
    Clouds: '☁️',
    Rain: '🌧️',
    Snow: '❄️',
    Thunderstorm: '⛈️',
  }

  return emojis[condition] || '🌤️'
}

export function formatWindSpeed(speed: number): string {
  return `${speed.toFixed(1)} m/s`
}

Helper functions ini bikin kode kita lebih modular dan reusable. Function getWeatherGradient return gradient CSS berdasarkan kondisi cuaca, sementara getWeatherEmoji return emoji yang sesuai.

Membuat Komponen Weather Card

Sekarang kita bikin component utama yaitu WeatherCard yang bakal nampilin informasi cuaca dengan design yang menarik.

Loading Spinner Component

Pertama, bikin loading spinner buat tampilin loading state. Buka src/components/LoadingSpinner.tsx:

import { memo } from '@lynx-js/react'
import './LoadingSpinner.css'

export const LoadingSpinner = memo(() => {
  return (
    <view className="spinner-container">
      <view className="spinner"></view>
      <text className="spinner-text">Memuat data cuaca...</text>
    </view>
  )
})

File CSS-nya di src/components/LoadingSpinner.css:

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner-text {
  margin-top: 16px;
  font-size: 14px;
  color: #6b7280;
}

Weather Card Component

Sekarang bikin komponen utama. Buka src/components/WeatherCard.tsx:

import { memo } from '@lynx-js/react'
import type { WeatherData } from '../types/weather'
import { getWeatherGradient, getWeatherEmoji, formatWindSpeed } from '../utils/helpers'
import './WeatherCard.css'

interface WeatherCardProps {
  data: WeatherData
}

export const WeatherCard = memo(({ data }: WeatherCardProps) => {
  const gradient = getWeatherGradient(data.condition)
  const emoji = getWeatherEmoji(data.condition)

  return (
    <view className="weather-card" style={{ background: gradient }}>
      <view className="card-header">
        <text className="city-name">{data.city}</text>
        <text className="weather-emoji">{emoji}</text>
      </view>

      <view className="temperature-section">
        <text className="temperature">{data.temperature}°</text>
        <text className="condition">{data.condition}</text>
        <text className="description">{data.description}</text>
      </view>

      <view className="details-section">
        <view className="detail-item">
          <text className="detail-label">Kelembaban</text>
          <text className="detail-value">{data.humidity}%</text>
        </view>
        <view className="detail-item">
          <text className="detail-label">Kecepatan Angin</text>
          <text className="detail-value">{formatWindSpeed(data.windSpeed)}</text>
        </view>
      </view>

      <view className="animation-overlay">
        <view className={`weather-animation ${data.condition.toLowerCase()}`}></view>
      </view>
    </view>
  )
})

Styling Weather Card

Buka src/components/WeatherCard.css dan tambahkan styling:

.weather-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 24px;
  padding: 32px;
  margin: 16px auto;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.city-name {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}

.weather-emoji {
  font-size: 48px;
}

.temperature-section {
  text-align: center;
  margin-bottom: 32px;
}

.temperature {
  font-size: 72px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
}

.condition {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 8px;
  font-weight: 600;
}

.description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.details-section {
  display: flex;
  justify-content: space-around;
  padding-top: 24px;
  border-top-width: 1px;
  border-top-color: rgba(255, 255, 255, 0.2);
}

.detail-item {
  text-align: center;
}

.detail-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.detail-value {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.animation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

Component ini menggunakan memo dari React buat optimize re-renders. Kita juga pakai helper functions buat determine gradient dan emoji berdasarkan kondisi cuaca. Inline style digunakan buat set gradient background secara dynamic.

Implementasi CSS Animations untuk Efek Cuaca

Sekarang kita tambahin animasi yang bikin aplikasi lebih hidup. Buat file src/styles/animations.css:

/* Animasi untuk cuaca cerah */
.weather-animation.clear::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 20%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Animasi untuk hujan */
.weather-animation.rain::before,
.weather-animation.rain::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  animation: rain-fall 1s linear infinite;
}

.weather-animation.rain::before {
  left: 30%;
  animation-delay: 0.3s;
}

.weather-animation.rain::after {
  left: 60%;
  animation-delay: 0.6s;
}

@keyframes rain-fall {
  0% { top: -20px; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Animasi untuk berawan */
.weather-animation.clouds::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -20%;
  width: 120px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  animation: cloud-move 8s linear infinite;
}

@keyframes cloud-move {
  0% { left: -20%; }
  100% { left: 110%; }
}

Main App Component

Sekarang kita gabungin semuanya di App component. Buka src/App.tsx:

import { useState, useEffect } from '@lynx-js/react'
import { WeatherCard } from './components/WeatherCard'
import { LoadingSpinner } from './components/LoadingSpinner'
import { fetchWeatherByCity } from './services/weatherApi'
import type { WeatherData } from './types/weather'
import './App.css'
import './styles/animations.css'

export function App() {
  const [weather, setWeather] = useState<WeatherData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [city, setCity] = useState('Jakarta')

  useEffect(() => {
    'background only'
    loadWeather()
  }, [city])

  const loadWeather = async () => {
    'background only'
    try {
      setLoading(true)
      setError(null)
      const data = await fetchWeatherByCity(city)
      setWeather(data)
    } catch (err) {
      setError('Gagal memuat data cuaca. Silakan coba lagi.')
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

  const handleCityChange = (newCity: string) => {
    'background only'
    setCity(newCity)
  }

  return (
    <view className="app-container">
      <view className="header">
        <text className="app-title">Weather BuildWithAngga</text>
        <text className="app-subtitle">Cek cuaca real-time di kotamu</text>
      </view>

      <view className="search-section">
        <view className="city-buttons">
          <view
            className={city === 'Jakarta' ? 'city-btn active' : 'city-btn'}
            bindtap={() => handleCityChange('Jakarta')}
          >
            <text>Jakarta</text>
          </view>
          <view
            className={city === 'London' ? 'city-btn active' : 'city-btn'}
            bindtap={() => handleCityChange('London')}
          >
            <text>London</text>
          </view>
          <view
            className={city === 'Seattle' ? 'city-btn active' : 'city-btn'}
            bindtap={() => handleCityChange('Seattle')}
          >
            <text>Seattle</text>
          </view>
          <view
            className={city === 'Mumbai' ? 'city-btn active' : 'city-btn'}
            bindtap={() => handleCityChange('Mumbai')}
          >
            <text>Mumbai</text>
          </view>
        </view>
      </view>

      <view className="content">
        {loading && <LoadingSpinner />}
        {error && (
          <view className="error-container">
            <text className="error-text">{error}</text>
          </view>
        )}
        {weather && !loading && <WeatherCard data={weather} />}
      </view>

      <view className="footer">
        <text className="footer-text">Powered by OpenWeatherMap API</text>
      </view>
    </view>
  )
}

Styling App Component

Buka src/App.css:

.app-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  padding: 20px;
}

.header {
  text-align: center;
  padding: 32px 16px;
}

.app-title {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
}

.app-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.search-section {
  max-width: 600px;
  margin: 0 auto 16px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
  text-align: center;
}

.city-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.test-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.city-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
}

.test-btn {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 70px;
}

.test-emoji {
  font-size: 24px;
}

.test-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.city-btn text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
}

.city-btn.active,
.test-btn.active {
  background: rgba(102, 126, 234, 0.8);
}

.city-btn.active text,
.test-btn.active .test-label {
  color: #ffffff;
}

.content {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-container {
  padding: 24px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.error-text {
  color: #fca5a5;
  text-align: center;
  font-size: 14px;
}

.footer {
  text-align: center;
  padding: 24px;
  margin-top: 32px;
}

.footer-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

App component ini handle state management buat weather data, loading state, dan error state. Kita juga tambahkan city selector buttons buat gampang switch antar kota.

Testing di Berbagai Platform

Setelah semua kode selesai, waktunya testing aplikasi di berbagai platform buat memastikan semuanya jalan dengan baik.

Testing di Lynx Explorer Mobile

Jalankan development server:

npm run dev

Scan QR code yang muncul dengan Lynx Explorer di smartphone kamu. Testing beberapa hal:

1. Performa Loading: Perhatikan seberapa cepat aplikasi load. Dengan LynxJS, first screen seharusnya muncul dalam hitungan milidetik.
2. Animasi Smoothness: Cek apakah animasi cuaca berjalan smooth tanpa frame drops. Swipe atau scroll saat animasi jalan—UI tetep harus responsif.
3. Switch Kota: Coba ganti-ganti kota dengan tap buttons. Loading state seharusnya muncul sebentar terus data cuaca ter-update dengan smooth.
4. Error Handling: Matiin internet connection sebentar, terus coba ganti kota. Error message seharusnya muncul dengan jelas tanpa bikin aplikasi crash.

Testing Responsive Layout

Coba buka aplikasi di device dengan ukuran layar berbeda—smartphone, tablet, atau bahkan di web browser kalau support web platform. Weather card seharusnya adjust dengan baik di semua ukuran layar. Gradient dan animasi tetep keliatan bagus di layar kecil maupun besar.

Performance Profiling

Perhatikan beberapa metrics penting:

• Memory Usage: Aplikasi seharusnya nggak consume memori berlebihan, bahkan setelah switch kota berkali-kali
• Battery Impact: Animasi yang efficient nggak bikin battery drain cepet
• Network Efficiency: API calls cuma terjadi waktu ganti kota, nggak ada redundant requests

Screenshot Hasil Akhir

Berikut gambaran visual hasil akhir aplikasi weather yang udah kita bikin:

Tampilan Weather Card - Cerah: Card dengan gradient ungu-pink yang vibrant, menampilkan icon matahari, temperatur besar di tengah, dan detail kelembaban serta kecepatan angin di bagian bawah. Animasi pulse effect pada icon matahari memberikan kesan dynamic.

Tampilan Weather Card - Hujan: Card dengan gradient biru gelap, animasi tetes hujan yang jatuh dari atas ke bawah, menciptakan atmospheric effect yang sesuai dengan kondisi cuaca. Typography tetep readable dengan kontras yang bagus.

Tampilan Weather Card - Berawan: Card dengan gradient abu-abu soft, animasi awan yang bergerak dari kiri ke kanan secara perlahan. Keseluruhan design terasa calm dan sesuai dengan mood cuaca berawan.

Loading State: Spinner animation yang smooth dengan teks "Memuat data cuaca..." di bawahnya. Loading state ini muncul sebentar saat switch kota, memberikan feedback visual yang jelas ke user.

City Selector: Button-button kota (Jakarta, Surabaya, Bandung) dengan glassmorphism effect. Active button punya highlight warna ungu yang matching dengan branding BuildWithAngga.

Kenapa LynxJS Cocok untuk Project Ini

Setelah complete bikin weather app ini, kamu pasti ngerasain sendiri kenapa LynxJS adalah pilihan yang excellent buat project kayak gini. Mari kita breakdown beberapa alasan kenapa framework ini shine di aplikasi weather kita:

Performa Animasi yang Superior

Salah satu highlight utama dari aplikasi kita adalah animasi cuaca yang smooth dan nggak nge-lag. Ini possible karena arsitektur dual-threaded LynxJS yang cerdas. Animasi CSS jalan di main thread yang dedicated buat UI rendering, sementara fetch data dan processing jalan di background thread. Hasilnya adalah animasi yang consistently smooth bahkan saat aplikasi lagi sibuk fetch data dari API.

Kalau kamu coba bikin animasi serupa di framework lain yang single-threaded, kemungkinan besar bakal ada frame drops atau jank saat aplikasi lagi prosess data. LynxJS eliminate masalah ini dari design-nya sendiri. Performa animasi di LynxJS bahkan comparable dengan native app yang ditulis full Swift atau Kotlin.

Cross-Platform dengan Zero Compromise

Weather app kita jalan seamless di Android, iOS, dan web tanpa perlu tulis kode platform-specific. Codebase yang sama, logic yang sama, UI yang sama—tapi performanya tetep excellent di semua platform. Ini huge win buat produktivitas development.

Yang lebih impressive lagi, LynxJS nggak achieve cross-platform compatibility dengan sacrifice performa. Many framework lain bikin tradeoff dimana cross-platform = slower performance, tapi LynxJS prove kalau kita bisa have both. Native components yang di-map langsung ke platform UI ngasih performa native, sementara abstraction layer-nya ngasih kemudahan development.

CSS Murni = Faster Development

Salah satu keputusan terbaik dari project ini adalah bisa pakai CSS murni buat styling. Nggak perlu belajar custom styling system, nggak perlu convert mental model dari web design ke mobile. Gradient, animations, flexbox—semuanya works persis kayak di web development.

Ini dramatically reduce learning curve dan development time. Kalau kamu udah familiar dengan CSS (dan kemungkinan besar kamu familiar), kamu bisa langsung productive. Nggak ada time wasted buat belajar proprietary styling system yang cuma work di satu framework.

Efficient Memory Management

Weather app kita fetch data dari external API dan render animasi yang cukup complex, tapi memory footprint-nya tetep efficient. Ini thanks to Rust-based engine yang handle memory management dengan sangat cerdas. Aplikasi nggak leak memory, garbage collection nggak cause stutter, dan keseluruhan resource usage optimal.

Di device dengan RAM terbatas (yang still common di Indonesia), efficient memory management ini crucial. User nggak experience slowdown atau crash, bahkan setelah pakai aplikasi dalam waktu lama atau switch kota berkali-kali.

Developer Experience yang Excellent

Selama proses development, kamu pasti appreciate hot reload yang instant dan debugging yang straightforward. Setiap kali save file, changes reflected immediately di Lynx Explorer. Ini bikin iteration cycle super fast—kamu bisa experiment dengan design, test, adjust, test lagi dalam hitungan detik.

Error messages dari LynxJS juga helpful dan informative. Kalau ada type error atau runtime issue, kamu dapet stack trace yang jelas dan actionable. Combined dengan TypeScript support yang robust, kamu catch banyak bugs sebelum sempet jalan di runtime.

Perfect Balance

LynxJS achieve perfect balance antara developer experience, performa, dan capabilities. Kamu nggak sacrifice one buat dapetin yang lain. Framework ini designed dari ground up buat deliver excellent experience di semua aspek—dan weather app project ini adalah bukti concrete dari design philosophy itu.

Selamat! Kamu udah berhasil bikin weather app yang functional, beautiful, dan performant dengan LynxJS. Project ini demonstrate banyak konsep penting: API integration, state management, animasi, responsive design, dan error handling. Dari sini, kamu bisa expand aplikasi dengan fitur tambahan kayak weather forecast, multiple locations, atau notifications. Sky is the limit!

Penutup

LynxJS membuka peluang baru buat developer yang pengen bikin aplikasi cross-platform dengan performa tinggi tanpa harus mengorbankan produktivitas. Framework ini membuktikan bahwa kamu bisa punya yang terbaik dari dua dunia: kemudahan development seperti web dengan performa mendekati native app.

Dari artikel ini, kamu udah belajar dasar-dasar LynxJS mulai dari konsep arsitektur dual-threaded, cara setup project, sampai bikin aplikasi weather yang kompleks dengan animasi smooth. Skill ini sangat valuable di industri yang makin menuntut solusi development yang efisien tapi tetep berkualitas tinggi.

Lanjutkan Belajarmu di BuildWithAngga

Mau menguasai LynxJS dan framework modern lainnya secara lebih mendalam? BuildWithAngga punya berbagai kelas premium yang bakal ningkatin skill development kamu ke level berikutnya:

• Kelas Mobile Development - Pelajari React Native, Flutter, dan framework cross-platform lainnya dengan project real-world
• Kelas Full-Stack JavaScript - Kuasai ekosistem JavaScript dari frontend sampai backend
• Kelas UI/UX Design - Bikin aplikasi yang nggak cuma jalan smooth, tapi juga enak dipandang

Semua kelas dilengkapi dengan video berkualitas tinggi, studi kasus nyata, dan support dari mentor berpengalaman. Plus, kamu bakal dapet sertifikat yang bisa dipake buat boost portfolio dan career kamu.

Investasi terbaik adalah investasi untuk diri sendiri. Mulai belajar sekarang di BuildWithAngga.com dan join ribuan developer yang udah sukses upgrade skill mereka! 🚀