JavaScript для насыщенных пользовательских интерфейсов

Обзор фреймворков, скорость разработки, особенности поддержки.

Transcript

1. JavaScript для насыщенных
   пользовательских
   интерфейсов.
   Обзор фреймворков, скорость разработки,
   особенности поддержки.
   © Леонид Хачатуров, Андрей Оконечников. 2007
   

   View Slide

2. Что такое JavaScript
   фреймворк и зачем
   он нужен?
   

   View Slide

3. Prototype — JavaScript-фреймворк, упрощающий
   разработку динамичных веб-приложений
   “ ”
   

   View Slide

4. jQuery — быстрая и компактная
   JavaScript-библиотека, упрощающая обход
   HTML-документов, обработку событий, создание
   визуальных эффектов и Ajax-взаимодействий
   “
   ”
   

   View Slide

5. Yahoo! UI Library — это написанный на JavaScript
   набор утилит и интерфейсных элементов,
   которые могут применяться для разработки
   интерактивных веб-приложений, использующих
   технологии DOM Scripting, DHTML и Ajax.
   “
   ”
   

   View Slide

6. Prototype, JQuery, YUI,
   Mochikit, Mootools,
   what_ever?...
   Задача всех фреймворков — сделать
   жизнь разработчика легче.
   

   View Slide

7. JavaScript фреймворк =
   отсутствующая в языке JavaScript
   стандартная библиотека классов
   

   View Slide

8. var treeView = document.getElementById('treemenu');
   if(!treeView) return;
   var aMenus = treeView.getElementsByTagName('LI');
   for (var i = 0; i < aMenus.length; i++) {
   var mclass = aMenus[i].className;
   if (mclass.indexOf('treenode') > -1) {
   var submenu = aMenus[i].childNodes;
   for (var j = 0; j < submenu.length; j++) {
   if (submenu[j].tagName == 'A') {
   // Ну давайте уже сделаем что-нибудь полезное!
   }
   }
   }
   }
   $$("ul.treemenu li.treenode a").each( function(item) {
   // делаем что-нибудь полезное
   });
   vs.
   

   View Slide

9. JavaScript фреймворк =
   простая кросс-браузерная разработка
   

   View Slide

10. function createXMLHttpRequest() {
    if (typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
    return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    throw new Error("XMLHttpRequest not supported");
    }
    }
    new Ajax.Request();
    vs.
    

    View Slide

11. Классификация
    JavaScript фреймворков
    

    View Slide

12. Первый
    уровень
    1
    Photo by andreika
    

    View Slide

13. • Selectors API
    • кросс-браузерность, заплатки для ошибок
    в браузерах
    • минимальный набор «приятностей» —
    работа с CSS-классами
    Base2 Дина Эдвардса
    http://dean.edwards.name/weblog/2007/03/yet-another/
    

    View Slide

14. Второй
    уровень
    2
    Photo by philipmak
    

    View Slide

15. • «Синтаксический сахар» для работы с массивами,
    строками, enumerables и многим другим
    • Простой кросс-браузерный Ajax
    • Навигация по DOM
    • ООП (классы, наследование и т. д.)
    Функциональность I уровня +
    Prototype, JQuery, ...
    

    View Slide

16. Третий
    уровень
    3
    Photo by trehala
    

    View Slide

17. Yahoo! UI Library, OpenRico,
    MochiKit, Script.aculo.us
    • Визуальные эффекты
    • Библиотека готовых компонентов (виджетов)
    • API для создания собственных компонентов
    Функциональность I и II уровней +
    

    View Slide

18. Есть и другие...
    

    View Slide

19. Четвертый
    уровень
    4
    Photo by trehala
    Photo by Sephiroty Fiesta
    

    View Slide

20. Сравнение основных
    JavaScript фреймворков
    

    View Slide

21. Скорость работы с селекторами
    jQuery 1.1.2
    DomQuery (YUI)
    Dojo 0.4.2
    Prototype 1.5.1rc2
    Base2
    0 мс 5 мс 10 мс 15 мс 20 мс
    3,83 мс
    5,33 мс
    8,63 мс
    8,97 мс
    19,23 мс
    на основе данных http://www.andrewdupont.net/test/double-dollar/
    

    View Slide

