Как Microsoft делала Live

Специалист из Microsoft, Scott Isaacs, набрался опыта в процессе разработки Live.com и поделился такими соображениями:

1. Контролируйте кол-во соединений с web-сервером

AJAX довольно прожорлив в плане конектов сам по себе. Если вы строите динамический интерфейс в стиле gmail, то «дергать» сервер приходится постоянно чтобы иметь актуальные данные на клиенте.

Скотт, также столкнулся с проблемой проверки кэша для картинки, которая была вставлена в страницу динамически. IE проверяет кэш для такой картинки каждый раз при её появлении на экране. Поэтому рекомендуется загрузить картинки в IE перед тем как их использовать. приблизитльно так:
<script>
preload_images(‘img1.gif’,'img1.gif’)
function preload_images(){
for (var x=0; x<preload_images.arguments.length; x++){
imar[x] = new Image();
imar[x].src = ‘img/’+preload_images.arguments[x];
}
}
</script>
2. Избегайте использования XML на клиенте

Браузеры тяжело разбираются с XML-ем в javascript-e. Поэтому без лишней необходимости с большими xml-ями лучше на клиенте не работать. На серверной стороне live.com RSS каналы хранятся в нормализированном виде (судя по всему в базе), на клиент передается лента в JSON формате.
Для сравнения приводится время обработки 150кб RSS канала на клиенте: в XML – 400ms, в JSON – 15ms.

3. Контент надо кэшировать

Content-expiration надо ставить на все, за исключением данных, которые обновляются ежесекундно.
Очень важное замечание, но скорее как дополнение к первому пункту.

4. Разбивайте процесс загрузки приложения на модули

Для крупных AJAX приложений процесс загрузки модулей необходимо разделять и выполнять по необходимости.
Изначально загружаются только базовые бибилотеки, затем в случае необходимости модули Drag-n-Drop, затем RSS-библиотеки и т.д.
Действитльно правильный подход, помнится был где-то органайзер в стиле web2, который грузил два мегабайта внутренних JS-библиотек прежде чем показать окно регистрации.

5. Старайтесь не генерировать html на сервере.

Первичные шаблоны html-я могут быть загружены на первых этапах, но в дальнейшем их наполнение необходимо производить на основе мета-данных полученных через xmlhttp.

В дополнение к авторским пунктам:

---

6. Не забывайте о gzip, но и не увлекайтесь им.JS библиотеки и СSS очень полезно сжать gzip-ом и поставить разумный content-expiration.
Если вы придерживаетесь пункта 5 и у вас презентационный уровень представлен в виде HTML, а наполнение происходит данными из xmlhttp запросов, то HTML-шаблоны также имеет смысл сжать gzip-ом.
Сжатие динамических данных только излишне нагрузит процессор.

7. Обозначте понятие midia-хоста.

При планировании архитектуры вынесите медиа-сервер для хранения фото, видео или пользовательских файлов на отдельный хост. Так, чтобы загрузка у вас была не из «/video-store/myvideo.avi», а с «http://media1.mydomain.com/video-store/myvideo.avi»

8. Забудте о всех нормальных формах баз данных:) ознакомьтесь с идей Lucene.

Увеличение быстродействия сервера в условиях WEB2 – склейка картинок

Большенство программистов не особо задумываются о производительности добавляя еще пару смайликов в web-интерфейс.
Вот небольшой анализ процесса загрузки трех смайлов:

Поодиночная загрузка картинок:

• все картинки в сумме занимают 601+604+607 = 1812 байт
• с заголовками ответов сервера: 850+853+856=2559 байт
• плюс заголовки get-запросов на загрузку картинок: 578*3=1734 байт
• количество конектов к серверу: 3

И того ваш сервер принял 1734 байт и отдал 2559, при этом браузер открыл три сессии, а ваш сервер все отработал.

Теперь склеиваем три смайла в один gif и смотрим статистику.

Загрузка склееной картинки:

