Cara Memulai dengan LynxJS

Motivasi

Sebagai latar belakang, saya telah mengembangkan aplikasi seluler selama sekitar 15 tahun. Lima tahun pertama, saya mengembangkan aplikasi non-native biasa dengan HTML dan JavaScript , yang disempurnakan dengan berbagai framework dan library. Pada tahun 2015, saya beralih ke React Native, dan pada tahun 2023, saya juga beralih ke Flutter .

Baru-baru ini, saya mulai mempelajari LynxJS lebih lanjut. Saya menyadari bahwa sebenarnya tidak banyak tutorial yang tersedia. Sebagian besar konten yang saya temukan pada dasarnya disalin dari situs .org. Oleh karena itu, saya memutuskan untuk menulis tutorial yang mudah dipahami tentang cara memulai pengembangan Lynx dengan benar.

Ngomong-ngomong, ada tutorial 3 langkah yang bagus untuk menyelami Lynx.

Mulai Cepat

Bacalah petunjuk Quick Start terlebih dahulu.

Singkatnya, yang Anda butuhkan adalah:

1. XCode , atau pada dasarnya macOS. Ada beberapa opsi untuk menjalankan Lynx di Windows, tetapi saya tidak menghabiskan banyak waktu untuk menyelidikinya,

2. Pengaturan lingkungan yang tepat dengan Node18+ dan manajer paket untuk mengambil paket rspeedy ,

3. Lynx Explorer untuk menjalankan dan men-debug aplikasi,

4. Lynx DevTool ( https://github.com/lynx-family/lynx-devtool ),

5. Kesabaran

Mengembangkan Aplikasi di Simulator

Instruksi ini agak aneh: di situs web, mereka meminta Anda untuk "memindai kode QR". Namun, saat menggunakan simulator XCode untuk mengembangkan aplikasi, tentu saja hal itu tidak mungkin dilakukan...

Inilah yang sebenarnya Anda dapatkan:

Untuk mengembangkan di Simulator, Anda cukup meneruskan URL bundel sebagai “URL Kartu” untuk Lynx Explorer dan aplikasi akan diluncurkan.

Apa yang Mungkin Ingin Anda Lakukan

Anda mungkin membaca artikel ini karena ingin mengimplementasikan aplikasi web yang sudah ada untuk menghadirkan pengalaman seluler yang lancar. Atau, mungkin Anda hanya ingin memanfaatkan keahlian pengembang web Anda yang mumpuni untuk membuat aplikasi seluler.

Banyak tim pengembang kesulitan untuk berbagi basis kode antara aplikasi web dan seluler yang terpisah. Pustaka dan alat web sudah tersedia di RN dan Flutter, tetapi diskusi ini masih terus berlanjut.

Kabar baiknya: ya, Anda cukup mengkloning elemen TSX dan aturan CSS untuk digunakan dengan Lynx. Kabar buruknya, Anda memerlukan pengkodean bersyarat.

Cara Membedakan Komposisi Tata Letak Antara Aplikasi Web dan Aplikasi Lynx

Lynx pada dasarnya memiliki enam komponen yang sudah matang untuk penyusunan tata letak. Di HTML (atau React), kami memiliki lebih banyak lagi.

Ini adalah masalah pertama yang saya temui.

Di TSX, kita bisa langsung menggunakan:

const HelloWorldApp = () => (
  <main>
    <h1 className='header'>{'Hello World'}</h1>
  </main>
);

Sekarang, hal yang sama di Lynx akan terlihat seperti ini:

const HelloWorldApp = () => (
  <view>
    <text className='header'>{'Hello World'}</text>
  </view>
);

Hanya perbedaan kecil, tidak ada yang perlu dikhawatirkan…

…kecuali, jika Anda ingin membagikan komposisi tata letak Anda, Anda perlu melakukan sesuatu seperti:

import './Header.css';

const isLynx = typeof window === 'undefined';

const Header = ({ title }: { title: string }) => {
  return isLynx ? (
    <text className={'header'}>{title}</text>
  ) : (
    <h1 className={'header'}>{title}</h1>
  );};

export default Header;

Tetap saja, tidak ada yang dramatis. Selain itu, ada aturan CSS yang tidak didukung oleh Lynx. Jadi, Anda mungkin akan mendefinisikan className terpisah atau menambahkan sesuatu yang ajaib di sekitarnya.

Cara Membedakan Logika Bisnis Fungsional Antara Web dan Aplikasi Seluler

Karena sebagian besar fungsi TypeScript sama untuk web dan Lynx, tidak perlu ada perbedaan di antara keduanya. Ini lebih merupakan keputusan arsitektur.

Namun, terdapat perbedaan dalam deklarasi properti komponen. Misalnya, jika Anda ingin melakukan pencarian input normal, hasilnya mungkin seperti ini:

<input
  className="product-search-field"
  type={'search'}
  inputMode={'search'}
  confirm-type={'go'}
  enterKeyHint={'go'}
  placeholder={'Search for products'}
  value={query}
  
  {...(isLynx
    ? {
        bindinput: ({ detail }: { detail: { value: string } }) => {
          setQuery(detail.value);
        },
      }
    : {
        onChange: ({ target }: { target: { value: string } }) => {
          setQuery(target.value);
        },
      }
    )
  }
  
  {...(isLynx
    ? {
        bindblur: handleSearchSubmit,
      }
    : {
        onSubmit: handleSearchSubmit,
      }
    )
  }
/>

White Screen of Death
Jika kamu pernah mengembangkan aplikasi dengan React Native, kamu mungkin pernah mengalami “Red Screen of Death”. Ketika terjadi kesalahan, Lynx memiliki sesuatu yang mirip untuk ditawarkan: layar putih kosong.

Jika kamu beruntung, kamu mungkin bisa melihat error yang sebenarnya.

Tapi setidaknya malam ini, di bulan Maret 2025, Lynx tiba-tiba mogok tanpa alasan apa pun dan saya harus me-restart server dan Lynx Explorer. Berkali-kali, maksud saya.

Kesimpulan

Secara umum, LynxJS tampak menjanjikan. Berikut beberapa poin bagus yang saya sampaikan sejauh ini:

• tidak membutuhkan banyak waktu untuk menyiapkan lingkungan pengembangan

• kurva pembelajaran tidak ada, terutama untuk pengembang web

• hanya beberapa komponen yang perlu diingat (misalnya dibandingkan dengan Flutter)

• CSS itu luar biasa

Namun, jika Anda sudah sangat mendalami React Native dan/atau Flutter, saya tidak melihat alasan khusus untuk beralih ke LynxJS . Setidaknya belum.

Ada desas-desus tentang peningkatan kinerja , dan itu mungkin benar. Untuk pertahanan: baik RN maupun Flutter sama-sama memiliki kinerja yang lumayan, jadi saya tidak melihat nilai tambah di area itu.

Itu saja dari seorang pemula LynxJS. Secara keseluruhan, Pengalaman Pengembangnya cukup solid dan mudah diadopsi. Kecuali untuk WSoD yang terus-menerus muncul itu.