Очень часто при обсуждении нагрузки на сайт упоминаются мистические «онлайн-пользователи», кто это и как их считать?

Я не буду вдаваться в детали, особенно коли в оных не силен, но термин «онлайн-пользователи» зачастую используют для измерения производительности системы которая, по идее, должна что-то говорить заказчику о потенциальных возможностях расширения системы. Для начала, стоит определиться со средним пользователем системы, для этого нам потребуется залезть в Google Analytics и взять пару параметров:

Таким образом, среднестатистический посетитель моего блога просматривает две страницы за две минуты, т.е. 1 обращение в минуту эмитирует одного пользователя. Идём дальше — очередь за контентом. Выбираем самый популярный — «Content» → «Site Content» → «Pages» — и чем больше охват тем лучше:

Таким образом 10 страниц охватывает 60% посещений, лучше этот показатель довести до разумного максимума используя минимумом страниц — это будет наш список подопытных.

Ну на этом всё — мы теперь готовы настроить тестовое окружения для получения правдивых цифр, но что у нас сейчас?

Определить текущую нагрузку на сайт в данной единице измерения можно используя пункт «Audience» → «Overview» (кликаем и смотрим):

Таким образом «онлайн» у меня составляет:

    пользователей в час              ~200
  -------------------------     =  ---------  =   6,66
 60 минут / время пребывания        60 / ~2

Предположим, что проведя нагрузочное тестирование, и получив точку отказа в 100 пользователей я могу сказать, что мой сервер выдержит нагрузку в 15 раз большую нынешней, вот только осталось собрать аудиторию в 45 000 :)

Другие посты на эту тему

• No Related Post

Инструментарий

Хороший мастер работает лишь со своим инструментом, и сильно расстраивается когда оного нет под рукой, так и я — всё своё ношу с собой:

• IDE — PHP Storm
• Менеджер БД — SQLYog
• Всяко-разно — notepad++, putty, winscp…

PHP Storm

IDE решает многие задачи и проблемы, которые постоянно возникают перед разработчиком. Мой выбор остановился на PHP Storm, а до того я успел попробовать Zend Studio, Eclipse, Aptana, NetBeans и еще несколько о которых и не вспомню. Что же хорошего в данной IDE:

• java — т.е. нам практически любая платформа по плечу
• автодополнение — очень адекватное, и приучает к документированию кода
• автосохранение — забудьте про ctrl+s
• автозаливка (FTP/SFTP)
• автозаливка после комита
• исправление ошибок
• поддержка VCS
• рефакторинг
• поиск и замена по файлам – работает просто отлично, и частенько меня выручала
• отличная поддержка HTML/CSS/JS
• Zen coding из коробки (советую таки узнать что это ;)

Но без недостатков не бывает:

• java — т.е. любит память, и IDE приходится время от времени перезапускать — где-то раз в неделю
• цена — сейчас, со скидкой, это $50 (до 27-го ноября)

Отдельно оговорюсь насчет цены — у меня купленная версия, но так же есть Open Source лицензия, ее тоже можно получить, но только надо запастись терпением (как можно догадаться — у меня терпения не хватило). Насчет же NetBeans — задолбал он своей нестабильной работой и такими же обновлениями.

В качестве заключения: мои слова ничего не значат, верьте своим глазам — попробуйте триал, благо целого месяца хватит на распробовать ;)

Кстати, если кому нравится моя тёмная схема для PHP Storm, то её можно забрать с dropbox’a

SQLYog

Для работы с MySQL использую SQLYog, что же в нём такого хорошего:

• автодополнение
• профайлер
• автоформатирование запросов
• синхронизация структуры БД и данных при необходимости
• SSH туннель — если у вас есть SSH, то SQLYog в игре
• HTTP туннель — хотя хватит доступа и к FTP
• отлично работает под wine (по правде говоря есть огрехи, но совсем мелкие)

Ну не без ложки дёгтя:

• цена — от $69, но есть триальная и урезанная фришная версия

Опять же, есть триал — пробуйте, и забудьте про phpMyAdmin как про страшный сон.

Ещё чуть-чуть

Ой, ну дальше дело вкуса:

• Notepad++ — всегда на подхвате, открывает большие файлы, понимает все кодировки, с плагином hex-редактор
• PuTTY — без него никак, (puttygen рулит кстати)
• TotalCmd – файловый менеджер + FTP клиентб недавно вышла 8-ая версия (beta), не купил, жмакаю раз в неделю кнопку с циферкой
• WinScp – SFTP клиент (файловый менеджер over SSH)

