Ext JS 6.6 и Open Tooling

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 в приложении
• Использование сторонних библиотек в приложении

Требования

• Узел 8+
• НПМ 4+
• Ява 8

Получение доступа к репозиторию 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/момент»

}

],

Онлайн-обучение — создание отзывчивого и адаптивного пользовательского интерфейса с использованием Sencha ExtJS 6

ПРОДОЛЖИТЕЛЬНОСТЬ

ДАТА: 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