$30 off During Our Annual Pro Sale. View Details »

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

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

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

Andrey Okonetchnikov

April 13, 2007
Tweet

More Decks by Andrey Okonetchnikov

Other Decks in Programming

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. Спасибо за внимание!
    Кстати, мы с удовольствием ответим
    на любые вопросы по данному докладу.
    Леонид Хачатуров
    [email protected]
    Андрей Оконечников
    [email protected]

    View Slide