как знать jQuery

и не облажаться

Вадим Пацев / @basvasilich

У вас есть строчка
про jQuery в резюме?

Зачем она?

58.1%

Quantcast Top Million

trends.builtwith.com/javascript/jQuery

30.9%

Most of Internet

trends.builtwith.com/javascript/jQuery

Это похоже на...

Зависимость

Зависимость (аддикция) — навязчивая потребность, подвигающая человека к определенной деятельности.

Как это было...

2004

Я пришел в индустрию

2006

Prototype, Script.aculo.us

2007

jQuery

Для чего нужен был jQuery?

  • DOM
  • Ajax
  • Events
  • Animations

Когда в руках молоток, все кажется гвоздями

jQuery == JavaScript

только лучше

Теперь я знал
как делать веб

Но веб пошел дальше

  • 2007 — Книга «Pro JavaScript Design Patterns»
  • 2008 — Книга «JavaScript: Good parts»
  • 2009 — Node.js, PhoneGap
  • 2010 — backbone.js, angular.js
  • 2013 — Extensible Web Manifesto
  • 2013 — asm.js
  • Rich Internet Applications
  • Single Page Applications

JavaScript развивается

.querySelectorAll()

 var $ = document.querySelectorAll.bind(document);


Element.prototype.on = Element.prototype.addEventListener;


$('#somelink')[0].on('touchstart', handleTouch)

.classList

 $('body').addClass('hasJS');

document.body.classList.add('hasJS');

$('body').removeClass('hasJS');

document.body.classList.remove('hasJS');

.dataset

element.dataset.user = JSON.stringify(user);

element.dataset.score = score;
		

Ajax


function request(type, url, opts, callback) {
	var xhr = new XMLHttpRequest(), var fd;
	if (typeof opts === 'function') {
		callback = opts;
		opts = null;
	}
	xhr.open(type, url);
	if (type === 'POST' && opts) {
		fd = new FormData();
		for (var key in opts) {
			fd.append(key, JSON.stringify(opts[key]));
		}
	}
	xhr.onload = function () {
		callback(JSON.parse(xhr.response));
	};
	xhr.send(opts ? fd : null);
}
var get = request.bind(this, 'GET');
var post = request.bind(this, 'POST');

Стоп. WTF?

Он рассказывает
как использовать полифилы
и придумывать свои велосипеды?!

Нам надо отказаться от jQuery?! Зачем?!

Иди домой, ты пьян!

  • jQuery и сейчас мощный инструмент
  • Решены проблемы совместимости
  • Удобный API
  • Документация

Использовать jQuery осмысленно

Яндекс

  • До 2009 — разрабатывали свою библиотеку y5
  • Отказались из-за дороговизны поддержки и переехали на jQuery

Яндекс

  • Используем jQuery как библиотеку
  • Есть проекты без jQuery
  • На собеседованиях спрашиваем про нативный JavaScript

Веб сильно изменился
за последние 5 лет

Знать jQuery уже недостаточно

JavaScript — основной инструмент

... и не только веба

  • Node.js
  • PhoneGap
  • ChromeOS
  • FirefoxOS

Ок, вы все умеете jQuery

Но, знаете ли вы JavaScript?

  • Анонимные функции
  • Функция — first class object
  • Паттерны ООП
  • Функциональный подход
  • Контекст выполнения функции
  • Прототипное наследование
  • События

typeof (function(){})() // ???

var obj = {};
var foo = function() {
	(function() {
		console.log(this);
	})();
}

obj.foo = foo;
obj.foo(); // ???

Как не облажаться?

Осознать что JavaScript
это сильно больше
чем jQuery

Прочитать и осознать
4 книги*

* — это лично мой список

Проанализировать для чего используется jQuery на ваших проектах

Использовать jQuery как библиотеку

  • Побороть вредную привычку
    использовать jQuery везде
  • Сделать библиотеку легко заменяемой

... или
не использовать jQuery

Там где нет в этом необходимости

Помочь освободиться другу

Так зачем вам строчка
про jQuery в резюме?

Спасибо

Вадим Пацев / @basvasilich

слайды — basvasilich.github.io/WSD-Minsk-jQuery