En

JazzTeam Software Development Company

Agile Java Development

Мануал по часто используемым front-end инструментам

Вступление

Данный мануал содержит описание полезных и наиболее часто используемых front-end инструментов. Вы сможете узнать процесс установки инструментов и основные моменты работы с ними.

NPM

Введение

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

Пакетный менеджер – программное обеспечение, позволяющее управлять процессом установки, удаления, настройки и обновления различных компонентов.

Добавление сторонних библиотек с использованием пакетного менеджера заменяется парой команд в терминале.

Одним из пакетных менеджеров используемых во frontend-проектах является NPM.

npm (Node.js Package Manager) — менеджер пакетов, входящий в состав Node.js. Используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на этот сервер.

Официальный сайт

https://www.npmjs.com/

Начало работы

Для установки npm необходимо скачать и установить NodeJS (npm будет автоматически установлен): https://nodejs.org/en/.

Использование

Установка пакетов

Пакетом называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент. Для установки пакета с помощью npm необходимо выполнить следующую команду:

 npm install <название пакета>

Для глобальной установки пакета используется ключ -g. После установки пакет вместе с исходниками находится в директории node_modules/.

Проверка версии

Чтобы проверить текущую версию npm, необходимо выполнить команду:

 npm -v

Настройка файла конфигурации

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет.

Пример файла package.json:

Для создания файла package.json необходимо выполнить команду:

 npm init

После этого необходимо будет заполнить некоторую информацию о проекте.

В данном файле будут храниться наименования и версии всех пакетов необходимых в проекте. С помощью команды npm install можно подгрузить все пакеты, которые находятся в package.json.

Для установки некоторого пакета и автоматическим сохранением в файле package.json используется команда:

 npm install<название пакета> --save-dev

Альтернативы

Yarn

https://yarnpkg.com/lang/en/ – официальный сайт

Yarn – это менеджер пакетов, совместно созданный Facebook, Google, Exponent и Tilde. Его целью является решение целого ряда проблем, с которыми столкнулись разработчики при использовании npm, а именно:

Bower

https://bower.io/ – официальный сайт

Bower – это система управления пакетами на стороне клиента. Ее работа зависит от Node.js и npm. Система Bower предназначена для управления компонентами, содержащие HTML, CSS, JavaScript, шрифты и изображения. Содержит функции поиска, загрузки и установки пакетов. Для управления пакетами в Bower служит манифестный файл bower.json.

GulpJS

Введение

Сборка является неотъемлемой частью любого frontend-проекта. Для этой задачи используются таск-менеджеры.

Таск-менеджер – приложение, которое служит для автоматизации сборки проекта и других рутинных задач, которые приходится выполнять в процессе разработки (минификация кода, конкатенация, запуск unit-тестов и многое другое). Для этого разработчик, создав task-файл, прописывает инструкцию (таск), каким образом следует выполнить ту или иную задачу. В итоге упрощается разработка проекта.

Одним из таких таск-менеджеров является GulpJS.

GulpJS – таск-менеджер для автоматического выполнения часто используемых задач, написанный на языке программирования JavaScript. Программное обеспечение использует командную строку для запуска задач, определенных в файле Gulpfile. Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.

GulpJS отличается от других таск-менеджеров большей наглядностью и простотой. Также он является наиболее быстрым сборщиком проектов.

На 2017-й год насчитывается около 3000 плагинов для Gulp.

Официальный сайт

http://gulpjs.com/

Особенности

Начало работы

В системе должны быть установлены NodeJS и npm.

Шаг 1: Для глобальной установки GulpJS с помощью пакетного менеджера npm необходимо выполнить команду:

 npm install gulp -g

Шаг 2: Необходимо установить его для приложения:

 npm install --save-dev gulp

Шаг 3: Далее нужно создать файл gulpfile.js в корне вашего проекта (в этом файле будут прописываться сборочные таски).

Подгрузка дополнительных плагинов, которые могут быть использованы при сборке проекта, также осуществляется c помощью npm следующей командой:

 npm install <название плагина> --save-dev

Все установленные плагины находятся в директории node_modules/.

Пример gulpfile.js

Использование

Шаг 1: Сперва нужно подключить gulp к проекту. Для этого в файле gulpfile.js прописываем строчку:

var gulp = require('gulp');

Функция require() позволяет подключать плагины из папки node_modules/.