22. Популярность фреймворков
    на основе данных Ajaxian.com
    http://ajaxian.com/archives/ajaxiancom-2006-survey-results
    Yahoo! UI
    5%
    jQuery
    7%
    Moo.fx
    11%
    Dojo
    19%
    Script.aculo.us
    33%
    Prototype
    43%
    

    View Slide

23. Поддержка основных функций и объем
    DOM CSS Ajax JSON FX Widgets Размер (КБ)
    Base2 • • – – – – 20
    Prototype • • • • – – 94
    jQuery • • • – • – 55
    MooTools • • • • • • 36
    Dojo • • • • • • 148
    MochiKit • • • • • • 113
    Yahoo! UI • • • • • • 684
    

    View Slide

24. Структура и
    функциональность
    типичного JavaScript
    фреймворка
    

    View Slide

25. $, $$, $A, $R, $F, $H и некоторые другие —
    возвращают ноды, массивы, хэши, элементы форм,
    и т. д. в виде, пригодном для дальнейшего
    использования с другими функциями Prototype.
    1. Вспомогательные методы
    Вспомогательные методы — это набор
    методов и/или алиасов для сокращения записи и
    удобства вызова.
    

    View Slide

26. • получение массива элементов по селектору,
    • работа с атрибутом class.
    2. Работа с CSS
    

    View Slide

