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 необходимо выполнить следующую команду:

  1. pm install <название пакета>

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

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

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

  1. pm -v

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

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

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

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

  1. pm init

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

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

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

  1. <em>npm install</em> <название пакета> --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 необходимо выполнить команду:

  1. pm install gulp -g

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

  1. pm install --save-dev gulp

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

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

  1. pm install <название плагина> --save-dev

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

Пример gulpfile.js

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

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

  1. var gulp = require('gulp');

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

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

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

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

  1. gulp exampleTask

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

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

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

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

Маски файлов

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

Потоки

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

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

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

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

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

  1. gulp.task('example', function () {
  2. return gulp.src('js/*.js')
  3. .pipe(jshint())
  4. .pipe(concat('index.js'))
  5. .pipe(gulp.dest('dist'));
  6. });

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

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

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

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

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

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

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

  1. gulp concat

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

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

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

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

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

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

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

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

  1. 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:

  1. pm install gulp-jasmine --save-dev

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

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

KarmaJS

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

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

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

  1. pm install -g karma-cli

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

  1. pm install karma-jasmine karma-chrome-launcher karma-phantomjs-launche

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

  1. pm install -g jasmine

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

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

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

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

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

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

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

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

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

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

  1. describe(“пример тестирования асинхронного вызова”, function () {
  2. var result = 0;
  3. function asyncFunc() {
  4. setTimeout(function() { result = result + 2; }, 500);
  5. }
  6. it(“название теста”, function () {
  7. runs(function () {
  8. asyncFunc();
  9. });
  10. waitsFor(function() { return result === 2; }, “значение не изменилось”, 2000);
  11. });
  12. });

Наблюдатели

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

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

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

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

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

Создание объекта заглушки осуществляется с помощью 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/

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

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

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

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

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

Теги

Пример

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

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

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

  1. pm install gulp-jsdoc --save-dev

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

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

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

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

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

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:

  1. pm install -g karma-cli

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

  1. pm install -g phantomjs

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

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

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

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

  1. karma init

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

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

Параметры

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

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

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

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

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

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

  1. coverageReporter: {
  2. type: 'text'
  3. }

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

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

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

  1. pm install jshint --save-dev

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

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

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

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

  1. 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 *