Что такое Data Rich Applications?

Современные браузеры и технологии позволили появиться новому классу веб-приложений — javascript data rich applications, когда обработка больших массивов данных ведется на стороне клиента и при этом объединяется с необычной и сложной визуализацией. Если раньше работа с данными (выборка, фильтрация, сортировка, графическая визуализация) осуществлялась сервером, который отдавал их в готовом виде на компьютер пользователя, то теперь браузер получает данные в необработанном и сжатом виде, а вся обработка идет на стороне конечного юзера.

Практическое применение Data Rich Applications

Само название (пер. «приложения с большим объемом данных») говорит о применении такого подхода в интерфейсах с большим объемом данных, адаптирующихся под задачи конечного пользователя. Хорошим примером такого интерфейса может служить интернет-магазин. По сути каталог товаров — это массив данных. Покупатели сравнивают товары по параметрам, фильтруют каталоги по характеристикам и т.д. В обычном интернет-магазине почти все эти действия — запросы к базе данных. Как правило, интернет-магазин построен по такому принципу: есть шаблоны страниц, которые заполняются данными на стороне сервера, и после получения запроса, сервер производит операции с базой данных, заполняет информацией шаблоны (страницы) и отсылает на сторону клиента. Если каталог небольшой (1-2 тысячи товаров), то это не сильно сказывается на производительности сайта. А если товаров больше 5 000? 10 000? В этом случае разработчики вынуждены хитрить с кешированием, использовать фоновые ajax-запросы для экономии ресурсов и т.д. И это при условии, что на сайте не используется серьезная визуализация — построение инфографики или специальная графическая обработка данных. 

Как в этом случае помогает разработка Data Rich Applications?

Браузер клиента загружает шаблоны всего один раз — когда пользователь открывает страницу сайта. Все остальные действия: выборка по каталогу, фильтрация, сортировка и т.д. — всё это обрабатывается уже на стороне конечного юзера. Если нужны новые данные, то браузер посылает запрос и сервер просто отдает их в «сыром» (raw) виде, а обработка и визуализация ведется уже на клиенте средствами javascript библиотек (Breeze.js, Knockout.js, Angular.js, Underscore.js  и т.п.). Это позволяет обрабатывать данные с колоссальной скоростью и не зависеть от того, на какой системе работает серверная часть сайта: будь то asp.net или php, готовая коробочная CMS или собственные разработки и т.д.

Примеры использования Data Rich Applications

Каталог проектов для архитектурной студии 

сайт архитектурной студии DigitalBakery

Одним из примеров Data Rich Applications является портфолио архитектурной студии Digital Bakery. Проекты сортируются по различным признакам (масштаб, хронология, тип проекта), для отображения используется специфическая математическая модель (диаграмма Вороного и триангуляция Делоне) и при взаимодействиях с интерфейсом используется анимация. Используя шаблон проектирования MVVM и библиотеку Knockout.JS, мы реализовали такой механизм обработки данных, при котором не имеет значения, какая именно математическая модель используется для визуализации и как данные выглядят на серверной стороне. То есть портфолио проектов может выглядеть на сайте так, как нужно: векторная модель диаграммы Вороного, привычные блоки с изображениями проектов или «летающие шарики», например.

Авторизованный b2b интернет-магазин Sinta Gamma

сайт Sinta Gamma

Авторизованный раздел корпоративного сайта бренда Sinta Gamma — это интернет-магазин с более чем 50 000 товарных позиций. Работа с таким объемом данных должна быть удобной не только для тех, у кого есть «толстый» интернет-канал, но и для пользователей с невысокой скоростью Сети, а также для тех, кто использует мобильные устройства. То есть скорость работы каталога должна минимально зависеть от мощности сервера и скорости соединения. Поэтому мы разработали магазин с помощью data rich application. Шаблон проектирования MVVM плюс Angular.js и Underscore.js. В итоге, запросы к базе данных практически ничего не «весят» (2-3 Kb) и выборка по 10-20 тысячам позиций занимает всего ~15-20 ms. Более того, такой подход позволяет гибко управлять интерфейсами проекта и легко добавлять необходимые изменения под меняющиеся запросы клиентов.

Будущее веб-разработки и Data Rich Applications

Что это дает конечным пользователям? Такой подход позволяет создавать гибкие, практичные, высокоскоростные и необычные решения пользовательских интерфейсов, отдельных интерактивных элементов или сайтов, полностью выполненных на таких технологиях. Это серьезный этап развития веб-приложений, формирующий новый user experience, а значит, позволяющий брендам и компаниям более эффективно находить общий язык со своими потребителями.

Подписаться на рассылку