Design в Ext JS: инструменты для дизайнеров, которые не пишут код

Одна из главных проблем в веб-разработке — разрыв между дизайнерами и разработчиками. Дизайнер рисует макет в Figma или Sketch, разработчик получает его и начинает «переводить» в код. В этом процессе теряются детали, появляются расхождения, а время на согласование может растянуться на недели.

Ext JS решает эту проблему на уровне инструментов. Вместо того чтобы заставлять дизайнеров изучать JavaScript или разработчиков вручную переносить каждый пиксель из макета, Sencha создала полноценный набор инструментов для проектирования — от UI-китов до визуальных редакторов тем.

В этой статье мы разберем, как устроен блок Design в Ext JS: какие инструменты он включает, как они работают вместе и почему дизайнер может создавать макеты, которые сразу готовы к разработке.

🎨 Инструмент 1: Sencha Stencils — UI-кит для дизайнеров

Sencha Stencils — это набор UI-компонентов, который позволяет дизайнерам создавать макеты и вайрфреймы, используя те же компоненты, что и в Ext JS. Это не просто «набор иконок» — это полноценная библиотека символов, которая содержит все компоненты фреймворка.

Что входит в Stencils:

• Grid, Tree, Form, Panel, Chart, Calendar, Date Picker и другие компоненты.

• Компоненты как из Classic Toolkit (для десктопов), так и из Modern Toolkit (для мобильных устройств).

• Поддержка Material Theme, что позволяет создавать макеты в стиле Material Design.

С какими программами работает:

Stencils поставляется в форматах для самых популярных инструментов дизайна:

• Adobe Illustrator

• Sketch

• Balsamiq

• Omnigraffle

• SVG/PNG — для использования в других программах

Почему это важно:
Когда дизайнер использует Stencils, он рисует макет реальными компонентами Ext JS, а не абстрактными прямоугольниками. Разработчик получает макет, который соответствует тому, что он может реализовать — без сюрпризов, без «этого компонента нет в фреймворке», без необходимости объяснять, почему что-то невозможно.

🎛️ Инструмент 2: Sencha Themer — визуальный редактор тем

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

Ключевые возможности Themer:

• Выбор базовой темы: Triton, Neptune, Crisp, Grey, Material, iOS. Вы начинаете с готовой темы и модифицируете её под свои нужды.

• Глобальные переменные: Более 25 глобальных переменных (базовый цвет, цвет фона, шрифт, градиенты), которые каскадно применяются ко всем компонентам.

• Компонентные переменные: Каждый компонент имеет свой набор SCSS-переменных. Например, у компонента Button их более 320. Themer позволяет фильтровать переменные, чтобы видеть только изменённые.

• Цветовая палитра: Инновационная палитра показывает базовый цвет, цвет фона и цвет шрифта с оттенками на 5%, 10%, 15% светлее и темнее — это упрощает применение цветов к разным состояниям компонентов.

• Live-обновления: С помощью компилятора Fashion изменения в Themer применяются к приложению в реальном времени — без перекомпиляции, без перезагрузки страницы.

• Экспорт и шаринг: Созданную тему можно упаковать в ZIP-архив и передать другому разработчику или применить к другому проекту.

Для кого это:
Для дизайнеров, которые не пишут на Sass. Themer делает тему доступной для тех, кто привык работать с графическими инструментами, а не с кодом.

⚡ Инструмент 3: Sencha Fashion — компилятор тем нового поколения

Fashion — это JavaScript-компилятор SCSS, который лежит в основе Themer и системы темизации Ext JS. Он был представлен в Ext JS 6 и заменил старый компилятор на базе Ruby и Compass.

Что даёт Fashion:

• Скорость: Компиляция тем происходит прямо в браузере, что даёт почти мгновенную обратную связь при изменении стилей.

• Совместимость с SASS: Fashion поддерживает весь синтаксис SASS, включая переменные, миксины и вложенные правила.

• Расширяемость: Вы можете создавать собственные функции на JavaScript и использовать их в SCSS-коде — это открывает возможности, недоступные в стандартном SASS.

• Без зависимостей: Fashion устраняет необходимость в Ruby и Compass, что упрощает настройку окружения и сборку проектов.

Как это работает на практике:
Вы запускаете sencha app watch, и Fashion компилирует SCSS в CSS на лету. Любое изменение переменной в Themer или в SCSS-файле немедленно отражается в приложении.

🖥️ Инструмент 4: Rapid Ext JS — визуальный редактор в VS Code

