HolyJS Moscow: Час експансії



JavaScript-світ розвивається так бурхливо, що навіть за півроку між петербурзької і московської HolyJS багато чого встигло відбутися: наприклад, улітку про Yarn ще ніхто не знав, а зараз у нього більше 20 000 зірок на GitHub. І для самої конференції теж багато чого змінилося: у червні вона проходила в самий перший раз, так що тоді ще не було фідбек глядачів, дуже допомагає при організації. Відрізнялася в такому випадку московська версія, і як взагалі вона пройшла? Про деяких доповідях вже написали в блозі Mail.Ru Group, а тепер ми публікуємо власний текст про захід.
Читати далі →

RubyMine 2016.3: Налагодження в режимі attach, оновлена підтримка Puppet, синхронізація SDK через rsync

Привіт, хабравчане!

У листопаді ми анонсували оновлені IntelliJ IDEA, CLion, PyCharm і DataGrip, а ця стаття — для Ruby/Rails-розробників. Ми випустили RubyMine 2016.3, заключне оновлення нашої IDE для Ruby і Rails в цьому році! Оновлення доступно для безкоштовного скачування та 30-денного ознайомлення на нашому сайті.



Читати далі →

Огляд базових можливостей ES6

JavaScript сильно змінився за останні роки. Ось 12 нових можливостей, які можна почати використовувати вже сьогодні!
Історія
Нові додавання в мову називаються ECMAScript 6. Або ES6 або ES2015+.
З моменту появи в 1995, JavaScript розвивався повільно. Нові можливості додавалися кожні кілька років. ECMAScript з'явився в 1997, його метою було спрямувати розвиток JavaScript в потрібне русло. Виходили нові версії – ES3, ES5, ES6 і так далі.

Як бачите, між версіями ES3, ES5 і ES6 є пропуски довжиною в 10 і 6 років. Нова модель – робити маленькі зміни кожен рік. Замість того, щоб накопичити величезну кількість змін і випустити їх все за раз, як це було з ES6.
Читати далі →

HolyJS: з першої спроби

Петербурзька JavaScript-конференція HolyJS починалася майже як авантюра. Затівати абсолютно нову конференцію, коли час на підготовку дуже обмежено — сміливе рішення.

Такий авантюризм добре відповідає духу самого JavaScript-світу, де все відбувається стрімко, а сміливі рішення найчастіше необхідні. Але чи можливо в такому випадку провести конференцію на високому рівні, з цікавими доповідями і без організаційних проблем? Що в підсумку було на заході? Під катом — розповідь про те, як воно пройшло.




Читати далі →

Завдання, микрозадачи, черги і плани

Пропоную вашій увазі переклад статті «Tasks, microtasks, queues and schedules» Джейка Арчібальда (Jake Achibald), що займає посаду Developer Advocate for Google Chrome.

Коли я сказав своєму колезі Мэту Ганта, що подумую про написанні статті про черговості микрозадач та порядок їх виконання всередині подієвого циклу браузера, він сказав Джейк, буду чесний, я про це читати не буду». Що ж, я все ж таки написав, тому відкиньтеся на спинку крісла і давайте в цьому розберемося, гаразд?

Насправді, якщо вам буде простіше подивитися відео, є чудовий виступ Філіпа Робертса на JSConf, яке розповідає про подієвому циклі – воно не покриває микрозадачи, але в іншому є відмінним вступом в тему. У будь-якому випадку, погнали…

Давайте розглянемо наступний код на JavaScript:
console.log('script start');

setTimeout(function() {
console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});

console.log('script end');

Як ви думаєте, в якому порядку повинні вывестись логи?

Читати далі →

Тонкощі ES6: Колекції (частина 2)

Від перекладача: це друга частина перекладу статті про колекції в EcmaScript 6. Першу частину можна прочитати тут. З різних причин переклад другої частини затягнувся на досить довгий термін.

