JavaScript *

Довольно часто в пользовательском интерфейсе есть кнопки «Сохранить» и «Отмена». Особенно часто эти кнопки используются в формах. Несмотря на то, что в современном мире всё идёт к упрощению интерфейса, но на эти кнопки всё равно есть спрос.

Сегодня я предлагаю разобраться как с помощью KnockoutJS принимать и откатывать изменения для индивидуальных observables так и целых view models.

Знакомые с KnockoutJS сразу могут выдать две ссылки на лучший блог о сабже

• Creating smart dirty flag in KnockoutKS
• Guard your model accept or cancel edits

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

• Dirty flag — не позволяет сохранять изменения, а только сбросить их в начальное состояние.
• protectedObservable — никто не видит изменений observable до тех пор, пока не произойдёт commit. Это ограничение сильно удручает при использовании dependent observables, к примеру.

Ну и к тому же, они нацелены на индивидуальные observable'ы, а хотелось бы работать с несколькими полями сразу.

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

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

Особо вероятно изобретение велосипеда, когда рост сложности приложения происходит постепенно и в некотором смысле незаметно. Сложное приложение обычно является богатым приложением (rich), его элементы и особенности специфицированы W3C www.w3.org/TR/backplane. Известный JavaScript-евангелист Addy Osmani так дополнительно определяет сложное приложение: “По-моему, крупное JavaScript приложение есть нетривиальное приложение, требующее значительных усилий разработчика для поддержки, причем наиболее сложное оперирование обработкой и отображением данных ложится на браузер” (http://addyosmani.com/largescalejavascript/).

Такое письмо я получил от Шона Сильвы прошлой ночью:

Я просматривал ваш код для проекта npm.js (в частности, вот этот файл: https://github.com/isaacs/npm/blob/master/lib/npm.js), и заметил, что вы выравниваете запятые под ‘r’ в выражениях var, и под [ и { в литералах массивов/объектов. Мне очень нравится такой способ форматирования, но я не решаюсь его использовать, так как большинство ресурсов о js насаждают страх перед хаосом, который воцарится в коде из-за автоматической расстановки точек с запятой, если вы не будете заканчивать строки чем-нибудь, что предполагает продолжение.
Безопасно ли располагать запятые таким образом в «браузерном» коде, или это только в node возможно?

Я написал несколько абзацев, и решил сократить их до следующего ответа:

Да, это полностью безопасно, и это совершенно валидный JS, понимаемый каждым браузером. Closure compiler, yuicompressor, packer, и jsmin — все могут правильно минифицировать его. Производительность нигде не просядет.
Мне жаль, что вместо того, чтобы обучать вас, лидеры сообщества этого языка прививали вам ложь и страхи. Это позор. Я рекомендую изучить, как на самом деле терминируются инструкции в JS (и в каких случаях они нетерминируемы) — и вы сможете писать код, который сочтете прекрасным.

Gary Bernhardt рассказывает о Ruby и JS

Эффект кинетической прокрутки сейчас можно встретить практически везде. Это действительно удобно при управлении пальцами или стилусом и довольно забавно при прокрутке мышкой.

В вебе такой эффект пока только приживается. Да и не так уж просто придумать, где он будет удобен… В голову приходят пожалуй лишь scroll bar’ы, которые используются для прокрутки некоторого контента, в основном картинок, внутри страницы. Для примера, можно посмотреть реализацию галереи практически на любом сайте. Согласитесь, было бы значительно интереснее, если бы ползунок не останавливался сразу, как только отпустили кнопку мыши, а продолжал бы двигаться дальше по инерции, постепенно останавливаясь…
Я попытаюсь рассмотреть процесс создания такого эффекта «кинетического» scroll bar’a. Что получилось в итоге можно посмотреть здесь

Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию "JavaScript Perfomance" о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.

По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.

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

Поговорим о случае, когда нужно автоматизировать запуск тестов и сбор статистики покрытия, к примеру, для гипотетической клиентской JS библиотеки. Задача не совсем тривиальна, поскольку для нормальной работы библиотеки требуется полноценный браузер — библиотека является визуальной оберткой над стандартными компонентами формы. Библиотека должна быть написана так, чтобы все взаимодействие с ее объектами можно было производить с помощью методов, которые они предоставляют, а не только через непосредственные манипуляции с DOM (т.е. любое действие юзера может быть запущено не только событием, допустим, клика по чему-то, но и руками через метод). Но тем не менее, надо этот DOM иметь, чтобы результаты работы методов помимо изменения внутреннего состояния объектов также отображались и в DOM. В целом напоминает приложения на Sencha (ExtJS).

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

Американская компания 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.