Rapid Ext JS — это low-code визуальный редактор, который поставляется как расширение для Visual Studio Code. Он объединяет скорость drag-and-drop разработки с полноценным контролем над кодом.

Ключевые возможности Rapid Ext JS:

• Визуальное проектирование экранов: Перетаскивайте компоненты Ext JS на холст, настраивайте их свойства в инспекторе.

• Автоматическая генерация кода: Rapid Ext JS генерирует каркас представления (MVVM-файлы) на основе вашего визуального дизайна.

• Двусторонняя синхронизация: Вы можете менять код вручную и видеть изменения в визуальном редакторе, и наоборот. Это означает, что дизайнер и разработчик могут работать над одним и тем же проектом, не мешая друг другу.

• Управление несколькими проектами: Поддержка мульти-проектных workspace — вы можете открывать и редактировать несколько Ext JS-приложений в одном окне VS Code.

• Миграция из Sencha Architect: Вы можете открывать существующие проекты Architect прямо в VS Code и продолжать работу с ними.

Почему это меняет процесс:
Раньше дизайнер рисовал макет, разработчик переносил его в код, и между ними был «разрыв». Теперь дизайнер может работать в том же файле, что и разработчик — просто в другой вкладке (Design View vs Code View).

📦 Инструмент 5: Sencha Architect (классический визуальный конструктор)

Sencha Architect — это первый визуальный конструктор для Ext JS, который существует с 2009 года. Хотя сегодня он считается устаревшим (последняя поддерживаемая версия — Ext JS 5.1), он остаётся важной частью истории и продолжает использоваться в существующих проектах.

Что умеет Architect:

• Drag-and-drop построение приложений: Перетаскивайте компоненты на холст, настраивайте их свойства в панели конфигурации.

• Генерация кода по best practices: Architect автоматически создаёт код, следующий рекомендациям Sencha по архитектуре (MVVM, ViewController, ViewModel).

• Поддержка тем: Вы можете импортировать темы, созданные в Themer, и применять их к проекту.

• Интеграция с Cordova: Для гибридных мобильных приложений.

Сегодняшний статус:
Sencha Architect больше не развивается. Его заменил Rapid Ext JS — более современный инструмент, который работает в VS Code и поддерживает двустороннюю синхронизацию. Однако существующие проекты Architect можно мигрировать в Rapid Ext JS и продолжать работу в новой среде.

🔄 Как инструменты Design работают вместе

Экосистема Design в Ext JS — это не набор разрозненных утилит, а связанный рабочий процесс:

1. Дизайнер открывает Sencha Stencils в Sketch или Illustrator и создаёт макет, используя реальные компоненты Ext JS.

2. Дизайнер и разработчик вместе открывают Sencha Themer и настраивают тему: цвета, шрифты, градиенты. Themer применяет изменения в реальном времени через Fashion.

3. Разработчик открывает Rapid Ext JS в VS Code, перетаскивает компоненты на холст и генерирует каркас приложения.

4. Дизайнер может зайти в ту же сцену через Design View и скорректировать визуальную часть, не трогая код.

5. Разработчик дописывает бизнес-логику в Code View.

В этом процессе нет разрыва между дизайном и кодом. Макет, созданный дизайнером, сразу готов к разработке. Тема, настроенная в Themer, сразу применяется к приложению. Компоненты, перетащенные в Rapid Ext JS, сразу генерируют рабочий код.

🆕 Что нового в Ext JS 8.0

Хотя блок Design в версии 8.0 не получил столь же радикальных обновлений, как Develop или Adaptive, Rapid Ext JS продолжает развиваться:

• Rapid Ext JS 1.1.1 (июль 2025) улучшил стабильность Design View, снизил потребление CPU и добавил поддержку Sencha Visual Studio Code Plugin с IntelliSense для Ext JS.

• Навигация по мульти-проектным workspace стала удобнее: теперь отображается полный путь к приложению в настройках расширения.

• Улучшена работа с TabPanel: добавление новых вкладок через контекстное меню прямо в Design View.

💎 Заключение

Блок Design в Ext JS — это не просто «инструменты для рисования макетов». Это полноценная среда для совместной работы дизайнеров и разработчиков, которая устраняет разрыв между визуальным проектированием и кодом.

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

Если вы строите корпоративное приложение, где важна скорость и согласованность между дизайном и разработкой, — блок Design в Ext JS заслуживает самого пристального внимания.

---

Если у вас есть опыт работы с инструментами дизайна в Ext JS или вопросы по Stencils, Themer и Rapid Ext JS, поделитесь в комментариях.