Как мы делали новую версию Выходного
В пятницу, когда у большинства короткий рабочий день, мы вышли из офиса около 9 вечера уставшие и довольные — запустили новую версию Выходного — сайта, созданного ответить жителям Днепропетровска на вопросы, где вкусно перекусить, на каком концерте попрыгать, чем заняться в свободное время, какие есть интересные выставки и еще много-много всего.
Работа длилась около месяца, с разной интенсивностью, но последние 3 дня мы с утра до ночи только Выходным и занимались. Это первая версия, которую не стыдно показать, и про которую не стыдно рассказать, к тому же, в процессе мы многому научились, поэтому я решил написать длинный и исчерпывающий пост о разных аспектах разработки этого проекта. Надеюсь, кому-то это будет интересно.
Дизайн
Данные Гугл аналитики говорили о высоком проценте отказа (bounce rate) предыдущей версии. Простое общение со знакомыми и друзьями дало нам понять, что большинство просто не понимают, как этим сайтом пользоваться, и о чём он. Длинный список из названий событий, заведений и советов вперемешку, непонятно по какому принципу отсортированных, сбивал с толку:
Так что первостепенная задача состояла в том, чтобы сделать интерфейс более доступным, при этом расширив функционал. Над этим мы работали долго и упорно. У меня ушло 20 минут на то, чтобы отобрать десяток разных картинок из всего процесса и раскидать их в Индизайне:
Когда мы остановились на определённом варианте, я отрисовал иконки и всякую, как выражаются в Бюро, интерфейсную фурнитуру:
И вот что у нас получилось:
Скриншоты я вставил для понта, лучше перейти на сайт и посмотреть на всё живьём. Между разными типами записей (заведения, советы, события) появились разделители, краткое описание стало ёмким, все заведения обзавелись отдельными статическими страницами — короче, всё стало понятнее и информативнее. Для того чтобы объяснить, что же это всё-таки за сайт, мы нарисовали промо-блок, который в будущем превратится в полноценный тур по сайту:
Вёрстка
Статья про media queries на Хабре.
Вёрстка, ясное дело, блочная, резиновая, более-менее семантичная. Всё хорошо работает в современных браузерах и ИЕ7. Благодаря media queries, вёрстка тянется от 320 до 1600 пикселей и сайт отлично себя чувствует на экране широкоформатного монитора, планшетника, телефона или в айфрейме приложения Вконтакте:
Отдельно хочу продемонстрировать свои идеально тянущиеся табы. Расстояния между текстом в пунктах меню одинаковое во всей полосе, названия из двух слов переносятся в две строки, сами табы тоже прыгают на следующую строчку, когда место становится мало:
Джаваскрипт
Из библиотек используется jQuery для манипуляций с DOM, хороший шаблонизатор EJS и fancybox. Дальше самописное ядро и набор хелперов, каждый класс в своём файле; данные берутся с сервера в json, фильтруются по параметрам, которые задаёт пользователь (в этой версии только теги, дальше будет время работы, плюшки типа вайфая и т.д.) и рендерятся. Очень упростил отладку мой самописный callstack, с помощью которого я всегда вижу очередь запущенных функций, к какому классу они принадлежат, с какими аргументами были вызваны, и кто их вызвал:
Я далеко не профи в javascript-программировании, поэтому допустил несколько ошибок в проектировании, которые понял достаточно поздно, так что исправлять придётся уже в следующих версиях:
- Сейчас у меня есть главный класс, который раздаёт указания всем остальным, координирует их работу, к примеру, после клика по какой-то ссылке. Мне видится более удобным вариант, когда главный класс не знает о конкретных функциях других классов, а только содержит информацию о текущем состоянии приложения, даёт возможность другим классам получить эту информацию и инициирует события, которые потом уже подхватывают другие классы.
- Сейчас любые действия происходят по клику на определённые ссылки,
кнопки и т.д. В будущем хочу, чтобы все эти клики всего лишь меняли
составляющие урла и текущее состояние приложения, а затем, при
изменении, происходила обработка
location.hashи выдача нужного содержания. Возможно, для этого буду пользоваться backbone.js. Это позволит сделать код более гибким и, что важно, ползать по истории кнопками вперёд-назад в браузере и делать закладки (сейчас они не работают).
Карта
Режим карты на сайте — наша гордость. После сравнения Google Maps с Яндекс.Картами, я переписал почти готовый код, написанный под API Яндекса, под API Гугла. Я не в курсе на счёт Яндекса, но если пользоваться последней версией API Гугла, то карты работают под iOs и Android.
Вполне возможно, что в будущем мы сделаем переключалку между Яндексом и Гуглом, т.к. в некоторых районах детализация последнего оставляет желать лучшего.
Что происходит на сервере?
Серверная часть написана на php с использованием Codeigniter. Помимо основных задач, серверная часть выполняет еще много полезных вещей:
- Типографит тексты, которые пишут наши редакторы. Лебедевский типограф обращается к серверу и поэтому когда он падает, падает и наш сайт. Было такое всего один раз, но осадок остался, поэтому мы перешли на типограф Евгения Муравьёва — он хороший, гибкий, выполняется на сервере и никуда наружу не стучится, к тому же он умеет делать классные штуки, например, размечать ссылки, обрамлять текст параграфами и следить за пробелами до и после знаков препинания.
- Обрезает и шарпит картинки
- Кроном раз в час считает лайки Вконтаке для всех записей (нужно для ранжирования).
- Генерирует sitemap.xml с ссылками на статические страницы.
Оптимизация
Предыдущая версия очень медленно работала, поэтому мы сделали многое, чтобы в этот раз всё летало:
- Саша избавился от join'ов в запросах и это стало основным фактором ускорения. Время, необходимое на выдачу json'a уменьшилось приблизительно в 1000 раз.
- Настроили gzip сжатие для всего, что выдаётся php. Еще не настроили gzip для статики.
- Графику для сайта — в спрайты, насколько это возможно.
- Все js- и css-файлы готовятся для продакшена с помощью RequireJs — остаётся всего три файла: цсс-ка, jquery+requireJs и все наши классы и функции в одном js-файле.
Вот и всё
Я не считаю, что мы перевернули горы, но результат мне уже начинает нравится. Дальше в планах у нас улучшение механизма ранжирования, расписание сеансов в кино, умный поиск и, естественно, информация, информация, информация =)
В работе нам много помогали советами Саша Раковец и Саша Зайцев, за что им большое спасибо =)
Хочу замечания, комментарии, напутствующие слова, возмущения — всякого =)