Да, я работаю на винде, набор инструментов для Linux и Мас отличается лишь набором дополнительных тулзов…

Фишки PHP и 5.3 в частности

phpDocumentor

Я уже упоминал о крутом автодополнение в IDE, тук вот, чтобы этого добиться необходимо описывать классы, методы и функции используя doc comment’ы:

/**
 * @property integer $id
 * @property string $login
 * ...
 */
class Row
{

}

В результате IDE будет подсказывать нам всё что нужно:

Еще примерчик:

/**
 * @return Users\Row
 */
function getUser()
{
     return Registry::get("user");
}

/* @var Users\Row $user */
$user = Registry::get("user");

В IDE похожий результат:

Кроме бенефитов для IDE есть еще возможность сгенерировать техническую документацию используя PHPDocumentor:

/**
 * <code>
 * $this->getByLoginOrPasswordAndEmail(
 *      'vasya', md5(123456), 'vasya@mail.ru'
 *  )
 * </code>
 */
function getByColumnsFinder()
{
    /*...*/
}

Обернётся в:

Tips & Tricks: Fixme Comment

Заметки на будущее прям в коде:

// TODO: do something with some function
// FIXME: hands
// XXX: may be broken

IDE нынче умные пошли, и все такие заметки соберут до кучи:

Tips & Tricks: о include и require

А вы смотрели что возвращают функции include и require? А если в подключаемом файле используется return?

$config = require 'config.php';

<? // config.php
    return array(
        'DB' => array(...)
    );

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

Tips & Tricks: о фильтрации данных

На дворе уже закат PHP 5.2, а фильтры не используем:

// return string or false
filter_var('bob@example', FILTER_VALIDATE_EMAIL);
filter_var('bob@example.com', FILTER_VALIDATE_EMAIL);

// return string or false
filter_var('http://example.com', FILTER_VALIDATE_URL);

По теме:

• http://www.php.net/manual/en/function.filter-var.php
• http://www.php.net/manual/en/filter.filters.validate.php
• http://www.php.net/manual/en/function.filter-var-array.php

Иногда обработку массива превращают в что-то невообразимое, можно же проще:

  // array of ids
$ids = $Request->getParam("ids");

  // to integer
$ids = array_map("intval", $ids);

  // without zero
$ids = array_filter($ids);

  // unique
$ids = array_unique($ids);

  // prepare for SQL
$idsStr = join(",", $ids);

А бывают ситуации, когда в форме есть несколько submit кнопок, и надо понимать что же было нажато (о да, это плохие формы)

<form>
    ...
    <input type="submit" name="disable" value="Disable selected" />
    <input type="submit" name="enable" value="Enable selected" />
</form>

<?php  // gets current action
$action = current(array_intersect(array_keys(
    $_REQUEST), array('disable', 'enable')
));

Tips & Tricks: glob

Уже везде упоминали функцию glob, но мы всё так же её игнорируем, так что я решил её опять вспомнить:

$controllers = glob('/modules/*/controllers/*.php');

$modules = glob('/modules/*', GLOB_ONLYDIR);

Tips & Tricks: mysqlnd

Если у вас высокопроизводительное приложение, если вам знакомо понятие master и slave, если разруливаете это ручками, то вот оно — прозрение:

// in config
[myapp]
master[]=localhost:/tmp/mysql.sock
slave[]=192.168.2.27:3306

// in sources
$mysqli = new mysqli("myapp", "username", "password", "database");
$pdo = new PDO("mysql:host=myapp;dbname=database", "username", "password");

По теме:

• http://www.php.net/manual/en/book.mysqlnd.php
• Replication and load balancing mysqlnd plugin for all PHP MySQL extensions released

P.S. О, это уже было в … твитере ;)

Reflection

Посмотри на себя в зеркало, в нём ты увидишь и имена методов, и приватные данные, и даже комментарии. Знай и используй с умом!

PHP 5.3

Приведу краткие тезисы по теме новшеств в PHP 5.3 (да, да, жевано-пережевано, но повторить то стоит)

Анонимные функции

Используете jQuery, значит ничего нового тут не увидите:

$ids = array_map(function($el){
    return intval($el);
}, $ids);
  // or
$toInt = function($el){
    return intval($el);
};
$ids = array_map($toInt, $ids);
  // or
$int = $toInt($el);

Замыкания

Смотреть в код до наступления понимания происходящего:

function getTimeout() {
    $el = "15 minutes";

    return function() use ($el){
        return intval($el);
    };
}

$timeOut = getTimeout();
echo $timeOut(); // >> 15

