JavaScript *

Пост в продолжение недели^W месяца JavaScript на Хабре.

После статьи о разработке одностраничного веб-приложения занёс в закладки либу ICanHaz с целью потерзать и чуть допилить её, как руки дойдут. И, как водится, отложил в долгий ящик.

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

Напомню, что ICanHaz — это простой способ чуть-чуть организовать шаблоны Mustache, используемые javascript'ом в браузере. Рендеринг шаблонов с помощью этой библиотеки сводится к простому вызову функции. Ещё она избавляет от необходимости экранировать половину шаблона, т.к. его текст можно писать прямо в HTML-теге <script>

В своей статье о фильтрации списков на Knockout я упоминал, что читал доклад о MVVM и KnockoutJS на .NET Saturday в Днепропетровске.

Совсем недавно подоспело видео и я спешу им поделиться. Хочу заранее немного оправдаться — поначалу я немного тараторил, но потом вошёл в ритм и вроде как всё было достойно.

Сам доклад разделён на 2 части:

1. рассказ о MVVM с разбором практического примера, как сей паттерн может облегчить жизнь при разработке UI
2. написание простенького приложения на Knockout в live-режиме. Эта часть доклада всем понравилась больше чем первая, но за несколько моих «затупов» я до сих пор краснею :-)

Посмотреть видео доклада

PS 1: слайды можно скачать тут: bit.ly/qX61m2
PS 2: если вдруг кому нужны исходники демо-проекта — я выложу. Но их как минимум причесать надо

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

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

JavaScript, как никакой другой язык, нуждается в именно таком объяснении. Функциональная природа, скрытая за Си-подобным синтаксисом, и непривычная прототипная модель наследования поначалу сильно сбивают с толку. Давайте мысленно понизим уровень JavaScript до простого процедурного, наподобие Си. Отталкиваясь от этого «недоязыка», переизобретем функциональное и объектно-ориентированное программирование.

Что же такое Sugar?
Это javascript-библиотека для работы со встроенными объектами javascript, которая:

• расширяет встроенные объекты языка, добавляя полезные и интуитивно-понятные методы;
• добавляет кросс-браузерную функциональность, где она сломана или ее нет;
• полностью покрыта тестами;
• легко взаимодействует с другими фреймоворками и сторонним кодом;
• проста в понимании и использовании

В качестве примера использования, автор приводит вот такой код:

getLatestTweets(function(t) {
    var users = t.map('user').unique();
    var total = users.sum('statuses_count').format();
    var top = users.max('followers_count').first();
    var count = top.followers_count.format();
    var since = Date.create(top.created_at);
    return users.length + ' users with a total of ' + total + ' tweets.\n' +
    top.screen_name + ' is the top with ' + count + ' followers\n' +
    'and started tweeting ' + since.relative() + '.';
});


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

Хорош console.log, а нахваливать дальше некуда. И поддерживается не везде, и многобуквием страдает. И появляется задача иметь несложную функцию, настолько же гибкую, как console.log (или более), но приспособленную к разным браузерам без переделок, чтобы вывести одно или несколько значений. В отладке часто нужны текстовые поясняющие заголовки в строке, поэтому оказалось удобным иметь метод, добавленный к строке (объект String) с именем Alert, выполняющий то же самое, что и console.log и выводящий контекст-строку впереди списка аргументов. (Строку в апострофах, потому что удобно затем копировать и искать по кодам, где такой заголовок написан.)

По мотивам топика Chosen: сделай выпадающие списки более дружественными.

Довольно симпатичный виджет, иногда даже может быть полезен (допустим когда есть определенные требования к дизайну). Но в данный момент виджет не позволят добавлять позиции динамически, что возмутило товарища alexsrdk, да и меня тоже :) Сейчас попробуем это дело исправить.

В минувшую субботу я имел честь читать доклад о MVVM и KnockoutJS на .NET Saturday в Днепорпетровске.
Доклад был достаточно тепло встречен публикой и у многих появились интересные вопросы,
которые не были раскрыты во время самого доклада.
Собственно говоря, я решил написать публичные ответы на некоторые из них на Хабре.

Сегодня я отвечу на вопрос о template-binding. «Как быть, если мне надо отобразить не все записи, а только подходящие определённым условиям».

Ответ находится под хабракатом.

В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.

Вы наверное часто используете различные WYSIWYG редакторы в ваших проектах. Я их тоже часто использую, так уж получается, что они очень нравятся секретаршам и т.д. нашим пользователям.

Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.

И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:

• работает стабильно
• выглядит очень стильно
• написан на jQuery