Шаг 2: С помощью переменной gulp можно создавать таски для сборки проекта:

gulp.task('exampleTask', function() {});

Метод task принимает два параметра: название и функцию с телом таски.
Данную инструкцию уже можно выполнить. Для этого в консоли прописываем:

gulp exampleTask

Основные команды

Ниже представлен более сложный пример инструкции:

gulp.task('exampleTask', function () {
return gulp.src('source-files')
.pipe(plugin())
.pipe(gulp.dest('folder'));
});

Разберем команды использованные в данном примере:

Маски файлов

Функция gulp.src принимает в качестве параметра маску файлов. Примеры масок:

Потоки

Использование потоков является одним из важнейших преимуществ GulpJS.

Потоки позволяют передать некоторые данные последовательно от одной функции к другой, каждая из которых выполняет некоторые действия с этими данными.

Функция gulp.src() создает поток объектов, представляющих файлы, которые переданы ей в качестве параметра. Далее с помощью функций pipe выстраивается конвейер, по которому передается поток объектов. Данной функции в качестве параметра передается плагин, который каким-либо способом обрабатывает поток объектов.

Ниже представлен пример использования потоков. В данном примере использованы сторонние плагины gulp-jshint и gulp-concat, которые необходимо установить и подключить в gulpfile.js.

