Описание библиотек, фреймворков, технологий, использованных на проекте RSLang

Библиотеки:

1. CanvasJS

Пример графика:

• В бесплатной (trial) версии присутствуют водяные знаки и их можно убрать через свойство в API только в платной (commercial) версии
• Вполне можно создавать самостоятельные и разнообразные стили для графиков, но, судя по документации, тут есть большие ограничения, когда хочется сделать что-то больше чем поменять цвет надписей, жирность шрифта, расположения по вертикали/горизонтали и шрифта (то есть, мы лично, не нашли возможности стилизовать засечки)
• Есть форматтеры, по которым сама библиотека понимает как форматировать строку или же объект с данными (то есть new Date() может быть форматирована как только вашему глазу угодно)
• Библиотека основана на <canvas>
• Нет NPM, только CDN и исходники, которые пришлось адаптировать к eslint, чтобы не выдавались ошибки и предупреждения

Вот как легко был реализован наш график

в проекте RSLang с помощью данной библиотеки

initChart(data = {}, shouldRender = true) {
    const fontFamily = 'Montserrat, sans-serif';
    const fontSize = 12;
    const fontWeight = 400;
    const datasetColor = 'rgba(54, 158, 173, 0.7)';

    const axisOptions = {
      labelFontFamily: fontFamily,
      labelFontSize: fontSize,

      titleFontFamily: fontFamily,
      titleFontSize: fontSize + 2,
      titleFontWeight: fontWeight,
    };

    const { title, dataset } = data;

    this.chart = new CanvasJS.Chart('chartContainer', {
      animationEnabled: true,
      zoomEnabled: true,
      culture: 'ru',
      title: {
        text: title,
        padding: 10,
        fontFamily,
        fontSize: 18,
      },
      subtitles: [{
        text: '*график можно приближать и растягивать',
        fontFamily,
        fontSize: 12,
        horizontalAlign: 'right',
        padding: 0,
      }],
      axisX: {
        title: 'По дням',
        valueFormatString: 'D, MMM',
        margin: 0,
        intervalType: 'month',

        ...axisOptions,
      },
      axisY: {
        title: 'Количество изученных слов',
        valueFormatString: '###',
        margin: 10,

        ...axisOptions,
      },
      data: [
        {
          type: 'splineArea',
          padding: 10,
          color: datasetColor,
          markerSize: 3,
          toolTipContent: '{x}<br/>Изучено {y}',
          xValueFormatString: 'D MMMM YYYY, HH:MM',
          yValueFormatString: '#',
          dataPoints: dataset,
        },
      ],
    });

    if (shouldRender) {
      this.chart.render();
    }
  }

2. SwiperJS

Библиотека для быстрого создания сменяющихся слайдов для сайтов

Использовался ранее в работах RSSchool.

• Очень удобный в использовании
• Бесплатный (лицензия MIT)
• Огромное и действительно богатое API и документация
• Есть собственные события, и механизм подписывания на эти события (подобный jQuery .on)
• Есть его пакетная версия (NPM) с EcmaScript Modules, где можно управлять какие части функционала будут загружены на сайт, в отличие от его CDN версии

НО:

• Во время разработки, разработчики данной библиотеки обновили мажорную версию на 6.0.0 и сломали CDN, в связи с чем, пришлось ставить более ранние версии библиотеки через NPM
• Вёрстка самого слайдера порой включает в себя !important и довольно сложно отцентрировать управляющие элементы (стрелки влево/вправо)
• Из-за встроенного автоматического перерисовывания возможны такие баги, когда экран браузера расширился или сузился по высоте/ширине, а Swiper.js остался отрисованным на старых размерах экрана, в связи с чем видны следующие/предыдущие слайды
• Не совсем очевидно, что если разработчик хочет подключить лишь часть функционала, то нужно импортировать ещё и стили .scss с соответствующим названием модуля (то есть, нельзя просто @import 'swiper/swiper.scss' - в нём нет зависимостей кроме как на общие стили и переменные)

3. ProgressBarJS

Простая библиотека для создания красивых, мощных и анимированных полос загрузки.

• Очень проста в использовании
• Анимация выполняется с помощью JavaScript с использованием requestAnimationFrame (метода, который указывает браузеру, что нужно произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации)
• Анимация с помощью JS дает больший контроль над ней и поддерживается во всех основных современных браузерах.
• Легковесная
• Бесплатная (MIT)
• Поддерживается всеми популярными браузерами, включая IE9+
• Есть в NPM варианте

---

Технологии:

1. MPA (Multi Page Application)

Данная методология была использована, чтобы избавиться от роутинга через hash и отслеживания изменения путей на сайте через событие "hashchanged". Также, это позволило использовать возможность Webpack и его плагина HTMLWebpackPlugin, который позволяет собирать различные .html и упаковывать в нужную структуру на сайте и разумно делегировать код благодаря чанкам (кускам кода) на нужную .html страницу, подобно тому, как раньше в 2005-ых годах делали, импортируя явно код на .html страницы, только сейчас - всё это делает Webpack. Весь код, собираемый в bundle был разбит на чанки, согласно заданию множественных точек входа (согласно всё тому же MPA). Так было сделано следующее:

• Путь '/' - точка входа для промо-страницы
• Путь '/main' - путь, доступный только авторизованным пользователям, содержащий основное SPA приложение
• Пути вида '/<название_игры_на_английском>' (напр. '/fillword', '/speakit') - путь, доступный только авторизованным пользователям, содержащий SPA приложения самих мини-игр

2. SPA (Single Page Application)

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

3. Event Emitter (Event Bus) ~ Паттерн "Наблюдатель" ссылка на файл кода в проекте

Всё просто - у нас есть метод subscribe, чтобы подписаться на событие (подобно .addEventListener), у нас есть метод unsubscribe, чтобы отписаться от события (подобно removeEventListener), есть массив/объект хранящий слушатели событий (где ключи - строковое название события, а значения - сами callback функции), добавленные через метод subscribe или on. Событие порождается по аналогии со стандартным Custom Events API, только через метод emit, где указывается какой вид события породить.

Что происходит?

Один компонент подписывается на какое-то событие (к примеру, update), через метод subscribe(), где первым аргументом указывается тип события (update), а вторым - функция-коллбэк, которая будет выполнена при наступлении события. Затем, в ходе работы, другой компонент может быть сделал какую-то работу и хочет, чтобы первый компонент был обновлён. Для этого он посылает событие update через метод emit(), где первым аргументом указывается тип события (update), происходит поиск данного события по ключам в объекте EventBus, и если оно находится, то запускается функция-коллбэк. Таким образом, происходит обновление первого компонента без явного указания ему, чтобы он обновился.

Зачем это нужно?

В первую очередь, чтобы избавиться от бесконечных прокидываний созданных объектов классов (инстансов) внутрь новых объектов (компонентов). Связанность кода повышается вместе со сложностью кода, а также, становится явной проблема доступа вложенных компонент или же модулей к внешним родительским компонентам. Гораздо проще обращаться к каким-бы то ни было компонентам или модулям, просто посылая событие "change" или "update", чтобы подписанные компоненты на изменения могли спокойно узнать, что произошло событие обновления и выполнить свои callback функции, нежели бесконечные цепочки из обращений к родительским элементам this.parent.parent.parent.parent.update()