Что такое Lynx.js? Руководство для начинающих

Если вы разрабатываете веб-приложения на React и задумывались, можно ли применить эти навыки в нативной мобильной разработке — без изучения Swift или Kotlin — Lynx.js заслуживает вашего внимания. Это руководство объясняет, что представляет собой фреймворк Lynx.js, как он работает и подходит ли он для вашего следующего проекта.

Что такое фреймворк Lynx.js?

Lynx.js — это кроссплатформенный UI-фреймворк, разработанный ByteDance, компанией, стоящей за TikTok, и открытый в 2025 году. Он позволяет создавать нативные приложения для iOS, Android и веба из единой кодовой базы на JavaScript.

Ключевое отличие: Lynx — это не веб-фреймворк вроде React или Vue. По категории он ближе к React Native или Flutter — инструментам, предназначенным для создания действительно нативных интерфейсов, а не браузерных обёрток. ByteDance разработала его для внутреннего использования в своих приложениях, а затем выпустила публично как альтернативу существующим кроссплатформенным решениям.

Как работает Lynx.js: нативный рендеринг и двухпоточная модель

Lynx рендерит UI с помощью нативных компонентов, а не WebView. Когда вы пишете элемент <view> или <text> в Lynx, он напрямую отображается в нативные компоненты Android и iOS во время выполнения — аналогично тому, как работает React Native, но с некоторыми архитектурными различиями.

Наиболее примечательной особенностью является двухпоточная архитектура. Lynx разделяет рендеринг UI и логику приложения, выполняя их в независимых потоках. Это означает, что ваш интерфейс остаётся отзывчивым, даже когда JavaScript выполняет тяжёлую работу в фоновом режиме.

Lynx также поставляется с нативным движком рендеринга, части которого реализованы на Rust, который обрабатывает компоновку и отрисовку на нативном уровне. Вы не взаимодействуете с ним напрямую, но именно он обеспечивает фреймворку профиль производительности, отличный от традиционных гибридных подходов.

Опыт разработки, вдохновлённый вебом

Несмотря на нативный рендеринг, Lynx спроектирован так, чтобы быть знакомым для фронтенд-разработчиков. Вы пишете стили, используя настоящий CSS-синтаксис — включая селекторы, переменные и анимации — без изучения проприетарного API для стилизации. Это реальное преимущество перед React Native, который использует ограниченное CSS-подобное подмножество.

Поддержка React реализована через ReactLynx, официальную интеграцию React для Lynx. Если вы уже знаете хуки React и паттерны компонентов, ReactLynx позволяет применять их напрямую. Вот минимальный пример из официальной документации:

import { useCallback, useState } from "@lynx-js/react"

export function App() {
  const [alterLogo, setAlterLogo] = useState(false)

  const onTap = useCallback(() => {
    "background-only" // выполняет этот обработчик в фоновом потоке
    setAlterLogo(!alterLogo)
  }, [alterLogo])

  return (
    <page>
      <view className="App">
        <view bindtap={onTap}>
          <text>Tap me</text>
        </view>
      </view>
    </page>
  )
}

Обратите внимание на директиву "background-only" — она указывает Lynx выполнить этот колбэк в фоновом потоке, а не в основном UI-потоке, что является частью того, как двухпоточная модель предоставляется разработчикам.

Lynx также не привязан к конкретному фреймворку по дизайну. React — это основной поддерживаемый вариант на сегодня, но архитектура построена так, чтобы в будущем поддерживать другие UI-библиотеки.

Lynx.js против React Native: ключевые различия

Стоит ли изучать Lynx.js?

Lynx — действительно интересный вариант, если вы React-разработчик, который хочет создавать нативные мобильные приложения, не отказываясь от веб-навыков. Одна только поддержка CSS устраняет одну из главных болевых точек в разработке на React Native.

Тем не менее, Lynx новый и активно развивается. Экосистема небольшая, ресурсы сообщества ограничены, и ожидаются некоторые шероховатости. Это не лучший выбор, если вам нужна продакшен-стабильность сегодня — но за ним стоит внимательно следить, и раннее освоение имеет реальные преимущества по мере созревания фреймворка.

Лучший следующий шаг — официальное руководство по быстрому старту Lynx, которое позволяет запустить проект менее чем за десять минут с помощью npm create rspeedy@latest.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.