Функция gulp.src берет файлы по маске js/*.js. Запускает JSHint и выводит результат. Затем производит конкатенацию файлов и в конце сохраняет полученный файл после конкатенации в директории dist/.

gulp.task('example', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(concat('index.js'))
.pipe(gulp.dest('dist'));
});

Сторонние плагины

Рассмотрим пример использования сторонних плагинов. Для этого создадим инструкцию конкатенации файлов js:

Шаг 1: Сперва необходимо подключить плагин командой require:

var concat = require('gulp-concat');

Шаг 2: Затем нужно создать таск для конкатенации файлов с расширением js находящихся в директории js/ . В конце получившийся файл помещается в директорию dist/js:

gulp.task('concat', function () {
 return gulp.src('js/*.js')
   .pipe(concat('index.js')) 
   .pipe(gulp.dest('dist/js'));
});

Шаг 3: Далее можно выполнить данный таск в консоли:

gulp concat

Дополнительная информация

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

gulp.task('build', ['html', 'css']);

Кроме этого существует метод watch для наблюдения изменений в файлах:

gulp.watch('маска файлов для наблюдения', ['название таски, которая выполнится при изменении файлов']);

В gulpfile.js можно создать дефолтный таск:

gulp.task('default', ['task1', 'task2']);

Данный таск запускается из консоли командой:

gulp

Основные плагины

С полным списком Gulp-плагинов вы можете ознакомиться по ссылке:
http://gulpjs.com/plugins/

Альтернативы

GruntJS

https://gruntjs.com/ – официальный сайт

GruntJS – таск-менеджер, как и GulpJS, позволяющий автоматизировать рутинные задачи для разработчика, связанные с минификацией кода, анализом качества кода, тестированием и многим другим.

Различия

В отличие от GulpJS, GruntJS не использует потоковую передачу данных. Gruntfile (файл настроек в GruntJS) менее читабелен и его сложнее воспринимать в отличие от файла настроек в GulpJS. Вдобавок GruntJS является более медленным сборщиком, чем Gulp.

Jasmine

Введение

Тестирование является составляющей частью разработки любого проекта. Данный процесс позволяет проверить правильность кода и выявить ситуации, в которых поведение программы является неправильным, нежелательным или не соответствующим спецификации. Каждый из нас, в процессе разработки, время от времени проверяет, правильно ли работает та или иная функция. Самый простой способ – это запустить и посмотреть результат. Однако такой подход – очень несовершенный способ проверки кода. В результате можно упустить какой-нибудь момент, который приведет к неправильной работе, а соответственно к ошибке. Для предупреждения таких ситуаций используется автоматизированное тестирование.

Автоматизированное тестирование – процесс написания тестов отдельно от кода, с возможностью в любой момент запустить их и проверить все важные случаи использования.

Одним из инструментов тестирования JavaScript кода является Jasmine.

Jasmine – это BDD фреймворк для тестирования JavaScript кода, позаимствовавший многие черты из RSpec.

Официальный сайт

https://jasmine.github.io/

Особенности

Начало работы

Для подключения Jasmine к своему проекту необходимо скачать библиотеку и подключить следующие файлы на главную HTML-страницу:

Синхронизация с инструментами

GulpJS

Jasmine можно подключить в сборку проекта на GulpJS:

Шаг 1: Вначале необходимо установить плагин gulp-jasmine:

 npm install gulp-jasmine --save-dev

Шаг 2: Затем нужно подключить плагин в файле сборки и создать таску запуска тестов:

var jasmine = require('gulp-jasmine');
gulp.task('jasmine', function() {
gulp.src('файлы тестов')
.pipe(jasmine());
});

KarmaJS

(в конце статьи подробнее описана работа с этим инструментом)

Для подключения Jasmine в KarmaJS необходимо:

Шаг 1: Установить KarmaJS:

 npm install -g karma-cli

Шаг 2: Установить плагины необходимые для запуска тестов написанных на Jasmine в браузерах Chrome и PhantomJS:

 npm install karma-jasmine karma-chrome-launcher karma-phantomjs-launcher

Шаг 3: Установить сам Jasmine:

 npm install -g jasmine

Шаг 4: В файле конфигурации karma подключить плагины и прописать путь к тестам.

Использование

Ключевые слова

Функции describe и it принимают два параметра: первый – название, второй – функция с кодом.

Пример базового теста

describe(“название набора тестов”, function () {
it(“название теста”, function () {
expect(2+2).toBe(4);
});
});

Методы проверки результатов

 Дополнительные функции

Во избежание копирования какой-либо логики, используемой в тестах, используются функции beforeEach/afterEach. Они запускаются соответственно перед/после каждого теста.

Для тестирования асинхронных вызовов используются функции runs и waitsFor.

describe(“пример тестирования асинхронного вызова”, function () {
var result = 0;
function asyncFunc() {
setTimeout(function() { result = result + 2; }, 500);
}
it(“название теста”, function () {
runs(function () {
asyncFunc();
});
waitsFor(function() { return result === 2; }, “значение не изменилось”, 2000);
});
});

Наблюдатели

Возможность отслеживания вызова функций производится с помощью spyOn. Данная функция принимает два параметра: первый – объект, для которого осуществляется вызов функции, второй – имя функции, которую необходимо отслеживать.

if(“проверка вызова функции”, function () {
spyOn(exampleObject, 'exampleFunction');
exampleObject.exampleFunction();
expect(exampleObject.exampleFunction).toHaveBeenCalled();
});

При тестировании с использованием spyOn можно отслеживать количество вызовов, их параметры и каждый вызов в отдельности.

Для создания функции без реализации можно воспользоваться createSpy. Функция createSpy принимает имя функции для идентификации.

if(“проверка вызова функции”, function () {
var example = createSpy('EXAMPLE');
example(“param1”, “param2”);
expect(example.identify).toHaveBeenCalledWith(“param1”, “param2”);
expect(example.calls.length).toEqual(1);
});

Создание объекта заглушки осуществляется с помощью createSpyObj. В качестве параметров createSpyObj принимает имя объекта и массив строк, являющийся списком методов объекта заглушки.

Пример теста написанного на Jasmine

Альтернативы

Mocha

https://mochajs.org/ – официальный сайт

Mocha – фреймворк для тестирования JavaScript кода, работающий на основе node.js. Поддерживает работу с браузерами, асинхронное тестирование. Предоставляет информацию о степени покрытия тестами.

Chai

http://chaijs.com/ – официальный сайт

Chai – BDD/TDD библиотека утверждений для NodeJS и браузера, которая может быть легко использована в паре с любым фреймворком тестирования JavaScript.

QUnit

http://qunitjs.com/ – официальный сайт

QUnit – библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на javascript. Официальный инструмент для тестирования jQuery.

ZombieJS

http://zombie.js.org/ – официальный сайт

ZombieJS – легковесный фреймворк для тестирования JavaScript кода. Имитирует поведение браузера.

SinonJS

http://sinonjs.org/ – официальный сайт

SinonJS – mock-библиотека для JavaScript, с которой можно работать в любом тестовом фреймворке.

JSDoc

Введение

Необходимым этапом при создании хорошего продукта является его документирование.

Документирование кода – это процесс описания функций, классов, методов с помощью определенных комментариев в коде, которые позволят в дальнейшем упростить работу с ним, как автору, так и другим программистам.

Хорошо документированный проект поможет новым разработчикам лучше и быстрее разобраться в проекте и усилит контроль над отдельными его частями.

Одним из инструментов документирования JavaScript кода является JSDoc.

JSDoc – генератор документации из комментариев исходного кода на JavaScript. Синтаксис JSDoc похож на Javadoc, который используется для документирования Java кода. Сгенерированная документация имеет формат HTML.

Официальный сайт

http://usejsdoc.org/

Использование

Генерация документации производится из комментариев исходного кода.

Комментарии начинаются со слэша две звездочки (/**) и заканчивается звездочкой-слэшем (*/). Каждая новая строка в комментарии начинается со звездочки (*).

