LeCodesdocs

Первый запуск

От нуля до приложения на твоём телефоне. Понадобится браузер и несколько минут; телефон — по желанию, но оно того стоит: увидеть, как твой код нативно работает на реальном устройстве, — это и есть суть LeCodes.

Создай проект

Открой редактор и войди — без карты, без скачиваний, без настройки окружения. Создай новый проект — и перед тобой уже весь рабочий процесс: с одной стороны TypeScript твоего проекта, с другой — живое превью приложения.

Сделай его своим

Замени код проекта на самое маленькое возможное приложение — оно работает прямо здесь, в телефоне рядом:

TypeScript
const screen = UIScreen([
  UIText("Привет, LeCodes!").style({ color: "white", fontSize: 28, fontWeight: 700 }),
]).style({ bgColor: "black", p: 24, pt: "max(safe-top, 24px)" })

screen.open()

Запусти превью — появится экран. Только что произошли три вещи, на которые стоит обратить внимание:

  • UIScreen и UIText взялись из ниоткуда — никаких импортов. Весь SDK глобален: сборка подставляет то, что ты используешь, и вырезает то, что нет. Подробнее — в Устройстве проекта.
  • Компилятор упаковал твой TypeScript в один портативный бандл меньше чем за секунду.
  • Превью — это настоящий рантайм: тот же бандл, что работает на телефонах, собранный для запуска в браузере. Это не макет приложения — это и есть приложение.

Теперь добавь интерактив — счётчик, прямо из модели UI-элементов. Кнопка в телефоне нажимается по-настоящему:

TypeScript
let taps = 0
let label: UIText

const screen = UIScreen([
  label = UIText("Нажатий: 0").style({ color: "white", fontSize: 24, fontWeight: 700 }),
  UIButton([ UIText("Нажми").style({ color: "white" }) ])
    .style({ bgColor: "#FF4032", borderRadius: 12, p: 16, alignSelf: "flex-start" })
    .onClick(() => { label.text = `Нажатий: ${++taps}` }),
]).style({ bgColor: "black", p: 24, pt: "max(safe-top, 24px)", gap: 16 })

screen.open()

Ни JSX, ни виртуального DOM, ни цикла перерисовки: элементы — обычные объекты, а приложение обновляется их мутацией (label.text = …).

Открой на телефоне

Опубликуй проект — редактор выдаст ссылку и QR-код. Установи приложение LeCodes на телефон (см. Загрузки), отсканируй код — и твоё приложение откроется нативно: никакого WebView, на устройстве работают те же движки, что рисуют превью.

Дальше цикл такой: правишь в браузере, публикуешь, открываешь заново на телефоне. А когда захочется жить в своём редакторе, у CLI есть lecodes dev — горячая перезагрузка по локальной сети, — но для первого проекта это не нужно.

AI-ассистент

В редакторе есть ассистент, который пишет и правит код проекта по описанию. Его необычность в том, что он видит результат: LeCodes умеет отрисовывать приложение headless за миллисекунды, поэтому ассистент сверяется со скриншотом и семантическим деревом того, что реально построил его код, и сам исправляет свои ошибки. Работай с ним в паре: опиши экран, посмотри, что получилось, потом прочитай код — это хороший способ перенять идиомы SDK.

Что дальше

Прочитай Устройство проекта — пять минут, которые объясняют правила, на которые опирается всё остальное. Потом выбери трек в обзоре.

← НазадОбзорДальше →Устройство проекта