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