Я хочу рассказать вам о наборе виджетов пользовательского интерфейса 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.