Магический метод __invoke()

Вместо слов, лишь код:

class Row
{
    function __invoke()
    {
        return $this->login;
    }
}

$user = new Users\Row();
$var = $user(); // >> return user login

Namespaces

Про пространство имён не писал лишь ленивый, но я предлагаю простую ассоциацию c файловой системой (спасибо за бэкслеш, ассоциация будет с Windows):

\              << Default namespace - root
\Exception
\StdClass
\Application   << Our namespace - Application
            \Model
                  \User
                  \Group
            \Controller
                  \User

• объявляя namespace — мы добавляем новый класс в иерархию «папок» — cd && mkdir
• говоря use — используем директорию из иерархии (1 или более) — как команда cd
• говоря use as — используем под определенным именем — ln
• всегда можно обращаться идя от корня (абсолютный путь: \Application\Model\Group)

Позднее статическое связывание

Эта непонятная фигня означает, что когда вы наследуете класс от статического, то у вас возникнут проблемы с доступом к статическим методам наследуемого класса, приведу наглядный (я надеюсь) пример:

class Latin
{
     const CHARS = 'abc...';
     static function getChars() {
         return self::CHARS;
     }
}
class French extends Latin
{
    const CHARS = 'aàábc...';
}

echo French::getChars(); // >> abc...

В PHP 5.3 решается просто:

class Latin
{
     const CHARS = 'abc...';
     static function getChars() {
         return static::CHARS; // << static
     }
}
class French extends Latin
{
    const CHARS = 'aàábc...';
}

echo French::getChars(); // >> aàábc...

Почти фреймворк

Ой, велосипед, да на «новых» технологиях, нямочка, зацените-ка контроллер:

namespace Bluz;
return
/**
 * @acl View User Profile
 * @cache 5 minutes
 * @param integer $id
 * @return closure
 */
function($id) use ($bootstrap, $app, $view) {
    /**
     * @var closure $bootstrap
     * @var Application $app
     * @var View $view
     */
     $view->user = $app->getDb()->getRow("...", array($id));
};

• Контроллер — анонимная функция возвращаемая при подключении файла
• Может вернуть что угодно, лишь бы было callable
• Принимает параметры с реквеста, уже отфильтрованнные (описали же в doccomment’e правила)
• Кеширует результат выполнения на 5 минут (опять reflection)
• Acl тут тоже не просто так ;)

Возможно выложим на общее обозрение сие творение, ну когда отшлифуем его ;)

Если что-то позабыл

Позабыл я о небольшом изменении в поведении тернарного оператора «(statement)?(then):(else)», у него появилось мини-сокращение:

echo $var?$var:'nil';
// ? : improvements
echo $var?:'nil';

Что-то оно не очень, можно было сделать лучше (эти примеры не работают!):

echo $var?;
// or
echo isset($var['elem'])?$var['elem'];

Еще «незаслужено» обошёл стороной метки:

// labels
start: echo "start"; goto finish;

echo "never";

finish: echo "finish";

Но наверное вы в курсе:

P.S. Всё это и еще немного больше я обычно рассказываю на лекциях в своём отделе ;)

Другие посты на эту тему

• No Related Post

С текущим списком тем и докладчиков можно ознакомиться на странице.

Событие будет интересно не только тем, кто использует Zend Framework, но и всем веб-разработчикам и PHP программистам в частности.

Место проведения — отель “Казацкий”, г. Киев, ул. Михайловская 1/3 (Площадь Независимости).

Стоимость участия и другая необходимая информация доступна на странице.

Для участия в конференции необходимо пройти регистрацию на странице, а затем произвести оплату из личного кабинета.

Сайт конференции – http://frameworksdays.com/event/zend-framework-day-2011
Наши новости в twitter – http://twitter.com/fwdays
Наша страница в facebook – http://facebook.com/fwdays

Другие посты на эту тему

• Мастер-класс Юры Артюха
• Мастер-класс по Sphinx
• Конференция ZFConf 2011
• ZFConf Ukraine
• Анонс мастер-классов по JavaScript’у
• Мастер-классы по JavaScript’у
• PDFEED – или RSS2PDF в новом обличье

Юрий Артюх — специалист по верстке с многолетним стажем. Принимал участие в разработке нескольких сотен проектов среди которых такие как kremlin.ru, groupon.ru, subscribe.ru, sports.ru, ukr.net, zn.ua, delo.ua, pravda.com.ua.

Мастер-класс может быть интересен и полезен всем, кто работает с фронт-эндом.

