NardyClub

“NardyClub” - это крупнейшее в странах СНГ и Европы сообщество любителей и профессиональных игроков в нарды. Проект существует уже более 6 лет, объединяя истинных ценителей древнейшей игры.
Осенью 2016 года из-за хакерской атаки на игровые сервера была полностью заблокирована работа ресурса с частичной утерей данных. Администрацией проекта было принято решение за 6 месяцев возродить проект в виде нового игрового веб-сервиса на современной технологической базе с обновленным дизайном.
Создание сервиса «с нуля» позволило бы реализовать в дополнение к уже имеющемуся новый функционал, создание которого стало возможным лишь с недавним развитием веб-технологий.
Ключевые задачи, которые поставил перед нами Заказчик:
стабильность системы при высоких нагрузках
отказ от устаревших Flash-технологий
восстановление игры при обрыве соединения
возможность параллельных игр
сохранение проверенного годами интерфейса и адаптация его к современным принципам разработки веб-интерфейсов
функционал для проведения партнерских турниров
мощная CRM-система с богатой статистикой и аналитикой
“У нас классный проект и очень большая лояльная аудитория. Но мы понимаем, что проект морально устарел. За 6 лет у нас накопился колоссальный опыт, который бы мы хотели воплотить, но нынешний проект не способен на это. Не говоря уже о том, что Chrome уже даже просто-напросто не поддерживает Flash. Сделайте нам iPhone в мире онлайн-игр, а себе - технологическую изюминку для портфолио!”
Кирилл П.
ПРОЕКТИРОВАНИЕ
И ДИЗАЙН
Основные задачи при проектирование интерфейса:
Учитывая целевую аудиторию, размеры текста и управляющих элементов были увеличены для ускорения обучения пользователя обновлённому интерфейсу.
сохранение десктопного стиля с модальными окнами

новый дизайн с фиксированной шириной страниц

отсутствие поддержки экранов на мобильных устройствах.
Сайт состоит из четырёх основных экранов: окно регистрации/авторизации, страницы со списком игр, страница с игровым полем и страница личного кабинета. Значительная часть функционала скрыта всплывающих окнам, что создаёт ощущение нативного десктопного интерфейса.
Отдельным требованием заказчика было максимальное сохранение стиля изображений игровых досок и фишек, при этом адаптировать их в рамках нового дизайна.
Большое количество функциональных элементов составляло основную проблему при проектировании нового интерфейса. Необходимо было сохранить баланс между новой эстетикой сайта и его юзабилити, опираясь на потребности целевой аудитории. Вследствие этих задач и был выбран чистый, не перегруженный деталями дизайн с крупными элементами.
Наталия Потапова
Одним из требований заказчика являлся отказ от использования Flash-графики для игрового поля.
В качестве более современной альтернативы был выбран стэк технологий HTML5, таких как Drag’n’Drop API для перетаскивая фишек и CSS Animations для анимирования броска кубика.
Для разработки клиентской части было решено использовать стэк JavaScript-библиотеки CanJS 2, что позволило обеспечить мгновенный переход между страницами сайта и разделить весь интерфейс на элементы - независимые компоненты.
В ходе разработки в проект был привнесён ряд функционала, который старая технологическая платформа не позволяла реализовать.
Так появились:
поддержка двух игровых сессий
более подробная статистика о сыгранных партиях
обработка разрывов интернет соединения
компоненты
АРХИТЕКТУРА
Мы глубоко проанализировали нетривиальные потребности клиента. Очень важно было сохранить комфортную для пользователя игру при любом интернет-соединении.
Главные аспекты:
высокая доступность сервисов

минимальные задержки

восстановление состояния игры при внезапных обрывах связи
Мы обеспечили передачу и сохрание большого количества информации в режиме онлайн для обеспечеия плавности и непрерывности игрового процесса.
Постоянное соединение сервера и клиента поддерживает технология WebSocket. Основой серверной части является фреймворк Ruby on Rails, позволивший гибко управлять WebSocket-соединениями и реализовать сложную логику игрового процесса.
В целях увеличения скорости считывания динамической информации об играх было использовано key-value storage Redis, хранящая данные в оперативной памяти. Для хранения информации, не требующей моментального доступа, использована база данных PostgreSQL.
Серверная часть написана на языке Ruby с использованием фреймворка Rails, использование которого позволило нам собрать воедино отдельные части системы и гибко настроить логику их взаимодействия.
Владимир Алёхин
Для обеспечения взаимодействия клиента и сервера в реальном времени была выбрана технология WebSocket, поддерживающая двухстороннее соединение. К сожалению, имплементация WebSocket в виде ActionCable, входящего в состав фреймворка Rails, оказалась довольно медленной и непредсказуемо ведущей себя под большими нагрузками.
Поэтому было решено использовать WebSocket-сервер на Go прослойку в виде гема AnyCable. Это позволило драматически сократить время отклика и избавило от увеличения задержек при масштабировании системы.
Также сервер и клиент используют соединение по протоколу HTTP2. Благодаря этому повысилась отказоустойчивость системы, уменьшилось количество служебной информации, время ее передачи. Само соединение защищено сертификатом SSL, что минимизирует возможность MitM-атаки.
Результатом нашей работы стал качественный и отказоустойчивый игровой веб-сервис, сочетающий в себе целый стэк современных веб-технологий и лаконичный Flat дизайн.
В процессе разработки команда приобрела полезный опыт создания высоконагруженных клиент-серверных веб-сервисов со сложной бизнес-логикой.
Команда
Дмитрий Балашов
Юлиан Тырнов
Потапова Наталия
Владимир Алёхин
Вадим Евдокимов
технологии
Ruby on Rails 5
Redis
WebSocket
ActionCable
CanJS
Webpack
Gulp
PostgreSQL
срок
реализации
подобного проекта
6
Хотите подобный сайт?
Давайте поговорим о вашем проекте:
  • Ru
  • en
  • Ru
  • en