Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Saint Perl 2009: CGI::Ajax demo

1,386 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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>Ссылки Спасибо!!!

×