Общие сведения о сторонних библиотеках. jQuery. Lodash. Yandex Maps API. Youtube iFrame API. CKEditor. Highcharts.

1. Использование сторонних
библиотек в веб-
приложении
Курс Frontend-разработки на Javascript + Vue/React

2. Сторонние библиотеки
• Сторонними библиотеками (3D-party libs) называются чужие
скрипты, которые подключаются к приложению и позволяют
использовать определенный функционал.
• Сторонние библиотеки условно делятся на две группы: библиотеки
функций и предметные библиотеки.

3. Зачем используются 3D-party libs
• Основная причина – сокращение времени разработки, дабы не
писать уже существующий функционал.
• Кроме того, сторонние библиотеки более устойчивые – они уже
были протестированы и, значит, работают без багов и их не нужно
тестировать самому.
• Некоторые библиотеки используются для объединения и
упрощения написания кода для разных сред исполнения.

4. Как работать с 3D-party lib
• Найти гайд по установке
• Внедрить библиотеку в свой проект и запустить базовый пример
• Сверяясь с документацией, решить свою задачу
• В случае проблем - обращаться к документации или сообществу

5. Библиотека jQuery
• jQuery – библиотека, инкапсулирующая большинство DOM-
операций в более простой, лаконичный синтаксис
• Использовалась, когда в разных браузерах были разные подходы к
решению одних и тех же DOM-задач и позволяла одинаково делать
всё в разных браузерах.
• Сегодня в новых проектах используется редко – отдаётся
предпочтение стандартным возможностям DOM.

6. jQuery
• Среди возможностей jQuery:
• Интеллектуальные выборки в дереве, навигация по дереву
• Установка обработчиков событий
• Расширенная работа со стилями
• Простые AJAX-запросы
• Анимации
• Ценность jQuery в том числе в том, что для неё сегодня существует
множество сторонних плагинов, позволяющих внедрить специфичные
элементы интерфейса в своё приложение (Bootstrap, slick, jQuery UI, …)
• jQuery не задействует возможности ES6+ и потому плохо интегрируется в
новый код.

7. jQuery
• Сайт библиотеки - https://jquery.com/
• Документация по возможностям - https://api.jquery.com/

8. Задача 1.
• Создать JSON-документ со списком вопросов. У каждого вопроса
есть текст вопроса и текст ответа.
• Загрузить JSON-документ на страницу, вывести на базе этого
набора данных аккордеон и настроить его работоспособность.
• Переписать код приложения под использование jQuery, jQuery +
сторонний плагин.

9. Lodash (underscore)
• Lodash – библиотека для унификации механизмов обработки
данных в Javascript.
• Используется для работы с массивами, объектами, числами,
строками и т.д., предлагает множество дополнительных способов
обработки массивов без необходимости писать свои методы
обхода.
• Для написания читабельного кода желательно применять lodash,
поскольку её методы наглядно говорят о том, какие
преобразования осуществляются с данными.

10. Lodash (underscore)
• Сайт библиотеки - https://lodash.com/
• Документация по возможностям - https://lodash.com/docs/

11. Задача 2.

12. Yandex Maps API
• Yandex Maps API – открытая технология Яндекса, позволяющая
встраивать карту в веб-приложение и далее работать с картой.
• Аналог от Google – Google Maps API, но на данный момент
технологии Яндекс не требуют привязки банковской карты и
использование карт бесплатно (в ограниченных объемах)

13. Возможности API карт
• Установка карты в приложение
• Управление картой (масштаб, тип и т.д.)
• Нанесение на карту объектов и установка взаимодействия с ними
• Отображение сферических панорам
• Геокодинг

14. Yandex Maps API
• Сайт проекта - https://tech.yandex.ru/maps/
• Документация по библиотеке -
https://tech.yandex.ru/maps/jsapi/doc/2.1/quick-start/index-docpage/

15. Задача 3.
• Загрузить из сервиса https://www.openbrewerydb.org/ список
пивоварен, разместить их на карте мира и при клике на пивоварню
– рядом с картой отображать детали выбранной пивоварни.

16. Youtube API
• Youtube API – библиотека для работы со встраиваемыми в веб-
приложение видеофреймами из YouTube.
• К возможностям библиотеки относится:
• Управление воспроизведением видео во фрейме
• Получение информации о видео
• Управление очередью воспроизведения видео

17. Youtube iFrame API
• Документация по библиотеке:
https://developers.google.com/youtube/iframe_api_reference

18. Задача 4.
• Загрузить в приложение видеофрейм с YouTube и создать на
странице кнопку для воспроизведения/паузы, а также список
закладок для видео.

19. CKEditor
• CKEditor – плагин для установки в приложение редактора
форматируемого текста.
• Среди существующих – он самый популярный, условно бесплатный
и обладает наибольшим перечнем возможностей.
• Сайт плагина: https://ckeditor.com/ , http://cdn.ckeditor.com/
• Ссылка на документацию:
https://ckeditor.com/docs/ckeditor4/latest/guide/index.html

20. Задача 5.
• Создать приложение, которое позволит создавать, удалять
документы и редактировать каждый как форматированный текст.
Сохранять перечень документов в локальное хранилище.

21. Highcharts
• Highcharts – библиотека для отрисовки в приложении
разнообразных графиков, диаграмм и прочих элементов
графической визуализации данных.
• На сегодняшний день в этой библиотеке собрано больше всего
различных возможностей по отображению графиков и эта
библиотека наиболее часто применяется для подобных целей.
• Сайт проекта - https://www.highcharts.com/
• Документация - https://www.highcharts.com/docs/index

22. Задача 6.
• Создать форму для построения графика полинома 4-й степени.
Самостоятельно:
• Создать JSON-документ со списком стран. У каждой страны –
название и численность за 2010 и 2015 год. Загрузить эти данные и
построить гистограмму численности для каждой страны (два
столбика для каждой страны).

23. Подходы к работе с
библиотеками
• Существует два источника информации по решению проблем со
сторонними библиотеками:
• Официальная документация
• Часто в документации перечисляются самые популярные пути использования
библиотеки и начинать работу с библиотекой всегда стоит с документации.
• Google и сообщества
• При работе с библиотекой всегда рано или поздно появляются проблемы,
решение которых не описано в основной документации. В таких случаях стоит
гуглить.
• Эффективный запрос в Google выглядит так: « [название библиотеки]
[название модуля библиотеки] [описание проблемы]» на английском языке
(кроме Yandex Maps API).