Кейс: разработка социальной сети на node.js и nosql

Unface.me - высоконагруженная анонимная социальная сеть, которую мы разработали на основе стека MEN [Часть 2 - MVC frontend и интересные фишки]

Как мы разрабатывали анонимную социальную сеть - изображение Xe6r11U на https://digitaldali.ru

О проекте

В первой части статьи мы рассказывали о высоконагруженном бекенде социальной сети unface.me. Давайте теперь продолжим и поделимся тем, как устроена фронтенд часть проекта, некоторыми интересными фишками и результатами, которых нам удалось добиться.

Фронтенд технологии

Итак, на дворе 2013 год: трава зеленая, небо голубое, AngularJS еще на ранней стадии развития, ReactJS еще не стал open source, но все же нам очень хотелось сделать проект быстрым и модульным. Поскольку наш бекенд был реализован как RESTful API, проблем с этим не должно было возникнуть. После недолгих раздумий наш выбор ключевой технологии пал на Backbone.js, которая как раз стала стабильной и стремительно набирала популярность.

В результате на фронтенде у нас была такая конфигурация:

  • Backbone.js для route’ов и MVC структуры
  • Underscore templates для шаблонов
  • Require.js для модульности
  • i18njs для переводов
  • Grunt для сборки все этого

Схема очень удобная, простая и стандартная. Каждый функциональный элемент вынесен в отдельный модуль, который загружается по необходимости сразу со всеми шаблонами, далее из API получаются необходимые данные, которые переносятся в Backbone модели, после чего отрисовываются View.

Реализация мгновенных сообщений

Проблема: реализация быстрых мгновенных уведомлений

Поскольку наше приложение по своей сути представляло SPA, то есть не требовало перезагрузки страницы, а только подгрузку данных по AJAX, то уведомления и сообщения в диалогах тоже должны были быть такими. Сначала мы думали о реализации их при помощи сокетов, так как у нас был серьезный опыт работы с socket.io, но в результате отказались от этой идеи, поскольку она очень сильно текла (например, этот баг будоражил умы многих node.js разработчиков долгое время), не позволяла качественно масштабироваться и для полноценного использования требовала дополнительной прослойки в виде HAProxy, поскольку Nginx научился проксировать websocket только в версии 1.3.13.

В итоге мы решили остановится на простой и надежной схеме Long Pooling, которая, кстати, до сих пор отлично работает у ВКонтакте. Node.js без проблем держит большое количество запросов, их легко балансировать между API серверами через Nginx, решение работает во всех браузерах, а по скорости работы совершенно не уступает сокетам. Под мгновенные уведомления мы выделили отдельные процессы в рамках каждого инстанса, которые занимались только ими.

Как мы разрабатывали анонимную социальную сеть - изображение reverse-ajax-long-polling на https://digitaldali.ru

 

SEO friendly SPA приложения

Проблема: индексация поисковыми роботами сайта на javascript

В нашей структуре все было отлично — работает быстро, код структурирован, разрабатывать новые функции легко и приятно. Кроме одного момента: поисковые роботы не очень-то хорошо умеют работать с javascript. Ну то есть умеют, но плохо (кстати Google даже научился немного индексировать Flash). Для решения этой проблемы нам пришлось прибегнуть к хитрому хаку.

  • На уровне Nginx определяем по headers поисковых роботов
  • Запросы от них проксируем на отдельный процесс
  • При помощи PhantomJS загружаем необходимую страницу, выполняем все скрипты и отдаем ее роботу
  • Робот получает полностью загруженную страницу и правильно индексирует сайт

На сегодняшний день проблема с индексацией SPA сайтов сходит на нет, но все же такое решение может быть применимо.

Как мы разрабатывали анонимную социальную сеть - изображение javascript-seo-using-phantomjs на https://digitaldali.ru

Генерация имен в чате

Проблема: генерация уникальных имен в чате

Одной из интересных функций социальной сети unface.me являются анонимные чаты. Пользователи имеют возможность создать чат-комнату со своими друзьями, или присоединиться к одной из публичных и общаться там анонимно на любые темы. Нам хотелось, чтобы у каждого пользователя был свой уникальный никнейм, но чтобы пользователю не нужно было каждый раз его выдумывать. Мы пришли к такому решению:

Создали список из 100 прилагательных и 100 существительных и случайным образом генерировали из них пары. В результате получилось 10000 веселых и запоминающиеся никнеймов для чата.

Например:

  • Пыльный Фёрби
  • Мэр помидоркович
  • Белый Бот
  • Кислый призрак

Такие никнеймы очень понравились пользователям и способствовали непринужденному анонимному общению.

Как мы разрабатывали анонимную социальную сеть - изображение vei3cOV на https://digitaldali.ru

Выводы

Мы разработали быстрый и удобный в расширении фронтенд, который оценили как пользователи, так и независимые эксперты. Прочитать больше про наш подход к разработке крупных проектов и оценить стоимость разработки вашей идеи можно на нашем сайте.

Понравился кейс?

Поделись с друзьями и получи скидку 5%!

Нужна помощь в реализации подобного проекта?

Обращайтесь к нам, мы поможем!
Введите ваши контактные данные и наш менеджер проектов перезвонит Вам
и поможет разработать лучшее решение для вашей задачи.

Как мы разрабатывали анонимную социальную сеть - изображение tfluv на https://digitaldali.ru
Головин Антон
Менеджер проектов