Тема: РЕАЛИЗАЦИЯ АЛГОРИТМОВ ЭФФЕКТИВНОЙ СИНХРОНИЗАЦИИ СОСТОЯНИЙ ИНТЕРФЕЙСА ВЕБ-ПРИЛОЖЕНИЯ

Фронтенд - клиентская сторона приложения, которая реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него.
Основной задачей фронтенд-разработки является создание эффективного пользовательского интерфейса веб-приложения.
Актуальность темы. На данный момент в мире существует множество JS-фронтенд фреймворков, написанных с использованием различных подходов к проектированию и реализации ПО, обладающих, как сильными, так и слабыми сторонами. Но ещё нет такого фреймворка, который бы мог попробовать объединить их лучшие решения и отбросить недостатки, оставаясь доступным для изучения и удобным в использовании.
Цель работы - создание декларативного JS-фреймворка, реализующего алгоритм эффективной синхронизации состояний интерфейса веб-приложения.
Задачи работы:
• Обеспечить возможность использовать декларативный подход фрон- тенд-разработки
• Реализовать встроенную систему реактивности для мгновенного изменения состояния компонента
• Обеспечить поддержку реализации динамического пользовательского интерфейса
• Соединить в одном решении наиболее эффективные и востребованные современные подходы в разработке клиентской части веб-приложения.
Фронтенд-разработка пережила огромный подъем в последние несколько лет. Сегодня все её составляющие динамично развиваются. JavaScript растёт, как самый используемый язык. Синтаксические дополнения языка и новые функциональные возможности выпускаются ежегодно, начиная с 2015 года.
Сталкиваясь с новым фреймворком или библиотекой, часто возникает потребность переучиваться, чтобы перейти на новое решение, а они появляются довольно часто и большая часть полученного ранее опыта утрачивается. Если изучить принципы работы - опыт и навыки останутся.
С увеличением уровня абстракции сложность использования должна оставаться прежней, но могут возникать трудности в понимании, это объясняется тем, что, используя крупные конструкции, которые хранят сложные механизмы внутри и предоставляют простые способы их использования снаружи, разработчик может не знать их внутренне устройство и это в дальнейшем может привести к негативным последствиям. Негативные последствия могут возникать, потому что, скрывая сложный механизм, они не освобождают от него.
Таким образом, лучший способ освоить любую технологию - это понять её архитектуру, внутреннее устройство. А если понимаешь, значит, можешь сделать сам.
Для корректного отображения интерфейса необходимо определить внутреннее состояние программы и отобразить его как что-то видимое на экране в браузере. Для этого мы передаем набор массивов, чисел, строк, объектов, а в результате получаем дерево текстовых абзацев, форм, ссылок, кнопок и изображений и т.д. Переданный набор, как правило, представлен структурами JavaScript, а полученное дерево - Document Object Model(DOM).
Такой процесс передачи набора данных и их дальнейшая обработка и вывод на экран называется рендерингом. Рендеринг это не что иное, как проекция нашей модели данных на пользовательский интерфейс. При отображении данных мы получаем их DOM (или HTML) представление.
DOM - объектная модель документа. Эта модель является основным инструментом работы и динамических изменений на странице. Согласно DOM модели, документ - это иерархия, дерево. Узел дерева с типом элемент образуется каждым HTML-тегом. Вложенные в него теги становятся дочерними узлами.
Мы можем взаимодействовать с составляющими DOM-дерева (изменять их данные, вставлять новые узлы и удалять) с использованием JavaScript и CSS.
Состояние веб-приложения - это центральное понятие в его архитектуре. Там находится все, от чего могут зависеть остальные компоненты. Обычно состояние приложения представляет собой большую иерархическую структуру, которая в движении, она живая, она постоянно меняется. Обнаружение изменений является наиболее важной частью архитектуры, поскольку оно отвечает за видимую часть, такую как обновления DOM.
На данный момент наиболее востребованные практики отслеживания изменений состояния приложения: алгоритм VirtualDOM - для изменений в отображении интерфейса, transparent functional reactive programming - для синхронизации состояния приложения.
Отслеживание изменений - это механизм, предназначенный для обнаружения изменений в состоянии приложения и отображения обновленного состояния на экране, что гарантирует всегда синхронизированный с внутренним состоянием программы пользовательский интерфейс.
Из этого определения можно сделать вывод, что отслеживание изменений состоит из двух основных частей: обнаружение изменений и рендеринг.
В любом приложении процесс рендеринга получает внутреннее состояние программы и преобразует его в то, что мы видим на экране. Логика выполнения рендеринга не всегда тривиальна, она все же довольно проста.
Все становится намного сложнее, когда мы смешиваем данные, которые со временем меняются. Веб-приложения сегодня являются интерактивными. Это означает, что состояние приложения может измениться в любое время в результате взаимодействия с пользователем или что-то еще происходит в его окружении, это обновляет данные сервера, затем клиент получает обновление.

Купить

В результате работы создан декларативный JS-фреймворк, реализующий алгоритм эффективной синхронизации состояний интерфейса вебприложения. С итоговым кодом реализации можно ознакомиться по ссылке: https://github.com/hactrz/nereact.
Изучен опыт существующих решений и установлены их характерные особенности, преимущества и недостатки.
Реализованы основные концепции, отвечающие требованиям современной веб-разработки. Код покрыт автоматическими тестами и частично задокументирован. Таким образом, цель работы достигнута, поставленные задачи - решены.
Выполненная работа имеет практическую и теоретическую ценность. Полученный рабочий прототип может использоваться в небольших проектах, а так же для изучения внутренней архитектуры и устройства алгоритмов эффективной работы с DOM и реактивным состоянием, приобретения навыков в декларативном программировании и компонентном подходе.

Купить