Уже более 7 лет Юрий ведет популярный блог посвященный проблемам верстки CSSing.org.ua. Также является активным участником сообщества русского крыла веб-стандартистов, и организатором первой украинской конференции веб-разработчиков UA WEB.

В конце мастер-класса у нас будет возможность задать любые вопросы.

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

Дополнительная информация и подробный план мастер-класса можна посмотреть на сайте

• Zend Framework Day
• Мастер-класс по Sphinx
• Конференция ZFConf 2011
• ZFConf Ukraine
• Анонс мастер-классов по JavaScript’у
• Мастер-классы по JavaScript’у
• PDFEED – или RSS2PDF в новом обличье

Прикупил занятный девайс для рисования – Boogie Board. Небольшой horror-обзор далее (хотя картинка выше такая спойлерная)…

Для начала о грустном – о цене – заказывал на Amazon Boogie Board Bundle за $44.95, пересылка через Shipito обошлась бы еще в $12.75, но объединение посылок съело эту сумму. В Bundle входит – собственно Boogie Board 8.5″, стилус, чехол, клипса для стилуса, набор магнитов на скотче (которые я сразу и приклеял):

Описание

Размером планшетик с лист формата А5 — 222х140 мм, LCD экран — 183х125 мм. Толщина от 3мм до 6мм, правда магниты и клипса еще добавляет габаритов, но не значительно. Стилус «дебелый», так просто не сломать, в разложеном состоянии можно использовать как указку. Стилус можно закрепить либо на клипсе, либо положить в специальный кармашек чехла.

Использование

Держать удобно, рисовать не напряжно — чем-то напоминает рисование карандашом по бумаге (даже с характерным звуком). Можно повесить на холодильник или на доску в офисе — магнитные ножки держат надежно (хотя в таком положении рисовать не удобно).

Экран чувствителен к силе нажатия — под собственным весом стилус оставляет точку радиусом ~2-3мм; при усилии ~4-5мм. И да — он матовый!

На девайсе всего одна кнопка — очистить экран — выглядит это как перелистывание страниц на e-ink. Производитель же обещает 50 000 очисток на одной батарейке — а потом будем думать (через 6 лет, если стирать по 20 раз на дню).

Насчет внутренностей чудо-блокнота — походу, с заменой батарейки, проблем не возникнет (найдено на amazon):

Выводы

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

Еще раз о грустном (ссылки реферальные, о ужас):

• Boogie Board 8.5″ — чёрная версия — $29.95
• Boogie Board 8.5″ Bundle — тот что на скринах выше — $44.95
• Boogie Board 10.5″ — новый и большой, пока чехла к нему не найти — $59.95

Другие посты на эту тему

• Обзор корпуса Corsair Graphite Series 600T
• Обзор Nook от Barnes & Noble

Для начала нам потребуется скачать последнюю версию форума с официального сайта, а поскольку я тут успел наступить на одни грабли — то качаем последнюю бету — vanilla-core-2.0.18b2.

Встраиваем

По умолчанию, Vanilla форум имеет прекрасную возможность — встраиваться в любую HTML страничку посредством JavaScript’a, для этого нам понадобится активировать плагин <Embed> Vanilla (идет в стандартной поставке) и получить код скрипта:

<script type="text/javascript" src="http://forum.your-domain.com/plugins/embedvanilla/remote.js"></script>

Так же советую использовать дефолтную тему «Embed-Friendly» для встроенного форума — она достаточно простая и удобная для кастомизации.

Единственная проблема которая у меня возникла при подобном подключении форума — это ошибки JavaScript’a — разработчики форума не в курсе о методе jQuery().delegate() и используют jQuery('a').live('click'), чем вызывают не очень адекватное поведение ссылок на странице без атрибута href.

Интеграция с использованием ProxyConnect

Как понятно из подзаголовка, нам потребуется скачать плагин Vanilla ProxyConnect. Устанавливаем и идем настраивать (Users > Authentication):

Тут всё просто, по пунктам (пути в примере полные, могут быть относительные):

1. Ваш сайт
2. Страничка для получения данных о вашем пользователе (о ней чуть далее)
3. Страница регистрации
4. Страница входа
5. Страница выхода

Теперь займемся пунктом 2 — Authenticate URL. Это страничка, где у вас должны выводиться данные вашего текущего пользователя в простом формате:

UniqueID=1279
Name=Bob
Email=bob@gmail.com
TransientKey=qwerty
DateOfBirth=1970-01-01
Gender=Male
Roles=Member,Admin

