java script для насыщенных интерфейсов андрей оконечников
TRANSCRIPT
![Page 1: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/1.jpg)
JavaScript для насыщенных пользовательскихинтерфейсов.
Обзор фреймворков, скорость разработки, особенности поддержки.
© Леонид Хачатуров, Андрей Оконечников. 2007
![Page 2: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/2.jpg)
Что такое JavaScript фреймворк и зачем он нужен?
![Page 3: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/3.jpg)
Prototype, JQuery, YUI, Mochikit, Mootools, what_ever?...
Задача всех фреймворков — сделать жизнь разработчика легче.
![Page 4: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/4.jpg)
JavaScript фреймворк = отсутствующая в языке JavaScript стандартная библиотека классов
![Page 5: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/5.jpg)
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.
![Page 6: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/6.jpg)
JavaScript фреймворк = простая кросс-браузерная разработка
![Page 7: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/7.jpg)
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.
![Page 8: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/8.jpg)
Классификация JavaScript фреймворков
![Page 9: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/9.jpg)
Первый уровень1
Photo by andreika
![Page 10: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/10.jpg)
• Selectors API
• кросс-браузерность, заплатки для ошибок в браузерах
• минимальный набор «приятностей» — работа с CSS-классами
Base2 Дина Эдвардса http://dean.edwards.name/weblog/2007/03/yet-another/
![Page 11: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/11.jpg)
Второй уровень2
Photo by philipmak
![Page 12: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/12.jpg)
• «Синтаксический сахар» для работы с массивами, строками, enumerables и многим другим
• Простой кросс-браузерный Ajax
• Навигация по DOM
• ООП (классы, наследование и т. д.)
Функциональность I уровня +
Prototype, JQuery, ...
![Page 13: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/13.jpg)
Третий уровень3
Photo by trehala
![Page 14: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/14.jpg)
Yahoo! UI Library, OpenRico, MochiKit, Script.aculo.us
• Визуальные эффекты
• Библиотека готовых компонентов (виджетов)
• API для создания собственных компонентов
Функциональность I и II уровней +
![Page 15: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/15.jpg)
Есть и другие...
![Page 16: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/16.jpg)
Четвертый уровень4
Photo by trehalaPhoto by Sephiroty Fiesta
![Page 17: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/17.jpg)
Сравнение основных JavaScript фреймворков
![Page 18: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/18.jpg)
Скорость работы с селекторами
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/
![Page 19: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/19.jpg)
Популярность фреймворков
на основе данных Ajaxian.com http://ajaxian.com/archives/ajaxiancom-2006-survey-results
Yahoo! UI5%
jQuery7%
Moo.fx11%
Dojo19%
Script.aculo.us33%
Prototype43%
![Page 20: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/20.jpg)
Поддержка основных функций и объем
DOM CSS Ajax JSON FX Widgets Размер (КБ)
Base2 • • – – – – 20
Prototype • • • • – – 94
jQuery • • • – • – 55
MooTools • • • • • • 36
Dojo • • • • • • 148
MochiKit • • • • • • 113
Yahoo! UI • • • • • • 684
![Page 21: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/21.jpg)
Структура и функциональность типичного JavaScript фреймворка
![Page 22: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/22.jpg)
$, $$, $A, $R, $F, $H и некоторые другие — возвращают ноды, массивы, хэши, элементы форм, и т. д. в виде, пригодном для дальнейшего использования с другими функциями Prototype.
1. Вспомогательные методыВспомогательные методы — это набор методов и/или алиасов для сокращения записи и удобства вызова.
![Page 23: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/23.jpg)
• получение массива элементов по селектору,
• работа с атрибутом class.
2. Работа с CSS
![Page 24: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/24.jpg)
Element.getElementsBySelector(element, "#treeview ul li span") -> [HTMLElement...]
Element.setStyle(element, {color: blue, textDecoration: underline})
![Page 25: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/25.jpg)
• кросс-браузерное добавление/удаление обработчиков событий,
• поиск элемента, на котором произошло событие.
3. Работа с событиями
![Page 26: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/26.jpg)
HTML
<form id="signinForm" method="post" action="/auth/signin">…</form>
JavaScript
Event.observe(window, 'load', function() { Event.observe('signinForm', 'submit', checkForm);});
![Page 27: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/27.jpg)
• создание и выполнение Ajax-запросов,
• работа с колбэками,
• обновление данных в HTML контейнерах.
4. Ajax
![Page 28: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/28.jpg)
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' }); }});
![Page 29: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/29.jpg)
• навигация по DOM,
• управление видимостью элементов,
• работа с размерами и позиционированием,
• создание и добавление новых элементов.
5. DOM
![Page 30: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/30.jpg)
$(element).down(1).next('li', 2).hide();
$('error-message', 'welcome-message').invoke('toggle');
![Page 31: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/31.jpg)
• блокировка-разблокировка полей,
• установка фокуса,
• сериализация полей,
• auto-complete для элементов форм.
6. Формы
![Page 32: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/32.jpg)
focusFirstElement($('myform'));
$('person-example').serialize(); ->'username=leonya&age=24&hobbies=coding&hobbies=biking'
![Page 33: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/33.jpg)
• различные преобразования (capitalize, dasherize, camelize),
• поиск подстрок,
• эскейпинг HTML,
• вырезание разметки и скриптов,
• парсинг строки запроса и многое другое...
7. Строки
![Page 34: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/34.jpg)
'background-color'.camelize(); -> 'backgroundColor'
'<div class="article">This is an article</div>'.escapeHTML(); -> "<div class="article">This is an article</div>"
'section=blog&id=45'.toQueryParams(); -> {section: 'blog', id: '45'}
![Page 35: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/35.jpg)
Enumerables — это суперкласс для работы с коллекциями однотипных данных (массивы, хэши, строки, другие объекты)
8. Enumerables (коллекции)
• создание, заполнение и поиск по коллекциям,
• различные преобразование коллекций,
• создание производных коллекций из коллекций.
![Page 36: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/36.jpg)
['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]
![Page 37: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/37.jpg)
А нужен ли вообще фреймворк?
![Page 38: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/38.jpg)
- Я просто хочу попробовать на этом маленьком сайте
- Мне хочется показывать картинки в красивых попапах, поэтому мне нужен фреймворк
- Перепишу-ка я свои 5 функций на фреймворке...
![Page 39: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/39.jpg)
Фреймворк НЕ нужен!
![Page 40: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/40.jpg)
• Большой проект с большим количеством функциональности
• Функциональность будет постоянно расти
• В команде будет несколько человек
![Page 41: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/41.jpg)
Фреймворк пригодится!
![Page 42: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/42.jpg)
Критерии выбора фреймворка для конкретного проекта
![Page 43: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/43.jpg)
• Начните с ТЗ
• Все фреймворки имеют плюсы и минусы
• Выбирайте наименьшее зло
• Думайте наперед
Насколько планируемая функциональность реализуема во фреймворке?
![Page 44: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/44.jpg)
• Скорее всего, выбор уже сделан до этого...
• Менять фреймворк — себе дороже
• Но если все-таки менять?
• Пишите Unit-тесты!
• Оцените затраты на портацию кода
• Пишите портируемый код
В проекте уже используется фреймворк?
![Page 45: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/45.jpg)
• Плохо документированный фреймворк — практически бесполезен
• Достаточно ли времени на обучение?
• Документируйте свой код
А документация есть?
![Page 46: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/46.jpg)
• Серверная часть может не позволить использовать некоторые функции фреймворка (ASP.NET & Script.aculo.us)
• Некоторые серверные фреймворки могут быть связаны с JavaScript фреймворками (Ruby on Rails & Prototype)
Не забудьте про серверную часть!
![Page 47: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/47.jpg)
Стоит ли разрабатывать свой фреймворк?
![Page 48: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/48.jpg)
• Масса свободного времени?
• У вас есть лишние разработчики?
• Вам кажется, что существующие фреймворки не подходят?
• Знаете, как сделать лучше?
![Page 49: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/49.jpg)
Не изобретайте!Улучшайте!
![Page 50: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/50.jpg)
• Займитесь самообразованием
• Найдите проекты или начните свой собственный
• Гуглите, Яндексите, ищите ;)
• Поддерживайте open-source
![Page 51: Java Script для насыщенных интерфейсов андрей оконечников](https://reader034.vdocuments.pub/reader034/viewer/2022052621/558789bcd8b42a4c318b466e/html5/thumbnails/51.jpg)
Спасибо за внимание!Кстати, мы с удовольствием ответим на любые вопросы по данному докладу.
Леонид Хачатуров [email protected]
Андрей Оконечников [email protected]