Кратко о jQuery

Содержание

Слайд 2

История jQuery

2006
14 января     первый анонс о создании библиотеки
26 августа      jQuery 1.0
2007
14 января  

История jQuery 2006 14 января первый анонс о создании библиотеки 26 августа
 jQuery 1.1
10 сентября    jQuery 1.2
17 сентября   jQuery UI 1.0
2009
14 января   jQuery 1.3
2010
14 января jQuery 1.4

Слайд 3

Популярность jQuery
(Google Trends)

jquery javascript 1.00  prototype javascript 0.78  dojo javascript 0.22  mootools javascript 0.16  yui javascript 0.12 

Популярность jQuery (Google Trends) jquery javascript 1.00 prototype javascript 0.78 dojo javascript

Слайд 4

Кто пользуется jQuery

Wikipedia.org
Microsoft.com
IBM.com
Amazon.com
StackOverflow.com
Bing.com
Bit.ly
Wordpress.com
Mtv.com
Whitehouse.gov
...

Nokia и Microsoft оказывают материальную поддержку проекту и включают в

Кто пользуется jQuery Wikipedia.org Microsoft.com IBM.com Amazon.com StackOverflow.com Bing.com Bit.ly Wordpress.com Mtv.com
свои продукты.

Доля jQuery на сайтах
 по данным BuiltWidth.com

Каждый 5-й сайт использует jQuery

Слайд 5

jQuery на каждом третьем сайте с JavaScript
 по данным BuiltWidth.com

jQuery на каждом третьем сайте с JavaScript по данным BuiltWidth.com

Слайд 6

Как работают селекторы

Sizzle - открытый движок селекторов (4Кб min+gzip) http://sizzlejs.com/
разбор селекторов справа налево

Как работают селекторы Sizzle - открытый движок селекторов (4Кб min+gzip) http://sizzlejs.com/ разбор
(как в браузерах) div.menu a
оптимизации для самых популярных селекторов #id div
в jQuery - начиная с 1.3.2
элементы возвращаются в порядке следования их в DOM-дереве

Слайд 7

Browser sniffing...

определение браузера ($.browser) - устаревающий подход
парсинг navigator.userAgent либо navigator.appName if ( /mozilla/.test( ua )

Browser sniffing... определение браузера ($.browser) - устаревающий подход парсинг navigator.userAgent либо navigator.appName
&& !/compatible/.test( ua ) ) { ret = { browser: "mozilla", version: /rv:([\w.]+)/ }; } 
[-] неуниверсальный и трудноподерживаемый набор regexp'ов
[-] легко подделать заголовок userAgent
[-] код необходимо переписывать при выходе новых версий браузеров

Слайд 8

... vs Feature Detection

определение фич браузера ($.support) - правильный подход (v1.3+)
hrefNormalized: 
a.getAttribute("href") ===

... vs Feature Detection определение фич браузера ($.support) - правильный подход (v1.3+)
"/a",
opacity: /^0.55$/.test( a.style.opacity ),
[+] простой и легкочитаемый код
[+] код готов к выходу новых браузеров, поддерживающих тестируемую фичу

Слайд 9

Браузеры

Safari 3.2, Safari 4
Firefox 2, Firefox 3, Firefox 3.5
IE 6, IE 7,

Браузеры Safari 3.2, Safari 4 Firefox 2, Firefox 3, Firefox 3.5 IE
IE 8
Opera 10.10
Chrome

Необходимо ограничить число 100% поддерживаемых браузеров самыми популярными
Причина: сложность в тестировании

Слайд 10

Тестирование jQuery

QUnit (тестовый фреймворк для jQuery)
Selenium IDE (функциональное тестирование)
Swarm Grid (распределенное тестирование)

Тестирование jQuery QUnit (тестовый фреймворк для jQuery) Selenium IDE (функциональное тестирование) Swarm Grid (распределенное тестирование)

Слайд 11

Развитие фреймворка

Выход  jQuery 1.4 в январе 2010
поддержка .live() для событий  submit, change, mouseenter,

Развитие фреймворка Выход jQuery 1.4 в январе 2010 поддержка .live() для событий
mouseleave, focus и blur
улучшена производительность операций над DOM: append, prepend, find, empty, remove, addClass, removeClass, hasClass, attr, css
увеличена производительность базовых и самых популярных селекторов, множество оптимизаций

Ускорение до 3-х раз

Слайд 12

Развитие фреймворка (2)

поддержка ECMAScript 5 (декабрь 2009) убраны устаревшие конструкции, добавлена поддержка JSON.parse
починено

Развитие фреймворка (2) поддержка ECMAScript 5 (декабрь 2009) убраны устаревшие конструкции, добавлена
207 багов (в прошлой версии 97)
число тест-кейсов удвоилось (3060 против 1504)
Google Closure Compiler vs YUI Compressor (13% выигрыш)
проект переехал на git (упрощение приёма патчей)

Слайд 13

Внутренние оптимизации

  

Внутренние оптимизации

Слайд 14

Оптимизация работы с DOM

  

Оптимизация работы с DOM

Слайд 15

Результаты сравнения 
js-фреймворков

Результаты сравнения js-фреймворков

Слайд 16

Шпаргалка

Онлайн-версия документации на одной странице http://futurecolors.ru/jquery/

Шпаргалка Онлайн-версия документации на одной странице http://futurecolors.ru/jquery/

Слайд 17

Шпаргалка

Оффлайн-версия (pdf, png) более 5000 скачиваний за первые сутки

Шпаргалка Оффлайн-версия (pdf, png) более 5000 скачиваний за первые сутки

Слайд 18

Будущее  jQuery

модульность фреймворка
      - core.js
      - attributes.js
      - css.js
      - manipulations.js
      -

Будущее jQuery модульность фреймворка - core.js - attributes.js - css.js - manipulations.js
traversing.js
асинхронная подгрузка модулей  ($.require)
фабрика плагинов-виджетов ($.plugin)
jQuery на мобильных устройствах (iPhone, Palm Pre, Android, Fennec)
репозиторий официальных плагинов и полная переделка существющего сайта плагинов
Имя файла: Кратко-о-jQuery.pptx
Количество просмотров: 682
Количество скачиваний: 7