• UniqueID — обязательное поле, UID пользователя в вашей системе
• Name — обязательное поле, username, или как он у вас обзывается
• Email — обязательное поле, email вашего пользователя
• TransientKey — ключ, для предотвращения CSRF атак (вам скорей всего не понадобится, для wordpress обязательно)
• DateOfBirth — дата рождения
• Gender — мальчик/девочка, Male/Female
• Roles — роли пользователя на Vanilla форуме, через запятую, можно IDшниками

Если у вас Zend Framework, то action будет выглядеть как-то так:

// disable View
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);

// get current User
$user = Zend_Auth::getInstance()->getIdentity();
if ($user) {
echo "UniqueID={$user->id}\n"
     . "Name={$user->username}\n"
     . "Email={$user->email}\n"
     . "Roles={$user->role}\n";
} else {
echo "UniqueID=\n"
     . "Name=\n"
     . "Email=\n";
}

Как это работает — когда пользователь заходит на форум, то Vanilla незаметно так стучится на нашу страничку с текущей сессией пользователя, и пытается получить о нем информацию. Если это удалось, то движок пытается найти соответсвующую запись у себя в БД — если нашел, то мы авторизированы, если не нашел соответсвия — регистриует нового пользователя с указанными данными и так же авторизирует. Если наша страничка не вернула данных о пользователе, то он либо будет послан на страницу Sign In указанную в настройках ProxyConnect, либо отобразит страницу авторизации форума (зависит, от того, что разрешено пользователю guest).

Из замеченного: для разлогинивания на форуме следует чистить куки:

// vanilla forum logout
setcookie('Vanilla', ' ', time() - 3600, '/', '.domain.com');
unset($_COOKIE['Vanilla']);

Если пользователь авторизирован в вашей системе, а при входе на форум требуется логинится (банально клацнуть на кнопку, для запуска процесса авторизации), то это тоже поправимо — следует в вашем методе логина добавить следующую очистку куков (я их еще и в логаут добавил, так на всяк случай):

setcookie("Vanilla", "deleted", time() - 1,'/', ".domain.com", false);
setcookie("Vanilla-Volatile", "deleted", time() - 1, '/', ".domain.com", false);

Официальная документация по ProxyConnect

Портирование с phpBB, vBulletin и т.д.

На случай если вы решили сменить движок форума, то это тоже предусмотрено ;) Качаем Vanilla Porter и заливаем его в корень вашего текущего форума (phpBB или что там у вас). Далее следуем простой инструкции по переносу данных:

1. Экспорт форума в TXT файл хитрого формата
2. Импорт этого самого файла

Как просто-то :) Ну для наглядности приведу еще скриншот самой тулзы:

Но без нюансов тоже не обошлось — первое с чем столкнулся это непонимание формата файла в архиве, пришлось распаковывать и заливать. Второе — во время импорта все текущие пользователи Vanilla будут удалены, включая вашу учетную запись, так что в определенный момент вам надо будет указать email нового админа из портированных данных, после чего вы получите ошибку авторизации, без паники, логинимся заново под новым админом и продолжаем импорт данных (будет такая кнопочка). Следующий шаг — вам потребуется назначить права для всех ролей пользователей, которые были перенесены со старого движка. И напоследок, когда пользователи со старой системы попробуют зайти на новый форум им высветится следующий диалог (это верно для Vanilla + ProxyConnect):

Подготовьте пользователей к правильным действиям заранее.

Еще такой момент, умные дядьки часто изменяют алгоритм хэшированя паролей, на этот случай прийдется выполнить следующие действия:

1. Заменить имя метода хэширования на некоторый произвольный
2. Добавить его поддержку в файле vanilla/library/core/class.passwordhash.php

С первым всё совсем просто:

UPDATE GDN_User SET HashMethod = 'myHash' WHERE HashMethod = 'phpBB';

Второй пункт тоже не сложен — нам потребуется найти switch в методе CheckPassword() и добавить туда новый case:

switch(strtolower($Method)) {
/* ... */
    case 'myhash':
        $Result = myMegaHashFunction($Password, $StoredHash);
        break;
/* ... */
}

Документация по Vanilla Porter

Вместо вывода

Форум действительно стоит того, чтобы его установить и опробовать: много локализаций (включая русский и арабский) и полезных плагинов; простые для адаптации темы (хоть и Smarty используется); и таки удобная система интеграции.

Другие посты на эту тему

• No Related Post

Вычеркнул из своего wishlist’а еще один пункт — я таки разорился на хороший корпус — Corsair Graphite Series 600T.

