Я хочу рассказать вам о наборе виджетов пользовательского интерфейса JavaScript, доступных на GitHub, над которыми я и моя команда работаем ежедневно. В частности, моя цель — помочь вам:

Сначала немного предыстории. DevExtreme — это набор компонентов пользовательского интерфейса для фронтенд-разработки, который уже много лет существует как коммерческий продукт. Недавно мы перенесли библиотеку на GitHub и теперь она доступна для бесплатного использования (если у вас некоммерческий проект).

В этой статье вы узнаете, как изменять исходники и создавать собственные сборки DevExtreme! Я сосредоточусь на репозитории GitHub, структуре исходного кода, методах, инструментах и ​​практиках.

Давайте начнем. Команды ниже предназначены для Ubuntu, но вы можете использовать любую операционную систему. Разветвите общедоступный репозиторий github.com/DevExpress/DevExtreme, затем создайте клон своего форка:

$ git clone https://github.com/<YOUR GITHUB ACCOUNT>/DevExtreme $ cd DevExtreme/

Для сборки DevExtreme и запуска тестов установите следующие SDK:
- Node (рекомендуется LTS-версия).
— Последняя версия .NET Core SDK (некоторые части инструментария написаны в .NET).
- Docker (Community Edition, не требуется, но очень полезен для модульного тестирования).

Следующая команда помогает проверить правильность установки:

$ node -v && dotnet --version && which docker

Чтобы восстановить пакеты, а также инициализировать среду сборки и тестирования, выполните:

$ npm i $ npm run build

При первом запуске этих команд восстановление пакета может занять несколько дополнительных минут. Последующие запуски выполняются быстрее.

Работа с исходным кодом

Давайте совершим краткий обзор исходного кода DevExtreme.

Самый важный каталог — js, где находится большая часть кода библиотеки. Кодовая база JavaScript хорошо структурирована и разбита на сотни отдельных модулей. Использование модулей вместе с линтерами упрощает работу с кодом в таком редакторе, как Visual Studio Code:

Пакет lint-staged интегрируется с Git и предотвращает коммит JS-файлов при наличии ошибок:

Каталоги иконки, изображения и стили содержат исходники для тем DevExtreme; Для стилей используется препроцессор LESS. В каталоге build находится экосистема сборки, в частности, задачи Gulp, которые были запущены как часть команды npm run build. Кстати, результаты сборки хранятся в каталоге artifacts (который не находится под управлением исходного кода). Каталог playground содержит простые стандартные HTML-страницы для экспериментов.

Второе по значимости место — тестирование, которому посвящен следующий раздел.

Модульные тесты

DevExtreme использует собственную среду модульного тестирования, основанную на QUnit. Чтобы запустить тестовый графический интерфейс, запустите сценарий тестирования/запуска (testing/launch.cmd в Windows).

В тестовом коде используется загрузчик модулей SystemJS, поэтому нет необходимости вызывать команду сборки после внесения изменений.

Докер и Drone CLI

Вышеупомянутое тестовое веб-приложение предназначено для использования во время разработки и исправления ошибок; можно запускать и отлаживать отдельные тестовые случаи, наборы и категории. Я рекомендую использовать образы Docker, потому что они позволяют запускать все ваши тесты, не блокируя ваш браузер. Мы сделали специализированные образы Docker devextreme-build, которые доступны на Docker Hub. Чтобы запустить их, выполните:

$ sudo docker run --rm -ti -e TARGET=test -v REPO_PATH:/devextreme \ devexpress/devextreme-build:TAG ./docker-ci.sh

REPO_PATH следует заменить на абсолютный путь к репозиторию. TAG должен соответствовать текущей ветке выпуска (например, 17_1).

Например, в моем случае на Ubuntu команда такая:

$ sudo docker run --rm -ti -e TARGET=test -v ~/DevExtreme:/devextreme \ devexpress/devextreme-build:17_1 ./docker-ci.sh

Я большой поклонник Docker, и преимущество такого запуска тестов в том, что среда точно соответствует той, что используется в задачах Travis CI. Если вы готовите запрос на включение в репозиторий DevExtreme, этот метод гарантирует, что автоматические проверки GitHub пройдут, если они пройдут на вашем компьютере.

Вместо того, чтобы вводить длинную команду docker run, вы также можете использовать Drone CLI:

$ sudo drone exec --matrix TARGET=test

Пользовательские сборки релизов

Создание артефактов выпуска (то есть с минификацией и очисткой) так же просто, как вызов следующего:

$ npm run build-dist

После его завершения в каталоге «artifacts» вы найдете файлы дистрибутива. Тот же набор файлов, который доступен в официальных пакетах DevExtreme.

Вы можете просматривать исходники на GitHub и создавать сборки с последними исправлениями ошибок и функциями, не дожидаясь официальных выпусков от DevExpress. Вы также можете предложить изменения в продукте, отправив запрос на вытягивание. Это возможно с новой Некоммерческой, неконкурентной лицензией, которая прямо разрешает вносить изменения и распространять модифицированные версии DevExtreme при условии соблюдения других условий EULA.

Я надеюсь, что вы в восторге от DevExtreme так же сильно, как мы любим над ним работать. Мы планируем сделать предварительные сборки, которые позволят вам попробовать новые виджеты и функции. Чтобы получать обновления о нашем прогрессе, вы можете подписаться на официальный репозиторий DevExtreme GitHub, нажав кнопки Звезда / Смотреть.

Спасибо.

Первоначально опубликовано на dzone.com.