Разработка фреймворка для создания оптимизированной клиентской части веб-сайтов компаний

Основной причиной существования клиентских фреймворков в сфере
веб-разработки является проблема синхронизации внутреннего состояния
приложения с пользовательским интерфейсом [1]. Это происходит по причине
того, что веб-приложения становятся на один уровень с нативными
приложениями по степени интерактивности [2].
Регулярным алгоритмом обновления пользовательского интерфейса
является цепочка действий, которая состоит из того, чтобы отреагировать на
пользовательские действия, затем получить доступ к элементу объектной модели
документа (DOM), который следует обновить и изменить его значение.
Аналогичные действия требуются на любой пользовательский ввод [2]. Однако
частое обращение к программному интерфейсу (API) DOM делают код менее
читабельным и понятным, а также требует особой внимательности к
оптимизации работы с данным API, так как обращение к DOM-дереву
ресурсоемкий процесс. Поэтому в последнее время набрали популярность
клиентские веб-фреймворки которые позволяют облегчить, оптимизировать и
ускорить разработку веб-приложений [2].
Однако актуальные клиентские веб-фреймворки в лице Angular, React и
Vue, которые занимают основную часть сферы, не лишены своих недостатков
[1]. Наиболее важный из недостатков следует выделить то, что наиболее
популярные решения, то есть фреймворки Angular и React, изначально созданы
для собственных нужд компаний Google и Facebook, а не для сообщества веб-
разработчиков, и их развитие направлено на покрытие необходимости компаний
и полностью ими контролируется [3]. Открытость и доступность данных
решений помогают данным компаниям за счет привлечения свободных
разработчиков, создающих вспомогательные инструменты и развивать
экосистему своего продукта. Однако у данных продуктов не стоит цель решения
проблем сторонних разработчиков. Из чего вытекают риски изменения условий
использования, несоответствия задач у компаний и сообщества, монополизация
рынка ведущая, к извлечению выгоды и т.п [4]. Также следует отметить риски,
несущие в себе большой размер кодовой базы самих фреймворков в случае
использовании их сторонними компаниями. В данном случае особо важным
является вопрос надежности, безопасности и конфиденциальности. Риски в
сфере безопасности связаны c большим числом зависимостей от сторонних
проектов, как прямых, так и косвенных. Так согласно информации, изложенной
в исследовании «State of Open Source Security— 2020», занимающейся
сканированием исходного кода на уязвимости компании Snyk, более 75%
уязвимостей безопасности для клиентских веб-приложений находятся в
огромном числе непрямых зависимостей проекта [5]. Помимо этого, данный
факт создает проблемы и в сфере надежности, так как надежность проекта
начинает зависеть от огромного числа сторонних библиотек и действий
большого числа разработчиков. Также, большую кодовую базу актуальных
клиентских веб-фреймворков невозможно исследовать на уязвимости, несмотря
на открытость исходного кода. Вместе с этим большие проекты невозможно
тонко настроить под специфические нужды и невозможно самостоятельно
поддерживать актуальность фреймворка. Большая кодовая база фреймворков не
позволяет самому фреймворку быстро реагировать на изменение технологий и
стандартов. Особо отметить следует сложность, а иногда невозможность
обновления кодовой базы приложения при выходе новых версий фреймворков
[6].
В следствии вышеуказанных проблем, а также отсутствия в данной сфере
разработки отечественных аналогов целью данной работы является создание
клиентского веб-фреймворка, который обеспечит базовый необходимый
функционал для синхронизации пользовательского интерфейса и состояния веб-
приложения. Разрабатываемый фреймворк создается без большого числа
сторонних зависимостей, а также с применением объектно-ориентированного
подхода (ООП) к разработке с использованием языка TypeScript. Данное
решение позволит абстрагироваться от задач обновления пользовательского
интерфейса и особенностей клиентской разработки, что сделает клиентскую
разработку доступнее для разработчиков со знаниями ООП языков, позволит
оптимизировать бюджет компаний, не привлекая специалистов со
специфичными знаниями. Для выполнения цели были поставлены задачи:
• Изучение архитектуры существующих фреймворков.
• Изучение проблем современных клиентских веб-фреймворков.
• Выбор методологий и паттернов проектирования для отдельных
модулей.
• Создание фреймворка для веб-приложений.
• Создание демонстрационного приложения
• Исследование производительности созданного фреймворка
1. Анализ предметной области.