Внешний вид

Встречаем по одежке, и вот он во всей красе (кликабельно, с официального сайта):

Комплектация:

• Скромная инструкция, в которой показано как можно снимать крышки
• Ключ для закрытия корпуса
• Три пакетика с крепежом — черные болтики для черного корпуса
• Чёрные пластиковые стяжки
• Круглые резиночки в количестве 8-ми штук, для чего они нужны я не понял

Преимущества

Основной из главных причин смены корпуса послужил перегрев системы в старом корпусе. Старый корпус можно было подтюнить лишь 80мм вентиляторами, и получить жужжащую коробку под столом, и этим путем я решил не идти. Мой компьютер переселился в новую «квартиру» и теперь я могу сравнить результаты:

Система: CPU Intel Core 2 Duo E6550 / Gigabyte GA-P35-DS3L / 4xDDR2-800 1Gb / MSI Cyclone GeForce GTS 450 / SAMSUNG HD400LJ +
WDC WD20EVDS-63T3B0

Ну и показания датчиков (температура окружающей среды 27 градусов, данные снимались с помощью AIDA64):

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

Кнопки включения и ресет должны быть сверху, не барское это дело — кланяться столу. Портов для подключения девайсов в изобилии — 4xUSB, Firewire и USB3 (последних у меня и нету). Ну и понятное дело выходы на микрофон и наушники. Опять же — все выходы направлены вверх, и нет риска случайно наступить на торчащую флешку.

Удобство доступа к внутренностям компьютер — две защелки и перед нами целый «аэропорт» для маневров:

Можно достаточно легко навести порядок с проводами, вот что у меня получилось с моей скромной конфигурацией:

Подсветка — белая и не раздражает:

Пылевые фильтры – мелочь, а приятно (для кулера на винчестерах, и для БП):

Ну и напоследок фотография «Corsair VS Codegen»:

Ну еще из спецификации и мной замеченного:

• Для материнок mATX и ATX
• 6 слотов для винчестеров (можно и 2.5″ ставить)
• 4 слота для 5.25″ устройств (я правда так ничего и не поставил)
• Два 200мм вентилятора с подсветкой (800RPM, 24dB Max)
• Один 120мм вентилятор
• Прорезиненные ножки — корпус без значительных усилий по полу не поедет

Недостатки

Самым главным недостатком данного корпуса считаю цену, если на Amazon цена еще приемлема, и составляет $139.99, то у нас эта цифра выростает до $232 (теперь у меня есть дисконт в 3%, если что — стучите в твиттер).

Ну и еще по мелочи:

• Все же корпус не маленький, не у всех найдется место под столом (особенно это касается «компьютерных» столов)
• Карманы для винчестеров не сидят плотно, и имеют значительный люфт, хотя под весом винтов не болтаются
• Для верхней панели так и просится крышка, или хотя бы заглушки для портов — сборничек пыли обеспечен
• Слишком близко расположены к друг другу слоты USB — если у вас флешка «толстовата», то соседям она будет мешать
• Регулятору скорости вращения вентиляторов не хватает режима ВЫКЛ
• Инструкция для чайников — таковой не имеется, а очень бы хотелось, да с наглядными иллюстрациями

Другие посты на эту тему

• Обзор Boogie Board
• Обзор Nook от Barnes & Noble

Продолжим изучение Google Closure Library. В данной статье я постараюсь отклонится от «jQuery way» и продемонстрировать как удобны в использовании и просты в создании компоненты фреймворка.

Давненько я технических статей не писал, отвыкли небось, но отвлекать не буду, читайте на здоровье ;)

Это все же, в большей степени, перевод статьи из официальной документации, но он слегка сокращен и адаптирован

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

Основой всех компонентов является класс goog.ui.Component, и для создания своих компонентов без него не обойтись. Он требует от нас определенную структуры класса состоящую из шести методов, которые описывают жизненный цикл компонента (в хронологическом порядке):

Отдельно особняком стоит метод canDecorate(existingElement) — он расскажет нам можно ли создать компонент основываясь на уже существующих элементах (existingElement). По умолчанию, суперкласс всегда возвращает true.

И так, перейдем к созданию своего компонента…

Инициализация

Начинается все с шага ноль — подключения goog.ui.Component, и объявления имени нашего компонента.

goog.provide('tutorial.component');

goog.require('goog.ui.Component');

Теперь шаг первый — это создание конструктора компонента:

