Я потратил прилично времени на структуризацию и автоматизацию сборки фронта. Задача это интересная и стоит того, чтобы о ней рассказать.

Что умеет делать сборщик:

• Собирать front-end проект для development & production окружений.
• Собирать по несколько js/css бандлов на проект.
• Использовать стиль CommonJS модулей в браузере.
• Использовать ES6-синтаксис.
• Спрайты, картинки и многое другое.

Читать дальше →

Спешу предположить, что вы наслышаны о ES6 и, возможно, успели попробовать её. Тогда вам наверняка покажется интересной заметка о некоторых фичах спецификации, опубликованная Блейком Уильямсом в блоге Thoughtbots. Я же, с позволения автора, публикую перевод.

Последнее время я смотрел в сторону спецификации ES6, это следующая версия JavaScript, и наконец мне представилась возможность использовать её в проекте. За недолгое время использования я понял, что она решает множество проблем, которые пытается решить CoffeeScript, но без радикальных изменений синтаксиса.

ES6 сегодня

Вы можете начать писать на ES6 прямо сейчас, используя транслятор в ES5 6to5. 6to5 поддерживает достаточно много инструментов сборки, в их числе: Broccoli, Grunt, Gulp и Sprockets. У меня всё прекрасно работало со sprockets-es6, а 4.x Sprockets будут поддерживать 6to5 из коробки. Также вы можете попробовать ES6 прямо в браузере в 6to5 REPL.
Читать дальше →

В этой статье я хочу рассказать об инструменте Autopolyfiller, который помогает вам использовать последние функции ECMAScript и при этом не думать об подключаемых полифиллах.

К сожалению, не все пользователи используют самые современные браузеры, и зачастую нам приходится жертвовать читаемостью кода или использовать полифиллы, чтобы более-менее уравнять все браузеры и писать кроссбраузерный код.

Есть целый ряд способов исправить эту ситуацию:

lodash и underscore

Это достаточно популярный способ «починить» браузеры на сегодняшний день, плюс ко всему lodash приносит ряд полезных функций для работы с данными. К тому же он позволяет беречь нервы разработчиков, которые до сих пор боятся менять прототип базовых классов «во благо».

_.chain([1, 2, 3, 4])
.map(function (item) {
    return item * item;
})
.filter(function (item) {
    return item < 9;
})
.value();

Читать дальше →

На хабре уже проскакивала статья про такие замечательные вещи, как Map, WeakMap и Set, но в действительности реальные возможности этих API не были раскрыты (если я все-таки хорошо воспользовался поиском).
Эти API толком не реализованы нигде, кроме firefox (можно включить в chrome canary), но даже там до недавних пор не поддерживалось использование HTMLElement-подобных объектов в качестве ключей. Polymer, например, убрал только три недели назад

	if (navigator.userAgent.indexOf('Firefox/') > -1)

Чем же они так хороши? По сути Map/WeakMap можно воспринимать как обычные хэш-объекты, только в качестве ключей можно использовать только сложные объекты (Object, Function, Array), так как привязка идет не по содержимому, а по адресу в памяти.
Таким образом появляется возможность привязаться на фронтэнде к

• dom-элементу
• XHR-запросу
• File-элементу

Это дает нам возможность работать без id-шников элементов, делать дата-биндинг в разы быстрее, создать безумную альтернативную реализацию promises и так далее.
Мы будем говорить о WeakMap. Даже не так, мы будем говорить о существующих полифиллах для WeakMap.

Читать дальше →