Американская компания Bocoup, как и многие другие веб-разработчики, постоянно использует в работе известный «пуленепробиваемый» шаблон для создания HTML5-сайтов HTML5 Boilerplate. Однако, сотрудники Bocoup решили не только пользоваться, но внести свой вклад в общее дело и выкатили для всеобщего пользования не менее концептуальную вещь — Backbone Boilerplate, набор лучших средств и приёмов для создания приложений Backbone.js.

Прямо из коробки мы получаем:

• Backbone, Underscore и jQuery, всё это на базе HTML5 Boilerplate.
• Инструмент Windows/Mac/Linux для прекомпиляции шаблонов, связывания и минификации всех библиотек, кода приложения и CSS.
• Лёгкий веб-сервер node.js.
• Многочисленные сниппеты кода для Backbone, облегчающие жизнь.

В Backbone Boilerplate логичная и элегантная файловая система (отдельно код, вспомогательные файлы, тесты, билды) и есть возможность создавать собственные классы Models/Collections/Views/Routers внутри модулей.

Разработчики говорят, что проект появился в результате их долгих попыток работать с другими шаблонами: оказалось, что в одних нет процесса сборки, другие налагают излишние ограничения. Новый Backbone Boilerplate призван исправить ситуацию и вполне может стать каноническим, каким стал тот же HTML5 Boilerplate.

Я хочу описать простой минималистский подход к разработке сложных JavaScript приложений. Из внешних библиотек будут использоваться только jQuery и мой js-шаблонизатор, причём из jQuery используются только $.ready(), $.ajax() и $.proxy() — т.е. суть не в библиотеках (их тривиально заменить на предпочитаемые вами), а в самом подходе.

В основе подхода лежат две идеи:

1. JavaScript виджеты — небольшие модули, каждый из которых «владеет» определённой частью веб-странички (т.е. всё управление этой частью странички происходит исключительно через методы этого модуля, а не через прямую модификацию DOM — инкапсуляция). Виджет отвечает исключительно за функциональность, но не за внешний вид; поэтому прямая модификация части DOM, которым «владеет» виджет, снаружи виджета допускается — но только для чисто дизайнерских задач (для архитектуры и общей сложности приложения нет принципиальной разницы между коррекцией внешнего вида через CSS или jQuery).
2. Глобальный диспетчер событий. Взаимодействие между виджетами осуществляется путём посылки сообщений глобальному диспетчеру (слабая связанность, паттерн Mediator/Посредник), а уже он принимает решение что с этим сообщением делать — создать/удалить виджеты, дёрнуть методы других виджетов, выполнить дизайнерский код, etc. В отличие от динамического подхода к обработке событий (когда обработчики конкретного события добавляются/удаляются в процессе работы) статический диспетчер сильно упрощает понимание и отладку кода. Безусловно, есть задачи, для которых нужны именно динамические обработчики событий, но в большинстве случаев это избыточное усложнение, поэтому всё, что можно, делается статическими обработчиками.

Разрабатываем мы тут некоторый сервис интеграции с очень сторонней системой. Сам сервис работает на Node.js. И всё бы хорошо, но только недоступность сервера во время сборки мусора очень нервировала стороннюю систему.

В канун нового года было решено сделать серверу подарок — обновить Node.js с версии 0.4.8 до 0.6.6 В силу ряда организационных причин, обсуждать которые здесь не очень хочется, обновление было проведено сразу на боевой системе и даже без регрессионного тестирования.

Неужели в этой ситуации что-то могло пойти не так?

Скрипт и стили для Хабра выложены в пользование и дальнейшее развитие. Количество «фич» довольно большое, поэтому, чтобы не затягивать дальнейшую разработку, скрипты и стили проработаны до необходимого минимума. Бесконечно улучшать просто нет смысла, потому что на сайте постоянно добавляются новые коды и вёрстка, старое ломается, функции приходится восстанавливать. Поэтому идея выкладки в формате «беты» — в том, чтобы различные пользователи, вдохновлённые возможностями оболочки (скриптов и стилей), прониклись идеей небольших доработок «под себя» этого основного скрипта, и тогда общая работа пошла бы заметно быстрее. Ведь совсем нетрудно и интересно потратить вечер для красивой «фичи» на 30-50 строк кода, но когда таких фич набирается 20 — стольких вечеров становится не хватать и требуется подключение сил других разработчиков.

Здравствуйте. Я представляю одну из ведущих танцевальных онлайн-радиостанций в России — FreshBeat Radio.

У нас, как у интернет-радио, есть одно огромное преимущество перед FM вещанием. Нам не надо проводить дорогостоящие исследования рынка, чтобы узнать количество слушателей, их местоположение, длительность и частоту прослушивания.