tutorial.component = function(opt_label, opt_domHelper) {
    // вызов конструктора предка
    goog.ui.Component.call(this, opt_domHelper);

    /**
    * Заголовок виджета
    * @type String
    * @private
    */
    this.initialLabel_ = opt_label || 'Link';

    /**
    * Наш обработчик событий
    * @type goog.events.EventHandler
    * @private
    */
    this.eh_ = new goog.events.EventHandler(this);

    /**
    * Обработчик клавиатуры, у нас в компоненте не используется, но правила именования следует соблюдать
    *
    * @type {goog.events.KeyHandler?}
    * @private
    */
    this.kh_ = null;
};
// наследуем goog.ui.Component
goog.inherits(tutorial.component, goog.ui.Component);

Создание DOM структуры

После создания экземпляра компонента необходимо создать соответствующую DOM структуру, для этого потребуется реализовать метод createDom() и decorateInternal() (опционально):

Ну и пример кода:

/**
 * создаём необходимую нам DOM структуру
 * в нашем примере необходим лишь один div
 */
tutorial.component.prototype.createDom = function() {
    // вызываем decorateInternal который внесет изменения в новосозданный элемент
    this.decorateInternal(this.dom_.createElement('div'));
};

/**
 * изменяем существующую структуру под наши нужды
 *
 * @param {HTMLElement} element DIV который мы изменяем
 */
tutorial.component.prototype.decorateInternal = function(element) {
    tutorial.component.superClass_.decorateInternal.call(this, element);

    var elem = this.getElement();
    goog.dom.classes.add(elem, 'tutorial-component');
    goog.dom.setTextContent(elem, this.initialLabel_);

};

Еще один шаг — после того как построили DOM

Зачастую, инициализация компонента требует уже заранее подготовленную структуру DOM. К примеру, вы создаете popup меню и вам необходимо повесить обработчик на div с id=”menu”, но этот элемент мы создаем лишь на этапе createDom, таким образом у нас получается неувязочка, но не стоит беспокоится, создатели фреймворка приберегли на этот случай метод enterDocument():

Реализуя метод enterDocument() необходимо всегда вызывать одноименный метод суперкласса, который вызовет все дочерние компоненты. Собственно, в методе enterDocument() лучше всего описывать методы, которые вешают обработчики событий на элементы DOM, и это тем более обязательно для элементов, которые не являются частью компонента (а лишь добавляют нам пачку зависимостей =).

Но вернемся к нашему примеру:

tutorial.component.prototype.enterDocument = function() {
    // вызываем метод супер класса
    tutorial.component.superClass_.enterDocument.call(this);

    // простой обработчик на click
    this.eh_.listen(
        this.getElement(),
        goog.events.EventType.CLICK,
        this.onDivClicked_
    );
};

Резюмируя — не хочешь проблем с обработчиками — вешай их в enterDocument().

Методы render() и decorate()

Если мы все делали правильно, то можем попробовать инициализировать свой компонент используя метод render():

var comp1 = new tutorial.component("Button");
     comp1.render(goog.dom.$('button1'));

Метод render() вызывает createDom(), получившийся element_ помещает в DOM и затем вызывает enterDocument(). Если метод render() дергать с параметром Element (в примере выше это “button1″), то element_ будет помещен внутрь него, иначе станет потомком body.

В примере есть и второй способ вызова компонента:

var comp2 = new tutorial.component("Button Two");
     comp2.decorate(goog.dom.$('button2'));

Метод decorate() получает уже готовый element_ в качестве параметра, который и скармливает методу decorateInternal(), и затем точно так же вызывается enterDocument().

Внутри компонента вы не должны вызывать методы render() или decorate(). Хотя, если вы не используете методы render() или decorate(), следует вызывать enterDocument() после того как будут добавлены все необходимые элементы компонента в DOM

«Я тебя породил, я тебя и уничтожу»

Создавая компонент не забИвайте описывать методы для подчистки DOM’а после его удаления, для этого следует подчистить все, что мы наворотили в методах createDom() и enterDocument(). В этом нам помогут следующие методы:

Ну и пример метода exitDocument():

tutorial.component.prototype.exitDocument = function() {
    tutorial.component.superClass_.exitDocument.call(this);

    this.eh_.unlisten(
        this.getElement(),
        goog.events.EventType.CLICK,
        this.onDivClicked_
    );

    this.eh_.unlisten(
        this.getElement(),
        [goog.events.EventType.MOUSEOVER, goog.events.EventType.MOUSEOUT],
        this.onDivHover_
    );
};

Обратите внимание на вызов метода exitDocument() нашего суперкласса — данная махинация необходима для вызова методов exitDocument() у всех дочерних компонентов (если таковые имеются). Этот вызов обязателен!

