Нужные библиотеки для frontend-разработки на javascript

Все перечисляемые в статье библиотеки можно загрузить с сайта npmjs.com с помощью пакетного менеджера npm, который идёт в составе программной платформы Node.js.

Управление проектом

npm — менеджер пакетов от Node.js

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

Вместе с Node.js используется менеджер пакетов npm, с помощью которого можно легко управлять пакетами. Для установки пакета достаточно лишь знать его имя.

// пример инициализации файла конфигурации (package.json)
npm init

// пример установки пакета
npm install 

Утилита-демон forever для приложений Node.js

Простой инструмент CLI (Command Line Interface), который служит для обеспечения непрерывного выполнения заданного сценария. Файл со скриптом можно запускать напрямую или с помощью файла конфигурации.

// пример запуска скрипта
forever start app.js

// список доступных команд
forever --help

Gulp — инструмент для сборки веб-проекта

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

// пример задачи объединения javascript файлов в один
gulp.task('scripts', function() {  
    gulp.src(['src/**/*.js'])
        .pipe(concat('dest.js'))
        .pipe(gulp.dest('build'))
});

// пример запуска задачи при изменении любого javascript файла
gulp.watch('src/**', function(event) {  
    gulp.run('scripts');
});

Webpack — один из самых мощных и гибких инструментов для сборки

Программный модуль, основная цель которого состоит в том, чтобы осуществлять модификацию javascript файлов для использования их в браузере, но он также способен преобразовывать, группировать или упаковывать практически любой ресурс. С помощью специальных библиотек (*-loader) можно модифицировать код на лету. Эта особенность позволяет использовать новый стандарт js-кода EcmaScript или писать на языке TypeScript, использовать препроцессоры стилей, осуществлять минификацию кода и многое другое.

Фреймворки и библиотеки для создания реактивных приложений

Vue.js

Vue.js — это прогрессивный фреймворк для создания реактивных frontend-приложений. Используется, вместе с дополнительными библиотеками, для создания сложных одностраничных приложений (SPA, Single-Page Applications).

Для организации маршрутизации приложения используется библиотека vue-router, а для управления состоянием - Vuex.

Перед началом изучения этого фреймворка можно сравнить его с другими.

React

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

Отличительная особенность этой библиотеки - использование JSX (расширение синтаксиса javascript).

AngularJS

Фреймворк с открытым исходным кодом, который использует шаблон MVC. Он расширяем и взаимодействует с другими библиотеками. Любая его особенность может быть заменена в соответствии требованиями проекта.

Ractive.js

Простая в изучении библиотека для разработки динамичных веб-интерфейсов. Из коробки идёт двусторонняя привязка, анимация, поддержка SVG и многое другое.

Прочие библиотеки

jQuery

Самая популярная и простая в изучении библиотека для взаимодействия на HTML из javascript кода. Она помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими, а также предоставляет удобный API для работы с AJAX.

// пример реализации всплытия окна с текстом "упс" при клике на странице
$("body").click(function(event) {
    alert("упс");
});

// пример добавления всем ссылкам на странице класса "test"
$("a").addClass("test");

jQuery UI

Библиотека на основе jQuery, реализующая более 20 плагинов, среди которых есть плагины организующие различное поведение (например перетаскивание или растягивание элементов), более десяти видов виджетов (такие как календарь, диалоговые окна, система вкладок и.т.д) и анимационные эффекты.

Axios

HTTP-клиент на основе Promise для браузера и Node.js. Позволяет выполнять запросы без перезагрузки страницы (AJAX).

Costorage

Библиотека для удобной работы с cookies.

Lostorage

Библиотека для удобной работы с local storage.

Sestorage

Библиотека для удобной работы с session storage.

Библиотека для безопасного открытия нового окна при клике на ссылку

Многие веб-разработчики даже не подозревают, что переход на внешнюю страницу может быть опасен. Если в коде используются ссылки с атрибутом target и значением "_blank", то есть вероятность подмены страницы-источника после осуществления перехода.

К примеру, только что открытая вкладка может поменять свойство window.opener.location, и вместо предыдущей вкладки незаметно загрузить другую страницу. Такая страница может являться копией страницы вашего сайта и если пользователь был невнимателен, то он может ввести свои приватные данные (логин, пароль) на стороннем сайте.

Использование этой библиотеки позволяет ограничить доступ к странице-источнику.

Moment.js

Библиотека для разбора, валидации, манипулирования, отображения даты и времени.

D3

Библиотека для визуализации данных, которая позволяет брать их из любых источников и преобразовать в DOM/SVG/CSS.

Lodash

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