• чистый размер картинки 960 байт
• с заголовком ответа: 1209 байт
• заголовок get-запроса: 587 байт
• количество конектов к серверу: 1

Три картинки конечно роли не играют, но когда ваше решение содержит сотни графичесих элементов и вопрос контроля конектов, которые тратятся даже на проверку актуальности кэша, стоит очень серьезно, данный подход может пригодится. (коннектов то мало осталось, все уже на AJAX ушли:) )
Разрезать картинку на три состовляющих на клиенте особо труда не составляет, все делается через CSS:

<style type=»text/css»>
img.smiles{
width:16px;
height:16px;
background: url(combined_smiles.gif);
}
img.s1 {background-position:-32}
img.s2 {background-position:-16}
img.s3 {background-position:-0}
</style>

<img src=»px.gif» class=»smiles s1″ />
<img src=»px.gif» class=»smiles s2″ />
<img src=»px.gif» class=»smiles s3″ />

px.gif – наш старый добрый прозрачный пискель размером в 10 раз меньше чем заголовки сервера.

Вот на такие мысли натолкнула заметка Combine Images to Save HTTP Requests

Nimbuzz.com – почти Skype для мобилок

Полезный сервис обнаружил на MobileCrunch.

По задумке авторов приложение должно предоставить двум миллиардам пользователей мобильных сетей возможность общения с одним миллиардом пользователей Интернета и наоборот. Вот что я обнаружил, загрузив J2ME приложение на свою Nokia 6670…

Nimbuzz поддерживает, дословно, – voice, presense, messaging.

Как выяснилось Voice это именно voice, а не voip – позвонить можно любому контакту, но только по стандартной схеме – кнопочка call активизирует функцию набора номера в телефоне и платить вам прейдется по тарифам оператора. Можно поставить крест на страницу восторгов автора статьи на MobileCrunch по поводу INCREDIBLE SOUND QUALITY. (в принципе и не стоило ожидать большего от j2me приложения).

После регистрации вы получаете внутренний ник – @nimbazz, и можете добавить себе в контакты знакомых из того же пространства, либо из Google Talk-а, MSN-a, в будущем Yahoo и Jabber-a

Messaging реализован отлично, без лишних наворотов, всё очень аскетично, понятно и удобно. Сообщения можно отправлять как в режиме чата так и sms-like. Приложение можно отставить открытым или убрать на задний план, оставив включенным, при этом входящие сообщения будут напоминать о себе звонком или виброй (на ваше усмотрение). В таком состоянии трафика должно потребялется совсем немного, так что, как заменитель SMS приложение может быть полезным (ограничения длины сообщения я кстати не обнаружил, но это скорее зависит от конкретной модели телефона)

Presense – Nimbuzz действительно отображает кто сейчас в онлайне, а кто нет. Очивидная по необходимости функция в компьютерных месенджерах, здесь оказывается также полезна.

Трафик – в наших условиях самый важный вопрос. На авторизацию было потрачено 4кб трафика, по два кб на входящее и исходящее направления. Сколько кушает месенджер в спящем режиме пока не проверял, оставляю на ночь включенным – если утром не поседею, то отмечюсь

Из замеченных недостатков:

• нет версии под PocketPC
• нет анкеты пользователя, возможности найти друзей по интересам, региону и т.д. соц.сеть отсутсвует напрочь
• нет русской версии
• на сайте разработчика не работает ни форум, ни вики, ни блог. Контактов обнаружить не удалось

p.s. кто будет тестить, мой ник – gik. пишите

утро: за ночь приложение накачало аж 1,5кб! Интересно было бы посмотреть как изменится это число будь у меня 50 контактов, а не один. Также стоит заметить, что большенство телефонов не может одновремено держать GPRS и голосовой каналы, поэтому при разговоре GPRS связь прерывается, а значит приложение будет авторизироваться на сервере заново. Т.е. каждый звонок, вам будет нагонять дополнительно пару кб.