Теперь dispose():

tutorial.component.prototype.dispose = function() {
    if (!this.isDisposed()) {
        tutorial.component.superClass_.dispose.call(this);
        this.eh_.dispose();
        if (this.kh_) {
          this.kh_.dispose();
        }
    }
};

Опять же — дергаем супер класс, затем подчищаем обработчики событий.

В заключение

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

И да, пощупать пример можно на страничке closure-tutorials/component.html.

Читаем еще

• Introduces goog.ui.Component — первоисточник статьи
• Google Closure для начинающих

Offtopic

Я тут еще в твиттер на досуге пишу, так что следите и не пропустите ;)

Другие посты на эту тему

• Google Closure руководство для начинающих

В субботу, 18-го июня в Киеве пройдет мастер-класс создателя движка полнотекстового поиска Sphinx Андрея Аксенова «Как готовить Sphinx».

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

Sphinx используют такие монстры, как CraigsList, DailyMotion, Meetup, HupPages, HabraHabr и еще десятки высоконагруженных сайтов. Андрей Аксенов выступал на многочисленных конференциях в России: «DevPoint 1-2», «РИТ», «DevConf 2011», «HighLoad ++». Организатор конференции пользователей Sphinx в Москве. Автор нашумевшего доклада «Как прекратить писать».

Дополнительная информация и подробный план мастер-класса можна посмотреть на сайте http://www.smartme.com.ua/sphinx-workshop/

Другие посты на эту тему

• Zend Framework Day
• Мастер-класс Юры Артюха
• Конференция ZFConf 2011
• ZFConf Ukraine
• Анонс мастер-классов по JavaScript’у
• Мастер-классы по JavaScript’у
• Sphinx для НЕ полнотекстового поиска
• PDFEED – или RSS2PDF в новом обличье

Основные подготовительные работы по конференции закончены. Доклады сформированы. Среди спикеров представители KnpLabs, Magento, JetBrains, Sphinx и других известных компаний.

Если Вы проходили предварительную регистрацию, то для прохождения финальной регистрации Вам нужно перейти по специальной ссылке, отправленной на e-mail. Введенную ранее информацию нужно будет только подтвердить. Если ссылка не приходила Вам, ее можно запросить через специальную форму.

Пожалуйста, обратите внимание на то, что изменилось место проведения! Мероприятие будет проходить на прошлогодней площадке — в актовом зале ЛГТЦ (Ленгипротранс-Центр), по адресу: Московский пр., 143, ст. м. «Электросила». Кофе-брейки и обсуждения на флипчартах будут проходить в фойе.

Cписок докладов

• Гибкая архитектура Zend Framework приложений с использованием Dependency Injection — Алексей Качаев (Сogniance, Senior PHP Developer)
• Воюем за ресурсы: Повышение производительности Zend Framework приложения с помощью phpDaemon, Varnish и ESI — Алексей Качаев (Сogniance, Senior PHP Developer)
• Behavior Driven Development в PHP и Zend Framework — Константин Кудряшов (KnpLabs, Senior Web Developer)
• Разделение труда: Организация многозадачной, распределенной системы в Zend Framework с помощью Job Queue — Александр Готгельф (Magento, PHP-разработчик)
• Как может помочь среда разработки при написании приложения на Zend Framework? — Николай Матвеев (JetBrains, разработчик)
• Создание REST-API для сторонних разработчиков и мобильных устройств с авторизацией по протоколу OAuth 1.0 — Дмитрий Чижевский (Дзен-мани, разработчик)
• Толстая модель: История разработки собственного ORM — Михаил Шамин (Геометрия, ведущий разработчик)
• Что такое Sphinx, зачем он вообще нужен и как его использовать с PHP (от простого индекса до поискового кластера) — Владимир Федорков (Sphinx, Director of Professional Services)

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

Торопитесь, количество мест ограничено!

Обязательно следите за последними новостями:

• RSS-канал: feeds.feedburner.com/zfconf
• Twitter: @zfconf
• Группа ВКонтакте: vkontakte.ru/club14951507

Организатор: компания Wizartech
Партнеры: сообщество zendframework.ru и конференция ZFConf Ukraine

Другие посты на эту тему

• Zend Framework Day
• Мастер-класс Юры Артюха
• Мастер-класс по Sphinx
• ZFConf Ukraine
• Анонс мастер-классов по JavaScript’у
• Facing refucktoring
• Мастер-классы по JavaScript’у
• Под впечатлением от ZFConf