Стартап-студия «Начало»
  • Блог
  • Портфолио
  • Авторизация
    • Войти через сторонний сервис
    • ВКонтакте
    • Facebook
    • Github
  • Регистрация

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

Список рубрик
PHP статьи, которые поднимут скилл Javascript статьи, которые будут полезны Статьи о мобильной разработке на Java HTML & CSS статьи о вёрстке SEO & SMM оптимизация, продвижение и маркетинг Системы управления содержимым сайта Веб-сервисы, обзор и разработка Социальные сети и всё, что с ними связано Статьи о фреймворках Последние новости из мира информационных технологий Раздел обучения программированию Стартапы, гениальные и успешные проекты Бизнес-идеи или как заработать Статьи о веб-дизайне, которые приведут к успеху Администрирование сервера и установка программ Юмор айтишников Разное Битрикс
Чат для пользователей

Nogard7491 30.04.2017 07:34

да, причём быстро

MadisoN 30.04.2017 06:38

сайт набирает популярность :)

Nogard7491 16.04.2017 10:59

Новое достижение! ТИЦ сайта стал равен десяти.

nail361 09.06.2016 14:02

ok

Nogard7491 01.06.2016 09:46

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

Живая статистика
Посетителей онлайн:
Посетителей за сутки:
Посетителей за месяц:
Просмотров за час:
Просмотров за сутки:
  • Главная
  • Блог
  • Javascript статьи, которые будут полезны
  • Нужные библиотеки для frontend-разработки на javascript
Поделиться записью в соц. сетях
Рейтинг записи
frontend-библиотеки

Перечень полезных frontend-библиотек

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

Автор: Nogard7491
Опубликовано: 13 апреля 2017
  • Главная
  • Блог
  • Javascript статьи, которые будут полезны
  • Нужные библиотеки для frontend-разработки на javascript
  • Назад
  • Вперёд
Комментарии к статье

saimon3191 16.04.2017 09:04

норм библиотеки, я Lodash и Moment использовал

Nogard7491 22.04.2017 05:00

в moment.js нужно обязательно следить, чтобы не все языки подключились разом, а только нужные!

Nogard7491 22.04.2017 05:00

если этого не сделать, то вес библиотеки будет значительным, так что имейте ввиду

Портал-студия разработки сайтов и мобильных приложений Стартап-студия «Начало» © 2021

Счётчики
Управление аккаунтом Авторизация
Регистрация
Фрилансеры занят Nogard7491
занят nail361
свободен MadisoN
свободен mega
Основные разделы сайта Главная страница
Статьи про веб-разработку
Наши работы
Карта сайта
Полезные ресурсы Хабрахабр
Контент-агентство TexTerra
Анализ сайта PR-CY
PHP-фреймворк Laravel
API Bitrix
Сайт фриланса