news2.ru – каким его хотелось бы видеть

Думаю всем читателям моего блога знаком сайт news2.ru , наш аналог digg.com.

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

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

Предложение такое:

• для зарегистрированных пользователей выводить на первой странице только те новости, которые им не были оценены.
• исходя из первого пункта добавить возможность поставить нейтральную и отрицательную оценку новости. (и возможность поставит ьнейтральную оценку всем новостям, если меня например месяц не было и читать всё желания нет)
• для анонимных пользователй показывать новости добавленные за день в порядке убывания их приоритета. (фильтр «важные новости сегодня»). Для авторизированных пользователй предоставить возможность посмотреть на первую страницу как анонимным
• добавить еще несколько фильтров: важные новости за вчера, за неделю, за месяц, за всё время.

p.s. желающим поддержать данное мнение прошу голосовать тут

Toodoo, скорее мертв чем скорее WEB2

Пару дней назад зарегистрировался в Toodoo, русскоязычном проекте, ставящем цель объединить посетителей различных ресурсов.

По заявлению авторов, в Toodoo вы можете:

• Завести свой профиль, указав множество параметров, по которым тебя смогут найти другие участники toodoo
• Получить удобный инструмент идентификации на десятках популярных сайтов
• Найти интересных собеседников в профессиональной сфере
• Возобновить утерянные связи с однокашниками
• Познакомиться с такими же, как ты читателями твоих любимых сайтов

Ничто из перечисленного меня особо не заинтересовало, но регистрацию всё таки прошел и даже оставил запись о своем блоге – http://toodoo.ru/blog/3344/index

В плане реализации сайт довольно неплох – дизайн приятен, сайт рисуется быстро, очень в меру AJAX-а. Общая оценка реализации – пять балов. Из недочетов отмечу:

• не работающие переходы по страницам при навигации в разделе «Сайты и Блоги»
• отсутствие раздела помощи, точнее, его присутствие в виде пустой ссылки.
• раздражающая beta в логотипе сайт (когда же разум к нам вернется)

На этом хорошие новости заканчиваются и начинаются плохие.

• Найти для себя, вроде как продвинутого сетянина, причин пользоваться проектом я не нашел.
• Разумной бизнес модели, кроме как банальной рекламы, для которой нужна ой какая немаленькая аудитория, тоже нет – ни у меня, ни, как выяснилось, у авторов:

Лично вы получаете ли вы какую-нибудь прибыль от этого проекта? - Этот вопрос приходится слышать часто в Рунете: «Откуда выбудете брать деньги? На чем здесь зарабатывать? Какие бюджеты сюда вложены?» Почему-то для многих людей ключевым является фактор денег: кто платит и откуда будет прибыль. Для нас на данный момент более важно реализовать свои замыслы по построению работающей социальной модели на основании нашего уникального подхода по объединению людей. Вопрос получения прибыли сейчас неуместен. Все члены нашей команды понимают: даже гениальная идея умирает при плохой реализации. Мы приложим все усилия для того, чтобы как раз реализация была на должном уровне. Если этого удастся достичь – прибыль придет. Но в ближайшей перспективе мы считаем разговоры о ней просто неэтичными.

из интервью Александра Толкачева (internet.ru) и Виктора Захарченко (директор по развитию toodoo)

Желаю команде toodoo удачи в нахождении бизнес модели и пересмотре функционала сайта.

Считаем Google PageRank на пальцах

Обнаружил у господина lasto.com занимательную математику по расчету PageRank-а

Смысл математики такой – если вы ставите 101-у ссылку со страниц с Google PageRank равным 5-ти, то результирующий PageRank будет 6.

Значение N может быть и нулевым, как пишет автор:

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

Интересно, как рабоют ранки у Yahoo и Microsoft-овского MSN-а. У первого, помнится, был WebRank,который они похоже закопали, по крайней мере для публики.

Архитектура Yahoo, Wikipedia, LiveJournal

