![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
pozitronikПо моим ощущениям - полезно, но много неоднозначностей. Основных недостатка два: первый - одновременно шло по три доклада и приходилось выбирать, второй - по теме доклада не всегда было можно определить, о чём пойдёт речь. Сами доклады - все до единого - не содержали каких-то откровений; всё это могло быть выложено (и, большей частью - действительно выложено) в паблик и доступно для изучения. Но в паре случаев живое общение с докладчиками было действительно очень полезно.
Открыл конференцию Дэйв Метвин, президент jQuery Foundation и один из ведущих разработчиков jQuery. Его доклад был посвящён проблемам производительности jQuery, и в ходе него он пытался доказать, что никаких проблем нет. Доклад сопровождался слайдами с русскими пословицами, и всю суть доклада можно описать одной из них - "плохому танцору яйца мешают".
jQuery, по словам Дэйва, не медленный, он не создаёт никакого отдельного слоя исполнения, это просто JS-библиотека (капитанства в докладах было очень много). Все проблемы - от использования неэффективных техник.
Как пример, приводилось два селектора:
$(':hidden') и $('.hidden').
(подразумевается, что .hidden{display:none})
Первый селектор (а, точнее, jQuery псевдоселектор) будет работать на порядок медленнее, поскольку он не реализован в браузерах, и jQuery реализует его самостоятельно. А для этого приходится пройти по всему DOM, находя скрытые объекты.
Выборку же по классу jQuery может передать браузеру, который, по понятным причинам, сделает это моментально.
К сожалению, подобных конкретных jQuery-специфичных примеров больше почти не было, а остальные, вроде оптимизации циклов и порядка условий в операторах, должны быть известны даже новичку.
Дэйв старательно избегал упоминал сравнений jQuery с другими JS-фреймворками, которые, по тестам, на одних и тех же операциях, оказывались в два-три раза быстрее. Простим ему это, ведь нелегко хаять собственное детище =)
К тому же Дэйв не упомянул об основной загвоздке: никого не волнует скорость работы бибилиотеки, самого JS, или даже всего браузера в целом. Важно, насколько быстро под это всё можно писать production code, а jQuery тут - безальтернативный вариант.
На следующий доклад пришлось выбирать между Всеволодом Шмыровым (он должен был рассказать о geoQuery) и Ильёй Кантором, который рассказывал об особенностях и продвинутых техниках использования событий в jQuery. Я выбрал Кантора, и не пожалел: это, пожалуй, был самый интересный и полезный доклад, с конкретными примерами и наглядной демонстрацией. Очень надеюсь, что запись доклада будет выложена в открытый доступ, а пока приведу несколько конкретных примеров:
- Различия между stopPropagation() и stopImmediatePropagation(). Оба метода останавливают всплытие события по DOM, но с одним отличием: stopImmediatePropagation() останавливает все всплытия всех событий для всех родителей объекта. Тут же это отличие было показано на примере реализации простейшего валидатора форм (запрещался сабмит формы при наличии невалидных полей в ней).
- Почему return(false) и preventDefault - это одно и то же.
- Как правильно создавать через jQuery объекты в цикле с передачей им внешнего параметра через одно из свойств объекта. Тут же обнаружилось, что один и тот же код тут ведёт себя по разному на jQuery 1.x и 2.x; Илья не растерялся и тут же объяснил причины такого поведения.
- Самое вкусное: рассказ о том, как назначаются обработчики событий в jQuery, чем они отличаются от нативных обработчиков, и к каким могут привести к проблемам. Простой пример:
for (var i=1;i<100;i++){
var d=$('div').onclick(function(){...});
$('#somediv').append(d);
}
$('#somediv').remove();//Или нативно, через delete, хотя тут уже не помню точно
Исполнение этого кода было показано в профайлере: использование памяти очевидным образом росло при создании каждого объекта, однако память не освобождалась при удалении родительского объекта. Оказалось, что у jQuery есть что-то вроде глобального массива назначенных событий, которые нельзя так просто взять и удалить.
Quick & dirty trick для обхода этой ситуации - делать объекту detach (а потом уже удалять, при необходимости).
- Собздание собственных событий. jQuery имеет API, через которое можно создать собственное событие (например - onchange, действительно работающий при изменении содержимого поля, а не при потере изменённым полем фокуса, как реализовано нативно) и т.д. Отличная штука для создания того же валидатора, обязательно нужно разобраться и применять.
С одной стороны - ничего такого, чего нельзя было обнаружить на api.jquery.com или learn.javascript.ru. Но Илья оказался прекрасным докладчиком, и великолепно отвечал даже на реально заковыристые вопросы.
Затем я послушал доклад Эрика Манна, он рассказывал о WebWorkers - способе реализации многопоточного JS в HTML5 и собственной обёртке над ними (menehune.js). Я, к сожалению, почти не знаком с HTML5, поэтому не смог оценить значимость доклада и полезность обёртки, но отметку потестить WebWorkers себе поставил. Презентация Эрика есть тут: http://eam.me/jqru2013.
Манн показывает работу многопоточного HTML5-приложения на примере "шекспировских мартышек".
Доклад Дмитрия Кузнецова из 2ГИС был очень неплох. Он описал процесс создания фронтенда 2ГИС, попробую кратко передать суть.
Обычно проект проходит через три стадии - дизайн, разработку и тестирование, и на всех трёх стадиях в проект вовлечены разные специалисты - дизайнер, программист, тестировщик. Однако сам процесс перехода между стадиями крайне важен, т.к. должен передаваться контекст разработки. Дизайнер не только должен нарисовать красивый и удобный интерфейс, он должен понимать, как верстальщик будет его реализовывать, какие сложности при этом возникнут. Верстальщик должен понимать, для чего JS-программистами будут использоваться те или иные элементы, и как облегчить им жизнь. Что обязателен двусторонний фидбек по всей линейке разработки, чтобы вся команда понимала, что к чему.
В связи с этим предложен разбивать эти три стадии на целых восемь:
1) Разбиение интерфейса на модули
2) Описание форматов данных и всех состояний каждого модуля.
3) Я прослушал =)
4) Вёрстка
5) Анимация
6) DOM-тесты и контентные тесты
7) Реализация внутримодульной логики
8) И, наконец, интеграция модулей.
Дополнительный пункт - code review. Дмитрий подчеркнул обязательность передачи кода на ревью (аргументация известна - в своём глазу бревна не видно), при этом ревьювер также должен быть в теме проекта.
В остальной части доклада речь шла о том, как распараллелить выполнение этих пунктов, и какие инструменты для этого используются (тут речь шла о нескольких внутренних разработках, которые докладчик обещал со временем выложить в опенсорс).
Четвёртым был ещё один отличный доклад посвящённый разработке адаптивного дизайна на jQuery. Дмитрий Демидовский из AGIMA рассказал, как нужно адаптировать дизайн сайтов к современным (и не очень) мобильным устройствам. Теория была коротка: используем управление загрузкой (подгрузка контента по мере необходимости), адаптируем не только интерфейс но и способы взаимодействия (жесты, акселерометры и прочие мобильные удобства), вместо парсинга юзерагента используем feature detection. Плюс, сайт должен работать без JS (хотя бы базово) потому что мобильные устройства могут относительно долго загружать JS и даже совсем его не загрузить.
А дальше шла практика - Дмитрий рассказал о куче jQuery-плагинов, реализующих вышеописанные приятности даже там, где этого нативно нет (например, поддержку тач-событий на Blackberry) и других техниках:
- Поддержка жестов: jGesture/Hammer.js
- Адаптация изображений: стандартные способы (задания max-width:100%, вывод разных изображений для разных разрешений, использование SVG) и новые: использование HTML5-тега (поддерживает несколько src) и эмуляция тега с помощью плагина jQueryPicture.
- Отложенная загрузка контента и скриптов: jQuery Lazy Load, GetScript.
- Использование аппаратного ускорения - переделка всех JS-анимаций на CSS transform и CSS transitions. Два плагина, позволяющих без правок кода сделать это для jQuery.animate() - jQueryTransit и jQuery Animate Enhanced.
- Проблемы создания навигационных меню на мобильниках: недостаточно места для горизонтального меню, проблемы с поддержкой pozition:fixed, остановка исполнения JS на iOS-устройствах при касании экрана. Решение проблем: дизайнерские методы (переделка меню) и эмуляция скроллинга: от банального overflow:scroll в родительском контейнере до плагинов jQuery Nice Scroll и Tiny Scrollbar.
- Почему слайдеры - это хорошо, но иногда - плохо. Проблемы использования слайдеров с видео и "тяжёлым" контентом.
- Поддержка JQueryUI на мобильных устройствах (плагин TouchPunch).
И, в финале, методики тестирования на мобильных устройствах.
В общем - крайне полезный с практической точки зрения доклад, очень понравилось.
А вот напоследок я выбрал доклад о разработке интерфейсов на jQuery от Артура Столяра. Тема доклада была очень многообещающая (создание пользовательских интерфейсов на jQuery - действительно интересная задача), зал был переполнен.
Но, в итоге, Артур битый час рассказывал про какую-то фигню, без предисловий, без объяснений, без jQuery. Только в конце он сказал: вот так вот работает мой фреймворк ComfortUI, спрашивайте ваши ответы.
- То есть вы нам рассказывали про ваш косты... эээ... фреймворк? - спросил озадаченный слушатель.
- Да. Отличный фреймворк, позволяет проектировать интерфейсы взаимодействия независимо от дизайна и вёрстки.
- Отлично, но где используется этот фреймворк?
- Он используется мной, на сайте нашей компании (тут я зашёл с планшета на этот сайт, засмеялся, потом скормил его валидатору и засмеялся ещё раз).
- То есть, вы единственный человек, который его видел?
- Да. Но через месяц я выложу исходники на гитхаб.
Не смешно.
Ну и финальная сессия вопросов и ответов; я рассказал известную шутку: вопрос на stackoverflow "Как мне сложить два числа на JavaScript" и ответ "Не знаю, но где-то был такой плагин для jQuery", а затем спросил - есть ли проблема в том, что лёгкость jQuery плодит разработчиков, не понимающих основ, и как с этим бороться? Увы, разработчики ответили мне в капитанском стиле, что это, мол, не проблема jQuery.
Впрочем, были и другие интересные вопросы, неплохой диалог получился. И последующий фуршет тоже.
Это всё, что я могу рассказать о войне во Вьетнаме.
Открыл конференцию Дэйв Метвин, президент jQuery Foundation и один из ведущих разработчиков jQuery. Его доклад был посвящён проблемам производительности jQuery, и в ходе него он пытался доказать, что никаких проблем нет. Доклад сопровождался слайдами с русскими пословицами, и всю суть доклада можно описать одной из них - "плохому танцору яйца мешают".
jQuery, по словам Дэйва, не медленный, он не создаёт никакого отдельного слоя исполнения, это просто JS-библиотека (капитанства в докладах было очень много). Все проблемы - от использования неэффективных техник.
Как пример, приводилось два селектора:
$(':hidden') и $('.hidden').
(подразумевается, что .hidden{display:none})
Первый селектор (а, точнее, jQuery псевдоселектор) будет работать на порядок медленнее, поскольку он не реализован в браузерах, и jQuery реализует его самостоятельно. А для этого приходится пройти по всему DOM, находя скрытые объекты.
Выборку же по классу jQuery может передать браузеру, который, по понятным причинам, сделает это моментально.
К сожалению, подобных конкретных jQuery-специфичных примеров больше почти не было, а остальные, вроде оптимизации циклов и порядка условий в операторах, должны быть известны даже новичку.
Дэйв старательно избегал упоминал сравнений jQuery с другими JS-фреймворками, которые, по тестам, на одних и тех же операциях, оказывались в два-три раза быстрее. Простим ему это, ведь нелегко хаять собственное детище =)
К тому же Дэйв не упомянул об основной загвоздке: никого не волнует скорость работы бибилиотеки, самого JS, или даже всего браузера в целом. Важно, насколько быстро под это всё можно писать production code, а jQuery тут - безальтернативный вариант.
На следующий доклад пришлось выбирать между Всеволодом Шмыровым (он должен был рассказать о geoQuery) и Ильёй Кантором, который рассказывал об особенностях и продвинутых техниках использования событий в jQuery. Я выбрал Кантора, и не пожалел: это, пожалуй, был самый интересный и полезный доклад, с конкретными примерами и наглядной демонстрацией. Очень надеюсь, что запись доклада будет выложена в открытый доступ, а пока приведу несколько конкретных примеров:
- Различия между stopPropagation() и stopImmediatePropagation(). Оба метода останавливают всплытие события по DOM, но с одним отличием: stopImmediatePropagation() останавливает все всплытия всех событий для всех родителей объекта. Тут же это отличие было показано на примере реализации простейшего валидатора форм (запрещался сабмит формы при наличии невалидных полей в ней).
- Почему return(false) и preventDefault - это одно и то же.
- Как правильно создавать через jQuery объекты в цикле с передачей им внешнего параметра через одно из свойств объекта. Тут же обнаружилось, что один и тот же код тут ведёт себя по разному на jQuery 1.x и 2.x; Илья не растерялся и тут же объяснил причины такого поведения.
- Самое вкусное: рассказ о том, как назначаются обработчики событий в jQuery, чем они отличаются от нативных обработчиков, и к каким могут привести к проблемам. Простой пример:
for (var i=1;i<100;i++){
var d=$('div').onclick(function(){...});
$('#somediv').append(d);
}
$('#somediv').remove();//Или нативно, через delete, хотя тут уже не помню точно
Исполнение этого кода было показано в профайлере: использование памяти очевидным образом росло при создании каждого объекта, однако память не освобождалась при удалении родительского объекта. Оказалось, что у jQuery есть что-то вроде глобального массива назначенных событий, которые нельзя так просто взять и удалить.
Quick & dirty trick для обхода этой ситуации - делать объекту detach (а потом уже удалять, при необходимости).
- Собздание собственных событий. jQuery имеет API, через которое можно создать собственное событие (например - onchange, действительно работающий при изменении содержимого поля, а не при потере изменённым полем фокуса, как реализовано нативно) и т.д. Отличная штука для создания того же валидатора, обязательно нужно разобраться и применять.
С одной стороны - ничего такого, чего нельзя было обнаружить на api.jquery.com или learn.javascript.ru. Но Илья оказался прекрасным докладчиком, и великолепно отвечал даже на реально заковыристые вопросы.
Затем я послушал доклад Эрика Манна, он рассказывал о WebWorkers - способе реализации многопоточного JS в HTML5 и собственной обёртке над ними (menehune.js). Я, к сожалению, почти не знаком с HTML5, поэтому не смог оценить значимость доклада и полезность обёртки, но отметку потестить WebWorkers себе поставил. Презентация Эрика есть тут: http://eam.me/jqru2013.
Манн показывает работу многопоточного HTML5-приложения на примере "шекспировских мартышек".
Доклад Дмитрия Кузнецова из 2ГИС был очень неплох. Он описал процесс создания фронтенда 2ГИС, попробую кратко передать суть.
Обычно проект проходит через три стадии - дизайн, разработку и тестирование, и на всех трёх стадиях в проект вовлечены разные специалисты - дизайнер, программист, тестировщик. Однако сам процесс перехода между стадиями крайне важен, т.к. должен передаваться контекст разработки. Дизайнер не только должен нарисовать красивый и удобный интерфейс, он должен понимать, как верстальщик будет его реализовывать, какие сложности при этом возникнут. Верстальщик должен понимать, для чего JS-программистами будут использоваться те или иные элементы, и как облегчить им жизнь. Что обязателен двусторонний фидбек по всей линейке разработки, чтобы вся команда понимала, что к чему.
В связи с этим предложен разбивать эти три стадии на целых восемь:
1) Разбиение интерфейса на модули
2) Описание форматов данных и всех состояний каждого модуля.
3) Я прослушал =)
4) Вёрстка
5) Анимация
6) DOM-тесты и контентные тесты
7) Реализация внутримодульной логики
8) И, наконец, интеграция модулей.
Дополнительный пункт - code review. Дмитрий подчеркнул обязательность передачи кода на ревью (аргументация известна - в своём глазу бревна не видно), при этом ревьювер также должен быть в теме проекта.
В остальной части доклада речь шла о том, как распараллелить выполнение этих пунктов, и какие инструменты для этого используются (тут речь шла о нескольких внутренних разработках, которые докладчик обещал со временем выложить в опенсорс).
Четвёртым был ещё один отличный доклад посвящённый разработке адаптивного дизайна на jQuery. Дмитрий Демидовский из AGIMA рассказал, как нужно адаптировать дизайн сайтов к современным (и не очень) мобильным устройствам. Теория была коротка: используем управление загрузкой (подгрузка контента по мере необходимости), адаптируем не только интерфейс но и способы взаимодействия (жесты, акселерометры и прочие мобильные удобства), вместо парсинга юзерагента используем feature detection. Плюс, сайт должен работать без JS (хотя бы базово) потому что мобильные устройства могут относительно долго загружать JS и даже совсем его не загрузить.
А дальше шла практика - Дмитрий рассказал о куче jQuery-плагинов, реализующих вышеописанные приятности даже там, где этого нативно нет (например, поддержку тач-событий на Blackberry) и других техниках:
- Поддержка жестов: jGesture/Hammer.js
- Адаптация изображений: стандартные способы (задания max-width:100%, вывод разных изображений для разных разрешений, использование SVG) и новые: использование HTML5-тега
- Отложенная загрузка контента и скриптов: jQuery Lazy Load, GetScript.
- Использование аппаратного ускорения - переделка всех JS-анимаций на CSS transform и CSS transitions. Два плагина, позволяющих без правок кода сделать это для jQuery.animate() - jQueryTransit и jQuery Animate Enhanced.
- Проблемы создания навигационных меню на мобильниках: недостаточно места для горизонтального меню, проблемы с поддержкой pozition:fixed, остановка исполнения JS на iOS-устройствах при касании экрана. Решение проблем: дизайнерские методы (переделка меню) и эмуляция скроллинга: от банального overflow:scroll в родительском контейнере до плагинов jQuery Nice Scroll и Tiny Scrollbar.
- Почему слайдеры - это хорошо, но иногда - плохо. Проблемы использования слайдеров с видео и "тяжёлым" контентом.
- Поддержка JQueryUI на мобильных устройствах (плагин TouchPunch).
И, в финале, методики тестирования на мобильных устройствах.
В общем - крайне полезный с практической точки зрения доклад, очень понравилось.
А вот напоследок я выбрал доклад о разработке интерфейсов на jQuery от Артура Столяра. Тема доклада была очень многообещающая (создание пользовательских интерфейсов на jQuery - действительно интересная задача), зал был переполнен.
Но, в итоге, Артур битый час рассказывал про какую-то фигню, без предисловий, без объяснений, без jQuery. Только в конце он сказал: вот так вот работает мой фреймворк ComfortUI, спрашивайте ваши ответы.
- То есть вы нам рассказывали про ваш косты... эээ... фреймворк? - спросил озадаченный слушатель.
- Да. Отличный фреймворк, позволяет проектировать интерфейсы взаимодействия независимо от дизайна и вёрстки.
- Отлично, но где используется этот фреймворк?
- Он используется мной, на сайте нашей компании (тут я зашёл с планшета на этот сайт, засмеялся, потом скормил его валидатору и засмеялся ещё раз).
- То есть, вы единственный человек, который его видел?
- Да. Но через месяц я выложу исходники на гитхаб.
Не смешно.
Ну и финальная сессия вопросов и ответов; я рассказал известную шутку: вопрос на stackoverflow "Как мне сложить два числа на JavaScript" и ответ "Не знаю, но где-то был такой плагин для jQuery", а затем спросил - есть ли проблема в том, что лёгкость jQuery плодит разработчиков, не понимающих основ, и как с этим бороться? Увы, разработчики ответили мне в капитанском стиле, что это, мол, не проблема jQuery.
Впрочем, были и другие интересные вопросы, неплохой диалог получился. И последующий фуршет тоже.
Это всё, что я могу рассказать о войне во Вьетнаме.
