Ext JS 6.6 и Open Tooling
Node.js и NPM изменили лицо фронтенд-разработки. NPM, онлайн-репозиторий множества библиотек и приложений Node.js, используется разработчиками для объединения JavaScript в своих приложениях. Кроме того, простой в использовании интерфейс командной строки для взаимодействия с этими репозиториями помогает разработчикам в установке пакетов, управлении зависимостями и версиями. В совокупности это дало возможность создавать веб-приложения в более короткие сроки, с улучшенным качеством и удобством сопровождения.
Давно пора было объявить Sencha Ext JS 6.6 о поддержке открытого инструментария. Чтобы сделать это возможным, инфраструктура Ext JS, компоненты инструментария, ядро, диаграммы, UX, шрифт, локаль, тема и другие пакеты были добавлены в виде пакетов npm в частный репозиторий Sencha, размещенный на npm.sencha.com. Вы можете просмотреть этот список пакетов Ext JS NPM, войдя по этому URL-адресу с вашими учетными данными поддержки sencha, или вы также можете просмотреть их в этом документе.
В этой статье мы рассмотрим следующие моменты создания приложения Ext JS 6.6 с использованием открытых инструментов:
- Требования
- Получение доступа к репозиторию Sencha NPM
- Создание и сборка приложения Ext JS 6.6
- Запуск сервера и запуск приложения
- Использование пакетов Ext JS в приложении
- Использование сторонних библиотек в приложении
Требования
Получение доступа к репозиторию Sencha NPM
Хотя получение фреймворка Ext JS с портала поддержки Sencha не было отключено, теперь вы можете легко получить к нему доступ, войдя в реестр NPM Sencha любым из двух способов:
- Если у вас есть идентификатор пользователя и пароль портала поддержки, вы можете использовать их, но убедитесь, что ваш пароль состоит только из букв и цифр. Из-за какой-то ошибки в разборе символов пароль со специальными символами не работает, например. abra@dabra не будет проанализирован. В таком случае сначала сбросьте пароль портала поддержки.
- В качестве альтернативы вы можете подписаться на пробную копию Ext JS. После заполнения формы вы получите идентификатор пользователя и пароль, которые вы можете использовать для входа в реестр.
Получив свои учетные данные, вы можете пройти аутентификацию, выполнив следующую команду:
логин npm — register=http://npm.sencha.com — scope=@sencha
- Вам будет предложено ввести идентификатор пользователя. Введите свой идентификатор пользователя, но замените (знак at) «@» в вашем адресе электронной почты на (две точки) «..». Например, замените «[email protected]» на «somemail..gmail.com».
- Далее вам будет предложено ввести пароль. Введите пароль. Персонажи не будут отображаться, так что не беспокойтесь об этом.
- Наконец, вас попросят указать ваш адрес электронной почты. Введите тот, который вы дали выше, не беспокоясь о точках. В этом примере это будет «[email protected]».
Вход в реестр Sencha NPM
Создание и сборка приложения Ext JS 6.6
Инструмент Sencha Cmd был популярен среди разработчиков для создания каркаса приложений Ext JS, интеграции сборки и управления пакетами и рабочим пространством. Его все еще можно использовать, но в Ext JS 6.6 представлены следующие два кроссплатформенных инструмента на основе узлов, которые вместе обеспечивают удобную среду для создания и создания приложений Ext JS.
ДопГен:
Инструмент ExtGen создает проект Ext JS npm; каркас приложения, аналогичный команде Sencha Cmd «sencha generate app». Итак, сначала установите его глобально с помощью следующей команды:
npm install -g @sencha/ext-gen
После установки этого инструмента он позволяет вам выбирать из следующих встроенных шаблонов, аналогичных старому «классическому», «современному» и «универсальному» выбору приложений.
- classicdesktop — использует классический набор инструментов для создания настольного приложения. Это значение по умолчанию.
- moderndesktop — использует современный набор инструментов для создания настольного приложения.
- universalclassicmodern – использует оба набора инструментов для создания двух профилей – классический набор инструментов для настольного компьютера и современный набор инструментов для профиля телефона.
- universalmodern — использует единственный современный инструментарий для создания 2 профилей — 1 для компьютера и 1 для мобильных устройств.
Вы можете создать выбранный шаблон приложения в любом из двух указанных режимов:
- автоматически: это режим по умолчанию. Он генерирует классическое начальное приложение, используя классический набор инструментов и тему графита, но вы можете изменить это, передав определенные флаги. Вот несколько примеров:
ext-gen app -a // «a» — это автоматический режим — он создает классическое приложение с именем по умолчанию MyApp
OR
ext-gen app -a MyFirstApp // Создает классическое приложение с именем MyFirstApp
OR
приложение ext-gen -a
-t универсальныйклассическийсовременный
-c тема-графит
-m тема-материал
-n MyFirstUniversalApp // Генерирует универсальное приложение как с классическими, так и с современными наборами инструментов
- интерактивный: в этом режиме задается несколько вопросов, которые позволяют изменить параметры приложения по умолчанию, такие как имя приложения, шаблон, имя автора и т. д.
ext-gen app -i // «i» для интерактивного режима
Все параметры можно просмотреть с помощью команды «ext-gen –help».
ext-gen –help
ExtBuild:
Инструмент ExtBuild упрощает создание сложных приложений с несколькими зависимостями. В настоящее время он использует Sencha Cmd и компилятор Google Closure для создания и транспиляции приложений Ext JS. В настоящее время он не обладает всеми функциями Sencha Cmd, поэтому в большинстве случаев он перенаправляет команды в Sencha Cmd. Но, судя по их вебинару, ожидается, что в более поздних релизах он получит все возможности Cmd и станет его полной заменой node.
Чтобы использовать ExtBuild, вам не нужно явно устанавливать Sencha Cmd. Sencha Cmd теперь также является пакетом и устанавливается локально в ваш проект как зависимость ExtBuild.
Запуск сервера и запуск приложения
Когда ваше приложение будет готово, выполните следующую команду, чтобы собрать приложение, запустить сервер и запустить его в браузере.
запуск нпм
Дополнение JS 6.6. приложения создаются с использованием веб-пакета, но на самом деле ExtBuild работает под капотом.
Файлы обслуживаются с помощью сервера разработки webpack с оперативными обновлениями; аналогично команде «sencha app watch».
По умолчанию приложения создаются в среде разработки, но вы можете выполнить соответствующую команду сборки из следующего:
npm запустить сборку-десктоп-тестирование
npm запустить build-desktop-production
npm запустить сборку-телефон-тестирование
npm запустить сборку-телефон-производство
Вышеупомянутые сценарии приведены в объекте сценариев «package.json».
Разные сценарии сборки в package.json
Добавление пакетов Ext JS NPM в приложение
Добавление премиум-пакетов или других пакетов в приложение Ext JS — это трехэтапный процесс. Например, чтобы добавить в проект пакет диаграмм:
- Запустите эту команду из корневой папки проекта. Он загрузит пакет диаграмм из репозитория sencha npm и установит его в папку «node_modules/@sencha».
1
npm i — сохранить @sencha/ext-charts
- Отредактируйте «workspace.json» и добавьте переменную «dir» в «packages» с путем к только что установленному пакету.
1
2
3
4
5
6
7
«пакеты»: {
«каталог»: «${workspace.dir}/packages,${framework.dir}/../»,
«извлечь»: «${workspace.dir}/packages/remote»
}
- Отредактируйте «app.json», чтобы он требовал пакет «charts».
1
2
3
4
5
6
7
"требует": [
«отличный шрифт»,
«графики»
],
Использование сторонних библиотек в приложении
Вы можете легко добавить любую стороннюю библиотеку JavaScript из общедоступного репозитория npm в свой проект Ext JS. Например, выполните следующие действия, чтобы добавить библиотеку дат JavaScript Moment:
- Загрузите и установите библиотеку моментов
1
npm i — сохранить момент
- Добавьте его путь в массив «js: []» файла app.json.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
“js”: [
{
«путь»: «app.js»,
«связка»: правда
},
{
«путь»: «node_modules/момент»
}
],
ПРОДОЛЖИТЕЛЬНОСТЬ
ДАТА: 10 ДЕКАБРЯ 2018 г.
ПРОДОЛЖИТЕЛЬНОСТЬ : 4 ЧАСА
ПРЯМОЙ ОНЛАЙН-СЕССИИ
18:30 — 22:30 (среднеевропейское стандартное время)
14:00 — 18:00 (центрально-европейское время)
6:00 — 10:00 (тихоокеанское стандартное время)
1–3 участника — 250 долларов США/участник
4–9 участников — 199 долларов США/участник
10+ участников — 179 долларов США за участника
Зарегистрируйтесь сегодня @ https://walkingtree.tech/building-responsive-adaptive-ui-using-sencha-extjs6/
Резюме
В этой статье объясняется семантика открытых инструментов, представленных в последней версии Ext JS. В продолжение этого следует следующая статья «Создание приложения Ext JS 6.6 с использованием открытых инструментов», в которой мы создаем проект узла Ext JS 6.6, чтобы получить целостный подход к новому способу написания приложений Ext JS.
источник: Ext JS 6.6 и Open Tooling