Еще несколько ссылок на презентации и статьи об архитектуре и оптимизации производительности больших систем.

Yahoo
http://public.yahoo.com/%7Eradwin/ – Как устроен Yahoo и как настроить yApache для обработки 4 миллиардов показов страниц в сутки

Wikipedia
http://meta.wikimedia.org/wiki/PHP_caching_and_optimization – кэширование и оптимизация
http://meta.wikimedia.org/wiki/Cache_strategy – стратегия кэширования
http://meta.wikimedia.org/wiki/Wikimedia_servers – на чем работает wikipedia

LiveJournal
http://community.livejournal.com/lj_backend/ – как развивался ЖЖ (до ноября 2004)

Предыдущий набор ссылок oб архитектуре Flickr, LiveJorunal и оптимизации различных компонент системы – Производительность в WEB2

Del.icio.us – несколько рекомендаций по использованию

Если у вас еще нет акаунта на del.icio.us, то самое время его создать. А для тех кто знаком с системой предлагаю несколько рекомендаций по работе с ней:

1. Не вешайте синонимичные тэги на один линк, потом не разберетесь в каше тегов. Разбейте тэги на группы (bundles)

2. Используйте Inbox – в нем можно определить теги или их логические комбинации.
После настройки inbox-а в нем будут появлятся ссылки других пользователей, соответсвующие выбранным тэгам.

3. Изучите inbox-ы других людей – это может оказаться полезным.
Прямой ссылки вы не найдете – просто замените в url-e свой ник на чужой, например так:
http://del.icio.us/inbox/gik или поищите в google «inurl:del.icio.us/inbox/»

4. При формировании inbox-а старайтесь не писать всеобьемлющих тэгов типа web - получите кучу муссора. Делайте узкие выборки, например:

• mysql+performance
• apache+performance
• web2+audio
• web2+music

их предварительно можно проверить – http://del.icio.us/tags/web2+audio

чем более ограничивающие выборки вы настроите, тем больше вы сэкономите времени в дальнейшем.

5. Изучайте историю появления закладок в del.icio.us, сделать это несложно: http://del.icio.us/url/

6. Добавляйте интересных людей в network, это позволит видеть все добавленные ими закладки.
Или в inbox, c ограничение по тэгам, что намного полезнее.

7. Если у вас сфоримрована сеть (network) пользователей с общими интересами, при добавлении новой закладки используйте тэг for:login для отправки ссылки пользователю. Ссылка будет доступна у него в разделе links for you, который имет rss.

8. Пересмотрите список del.icio.us A-to-Z by Functions. Возможно найдете что-то полезное среди 150 утилит и сайтов-компаньонов.

Буду рад услышать ваши замечание и предложения.

Вы также можете добавить автора статьи в свою сеть del.icio.us, если найдете мои закладки интересными:)

Выделяем цветом папки в Windows

Не WEB2, но MustHave!

Чего не хватало папкам в стандартном навигаторе Windows, так это цвета.

Скриншота будет достаточно, качаем, всего 900kb

Google Talk – оптимизируем поиск под ваши музыкальные вкусы

Новая версия Google Talk включает в себя:

1. пересылку файлов между пользователями
2. голосовую почту
3. «музыкальный статус», информирующий собеседников о музыку в вашх ушах

Если с первыми двумя функциями всё понятно, то музыкальный статус является совсем новой фишкой этого месенджера. По заявлению разработчика, Google Talk мониторит состояние музыкального плеера пользователя и отправляет информацию о прослушанных композициях на сервера Google, как это делают плагины для Last.fm.

На основе собранной информации Google планирует предсотавлять персонализированный поиск музыки для своих пользователей. История прослушивания музыки будет также досутпна в разделе Search History.

«Signing up for Google Music Trends will also enable Personalized Search, so that your music listening history will be available to you from your Search History page.»

Рейтинги популярных композиций уже досутпны на сайте гугла – http://www.google.com/trends/music