Текст описания документации помещается в данную конструкцию.

Внутри комментария могут быть использованы теги. Каждый тег начинается с @.

Теги

Пример

/**
* @description Функция суммирования двух чисел.
* @param {number} a - Первое число.
* @param {number} b - Второе число.
* @return {number}
*/
function sum(a, b) {
return a + b;
}

Генерация документации

Генерацию документации можно произвести с помощью GulpJS. Для этого используется плагин gulp-jsdoc. Установка плагина:

 npm install gulp-jsdoc --save-dev

Следующим шагом является подключение плагина в gulpfile.js:

var jsdoc = require('gulp-jsdoc');

Создадим таск для генерации документации:

gulp.task('jsdoc', function () {
gulp.src('source-files')
.pipe(jsdoc(<название директории, в которую будет сгенерирована документация>));
});

Альтернативы

YUIDoc

http://yui.github.io/yuidoc/ – официальный сайт

YUIDoc – NodeJS-приложение, которое используется для генерации документации из комментариев с синтаксисом похожим на Javadoc и Doxygen. Данный инструмент позволяет:

Docco

http://jashkenas.github.io/docco/ – официальный сайт

Docco – генератор документации написанный на Literate CoffeeScript. Документация Docco представляет из себя html страницу, в которой представлен как исходный код так и текст описания.

KarmaJS

Введение

Существует много различных инструментов, которые упрощают разработку проекта. Для упрощения процесса тестирования проекта используется такая утилита как KarmaJS.

KarmaJS – консольный инструмент, который позволяет запускать тесты в различных браузерах, отслеживает изменения исходного кода, автоматически запуская тесты, и позволяет определить процент покрытия.

Официальный сайт

https://karma-runner.github.io/1.0/index.html

Особенности

Начало работы

Для начала работы с KarmaJS нам необходимо установить, некоторые зависимости. Установка происходит с помощью пакетного менеджера npm. Он также необходим для работы с KarmaJS.

Шаг 1: Сперва необходимо установить KarmaJS:

 npm install -g karma-cli

Шаг 2: Далее нужно установить эмулятор для тестирования JavaScript кода:

 npm install -g phantomjs

Шаг 3: Затем необходимо установить необходимые плагины для запуска тестов в необходимых браузерах. Существуют следующие плагины для автоматического открытия браузеров при запуске тестов:

karma-chrome-launcher – Chrome;
karma-firefox-launcher – Mozilla Firefox;
karma-safari-launcher – Safari.

Использование

Шаг 1: Для организации запуска тестов на KarmaJS, необходимо сперва создать конфигурационный файл. Для этого выполняется команда:

karma init

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

Шаг 2: Далее нужно настроить файл конфигурации.

Параметры

Степень покрытия тестами

Для добавления отображения степени покрытия тестами в KarmaJS необходимо:

Шаг 1: В параметр preprocessors добавить маску файлов, степень которых необходимо проверить:

preprocessors: {
'js/*.js': ['coverage']
}

Шаг 2: Добавить в параметр reporters строку ‘coverage’.

Шаг 3: Добавить параметры степени покрытия тестами:

coverageReporter: {
type: 'text'
}

Проверка качества кода

Для проверки качества кода в KarmaJS необходимо:

Шаг 1: Установить зависимость jshint:

 npm install jshint --save-dev

Шаг 2: В параметр preprocessors добавить маску файлов, качество кода которых необходимо проверить:

preprocessors: {
'js/*.js': ['jshint']
}

Пример файла karma.conf.js

Запуск тестов

karma start/code>

Подробная информация по запуску тестов при помощи KarmaJS и Jasmine по ссылке:
https://jazzteam.org/ru/technical-articles/karma-and-jasmine-test-running-manual/

, , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *