Develop в Ext JS: 140+ компонентов и инструменты, которые ускоряют разработку

Когда мы говорим, что Ext JS — это экосистема, а не просто фреймворк, именно блок Develop доказывает это на практике. Разработка корпоративного приложения — это не только рендеринг кнопок. Это сборка проекта, минификация кода, управление зависимостями, работа с современным синтаксисом JavaScript и, конечно, готовые UI-компоненты, которые не нужно собирать по крупицам из разных библиотек.

В этой статье мы разберем, что именно дает Ext JS разработчику: от 140+ готовых компонентов до инструментов сборки, которые работают «из коробки».

🧱 140+ готовых компонентов: строительные блоки корпоративного интерфейса

Главная сила Ext JS в блоке Develop — это библиотека из более чем 140 предварительно интегрированных UI-компонентов. Они не просто существуют по отдельности — они спроектированы так, чтобы бесшовно работать друг с другом.

Что входит в библиотеку:

• Data Grid — эталонный компонент для работы с табличными данными. По бенчмаркам Sencha, он более чем в 300 раз быстрее большинства ведущих конкурентов, включая ag-Grid, KendoUI и Syncfusion. Grid выдерживает миллионы строк, поддерживает сортировку, фильтрацию, группировку, редактирование ячеек и экспорт в Excel.

• Pivot Grid — сводные таблицы для аналитики и построения отчетов. Позволяет добавлять мощные аналитические функции в приложения без сторонних библиотек.

• Charts и D3-адаптеры — визуализация данных любой сложности, от простых графиков до интерактивных диаграмм на базе D3.js.

• Trees, Forms, Calendars, Panels, Windows, Layouts, Menus, Toolbars — полный набор компонентов для построения административных панелей, ERP-систем и дашбордов.

Почему это важно для разработчика:
В типичном фронтенд-проекте на React или Vue вам нужно самостоятельно выбирать и интегрировать библиотеку для таблиц, библиотеку для графиков, библиотеку для форм, библиотеку для датпикеров и так далее. Каждая из них имеет свои зависимости, свой стиль и свои конфликты. Ext JS предоставляет единый набор компонентов, которые уже протестированы вместе и работают согласованно.

Новые компоненты в Ext JS 8.0:

Версия 8.0 добавила два востребованных компонента, которые раньше приходилось искать на стороне:

1. Digital Signature Pad — компонент для сбора подписей, работающий как с мышью на десктопе, так и с сенсорным вводом на планшетах. Поддерживает настройку толщины и цвета пера, функции Undo/Redo, а также экспорт в PNG, JPEG и SVG для встраивания в PDF или отправки на сервер.

2. QR Code Reader & Generator — компонент для генерации и чтения QR-кодов. Поддерживает сценарии оплаты, VCARD, календарные события, геолокацию и настройку Wi-Fi.

Оба компонента встроены нативно и не требуют подключения сторонних библиотек.

🛠️ Инструменты сборки: Sencha Cmd, ExtGen и ExtBuild

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

Sencha Cmd — это «краеугольный камень» для сборки приложений на Ext JS. Он предоставляет полный набор функций управления жизненным циклом:

• Scaffolding — генерация каркаса нового проекта.

• Минификация кода — сжатие и оптимизация для продакшена.

• Production build — создание финальной сборки, готовой к развертыванию.

• Очистка неиспользуемых компонентов — Sencha Cmd анализирует код и удаляет все, что не используется в приложении, уменьшая размер бандла.

ExtGen — это современный инструмент генерации приложений на базе Node.js. Он предоставляет несколько режимов создания приложений и является основным CLI-инструментом для старта нового проекта. Установка проста:

npm install -g @sencha/ext-gen
ext-gen app -a

Эта команда создаст новый каркас приложения, который сразу готов к работе.

ExtBuild — новый инструмент для сборки, который использует Sencha Cmd и Google Closure Compiler для транспиляции и оптимизации кода. Он устанавливается через npm:

npm install -g @sencha/ext-build
ext-build generate app --sdk 'Ext/ext-8.0.0' --template 'universalmodern' MyApp ./MyApp

Это позволяет использовать современный подход к сборке через Node.js-экосистему.

🚀 Современный JavaScript: поддержка до ES2025

Одно из самых важных обновлений в Ext JS 8.0 — это расширенная поддержка ECMAScript вплоть до ES2025 через Sencha Cmd и ExtGen 8.0.0.

Что это дает разработчику:

• Вы можете использовать let и const вместо var.

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

• Вы можете использовать современные API JavaScript, не полагаясь на полифилы.

• Компилятор Closure Compiler был обновлен, что улучшает соответствие текущим стандартам JavaScript и делает сборки более надежными.

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

Пример конфигурации для включения последнего синтаксиса:

"language": {
  "js": {
    "input": "UNSTABLE",
    "output": "ANY"
  }
}

Эта настройка позволяет принимать последний синтаксис и отключает транспиляцию.

💻 Интеграция с IDE: Rapid Ext JS и Visual Studio Code

Разработка в Ext JS не ограничивается командной строкой. Для визуального проектирования интерфейсов есть Rapid Ext JS — low-code визуальный редактор, который поставляется как расширение для Visual Studio Code.

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

• Визуальное проектирование экранов с помощью drag-and-drop компонентов.

• Автоматическая генерация каркаса представления (MVVM).

• Двусторонняя синхронизация — вы можете менять код вручную и видеть изменения в визуальном редакторе, и наоборот.

• Поддержка Sencha Architect — вы можете открывать существующие проекты Architect прямо в VS Code.

• Multi-Project Support — работа с несколькими Ext JS-проектами в одном рабочем пространстве VS Code.

Sencha Visual Studio Code Plugin — дополнительное расширение, которое добавляет IntelliSense для Ext JS, проверку кода и быстрый доступ к документации прямо в редакторе.

Это означает, что разработчик может работать в привычной среде VS Code, используя при этом все преимущества визуального проектирования и автодополнения, заточенного под Ext JS.

📊 Улучшения Grid в Ext JS 8.0: производительность для больших данных

Grid — это сердце большинства корпоративных приложений. В Ext JS 8.0 он получил значительные улучшения производительности для работы с широкими наборами данных.

Horizontal Buffering и Column Virtualization (Modern Toolkit)

В Modern Toolkit добавлена горизонтальная буферизация и виртуализация колонок. Это означает, что Grid рендерит только видимые колонки плюс настраиваемый буфер, а не всю ширину набора данных.

Что это дает:

• Плавная прокрутка в таблицах с более чем 1000 колонок.

• Снижение нагрузки на DOM, так как невидимые колонки не рендерятся.

• Возможность работать с очень широкими датасетами без потери производительности.

Lockable Grid Plugin (Modern Toolkit)

Новый плагин позволяет закреплять важные колонки (например, имя или ID) при горизонтальной прокрутке. Это критически важно для дашбордов и отчетов, где нужно сохранять контекст при работе с широкими таблицами.

🗄️ Data Package: невидимый, но мощный слой данных

Хотя Data Package технически относится ко всей экосистеме, именно в блоке Develop он раскрывается полностью. Этот пакет отделяет UI-компоненты от слоя данных.

Три кита Data Package:

1. Model (Ext.data.Model) — представляет сущность (Пользователь, Заказ, Товар). Определяет поля, правила валидации и связи с другими моделями.

2. Store (Ext.data.Store) — коллекция экземпляров моделей. Содержит кэш данных на клиенте и управляет их загрузкой и сохранением. Также умеет сортировать, фильтровать и группировать данные на клиенте.

3. Proxy (Ext.data.proxy.Proxy) — «шлюз» для данных. Proxy знает, как загружать и сохранять данные на сервере. Он не зависит от протокола: это может быть Ajax, REST, JSONP или даже LocalStorage.

Почему это важно для разработчика:
В большинстве других фреймворков вам нужно самостоятельно выбирать и настраивать библиотеку для управления состоянием (Redux, Pinia), библиотеку для HTTP-запросов (Axios, Fetch), библиотеку для кэширования. В Ext JS все это уже есть, интегрировано и работает согласованно. Вы можете сменить бэкенд с PHP на Node.js, не меняя ни строчки в UI-компонентах.

💎 Заключение

Блок Develop в Ext JS — это не просто набор компонентов. Это полноценная среда разработки, которая включает в себя:

Если вы ищете технологию, которая позволит вашей команде сосредоточиться на бизнес-логике, а не на «склейке» инструментов, — блок Develop в Ext JS стоит самого пристального внимания.

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