27. Element.getElementsBySelector(element, "div.treeview ul li
    span") -> [HTMLElement...]
    Element.setStyle(element, {color: blue, textDecoration:
    underline})
    

    View Slide

28. • кросс-браузерное добавление/удаление
    обработчиков событий,
    • поиск элемента, на котором произошло событие.
    3. Работа с событиями
    

    View Slide

29. HTML
    
    …
    
    JavaScript
    Event.observe(window, 'load', function() {
    Event.observe('signinForm', 'submit', checkForm);
    });
    

    View Slide

30. • создание и выполнение Ajax-запросов,
    • работа с колбэками,
    • обновление данных в HTML контейнерах.
    4. Ajax
    

    View Slide

31. var url = encodeURIComponent('http://www.google.com/search?q=Prototype');
    new Ajax.Request(url, {
    method: 'get',
    onSuccess: function(transport) {
    var notice = $('notice');
    if (transport.responseText.match(/href="http:\/\/prototypejs.org/))
    notice.update('Yeah! You are in the Top 10!').setStyle({ background:
    '#dfd' });
    }
    });
    

    View Slide

32. • навигация по DOM,
    • управление видимостью элементов,
    • работа с размерами и позиционированием,
    • создание и добавление новых элементов.
    5. DOM
    

    View Slide

33. $(element).down(1).next('li', 2).hide();
    $('error-message', 'welcome-message').invoke('toggle');
    

    View Slide

34. • блокировка-разблокировка полей,
    • установка фокуса,
    • сериализация полей,
    • auto-complete для элементов форм.
    6. Формы
    

    View Slide

35. focusFirstElement($('myform'));
    $('person-example').serialize(); ->
    'username=leonya&age=24&hobbies=coding&hobbies=biking'
    

    View Slide

36. • различные преобразования (capitalize, dasherize, camelize),
    • поиск подстрок,
    • эскейпинг HTML,
    • вырезание разметки и скриптов,
    • парсинг строки запроса и многое другое...
    7. Строки
    

    View Slide

37. 'background-color'.camelize(); -> 'backgroundColor'
    'This is an article'.escapeHTML();
    -> "<div class="article">This is an article</div>"
    'section=blog&id=45'.toQueryParams();
    -> {section: 'blog', id: '45'}
    

    View Slide

38. Enumerables — это суперкласс для работы с
    коллекциями однотипных данных (массивы, хэши,
    строки, другие объекты)
    8. Enumerables (коллекции)
    • создание, заполнение и поиск по коллекциям,
    • различные преобразование коллекций,
    • создание производных коллекций из коллекций.
    

    View Slide

39. ['Hitch', "Hiker's", 'Guide', 'To', 'The', 'Galaxy'].collect
    (function(s) {
    return s.charAt(0).toUpperCase();
    }).join('')
    // -> 'HHGTTG'
    $R(1, 10).findAll(function(n) { return 0 == n % 2; })
    // -> [2, 4, 6, 8, 10]
    

    View Slide

40. Средства разработки и
    отладки
    

    View Slide

41. Использование alert();
    • Нелинейный процесс отладки
    • Надоедливые сообщения
    • Сложная конкатенация строк
    • Трудно найти ошибку
    alert('width: ' + width + ' height: ' + height);
    Photo by chrismaverick
    

    View Slide

42. Пора сказать прощай alert()!
    +
    

    View Slide

43. ✓ Inspect and edit HTML
    ✓ Tweak CSS to perfection
    ✓ Visualize CSS metrics
    ✓ Monitor network activity
    ✓ Debug and pro le JavaScript
    ✓ Quickly nd errors
    ✓ Explore the DOM
    ✓ Execute JavaScript on the y
    ✓ Logging for JavaScript
    

    View Slide

44. console.log('width: %d height: %d', width, height);
    var myArray = ['item1', 'item2', 'item3'];
    console.log(myArray);
    console.debug('I am debug');
    console.info('I am info');
    console.warn('I am a warning');
    console.error('I am an error');
    

    View Slide

45. Unit-тесты в JavaScript
    • Scriptaculous Testing Framework
    • JsUnit Framework (Hieatt)
    • JsUnit Framework (Schaible)
    

    View Slide

46. new Test.Unit.Runner({
    testDelConfirmatorBasics: function() { with(this) {
    var d = new DelConfirmator("delItem1");
    assertInstanceOf(DelConfirmator, d);
    d.showConfirmation('Delete this item?');
    assertEqual(true, d.initialized);
    d._removeObjDialog();
    assertEqual(false, d.initialized);
    }}
    });
    

    View Slide

47. А нужен ли вообще
    фреймворк?
    

    View Slide

48. - Я просто хочу попробовать на этом маленьком сайте
    - Мне хочется показывать картинки в красивых
    попапах, поэтому мне нужен фреймворк
    - Перепишу-ка я свои 5 функций на фреймворке...
    

    View Slide

49. Фреймворк НЕ нужен!
    

    View Slide

50. • Большой проект с большим количеством
    функциональности
    • Функциональность будет постоянно расти
    • В команде будет несколько человек
    

    View Slide

51. Фреймворк пригодится!
    

    View Slide

52. Критерии выбора
    фреймворка для
    конкретного проекта
    

    View Slide

53. • Начните с ТЗ
    • Все фреймворки имеют плюсы и минусы
    • Выбирайте наименьшее зло
    • Думайте наперед
    Насколько планируемая
    функциональность
    реализуема во фреймворке?
    

    View Slide

54. • Скорее всего, выбор уже сделан до этого...
    • Менять фреймворк — себе дороже
    • Но если все-таки менять?
    • Пишите Unit-тесты!
    • Оцените затраты на портацию кода
    • Пишите портируемый код
    В проекте уже используется
    фреймворк?
    

    View Slide

55. • Плохо документированный фреймворк —
    практически бесполезен
    • Достаточно ли времени на обучение?
    • Документируйте свой код
    А документация есть?
    

    View Slide

56. • Серверная часть может не позволить
    использовать некоторые функции фреймворка
    (ASP.NET & Script.aculo.us)
    • Некоторые серверные фреймворки могут быть
    связаны с JavaScript фреймворками (Ruby on Rails
    & Prototype)
    Не забудьте про
    серверную часть!
    

    View Slide

57. Стоит ли разрабатывать
    свой фреймворк?
    

    View Slide

58. • Масса свободного времени?
    • У вас есть лишние разработчики?
    • Вам кажется, что существующие фреймворки
    не подходят?
    • Знаете, как сделать лучше?
    

    View Slide

59. Не изобретайте!
    Улучшайте!
    

    View Slide

60. • Займитесь самообразованием
    • Найдите проекты или начните свой собственный
    • Гуглите, Яндексите, ищите ;)
    • Поддерживайте open-source
    

    View Slide

61. Спасибо за внимание!
    Кстати, мы с удовольствием ответим
    на любые вопросы по данному докладу.
    Леонид Хачатуров
    leonidkhachaturov@gmail.com
    Андрей Оконечников
    andrej.okonetschnikow@gmail.com
    

    View Slide