Новая доска объявлений в Якутске

Представляем вашему вниманию новую доску объявлений Doska.capusta.net!

http://it.icmp.ru/postimages/2555/7414/full/doska.png

Идея создания новой доски объявлений для нашего города возникла давно. Аналогичные сайты, скажем-так, "немножко" отстали в развитии лет эдак на десять - они практически не используют новые фичи браузеров, жутко не оптимизированные, в том числе и для мобильных устройств, грузят over 9000 стилей, скриптов и плагинов для jQuery, чтобы показать красивую карусель с картинками. О дизайне и юзабилити этих сайтов даже говорить не хочется. Исправить эту ситуацию призван наш проект - доска объявлений Doska.capusta.net.
О проекте

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

http://it.icmp.ru/postimages/2555/7414/full/responsive.png

Клиентская сторона

Чтобы обеспечить быструю работу было принято решение написать весь сайт на основе AJAX (точнее AJAJ, т.к. передаются JSON объекты, а не XML) с помощью Backbone. Вся маршрутизация, рендер шаблонов происходит на стороне клиента, а сервер занимается выборкой из базы данных и бизнес-логикой доски объявлений. При открытии сайта фактически грузятся только 2 файла: JS-движок и единый CSS-стиль. Это достигается путем склеивания всех js-файлов (css-файлов) в один файл с последующей минимизацией и статическим gzip-сжатием с помощью GruntJS. Проблема кэширования этих файлов решается с помощью маленького shell-скрипта, который при каждом билде проекта пишет номер последней ревизии git в специальный файл, который потом считывается продакшен-шаблоном и дописывается в конце URL-адресов.
http://doska.capusta.net/dist/release/index.css?v=e71788bfd808fddd1a5140420c4b3cea11dddb8c
http://doska.capusta.net/dist/release/require.js?v=e71788bfd808fddd1a5140420c4b3cea11dddb8c

Это позволяет насильно обновлять файлы у клиентов при следующей загрузке страницы.

Серверная сторона

Серверную сторону обслуживают Nginx в связке с PHP-FPM 5.4. В качестве PHP-фреймворка используется Kohana 3 - это очень удобный и быстрый в освоении HMVC-фреймворк, а его каскадная файловая система позволяет наращивать его функциональность на лету.

База данных

В качестве БД была выбрана MongoDB, т.к., по нашему мнению, документно-ориентированные БД больше подходят для такого рода сайтов. Например, для хранения параметров объявлений в MySQL пришлось бы делать отдельную таблицу и делать связь один-ко-многим, а в MongoDB все параметры любого количества можно хранить в самом документе объявления. Еще одним преимуществом MongoDB является возможность хранения динамических типов данных в поле документа, т.е. можно в поле документа
deleted
можно записать значение
FALSE
а потом при удалении этого документа записать время удаления
MongoDate([timestamp])

В скором времени выйдет 4-ая версия MongoDB, где разработчики анонсировали встроенный полнотекстовый поиск по коллекциям. В данное время на сайте работает своя простая система полнотекстового поиска, которая, увы, не учитывает морфологические варианты слов, например: "машина", "машины", "машину", но мы надеемся, что в будущем реализуем эту возможность.

Послесловие

К сожалению, мы не можем рассказать обо всем, что касается этого проекта, потому что это займет не один и не два поста. Если у вас есть вопросы, просим оставить их в комментариях, мы постараемся ответить.

P.S.

Краткий список использванных технологий и названий open-source проектов:
Nginx, PHP-fpm, Kohana, MongoDB, Memcache, GruntJS, RequireJS, Backbone, Underscore, jQuery, LocalStorage, Git и другие.
  • 06 марта 2013, 16:11
  • PiONeeR
  • просмотров: ~6538
  • рейтинг: ?

Комментарии (54)

Вы - anonymous, войти ?

можно использовать bbcode-теги
[b]жирный текст[/b]
[i]курсив[/i]
[u]underline[/u]
[s]зачеркнутый текст[/s]
[size=20px]размер шрифта[/size]
всякие изменения текста
[left][/left]
[right][/right]
[center][/center]
позиционирование элементов: картинки, текст и т.д
[url][/url]
[email][/email]
внутри тега [url] помещайте ссылки, а внутри [email] адрес электронной почты;
так же [url] можно использовать в виде:
[url=http://example.com]пример[/url],
[url=http://test.ru][img]http://flickr.com/givemeimg.png[/img][/url]
[code][/code]
[quote][/quote]
внутри тега [code] можно помещать программный код (подстветка попытается включиться автоматически); для выделения цитат используйте [quote]
также можно напрямую указать язык [code=cpp]int i;[/code]
[list][/list]
создаем списки, каждый элемент пишется после [*].

Можно указывать маркер - [list=marker].
возможные маркеры 1(decimal), i(lower-roman), I(upper-roman), a(lower-alpha), A(upper-alpha). Примеры:

[list][*]1 элемент[*]2 элемент[*]3 элемент[/list]
[list=1][*]1 элемент[*]2 элемент[*]3 элемент[/list]
[list=A][*]1 элемент[*]2 элемент[*]3 элемент[/list]
[table][/table]
оформляем таблицу, используя внутренние теги [tr] и [td].
[tr] - строка, [td] - поле в строке,
[table=100%] - можно задавать ширину в процентах, по-умолчанию ширина 100%
[td=2] - можно задавать сколько столбцов входит в это поле. Пример:

[table=50%][tr][td]столбец 1[/td][td]столбец 2[/td][/tr][tr][td]значение 1[/td][td]значение 2[/td][/tr][tr][td=2]сразу 2 столбца[/td][/tr][/table]
[img][/img]
тег для вставки фото или картинок, мы любим картинки. Примеры использования:

[img]http://ya.ru/logo.png[/img],
[img=100x100px]http://ya.ru/logo.png[/img]
[img=fullimg.url]thumbimg.url[/img],
Пожалуйста загружайте картинки на наш сайт, либо вставляйте с бекбоновских ресурсов.
[video][/video]
Проигрывает видео, внутрь вставляем ссылки на видео, поддерживается Play.Ykt.Ru(нужно вставить ссылку на страницу с видео) и tv.ykt.ru(нужно вставить ссылку на адрес файла)