Map
Map
(асоціативний масив) — це колекція пар ключ-значення (key-value). Ось що вміє
Map
:
  • new Map
    повертає новий порожній асоціативний масив.
  • new Map(pairs)
    створює новий асоціативний масив і наповнює його даними існуючої колекції пар
    [key, value]
    . Ця колекція може бути іншим Map об'єктом, масивом з двохелементних масивів, генератором який повертає двухэлементые масиви, і тд.
  • map.size
    повертає кількість елементів в асоціативному масиві.
  • map.has(key)
    перевіряє, існує-ключ key в асоціативному масиві.
  • map.get(key)
    повертає значення асоційовану з ключем key, або undefined, якщо такого ключа немає. (аналогічно
    obj[key]
    )
  • map.set(key, value)
    додає запис у масив, ассоциирующую key з value. Перезаписує існуючу асоціацію, якщо така є (аналогічно
    obj[key]
    )
  • map.delete(key)
    видаляє запис (аналогічно
    delete obj[key]
    )
  • map.clear()
    видаляє всі записи в асоціативному масиві.
  • map[Symbol.iterator]()
    возаращает ітератор за записами в асоціативному масиві. Ітератор представляє кожну запис як масив
    [key, value]
    .
  • map.forEach(f)
    працює так:
    for (let [key, value] of map)
    f(value, key, map);
    

    Дивний порядок аргументів зроблений за аналогією з
    Array.prototype.forEach()

  • map.keys()
    повертає ітератор по ключам в асоціативному масиві.
  • map.values()
    повертає ітератор за значеннями в асоціативному масиві.
  • map.entries()
    повертає ітератор за записами в асоціативному масиві, аналогічно
    map[Symbol.iterator]()
    . Насправді, в обох випадках викликається один і той же метод.


На що тут скаржитися? Ось деякі фічі, яких немає ES6 колекціях, і які, я думаю, були б корисні:

  • Пристосування для значень за замовчуванням, як collections.defaultdict в Python.
  • Хэлпер-функція,
    Map.fromObject(obj)
    щоб полегшити написання асоціативних масивів з використанням синтаксису об'єкт-текст (object-literal syntax) (Прим. переклад: приклад синтаксису об'єкт-текст в ES —
    { "test" : 1 }
    )


Знову-ж, ці фічі легко додати.

Ок. Пам'ятаєте, як я почав цю статтю з роздумів про те, як турбота про виконання JS в браузері, впливає на дизайн мови і його фіч? Зараз ми почнемо говорити про це. У мене є три приклади. Ось вам перші два.

Відмінності JS, частина 1: хеш-таблиці без хеш-кодів?
Є одна корисна фіча, яку класи колекцій в ES6, наскільки мені відомо, не підтримують взагалі.

Припустимо, у нас є
Set
з URL-об'єктів.
var urls = new Set;
urls.add(new URL(location.href)); // два URL-об'єкта
urls.add(new URL(location.href)); // однакові-вони?
alert(urls.size); // 2

Ці два URL повинні бути інтерпретовані як ідентичні. Всі поля у них однакові. Але в Javascript це два різних об'єкта, і перевантажити поняття мови про рівність об'єктів ніяк не можна.

Інші мови це підтримують. В Java, Python, Ruby окремі класи можуть перевантажувати рівність. У багатьох имплементациях Scheme, індивідуальні хеш-таблиці можуть бути створені з використанням різних понять рівності. С++ підтримує обидва варіанти.

Проте всі ці механізми вимагають від користувачів імплементації кастомних хеш-функцій, і всі вони експонують системну хеш-функцію за замовчуванням. Комітет вирішив не виставляти на показ хеш-коди в Javascript — принаймні поки що — через відкритих питань про інтероперабельності та безпеки, що не є приводом для такого занепокоєння в інших мовах.

Відмінності JS, частина 2: Сюрприз! Передбачуваність!
Ви напевно думаєте, що детерменированное поведінку з боку комп'ютера не привід для здивування. Але люди часто дивуються, коли я їм кажу що ітерація по елементам
Map
та
Set
відбувається в порядку їх додавання в колекцію. Вона детермінована.

