Разработка frontend в 2015 году существенно отличалась от современных подходов. React тогда был на начальной стадии развития, а динамические сайты были скорее исключением, чем правилом. Статика и фреймворки, подобные jQuery, доминировали на рынке. Рассмотрим разработку на примере Backbone и Marionette.
Технологии 2015 года
В 2015 году для frontend-разработки часто использовались Backbone.js и Marionette.js. Backbone представлял собой мини-фреймворк, впервые внедривший паттерн MVC для пользовательских интерфейсов. Marionette.js был надстройкой над Backbone, упрощавшей разработку интерфейсов. Основой этих технологий были Underscore.js и jQuery.
Настройка проекта
Для работы с Marionette следовало обратиться к официальному сайту marionettejs.com. Документация тогда была менее подробной и интуитивной, чем сейчас. Вместо npm и yarn использовались Bower и RequireJS, что усложняло управление зависимостями. Настройка проекта включала ручное добавление библиотек.
Структура приложения и View
В Marionette View был аналогом современных компонентов. Каждый View представлял собой класс с шаблоном (template), регионами (regions) для рендеринга контента и методами обработки событий. Шаблоны не могли быть простыми строками – требовались специальные функции. Регионы позволяли разделять интерфейс на блоки, упрощая управление и обновление контента.
Работа с шаблонами и данными
Для создания шаблонов использовались специальные функции, а не строковые литералы. Каждый View имел корневой элемент, который нельзя было удалить, только заменить. Регионы определялись селекторами в шаблоне и использовались для рендеринга частей интерфейса. Данные передавались в View через параметры, обрабатываемые внутри класса.
Работа с коллекциями и событиями
Для работы с коллекциями данных использовался Backbone.Collection. Добавление, удаление и обновление элементов коллекции автоматически обновляли интерфейс. Обработка событий осуществлялась через метод events, позволявший назначать обработчики (например, для нажатия на кнопку). Удаление элементов из коллекции требовало осторожности во избежание нежелательных запросов на сервер.
Загрузка данных
Для отображения состояния загрузки данных использовался флаг и специальный шаблон loader. Событие sync коллекции вызывалось после синхронизации с сервером, обновляя интерфейс после загрузки данных.
Разработка frontend в 2015 году на Backbone и Marionette требовала глубокого понимания фреймворков и ручного управления многими аспектами. Современные фреймворки значительно упростили разработку, но изучение старых подходов позволяет оценить прогресс в сфере frontend-разработки. Исходный код проекта доступен по ссылке (ссылка будет добавлена позже).