Мы постоянно имеем доступ к огромному количеству статистических данных, которые можно и нужно использовать для того чтобы еще больше соответствовать своей целевой аудитории. Перед тем как проанализировать данные по слушателям, их нужно собрать и систематизировать так, чтобы с ними было удобно работать.

В этой статье, я расскажу вам о том, как это визуализировать и периодически обновлять с помощью Highstock. На Хабрахабре уже было несколько статей про этот набор инструментов, но все они описывали работу только со статическими данными.

Настала пора мысленно вернуться на четыре с небольшим года назад ко блогозаписи «Simple “Class” Instantiation» из блога Джона Резига, прославленного создателя необыкновенно удобной библиотеки jQuery. И вернёмся.

Однако же, так как я вовсе не вижу её в результатах поиска на Хабрахабре по слову «Resig», то поневоле приходится думать, что эту полезную блогозапись никто не удосужился перевести (или хотя бы пересказать) за четыре прошедших года — мне придётся, стало быть, самостоятельно пересказать блогозапись Резига прежде, чем я исполню моё главное намерение: поразмыслить вслух, почему же предложенный Резигом способ решения указанной им проблемы так и не сделался общераспространённым. И перескажу. (Сам этот пересказ ужé был бы полезен читателю, даже кабы я к нему ничего от себя не прибавил. А я прибавлю.)

---

Шестого декабря 2007 года Резиг рассмотрел, что получается, когда в джаваскрипте используется операция «new» для создания объекта (в языках с классами мы сказали бы «экземпляра класса»):

function User(first, last){
   this.name = first + " " + last;
}

var user = new User("John", "Resig");

Резиг справедливо подметил, что для начинающих программистов на джаваскрипте не вполне очевидно, что появление «this» в коде функции указывает на то, что перед нами конструктор объекта. (Я от себя в скобках прибавлю: если функция находится в недрах некоторой библиотеки, то это обстоятельство нуждается также и в документировании — а не то пользователь библиотеки не многим будет отличаться от новичка: исходный код с телом функции читают не все, тем более что он нередко применяется в минифицированном, не читаемом виде.)

Поэтому, рассудил Резиг, рано или поздно кто-нибудь попробует вызвать «User()» без «new» и тем получит на свою голову сразу две неприятные проблемы. Во-первых, переменная «user» останется неопределённою: функция «User()» задумана ведь как конструктор, а значения она никакого не возвращает. Во-вторых, что ещё хуже, попытки обращения к «this» изнутри такого (некорректно вызванного) конструктора неизбежно приведёт к засорению глобального пространства имён — а это чревато зловещими и трудноуловимыми последствиями. Обе проблемы Джон Резиг продемонстрировал на примере:

var name = "Resig";
var user = User("John", name);
// здесь переменная «user» не определена
// БОЛЕЕ ТОГО: значение «name» теперь ужé не «Resig»!
if ( name == "John Resig" ) {
   // фигассе!…
}

Около полугода назад мне задали примерно такой вопрос: “Я использую крупный фреймворк, запускающий некую функцию по действию пользователя. Хочу, не меняя кода этой функции, выполнить по событию вызова этой функции свой код.”. Практика далеко не лучшая, события вызова функции не существует, я просто покрутил пальцем у виска и сказал, что это жуткий говнокод, так делать не стоит, да и это, просто-напросто, — невозможно.

Пару дней назад, направляясь домой относительно тёплым зимним вечером, не типичным для Одессы, у меня возникла нетипичная мысль: “А что если попробовать сделать то, что спрашивал Богдан полгода назад?”. Придя домой, я включил компьютер, и, в течении пары минут, сделал то, что задумал. В первую очередь, меня интересовало то, как будут себя вести встроенные методы, если их переопределить, и можно ли после этого как-нибудь вызвать прежнее их состояние, бывшее до переопределения. Я знал, что, если объект переопределяют, то ссылки на него не уничтожатся, сохраняя прежний вид. Что касается встроенных функций, имелись сомнения. Оказывается, можно.

Скорее всего, мне даже никогда не придется воспользоваться таким инструментом, но, чисто гипотетически, возможно, у кого-то возникнет задача проследить вызов той или иной функции, получив отчет о каждом вызове, состоящий из:

1. Результата выполнения
2. Переданных аргументов
3. Контекста вызова (что есть this при вызове)
4. Количества вызовов функции после создания обработчика

(Этот список полностью соответствует аргументам, передающимся в обработчик)

