Saint Perl 2009: CGI::Ajax demo

1,322 views
1,227 views

Published on

CGI::Ajax demo prepared for "Saint Perl 2009" conference
http://2009.yapcrussia.org/saintperl/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,322
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Saint Perl 2009: CGI::Ajax demo

  1. 1. Построение web-приложения при помощи CGI::Ajax <ul><ul><li>Александр Котов </li></ul></ul>
  2. 2. Лирическое отступление: что такое Perl и для чего он нужен <ul><li>Perl (Перл, тж.: Пёрл) — православный язык программирования, написанный Ларри Уоллом в 1987 году изначально для работы с текстовой документацией. Состоит из РегЭкспов чуть менее, чем полностью. http://lurkmore.ru/Perl </li></ul><ul><li>Основные применения языка: </li></ul><ul><ul><li>Обработка данных (РегЭкспы, тексты, логи, ...), системные скрипты </li></ul></ul><ul><ul><li>Внутренние проекты: Perl как язык-клей, автотестирование, ... </li></ul></ul><ul><ul><li>Разработка Web-приложений </li></ul></ul><ul><li>Perl (как правило) не применяется для ... </li></ul>
  3. 3. Плавно переходим к докладу <ul><li>Александр Котов </li></ul><ul><ul><li>– мы используем Perl для ряда внутренних проектов и автоматизации тестирования </li></ul></ul><ul><ul><li>Это применение Perl №2) </li></ul></ul><ul><li>Цель доклада </li></ul><ul><ul><li>Демонстрация возможностей модуля CGI::Ajax </li></ul></ul><ul><ul><li>А это – применение Perl №3) </li></ul></ul><ul><li>Целевая аудитория: </li></ul><ul><ul><li>Люди, имеющие отношение к веб-разработке </li></ul></ul><ul><ul><li>Любители Google Wave </li></ul></ul>
  4. 4. Скажите, а причём здесь Google Wave?!
  5. 5. Wave на Perl за 20 минут <ul><li>Уже за 1Х минут :) </li></ul><ul><li>Wave – это Web-приложение </li></ul><ul><li>Общая БД, совместная работа, AJAX, все дела </li></ul><ul><li>Вот она, совместная работа: </li></ul>... Сервер Клиент 1 Клиент 2
  6. 6. Архитектура AJAX-приложения Сервер База Данных Главное приложение HTML + JS + ... AJAX engine AJAX callback
  7. 7. Реализации AJAX на Perl <ul><li>Можно реализовать AJAX ”Классическим” путем </li></ul><ul><ul><ul><li>Это полезно для понимания технологии AJAX </li></ul></ul></ul><ul><li>Можно воспользоваться одним из готовых фреймворков </li></ul><ul><li>Можно воспользоваться одним из модулей CPAN </li></ul><ul><ul><li>Есть один качественный модуль – CGI::Ajax </li></ul></ul><ul><ul><ul><li>Нет, это не я его написал, а Brent Pedersen </li></ul></ul></ul><ul><ul><ul><li>CGI::Ajax должен быть установлен из CPAN </li></ul></ul></ul><ul><ul><ul><li>Последняя версия на CPAN – это 0.707, октябрь 2008 </li></ul></ul></ul><ul><ul><ul><li>Главное преимущество модуля – он простой!!! </li></ul></ul></ul><ul><ul><ul><li>Главный недостаток модуля – он слишком простой... </li></ul></ul></ul>
  8. 8. Преимущества CGI::Ajax Сервер База Данных Главное приложение HTML + JS + ... AJAX engine AJAX callback CGI::AJAX
  9. 9. Архитектура ”Wave Perl 0.0001” Сервер CGI::Ajax /tmp/database.txt print <<END; База Данных Wave Браузер Таймер
  10. 10. Пишем код 1: Копипаст сэмпла CGI::Ajax <ul><li>use strict; </li></ul><ul><li>use CGI; # or any other CGI:: form handler/decoder </li></ul><ul><li>use CGI::Ajax; </li></ul><ul><li>my $cgi = new CGI; </li></ul><ul><li>my $pjx = new CGI::Ajax( ' exported_func ' => &perl_func ); </li></ul><ul><li>print $pjx->build_html ( $cgi , &Show_HTML); </li></ul><ul><li>sub perl_func { </li></ul><ul><li>my $input = shift; </li></ul><ul><li>my $output = $input . &quot; was the input! &quot;; </li></ul><ul><li>return( $output ); </li></ul><ul><li>} </li></ul><ul><li>sub Show_HTML { </li></ul><ul><li>my $html = <<EOHTML; </li></ul><ul><li><HTML><BODY>Enter something: </li></ul><ul><li><input type=&quot;text&quot; name=&quot;val1&quot; id=&quot;val1&quot; </li></ul><ul><li>onkeyup=&quot; exported_func( ['val1'], ['resultdiv'] ); &quot;> </li></ul><ul><li><br> </li></ul><ul><li><div id=&quot;resultdiv&quot;></div> </li></ul><ul><li></BODY></HTML> </li></ul><ul><li>EOHTML </li></ul><ul><li>return $html ; </li></ul><ul><li>} </li></ul>Полная инкапсуляция в одном файле ! Модуль автоматизирует: - AJAX-вызовы - Инфраструру AJAX-вызовов - Paзделение Сallback'а и программы
  11. 11. Пишем код 2: Клиентская часть <ul><li>sub Show_HTML { </li></ul><ul><ul><li>my $html = <<EOHTML; </li></ul></ul><ul><ul><li><HTML><BODY> </li></ul></ul><ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul></ul><ul><ul><li>function js_process_func(content) { </li></ul></ul><ul><ul><li>if (content != document.getElementById('val1').value)      document.getElementById('val1').value = content; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li><h1>Wave on Perl:</h1> </li></ul></ul><ul><ul><li><textarea cols=&quot;30&quot; rows=&quot;6&quot; name=&quot;val1&quot; id=&quot;val1&quot; </li></ul></ul><ul><ul><ul><li>onkeyup=&quot; exported_func( ['val1'], [js_process_func] ); &quot;></textarea> </li></ul></ul></ul><ul><ul><li></BODY></HTML> </li></ul></ul><ul><li>EOHTML </li></ul><ul><ul><li>return $html ; </li></ul></ul><ul><li>} </li></ul>
  12. 12. Пишем код 3: Добавляем БД на сервер <ul><li>our $database = &quot; /tmp/wave_db.txt &quot;; </li></ul><ul><li>... </li></ul><ul><li># $file_content = get_db_value($file_name); </li></ul><ul><li>sub get_db_value { </li></ul><ul><li>open(IN, $_[0] ); </li></ul><ul><li>my $result = join('', <IN>); </li></ul><ul><li>close(IN); </li></ul><ul><li>return $result ; </li></ul><ul><li>} </li></ul><ul><li># save_db_value($file_name, $file_content); </li></ul><ul><li>sub save_db_value { </li></ul><ul><li>my ( $database , $content ) = @_; </li></ul><ul><li>open(OUT, ' > ', $database ); # TODO: Add flock </li></ul><ul><li>print OUT $content ; </li></ul><ul><li>close(OUT); </li></ul><ul><li>} </li></ul><ul><li>... </li></ul><ul><li>sub perl_func { </li></ul><ul><li>save_db_value( $database , $_[0] ); </li></ul><ul><li>return (get_db_value( $database )); </li></ul><ul><li>} </li></ul>Велосипеды и костыли
  13. 13. Пишем код 4: Добавляем js-таймер <ul><li>my $pjx = new CGI::Ajax( </li></ul><ul><li>' exported_func ' => &perl_func, </li></ul><ul><li>' update_func ' => &update_func, </li></ul><ul><li>); </li></ul><ul><li>... </li></ul><ul><li>sub update_func { </li></ul><ul><li>return (get_db_value( $database )); </li></ul><ul><li>} </li></ul><ul><li>... </li></ul><ul><li>sub Show_HTML { </li></ul><ul><li>my $html = <<EOHTML; </li></ul><ul><li><HTML><BODY onload=&quot; setTimeout(internal_timer, 1000); &quot;> </li></ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>... </li></ul><ul><li>function internal_timer() { </li></ul><ul><li>update_func( ['val1'], [js_process_func] ); </li></ul><ul><li>setTimeout(internal_timer, 1000); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li>... </li></ul>Новое в серверном коде Новое в клиентском коде
  14. 14. Оно работает!!! <ul><li>Есть куда расти: </li></ul><ul><li>Блокировка записи </li></ul><ul><li>Авторизация </li></ul><ul><li>Добавление WaveID </li></ul><ul><li>Мультимедийный контент </li></ul><ul><li>Свистелки </li></ul><ul><li>... </li></ul><ul><li>PROFIT! </li></ul>
  15. 15. Бонус: граф вызовов Серверный код Клиентский код textarea.onKeyUp() exported_func exported_func js_process_func() internal_timer() update_func update_func js_process_func() textarea.onKeyUp exported_func exported_func js_process_func
  16. 16. Ссылки <ul><li>http://search.cpan.org/~bpederse/CGI-Ajax-0.707/lib/CGI/Ajax.pm </li></ul><ul><li>http://cpanratings.perl.org/dist/CGI-Ajax </li></ul><ul><li>http://2009.yapcrussia.org/saintperl/talk/53 </li></ul><ul><li>Идея для модуля CPAN: Написать автогенератор графа вызовов для CGI-Ajax </li></ul>Ссылки Спасибо!!!

×