Jak rozpocząć pracę z Lynx js? Skonfiguruj swój pierwszy projekt

Lynx JS to framework, który pozwala tworzyć aplikacje mobilne z użyciem składni przypominającej HTML, natywnego CSS oraz logiki w JavaScript. Dzięki temu web developerzy mogą szybko wejść w świat aplikacji mobilnych bez potrzeby nauki nowych języków. Framework został zaprojektowany z myślą o wydajności i prostocie – a to wszystko dzięki kilku kluczowym cechom jak np.: deklaratywny interfejs użytkownika, wbudowane wsparcie dla CSS czy architektura dwuwątkowa. Jeśli interesują Cię podstawy dotyczące Lynx, zobacz nasz artykuł pt.: „Lynx – nowy gracz na rynku cross-platformowych frameworków mobilnych„.

Wymagania wstępne do rozpoczęcia pracy z Lynx JS

Aby rozpocząć pracę z Lynx JS, należy spełnić określone wymagania systemowe oraz przygotować odpowiednie środowisko deweloperskie.​

Wymagania systemowe:

• Node.js: Wersja 18 lub nowsza. W przypadku projektów wykorzystujących TypeScript zalecana jest wersja 18.19 lub wyższa.
• System operacyjny: macOS lub Linux. Dla deweloperów planujących tworzenie aplikacji na iOS wymagane jest posiadanie Xcode zainstalowanego na macOS. ​
• Android SDK: Niezbędny do rozwoju aplikacji na platformę Android. ​
• Edytor kodu: Na przykład AI Code Editor, Visual Studio Code lub inny dowolny edytor kodu.

Instalacja i konfiguracja pierwszego projektu

Krok 1. Rozpocznij projekt używając create-rspeedy, który ustawi wszystko automatycznie, bez potrzeby ręcznej konfiguracji. Wykonaj polecenie:

run create rspeedy@latest

Podczas procesu konfiguracji zostaniesz poproszony o:​
– nazwę projektu lub ścieżkę: możesz wprowadzić własną lub nacisnąć Tab, aby użyć domyślnej
– wybór języka – TypeScript lub JavaScript
– dodatkowe narzędzia, np: Biome do formatowania.

Po zakończeniu tych kroków zostanie utworzony nowy folder z konfiguracją projektu.

Krok 2. Przejdź do katalogu swojego projektu i zainstaluj wymagane pakiety:

cd nazwa-twojego-projektu

Krok 3. Zainstaluj zależności NPM za pomocą menedżera pakietów:

nmp install

Krok 4. Następnie uruchom serwer deweloperski:

nmp run dev

Twoja aplikacja powinna teraz działać. Możesz podejrzeć aplikację w Lynx Explorer.

Jak podejrzeć aplikację w Lynx Explorer?

1. Sprawdzenie aplikacja na iOS

W przypadku systemu iOS należy najpierw pobrać Xcode z Mac App Store. Następnie ze strony oficjalnej należy pobrać LynxExplorer w wersji dla macOS. Po pobraniu trzeba wypakować:

mkdir -p LynxExplorer-arm64.app/
tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/

Kolejnym krokiem jest a następnie przeciągnąć aplikację LynxExplorer do Symulatora iOS, co zainstaluje ją w tym środowisku.

2. Sprawdzenie aplikacji na Android

Aby uruchomić aplikację w trybie deweloperskim, wpisz w terminalu

npm run dev

To polecenie uruchomi lokalny serwer deweloperski i wygeneruje kod QR, który umożliwia łatwe połączenie z aplikacją.

Następnie pobierz i zainstaluj aplikację Lynx Explorer na swoim urządzeniu z Androidem. Po uruchomieniu Lynx Explorera, zeskanuj wygenerowany wcześniej kod QR. Aplikacja zostanie automatycznie załadowana na Twoim telefonie, umożliwiając testowanie jej działania na żywo.

Potrzebujesz wsparcia w projektach mobilnych?

Napisz do nas!

Jak wprowadzić zmianę w projekcie?

Nic prostszego. Otwórz plik src/App.tsx w swoim edytorze kodu i wprowadź dowolną zmianę.

Powinieneś zobaczyć, że interfejs użytkownika w aplikacji Lynx Explorer zostanie zaktualizowany automatycznie.