Ми звикли до довільності деяких аспектів хеш-таблиць. Ми навчилися приймати це. Але є біса гарні причини спробувати уникати випадковостей. Як я писав у 2012 році:
  • Є свідчення, що деякі програмісти знаходять довільний порядок ітерації дивним і спочатку незрозумілим. [1][2][3][4][5][6]
  • Порядок энумерации властивостей не специфицирован в ECMAScript, проте всі великі імплементації змушені зійтися на конкретному порядку вставки, для сумісності. Тому є думка, що якщо TC39 не стане специфікувати детерменированный порядок ітерації, «веб зробить це за нас». [7]
  • Порядок ітерації хеш-таблиці може розкрити частини хеш-кодів об'єктів. Це покладає величезну відповідальність за безпеку на имплементатора хеш-функції. Наприклад, адреса об'єкта не повинен бути відновлювальним з розкритих частин його хеш-коду (розкриття адреси об'єкта недоверенному ECMAScript-кодом хоч і не може експлуатуватися зловмисниками саме по собі, але було б великою дірою в безпеці).
Коли це обговорювалося в лютому 2012 року, я був за довільний порядок ітерації. Я провів експеримент, щоб довести, що стеження за порядком вставки зробить хеш-таблиці занадто повільними. Я написав парочку бенчмарків на С++. Результат мене вразив.

Ось так ми опинилися з хеш-таблиць, які стежать за порядком вставки в JS!

Вагомі причини використовувати слабкі колекції
На початку червня 2015 ми обговорювали приклад, що включає в себе бібліотеку анімації на JS. Ми хотіли зберігати булевий прапор для кожного DOM-об'єкта, на зразок такого:
if (element.isMoving) {
smoothAnimations(element);
}
element.isMoving = true;

На жаль, завдання expando-властивості DOM-об'єкті таким чином — погана ідея, що і обговорювалася в статті. У тій статті ми вирішили проблему, використовуючи символи. Але не можемо ми зробити те-ж саме використовуючи
Set
? Це може виглядати так:
if (movingSet.has(element)) {
smoothAnimations(element);
}
movingSet.add(element);

Є тільки один недолік:
Map
та
Set
мають сильну посилання (strong reference) на кожен ключ і кожне значення. Це значить, якщо DOM-елемент був видалений з документа, збирач сміття не може звільнити пам'ять поки елемент не вилучений з
movingSet
. Бібліотеки зазвичай з гріхом навпіл справляються з очищенням пам'яті після себе. Це може призвести до витоків пам'яті.

ES6 пропонує дивовижне рішення для цього. Зробіть
movingSet
WeakSet
замість
Set
. Проблема витоку вирішена!

Отже, можна вирішити цю проблему за допомогою слабких колекцій або символів. Що краще? Дискусія про переваги та недоліки кожного способу зробить цей пост занадто довгим. Якщо ви можете використовувати один символ протягом усього життя веб-сторінки, то це, напевно, нормально. Якщо ви хочете використовувати багато короткоживучих символів, це тривожний знак: розгляньте можливість використовувати
WeakSet
замість цього, щоб запобігти витоку пам'яті.

WeakMap і WeakSet
WeakMap
та
WeakSet
специфіковані вести себе так само як <codeMap та
Set
, але з наступними обмеженнями:
  • WeakMap
    підтримує тільки
    new .has(), .get(), .set (),.delete()
    .
  • WeakSet
    підтримує тільки
    new .has(), .add (),.delete()
    .
  • Значення
    WeakSet
    і ключі в
    WeakMap
    повинні бути об'єктами.


Зауважте, що ні одна із слабких колекцій не є итерируемой. Ви не можете дістати записи з колекції крім як за відповідним ключем.

Ці обмеження дозволяють збирача сміття збирати мертві об'єкти з живих слабких колекцій. Схожого ефекту можна домогтися за допомогою слабких посилань або словників зі слабкими ключами (weak-keyed dictionaries), але слабкі колекції в ES6 мають всі переваги управління пам'яттю без розкриття факту, що в скриптах відбулася збірка сміття.

Відмінності JS, частина 3: приховуючи недетерменированность збирача сміття
Під капотом, слабкі колекції імплементовані таблиці эфемеронов (ephemeron tables).

Коротенько,
WeakSet
не тримає сильної посилання на об'єкти всередині себе. Коли об'єкт
WeakSet
збирається складальником сміття, він просто видаляється з
WeakSet
. То-ж
WeakMap
. У нього немає сильних посилань ні на один ключ. Якщо ключ живий, жваво і значення.

Навіщо всі ці обмеження? Чому просто не додати слабкі посилання в JS?

Знову-ж, комітет не хоче розкривати недетерменированное поведінка скриптам. Слабка кросбраузерна сумісність — прокляття веб-розробки. Слабкі посилання розкривають деталі імплементації збирача сміття — саме визначення платформо-специфічного довільного поведінки. Звісно, програми не повинні залежати від деталей конкретної платформи, але слабкі посилання роблять складним для розуміння, наскільки ви залежите від поведінки збирача сміття в поточному браузері, в якому ви запускаєте свій додаток. C ними складно мати справу.

Навпаки, слабкі колекції в ES6 мають більш обмежене, але міцне безліч функцій. Факт складання ключа, або значення складальником сміття ненаблюдаем, так що додатки ніяк не можуть залежати від нього, навіть випадковості.

Це конкретний випадок того, як специфічні для веба проблеми призвели до дивовижного рішенням в дизайні, яке поліпшило JS як мова.

Де я можу використовувати колекції?

Всі чотири класи колекцій підтримуються в Firefox, Chrome, MS Edge і Safari. Для підтримки старих браузерів, використовуйте полифил (polyfill) типу es6-collections.

WeakMap
був вперше імплементований в Firefox Андреасом Галом, колишнім CTO Mozilla. Тому Шустер имплементровал
WeakSet
. Я імплементував
Map
та
Set
. Спасибі Тоору Фудзисаве (Tooru Fujisawa) за патчі.

На наступному тижні «Тонкощі ES6» беруть двотижневу перерву. Ця серія статей розповіла про чому, але деякі найпотужніші фічі ES6 ще будуть описані. Приєднується до нас, коли ми повернемося з новим контектом 9 липня.

Джерело: Хабрахабр

Тонкощі ES6: Колекції (частина 1)

Раніше на цьому тижні (стаття від 19 червня — прим.) специфікація ES6, офіційно названа ECMA-262, 6th Edition, ECMAScript 2015 Language Specification, подолала останній бар'єр і була затверджена як стандарт Ecma. Мої вітання TC39 і всім іншим, хто допомагав. ES6 закінчено!

Навіть краще: більше не треба буде чекати наступного оновлення 6 років. Комітет збирається випускати нову версію в термін близько року. Пропозиції по ES7 вже примаются!

Я вважаю, що доречно відсвяткувати цю подію поговоривши про тієї частини Javascript, яку я так бажав у ньому побачити, і яка все ще має потенціал до поліпшення.


Читати далі →

Як я вважав рукостискання або «Впевнений ти, що хочеш знати друзей друзей друзей друзей»

Заголовок, звичайно ж, брехливий. Вважав я не рукостискання, а користувачів між двома заданими. Хоча ніхто не заважає додати одиницю.

Для затравки залишу тут картинку:

Граф від Жгуна до Баженова

Читати далі →

ECMAScript 6 Promises

На Хабре вже зустрічалися статті про чудову технології Promises, яка в майбутньому стане частиною стандарту ECMAScript 6, проте, в цих статтях не було детального опису, чому ж вони так корисні і в чому таки їх переваги. Щоб заповнити цей пробіл, я вирішив написати цю статтю.

Читати далі →

Замикання в Javascript [Частина 2]

Попередня частина
  • Замикання
    • Автоматична збірка сміття
    • Створення замикань

  • Що можна зробити за допомогою замикань?
    • Приклад 1: setTimeout c посиланням на функцію
    • Приклад 2: Асоціювання функцій з методами примірника об'єкта

    • Приклад 3: Інкапсуляція взаємопов'язаної функціональності
    • Інші приклади
  • Випадкові замикання
  • Проблема витоку пам'яті в Internet Explorer

Читати далі →