Как известно, язык JavaScript преследует парадигму событийно-ориентированного программирования. Это, безусловно, хорошо, но что делать, если за одной асинхронной функцией должна вызываться другая асинхронная функция, а затем еще одна, и еще… Иногда такой код очень запутывает, и не только человека привыкшего к синхронному и поочередному вызову функций. Это касается сложных анимаций, таймаутов, аякса, когда за одним должно следовать другое, и так дальше.

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

UPD

Ниже моё решение, являющееся аналогом этой функции модуля async и кучи других подобных решений, представленных в комментариях. Спасибо всем комментирующим и sedictor в частности.
/UPD

Рассмотрим пример (который взят из головы и в нем возможны ошибки) гипотетического парсера сайта, который после парсинга заносит данные в БД, и, после занесения, вызывает некоторый код.

var html = '';
request.on('response', function (response) {

    response.on('data', function (chunk) {
        html = html + chunk;
    });

    response.on('end', function() {
        //какой-то парсер
        parse(html, function(data){  
                //какая-нибудь функция, добавляющая данные в базу
		addToDatabase(data, function() {  
			doSomething();
		})
	});

    });
});

Много вложенных колбеков — не есть гуд, пробуем по-другому.

Repaint происходит средствами процессора, браузер тратит на это определенное время. При анимации это время негативно влияет на производительность. Я уперся в эту проблему, когда мне надо было анимировать листалку из картинок большого разрешения весом 100-200kB. Причем в ряде браузеров проблема выглядела совсем катастрофически.

Эта статья не претендует на строгость изложения и на окончательные выводы. Однако хотелось поделиться находкой с сообществом. Основной вывод такой: операции с картинками надо реализовывать средствами [canvas], которая нагружает видеокарту, не надо использовать обычные теги [img], которые служат простой презентации графики.

В сети и на github появилась разработка парсера Esprima, позиционированного на парсинг вообще и для javascript в частности. Он написан на Javascript и переводит скармливаемый текст в структуру JSON, которую затем можно анализировать, например, для препроцессирования кодов, создания сахарных обёрток для JS, автоматизированного поиска ошибок без запуска кода, преобразования языков (кросс-компиляции), преобразования серверного JS в клиентский или наоборот, для минификации кода или наоборот, для разбора обфусцированного. Но это — всё идеи для будущего. Появился архив совсем недавно (в середине ноября — первый коммит с 2000 строк кода), но уже приобрёл своих иследователей, судя по форкам. Формат парсинга совместим с Mozilla SpiderMonkey Parser API.

Эта публикация является продолжением прошлогоднего моего поста и последующей заметки. Целый год тестовые скрипты валялись где-то на диске. Дело не дошло до сравнения JavaScript vs C#, которое напрашивалось после позорного провала JScript.NET. Не дошло, потому что я не чувствовал в себе силы адекватно перевести тесты с JavaScript, хоть и активно программирую на С#. Кроме того, я сделал пробный заход, и мне показалось, что чуда не будет. Сейчас я все-таки решил привести тестовый пакет в порядок, так, чтобы каждый мог его опробовать. Возможно, у кого-то хватит сил добавить адекватное сравнение с C#.
Под катом будут результаты тестов год спустя, ссылка на Github, и новый(старый) способ использования движка JScript от IE9 вне самого IE9.

Вместе с HTML5 в веб-разработку приходят новые API, расширяющие UX, привнося новые мультимедийные возможности и возможности взаимодействия в реальном времени. Зачастую этот функционал завязан на использование бинарных форматов файлов вроде MP3-аудио, PNG-изображений
или MP4-видео. Использование бинарных файлов крайне важно в данном контексте, так как позволяет уменьшить требования к ширине канала, добиться необходимой производительности и вместе с этим оставаться совместимым с имеющимися технологиями. Еще недавно у веб-разработчиков не было прямого доступа к содержимому этих бинарных файлов или любых других бинарных форматов файлов.

В этой статье мы рассмотрим, как веб-разработчики могут снять этот барьер, используя
Typed Arrays API для JavaScript, и использование нового API в демонстрационном примере Binary File Inspector на IE Test Drive.

Итак, позавчера Корпорация Добра все-таки закрыла свой бесплатный Translate API. Автор до последнего момента надеялся, что они образумятся и не станут уподобляться остальным так поступать. Поэтому не чесался и ничего не делал. Но вот гром грянул. И в CMS одного небольшого 3-х язычного проекта отвалился переводчик. Не страшно, но неприятно — раньше админ на форме редактирования контента 1 щелчком мыши переводил все поля еще на 2 языка. Переводчик я написал по своей милости, потратил на это минут 20 и не взял за это ни копейки. Тем не менее, клиент звонит, грозится физической расправой над любимым хомячком, просит, опять угрожает. Пришлось закрывать баш и искать альтернативы.

