Как добавить ajax-запрос при разработке Catalyst-приложения. Создание JSON-представления в Catalyst. Возврат данных в формате json. Изменение набора данных во втором элементе select, в засимости от того, какую строку пользователь выбрал в первом элементе select. Примеры perl-кода, html, js-скрипт. Установка jQuery.
К моему сожалению, конец августа и начало сентября - были для меня крайне непродуктивным временем. Руководители нашей небольшой команды наняли внешнего консультанта для улучшения качества разрабатываемого продукта. Вероятнее всего, наши молодые менеджеры не составили изначально список ожиданий от работы консультанта. Поэтому, консультант, вместо того, чтобы заниматься качеством продукта, решил вмешаться в процессы управления разработкой. И все бы ничего, если бы он понимал разницу между
управлением персоналом в огромной компании с крупным брендом, куда рвутся работать только ради ее имени, не смотря на весьма средние условия и ЗП, и маленькой, с трудом набранной и сработавшейся командой. Крупная компания может себе позволить относиться к людям, как к расходному материалу - за год сгорел один, сдали нервы у другого - на пороге очередь готовых на все жертв.Эксперименты, хаос, вносимый наемником, бесконечные совещания, психологическое давление, снизили мою производительность в первую неделю процентов на 25, а потом и на все 50. Личные проекты, исследования в свободное время, изучение документации и вовсе прекратились. В какой-то момент я вышла из себя настолько, что отправилась на собеседование в другую компанию. Я люблю работать, и когда больше месяца мне мешают это делать - начинаю сильно злиться.
Наблюдая за коллегами, могу сказать, что производительность снизилась у всех.
На этой неделе наемник отсутствует и наконец-то можно спокойно поработать. Закрыла несколько задач и успела сделать наброски для заметки по ajax. На выходные планирую порадовать себя погружением в тему микроконтроллеров и вкусным пирогом. Нет ничего лучше, чем отбросив все, уйти с головой в интересную тему на несколько дней.
Выводы: руководители, менеджеры, смотрите внимательней - в каких компаниях работал нанимаемый консультант, какую культуру он принесет с собой и будет продавливать. И внимательно продумайте, согласуйте список результатов, которые вы хотите получить. А то спустя два месяца обнаружите, что абсолютно ничего из предполагаемых результатов не достигнуто, команда занимается какой-то х-ней, демотивирована и в свободное время читает hh.
И, пожалуйста, слушайте мнение своих специалистов. Принимайте во внимание их аргументы, возражения. Консультант получит деньги и уйдет, а вы останетесь с кучей проблем, о которых вас предупреждали, но которые не были услышаны.
AJAX - Asynchronous Javascript And Xml
Ajax-запросы хороши тем, что можно получать данные от сервера, не перезагружая страницу. Например, пользователь выбирает что-то в выпадающем списке, браузер отправляет запрос к серверу, получает массив данных в json-формате, парсит его и с помощью JS выводит на странице.
Технология ajax - асинхронна. Браузер, сделав запрос, может делать что угодно - прокручивать страницу, показывать сообщения об ожидании ответа и т.п. Пользователь, в ожидании результата, смотрит не на пустую белую страницу, а просто продолжает читать текст, рассматривать картинки.
Благодаря тому, что вместо всей страницы с картинками и html-разметкой, подгружается только небольшая часть данных - увеличивается скорость реакции страницы на действия пользователя, снижается объем передаваемых данных (что очень полезно для пользователей с медленным интернетом, например, на мобильных устройствах, особенно, вне крупных населенных пунктов).
Больше всего ajax полезен для простых элементов, связанных с простыми и понятными действиями: добавить товар в корзину, подписаться на рассылку, проголосовать в опросе, запросить список городов в анкете, и т.п.
Ниже приведен пример реализации простого ajax-запроса. Код строится на основе ранее созданного приложения:
- https://dev-lab.info/2013/11/как-создать-catalyst-приложение-с-нуля
- https://dev-lab.info/2013/10/catalyst-и-его-chained
- https://dev-lab.info/2014/08/использование-статики-в-catalyst-приложении
Пример сделан максимально простым, для того, чтобы передать идею и смысл, не зарываясь в детали обработки запроса. Зато - полностью работоспособный :) .
Как добавить ajax-запросы в Catalyst-приложение. Примеры кода
Описание задачи:
На html-странице располагается форма с двумя элементами select. Первый select содержит список городов. В зависимости от того, какой город выберет клиент, мы выводим во втором select список магазинов. Список не является стабильным, достаточно часто меняется. Поэтому, данные во второй select подгружаются с помощью ajax-запроса, а не зашиты в страничку.
Что бы в нашем приложении появились ajaх-запросы, нам требуется:
- Создать JSON-представление в Catalyst
- Создать подпрограмму на сервере, которая будет принимать запрос, готовить данные и вернет результат
- Скачать и установить jQuery
- Создать шаблон html-страницы
- Создать JS-скрипт, который инициирует ajax-запрос и обрабатывает результат
Добавляем jQuery на наш сервер
jQuery можно добавить на сайт двумя способами: подгружать извне, ссылаясь на другой ресурс или скачать файл с официального сайта jQuery. Я выбираю второй способ.
Скачанный файл jquery-2.1.1.min.js я сохранила в директории /root/static/js .
JSON-представление
Создаем представление:
|
1 2 3 4 5 |
root@localhost:~/www/app$ perl script/app_create.pl view JSON JSON exists "/home/www/app/script/../lib/app/View" exists "/home/www/app/script/../t" created "/home/www/app/script/../lib/app/View/JSON.pm" created "/home/www/app/script/../t/view_JSON.t" |
Иногда, если к работе JSON есть какие-то особые пожелания, требуется после создания нового представления добавить новые конфигурационные данные в файл /lib/app.pm , но в данном случае это не обязательно.
Тем не менее, после того, как создано JSON-представление, в файле /lib/app.pm надо указать - какое представление будет использоваться системой по-умолчанию. Иначе, может оказаться так, что все страницы вашего приложения вдруг стали отдаваться в JSON-формате:
|
1 2 3 4 |
__PACKAGE__->config( ... default_view => 'TT', ); |
Создание подпрограммы для обработки ajax-запроса
/lib/app/Controller/Root.pm :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
use Variable::Eject; ... sub index :Path :Args(0) { my ( $self, $c ) = @_; $c->stash->{template} = 'index.tt'; } sub get_list :Path('/get_list') { my ( $self, $c ) = @_; eject ($c->req->params, $city_id); if ($city_id eq "1") { $c->stash->{'json'} = [ {name => 'ТРЦ Атриум', id=> 1}, {id=>2, name=>'ТРЦ Щука'} ]; } else { $c->stash->{'json'} = [ {name => 'Name11', id=> 11}, {id=>22, name=>'Name22'}, {id=>33, name=>'Name33'} ]; } $c->forward('View::JSON'); } |
Уже на этом этапе можно проверить работоспособность JSON в нашем Catalyst-приложении. Запускаем сервер:
|
1 |
perl script/app_server.pl --port 3001 |
Вызываем метод get_list:
|
1 |
http://localhost:3001/get_list |
Если все ОК, вы получите вот такой текст на странице:
|
1 2 |
{"json":[{"name":"Name11","id":11},{"name":"Name22","id":22}, {"name":"Name33","id":33}]} |
Создаем шаблон страницы и JS-скрипт
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <head> <title>Localhost:3001</title> <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> </head> <body> <select name="city_id" id="city_id" style="width:150px;"> <option value="0" selected>--</option> <option value="1">Москва</option> <option value="2">Тверь</option> <option value="3">Курган</option> <option value="4">Оренбург</option> <option value="5">Ярославль</option> </select> <select name="shops" id="shops_id"> <option value=""></option> </select> <script> $(document).ready(function() { $('select[name="city_id"]').change(function(){ var sel = document.getElementById("city_id"); var val = sel.options[sel.selectedIndex].value; $.ajax({ url: '/get_list', data: {city_id: val}, type: 'POST', dataType: 'json', success: function(data2){ var objSel = document.getElementById("shops_id"); objSel.options.length = 0; data = data2.json; for(var i = 0; i<data.length; i++) { objSel.options[i] = new Option(data[i]['name'], data[i]['id']); } } }); }); }); </script> </body> </html> |
Запускаем сервер и смотрим результат.
В начале статьи было отступление на тему менеджмента и внешних консультантов. Теперь, спустя несколько месяцев, можно уже сказать, чем закончилась история.
Консультант был нанят для того, чтобы снизить риски проекта и улучшить качество продукта. Но консультант был не дурак, и вместо реальной работы решил ввести в компании СКРАМ. Я СКРАМ не люблю, ибо это уже не первый опыт. (Более того, были истории от других коллег, когда после введения СКРАМ-а, в компании начинались серьезные проблемы. Либо СКРАМ - это обычно "последняя надежда" и он добивает и без того проблемную компанию, либо сам по себе СКРАМ настолько плохая вещь, что добивает даже успешную команду.) Несколько месяцев, парень профессионально вешал менеджерам лапшу на уши и проводил бесконечные совещания.
Утром на совещании всегда отчитывался "Мы с Васей...", "Мы с Петей" - никогда не говоря "Я вчера сделал...". Менеджеры млели, думая, что консультант - мастер командной работы. Программисты, вначале принявшие парня дружелюбно, злились от того, что им мешают работать. Потому что на деле, конс только отнимал их время. Возмущались, но менеджеры находились под обаянием человека, который мог похвастаться работой в ТАКИХ компаниях и имел, по его словам, ТАКОЙ опыт...
А проекты между тем начали тормозиться. Оказывается, производительность упала не только у меня. У всех. Спустя несколько месяцев, консультант не смог сделать даже простую задачку по анализу логов, которую обещал закончить в 2 недели. В проектном управлении был хаос, и в Новый Год, который стремительно приближался, компания въезжала без подготовки к сверхвысоким праздничным нагрузкам...
Через несколько недель после того, как консультант "закончил" свою работу, в компании, по экономическим причинам, начались сокращения. Печаль. Но ведь предупреждали! Хотя конс себя в любом случае подстраховал: "Если в компании все хорошо, это - его заслуга. Если плохо - то это только потому, что мы не выполняли рекомендаций на 100%". Вот только до его появления, команда искала сотрудников, а после - увольняет их...
А консультант сейчас окучивает следующую компанию, в том же здании.
Мораль сей басни: СКРАМ - зло (кто бы сомневался), ежедневные совещания и эксперименты в процессах управления проектами может себе позволить только ОЧЕНЬ богатая компания, а выбирая консультанта - нельзя полагаться на резюме - оно может быть результатом нужных знакомств, а не опыта. Плохой консультант способен разрушить компанию. А если уж наняли - контролируйте каждый шаг, и прислушивайтесь все-таки к мнению ВАШИХ сотрудников. Им с вами работать, а наемник - получил деньги и ушел. Больше ему от вас ничего не надо.
> А если уж наняли — контролируйте каждый шаг, и прислушивайтесь все-таки к мнению ВАШИХ сотрудников.
Полностью согласен, что нужно прислушиваться. В связи с этим вспомнилась книга "Выживают только параноики. Эндрю С. Гроув". Он тоже советовал прислушиваться ко мнению сотрудников, особенно эта проблема проявляется в крупных компаниях, когда до "верха" информация об изменениях или проблемах доходит с задержкой. Это позволяет заранее выявить проблемы в индустрии, в управлении или в любых вопросах в компании.
> Утром на совещании всегда отчитывался «Мы с Васей…», «Мы с Петей» — никогда не говоря «Я вчера сделал…».
Какой-то странный консультант, на мой взгляд он должен быть неким "дирижером", т.е. направлять команду в правильное русло, а не работать с Васей, Петей. Просто, на мой взгляд, идея скрама - объединение команды, ее сплочение, чтобы вся команда понимала какие проблемы возникают в проекте, чтобы они оперативно решались за митингом. Чтобы было понимание, куда движется проект.
> чтобы вся команда понимала какие проблемы возникают в проекте, чтобы они оперативно решались за митингом.
Вот именно с этим я и не согласна. Эта тема была постоянным предметом ожесточенных споров с консультантом. Всей команде абсолютно не нужно знать про все проблемы проекта. Есть люди, которые занимаются проблемой, они сами выбирают - с кем обсудить, у кого спросить совета, причем делают это в нужное время, не дожидаются ежедневного митинга. Всех остальных отвлекать не надо. Как правило загрузка в стартапах просто дикая, работы очень много, и когда человек отвлекается на чужую проблему, это означает, что он медленнее сделает свою задачу.
Ежедневный митинг тем и плох, что все выслушивают всех, помимо своих задач погружаются в массу чужих, в которых они все равно не будут принимать участия. Но от этих чужих задач мозг не может освободиться немедленно. Он еще пару часов будет их "переваривать". Это непозволительные потери во времени и эффективности. Посчитайте это в человеко-часах, это огромная масса потерянного времени, а если еще вычесть время на сам митинг и еженедельную ретроспективу - то вообще катастрофа. Мы с коллегами считали, сколько времени потеряно было каждую неделю только на митинги и ретроспективу, в команде примерно человек 15, замеряя каждый день время. Получалось до 48 часов в неделю!!! Т.е. это работа 1 человека на всю рабочую неделю.
Но менеджеров не убеждали даже цифры. Они продолжали что-то мычать про эффективность, командную работу и т.п.
Для эффективной работы можно проводить 1 ретроспективу в неделю, и всего 1-2 митинга в течении недели. Это максимум. Другое порождает серьезные убытки.
На данный момент компания находится на грани полного закрытия. Доигрались в эффективность.
> идея скрама — объединение команды, ее сплочение
Скрам с этим не может справиться, ну просто никак. Это искусственная методология. Такое порождение никогда и никого сплотить не сможет.
Если уж требуется сплотить команду, то надо изучать психологию, учитывать психотип каждого участника... А банальная попойка за городом в компании Jack Daniels... или даже в городе, прямо в рабочее время, попытка выпить тайком от начальства сплачивает в сотню раз эффективней, чем несколько месяцев скрама :D .
Ну в крайнем случае, можно изучать принципы создания эффективных команд на примере морских котиков. Армейские методологии для элитных подразделений. Это не шутка.