Имя этому чуду – Imperavi.
Попробуйте сами и думаю, что вам понравится.

Скриншот:


UPD
Более новая версия редактора: http://imperavi.ru/redactor/.

Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()

(версия для jQuery)

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

Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

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

Хоббит или туда и обратно

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

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

А поговорим мы о системе сборки.

Около 2-х месяцев назад я и TheShock собирали вопросы по JavaScript в теме FAQ по JavaScript: задавайте вопросы. Первая часть, те вопросы, которые достались мне, появилась буквально через несколько дней JavaScript F.A.Q: Часть 1, а вот вторая часть все не выходит и не выходит. TheShock сейчас переезжает в другую страну и поэтому ему не до ответов. Он попросил меня ответить на его часть. Итак вторая часть ответов — те вопросы, которые достались тоже мне.

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

При обращению к гуглу выдаёт много статей по загрузке файлов через iframe. Алгоритм в общем сводится к:
1) Создаём скрытый фрейм (обычно просто обнуляется ширина и высота через HTML и CSS свойства)
2) Устанавливаем action формы в имя фрейма.
3) Отправляем файл. Радуемся.

Для удобства использования отдельная кнопка «Начать загрузку» не создавалась, а был повешен обработчик onChange для файлового input'a.

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

Наиболее популярными библиотеками для работы с SVG на JavaScript являются Raphael, Jquery.SVG, SVGWeb. Есть немного более профильные библиотеки, которые используют SVG для решения узких задач: карты, данные и манипулирование объектами.

В общем, под катом краткий обзор библиотек, с которыми мне пришлось немного поработать.

Достаточно не тривиально разработать хорошо спроектированный front-end веб-приложения с уровнем отклика, производительностью и фичами, которые ожидают пользователи сегодня. Легко потеряться в кипящей смеси jQuery обработчиков событий, HTML разметки и AJAX вызовов и даже относительно простой GUI быстро может стать кошмаром для сопровождения.

Один из способов добавления некоторой структуры и порядка на клиентской стороне – использование фреймворка вроде Knockout. Knockout – это свободная Javascript библиотека с открытым исходным кодом, которая помогает реализовать Model-View-View Model (MVVM) паттерн на клиенте. Она хорошо документирована и официальный веб сайт великолепная точка старта с кучей реальных примеров, которые не только демонстрируют использование встроенных фич библиотеки, но и показывают, как расширить её свои собственными фичами.

В этом посте мы рассмотрим, как Knockout может быть использован совместно с плагином отображения, каким-нибудь jQuery и ASP.NET MVC 3 backend (или модель, как вам нравится) для построения простого, но эффективного приложения для живого поиска в Twitter.

Более месяца назад в статье FAQ по JavaScript: задавайте вопросы был задан вопрос «Подскажите примеры хорошего подхода организации JS кода к сайту на достаточно высоком уровне. Как можно узнать подробнее практики реализации например gmail?».

Пришло время ответить на данный вопрос. Я немного затянул т.к. хотел рассказать доклад на одноименную тему на Я.Субботнике. Доклад был очень коротким многие важные моменты пришлось выкинуть. Статья — более-менее полная версия.

Эта статья о том, как сделать крупное веб-приложение расширяемым и поддерживаемым: архитектура, подходы, правила.

Тема про three.js от mrdoob в свое время проскакивала на хабре, но детально еще не рассматривалась. В этой и(возможно) последующих статьях я постараюсь исправить это упущение. К сожалению, three.js не предоставляет никакой внятной документации, поэтому все знания по нему получены экспериментальным путем и ковырянием спеки WebGL, т.е. любые дополнения автору топика только приветствуются.

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

До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) — это история одного таба. С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.

Основные понятия и синтаксис

History API опирается на один DOM интерфейс — объект History. Каждый таб имеет уникальный объект History, который находится в window.history. History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.

Основные методы объекта History:

1. window.history.length: Количество записей в текущей сессии истории
2. window.history.state: Возвращает текущий объект истории
3. window.history.go(n): Метод, позволяющий гулять по истории. В качестве аргумента передается смещение, относительно текущей позиции. Если передан 0, то будет обновлена текущая страница. Если индекс выходит за пределы истории, то ничего не произойдет.
4. window.history.back(): Метод, идентичный вызову go(-1)
5. window.history.forward(): Метод, идентичный вызову go(1)
6. window.history.pushState(data, title [, url]): Добавляет элемент истории.
7. window.history.replaceState(data, title [, url]): Обновляет текущий элемент истории