Под катом список (4 варианта, никаких откровений / открытий) чего нашел автор, а также рецепт Javascript-перевода от Bing.

Предлагаю краткий обзор свежего UI-фреймворка от Telerik под названием Kendo UI.

Предыстория

Совсем недавно я размещал тикет в поддержке Telerik и спрашивал у них, можно ли использовать компоненты (в частности MVC) в приложении, написанном на Classic ASP.

Конечно, ответ огорчил.

В своем прошлом топике, я описал базовые принципы работы с фреймворком backbone.js, теперь предлагаю перейти к практике и сделать что-нибудь полезное.

Задача

Предположим, что на нашем сайте часто используются разного вида попапы. Все они обладают схожими чертами, их можно открывать в большом количестве, перетаскивать, закрывать. Кроме того различаются активные и неактивные попапы, причем активный расположен поверх остальных и не затенен (хм… я бы сказал, что это уже больше напоминает window-manager).
Вобщем как-то так:


В соответствии с заветами ООП, попробуем разработать класс для попапа, от которого мы сможем наследоваться и создавать попапы на свой вкус с общим для всех поведением.

Скачиваем backbone.js, jquery, jquery ui, underscore.js и

Программист Артур Вентура (Artur Ventura) имеет весьма специфический взгляд на место JavaScript в веб-разработке. По его мнению, вместе с движком для рендеринга JavaScript в состав браузеров нужно включать виртуальную машину, которая позволит запускать программы на любом языке программирования. Чтобы продемонстрировать тезис, Артур потратил шесть месяцев на разработку виртуальной машины BicaVM, которая интерпретирует и исполняет байт-код Java, причём сама виртуальная машина написана на JavaScript.

BicaVM может обработать примерно 60% байт-кода и ещё не оптимизирована, но зато запускается на iPad/iPhone и поддерживает интерфейс JNI для DOM.

Как и многие другие JavaScript-эксперименты (см. «операционную систему» на JavaScript или декодер H.264 на JavaScript), BicaVM вряд ли имеет практическую пользу, это просто концептуальная разработка в доказательство идеи, что браузер нужно воспринимать как виртуальную машину для различных программ, ну а JavaScript как будто играет роль ассемблера в интернете.

В качестве шутки, Артуру можно посоветовать написать ещё браузер на Java и поэкспериментировать с обеими своими разработками.

Доброе время суток уважаемые хабражители.

Многие javascript-программисты сталкивались с не поддерживанием некоторых функций DOM JS API в некоторых браузерах (не будем показывать пальцем). Наверняка, многие знакомы с замечательными библиотеками es5-shim и DOM-shim для решения проблем совместимости между разными браузерами, а DOM-shim к тому же, «подтягивает» браузер до уровня DOM4.

В данной же статье я расскажу, как сделать DOM-shim в IE6 и IE7, чтобы навсегда забыть о существовании этих браузеров.

Я уже писал о своих экспериментах со скроллбарами на сайтах и в веб-приложениях, но эти опыты удались не вполне. Поэтому я пока оставил идею кастомизации скроллбаров, но решил досканально разобраться с событиями, вызываемыми прокруткой колеса мыши.

Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.

Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.

В этом топике я хочу рассказать о необычных конструкциях js, а так же на наглядных примерах разобрать некоторые моменты, связанные с объектами и вызовами методов, которые, при использовании нетривиального синтаксиса могут вызывать вопросы у почти всех начинающих использовать js.

Цель топика (и сразу же дисклеймер) — помочь начинающим не впадать в кататонический ступор при виде чего-то вроде

user[(os[((user.microsoft_adept ? microsoft : apple).system || "linux")].install_carma <= user.carma) ? "install" : "cant_install"](os[((user.microsoft_adept ? microsoft : apple).system || "linux")].name);

И ещё один дисклеймер. Я ни в коем случае не призываю оформлять исходный код таким образом и даже прошу никогда так не делать. Но, ситуации в жизни бывают разные и, возможно, окажется полезным уметь читать разные монстроидальные конструкции. Врага, как говорится, нужно знать в лицо. Но, тем не менее некоторые ингредиенты этой кашки могут оказаться весьма полезными в определённых ситуациях.

Очень хороший и простой способ отдать клиенту несколько файлов в zip архиве. Не нагружая и без того нагруженный сервер.

var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;

Итак давайте разберем, что тут происходит.
Создается экземпляр нашего zip архива, класс JSZip,.
Далее мы можем добавлять в него любые данные, допустим Hello.txt, также можно добавить папку images.
Далее положить в нее smile.gif, все это завернуть, и отдать вам как zip фаил.