Jak zbudować pierwszy komponent w Lynx?

Skoro masz już gotowe środowisko i uruchomiony projekt, czas na stworzenie pierwszego komponentu. Pokażę Ci prosty przykład licznika kliknięć – dzięki niemu poznasz podstawy składni Lynx, reaktywnych danych oraz obsługi zdarzeń.

Najpierw utwórz plik Counter.lynx w katalogu src/components/. Wklej do niego poniższy kod:

<view class="container">
  <text class="count">Kliknięcia: {{ count }}</text>
  <view class="button" @tap="increment">
    <text>+</text>
  </view>
</view>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

.container {
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f9f9f9;
}

.count {
  font-size: 24px;
  margin-bottom: 20px;
}

.button {
  background-color: #007aff;
  padding: 12px 20px;
  border-radius: 10px;
}

.button text {
  color: white;
  font-size: 20px;
}
</style>

Ten prosty komponent pokazuje kilka kluczowych cech Lynx JS:

• deklaratywna struktura – layout oparty na view i text, przypomina HTML, ale jest bezpośrednio mapowany na natywne komponenty Androida i iOS.
• reaktywność – zmienna count automatycznie aktualizuje interfejs po każdej zmianie.
• zdarzenia – przypisanie @tap="increment" powoduje wywołanie metody po kliknięciu przycisku.
• stylowanie CSS – dokładnie tak, jak w aplikacjach webowych. Masz dostęp do właściwości, których brak np. w React Native bez dodatkowych narzędzi.

Aby wyświetlić komponent, zaimportuj go w pliku App.lynx i użyj jak zwykłego znacznika:

<template>
  <view class="app">
    <Counter />
  </view>
</template>

<script>
import Counter from './components/Counter.lynx'

export default {
  components: {
    Counter
  }
}
</script>

Po zapisaniu zmian i odświeżeniu aplikacji (w emulatorze lub przez Lynx Explorer), zobaczysz w pełni działający licznik. To pierwszy krok do tworzenia bardziej złożonych interfejsów w Lynx JS.

Tworzenie projektów z Lynx JS – co wyróżnia ten framework?

Lynx JS to nie tylko kolejny framework mobilny – to nowoczesna platforma, która została zaprojektowana z myślą o maksymalnej wydajności, elastyczności i wygodzie dla web developerów. Oto kilka cech, które naprawdę robią różnicę:

1. Architektura dwuwątkowa

W przeciwieństwie do React Native, Lynx działa w modelu dwuwątkowym – logika aplikacji i renderowanie interfejsu działają niezależnie od siebie. Dzięki temu UI pozostaje responsywny nawet przy skomplikowanych obliczeniach w tle. To ogromny krok naprzód w kontekście płynności i stabilności działania.

2. Pełne wsparcie dla natywnego CSS

Lynx umożliwia pisanie stylów przy użyciu pełnego CSS – w tym selektorów, zmiennych, animacji czy media queries. Nie musisz uczyć się żadnych nowych API do stylowania – wszystko działa tak, jak w przeglądarce.

3. Lynx to nie tylko dla Reactowców

Chociaż obecnie wspiera ReactLynx jako podstawową bibliotekę komponentów, Lynx jest frameworkiem agnostycznym. To oznacza, że w przyszłości możliwe będzie tworzenie aplikacji również z użyciem innych bibliotek, takich jak Vue czy Svelte.

4. Działa także na Web

Lynx może być również renderowany w przeglądarce internetowej, co przyspiesza proces testowania UI i pozwala budować aplikacje wieloplatformowe z jeszcze większą swobodą.

FAQ – Najczęstsze pytania

Jak zacząć z Lynx?
Zainstaluj Node.js (18+), pobierz narzędzie Rspeedy i utwórz nowy projekt poleceniem Run create rspeedy@latest. Następnie uruchom serwer deweloperski komendą Run run dev i otwórz aplikację w Lynx Explorerze.

Jak działa aplikacja Lynx?
Aplikacja Lynx działa w oparciu o architekturę dwuwątkową – interfejs użytkownika renderowany jest natywnie (Android/iOS), a logika aplikacji działa w osobnym wątku. Kod piszesz w HTML-owej składni z CSS i JavaScriptem, co pozwala tworzyć szybkie i responsywne aplikacje mobilne.