JavaScript *

С каждым днём во мне крепнет осознание того, что JavaScript стремится играть ту же роль (занять ту же нишу), которая была свойственна Бейсику лет тридцать или даже пятнадцать тому назад.

Иными словами, JavaScript становится простым и распространённым языком, далеко переросшим своё первоначальное предназначение, и на нём теперь можно сочинить почти какое угодно приложение (и клиентское, и серверное, и консольное… и даже с GUI, как я недавно убедился).

Создаются целые операционные системы (Firefox OS, Google Chrome OS, Open webOS), для которых JavaScript является не менее «родным», чем Си для UNIX в своё время.

Появляются языки, транслируемые в JavaScript (можно вспомнить CoffeeScript, Dart, новорождённый TypeScript, и так далее).

Заметив это, уместно тотчас же порадоваться тому, что к джаваскрипту предъявляют, по крайней мере, меньше серьёзных претензий, чем некогда к Бейсику, который по справедливости невзлюбили за его GOTO и поощрение «макаронного кода». Притом джаваскрипт гораздо лучше переносится и с платформы на платформу, и из браузера во браузер.

Кроме того, многие существующие проблемы джаваскрипта не имеют особенного значения, потому что устраняются широко распространёнными средствами с открытым исходным кодом. Так, нестрогость синтаксиса устраняется строгою проверкою исходного кода (JSLint, например). Нехватка средств обработки данных (массивов, объектов) и функций устраняется подключением Underscore, а строки помогает обработать Underscore.string, а даты — moment.js, например. Сложность употребления методов DOM (в которой, впрочем, повинен не язык JavaScript, а браузеры и их разнобой) преодолевается с помощью jQuery. И так далее. Это входит в привычку у программистов.

Предисловие от переводчика.  В постскриптуме к моей вчерашней блогозаписи я указал, что AppJS — это не единственное такое средство, которое позволяет создавать приложения с GUI (графическим интерфейсом пользователя) при помощи вебоподобных методов разработки на языках HTML, CSS и JavaScript с использованием движка Node.js. Естественной иллюстрацией к этому постскриптуму является нижеследующий перевод гитхабовской страницы проекта node-webkit. И сразу скажу: я предвижу заранее, что непредвзятый взгляд ваш сочтёт node-webkit ещё более удобным и развитым средством, чем AppJS.

---

Введение

node-webkit — среда для запуска приложений, основанная на Chromium и Node.js. При помощи node-webkit можно создавать традиционные графические приложения посредством HTML и JavaScript. Также node-webkit позволяет вызывать модули Node.js прямо из DOM и тем обеспечивает новый способ создания таких приложений и употребления веботехнологий в них.

node-webkit создан и разрабатывается в Интеловском Центре технологий с открытым исходным кодом (Intel Open Source Technology Center).

Введение в node-webkit (слайды).

Достоинства

• Приложения создаются при помощи современных HTML5, CSS3, JS и WebGL.
   
• Полная поддержка API Node.js и созданных другими разработчиками модулей.
   
• Вызов API Node.js без потерь в производительности.
   
• Лёгкость упаковки и распространения приложений.

Microsoft представила язык программирования TypeScript, который является надмножеством JavaScript, поддерживает статическую типизацию, модули, определение классов и интерфейсов. TypeScript транслируется в чистый JS, исполняется в любых браузерах, в Node.js и т.д.

Транслятор TypeScript вышел под лицензией Apache 2.0, с исходниками на CodePlex. Microsoft предлагает плагины для Emacs, Sublime Text и Vim.

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

Первый шаг эволюции веборазработчика совершается тогда, когда разработчик знакомится с Node.js и тотчас же постигает, что ему теперь достаточно воспользоваться знанием джаваскрипта и изучить довольно простой API Node, чтобы немедленно получить возможность сочинять не одни только скрипты для сайтов, но также и консольные приложения, и даже серверные (в частности, вебсерверные).


Второй шаг эволюции веборазработчика совершается тогда, когда знание языка JavaScript (а также других веботехнологий — прежде всего CSS и HTML или XML) становится можно применять для разработки ещё и приложений с графическим интерфейсом пользователя — то есть с GUI.


Второй шаг эволюции веборазработчика становится естественным продолжением первого, если разметка и оформление вебоподобного приложения задаются при помощи HTML и CSS, а поведение — при помощи JavaScript, причём «под капотом» работает ужé известный разработчику движок Node.js.

В частности, если воспользоваться AppJS, то тогда объектная модель (DOM) демонстрируемой «страницы» содержит под именем window.node глобальный объект Node.js, и мы можем без труда прочесть в window.node.process.versions.node версию Node, в window.node.process.arch — архитектуру процессора, в window.node.process.platform — платформу, и вывести какое-нибудь такое сообщение в окне нашего графического приложения:



(Понятно, что аналогичным образом можно употреблять и другие возможности Node.js — сетевые, файловые и так далее.)

Что же такое AppJS?

При разработке приложений с модульной структурой на JavaScript возникает две проблемы:

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

Обе эти задачи решаются при использовании подхода Asynchronous Module Definition. Он сводится к описанию модулей функцией define и подключению их с помощью require. На данный момент есть несколько инструментов, реализующих AMD. Я начал своё знакомство с ними с RequireJS и был удивлён, насколько удобно и просто можно описывать зависимости модулей. Расскажу, как это работает, на простом примере.

← жать на картинку, это зеркало для хабраэффекта

«Герои матмеха» или «Сдать сессию и остаться в живых». Остросюжетный пошаговый симулятор студента матмеха СПбГУ портирован из глубины веков (98 год) на Javascript и доступен прямо из браузера. Этот квест будет интересам студентам смежных инженерных профессий. Выдержка из документации к оригиналу:
«Эта программа - некоторый синтез всех тех эмоций, что получил автор, пытаясь (с грехом пополам) выйти на сессию в конце второго семестра первого курса на мат-мехе. Правда, при этом автор находился в более выгодном положении, чем Вы - центральный персонаж этой игры, которому предстоит получить зачёты по 6-ти предметам практически с нуля.»


Ссылочки

• Живая демонстрация
• Код задокументированного файла из демки
• Да и вобще весь сайт autodafe.ws полностью работает на ADWiki
• Инструкция по установке ADWiki
• Проект на GitHub

Что ADWiki умеет:

• Парсить файлы Вашего проекта описанные на jsdoc
• Поднимать сайт с чистеньким дизайном на bootstrap
• Организовывать на сайте небольшой блог, где Вы сможете дополнять документацию статьями о проекте

Chromium Embedded Framework (CEF) — это проект с открытыми исходными кодами, созданный в 2008 году как элемент управления Web browser, работающий на базе Chromium от Google.
На данный момент это довольно мощный инструмент для разработки настольных приложений, со списком решений, использующих этот контрол можно ознакомиться здесь. Но достаточно сказать, что его используют такие широко известные продукты, как Evernote и Steam.

Итак, что же дает этот фреймворк?

Сколько же существует всяких языков программирования, еще один? Ну можно и так сказать, а можно сказать и по другому: я программист и пишу программы на разных языках программирования для разных задач. В одних языках есть одни плюсы, в других — другие. Вот я и решил предложить свой универсальный язык программирования для множества задач.

ObjectScript — новый объектно-ориентированный язык программирования с открытым исходным кодом. Сами исходники занимают 459 Кб (парсер, компилятор и виртуальная машина) и находятся в двух файлах source\objectscript.h и source\objectscript.cpp. Скачать их можно по прямой ссылке тут. ObjectScript — очень легкий, предназначен для вставки в приложение на C++.

ObjectScript сочетает в себе возможности таких языков, как JavaScript, Lua и PHP. Например, синтаксис в основном взят из JavaScript, множественное присваивание — из Lua, работа со свойствами через перегружаемые методы — из PHP.

Кроме унификации нескольких существующих языков программирования, ObjectScript добавляет также и свои уникальные и полезные фишки.

В данной статье я расскажу о новинках в DOM API, которые мы можем использовать уже сейчас или в ближайшем будущем.
Публикация статьи приурочена к радостному событию начала реализации некоторых новых DOM4 API методов в Google Chrome. Многие методы и свойства можно использовать уже сейчас, некоторые из них работают через префиксы, но к каждому методу или свойству я постараюсь дать Polyfill, реализующий их или отбрасывающий браузерные префиксы.
Методы я постарался описать в соответствии с JSDoc для Google Closure Compiler.

Хочу поделиться набором ссылок на нексолько полезных, интересных и, возможно, не самых известных материалов по JavaScript. Из них вы узнаете немного больше об истории появления языка, о его настоящем, тонкостях реализации в различных браузерах, и о будущем развития стандарта ECMAScript. О различных способах наследования в том числе об эмуляции «классического» ООП, множественном наследовании и миксинах. О функциональном стиле программирования в JavaScript: чистые функции, map, reduce, частичное применение и композиции функций. И, наконец, что если бы Хемингуэй писал на JavaScript?

Начну издалека. С браузеров. Новинками браузеростроения интересуюсь не так уж и часто, но вот однажды, со скуки, решил посмотреть, что javascript грядущий нам готовит и что с этого нам могут предложить современные браузеры. Речь идет, само собой, не о ECMAScript 5, а уже о ECMAScript 6 ECMAScript Harmony. Через пару минут серфинга я наткнулся на такую вот сводную табличку. Не самая актуальная — Chrome, например, довольно давно поддерживает Proxy. Само собой, разброд оказался еще тот. В браузере это использовать пока не реально.
В браузере. А на сервере? На сервере нет необходимости поддерживать зоопарк различных браузеров. Node.js использует V8 — тот же javascript движок, что и Chrome, соответственно, он должен поддерживать те же новые возможности языка.

Сегодня в корпоративном блоге Mozilla появилась запись одного из ключевых разработчиков Firefox Девида Андерсона (David Anderson) о том, что фонд заканчивает разработку нового движка для JavaScript под кодовым наименованием IonMonkey. Широкий круг пользователей сможет отметить повышение быстродействия браузера на страницах сложных веб-приложений уже с выходом Firefox 18, бета-версия которого будет выпущена 20 ноября.

Работа IonMonkey будет состоять из трёх фаз и выглядеть следующим образом: сначала будет выполняться трансляция в промежуточное представление (intermediate representation (IR)), к полученному результату будут применяться различные алгоритмы по оптимизации и уже после этого этот IR будет транслироваться непосредственно в машинный код.

Здравствуйте, я разработчик игр на Flash. Последнее время все больше стало появляться постов про флешокапец, и MustHave JavaScript (дальше JS). Вроде как за JS будущие, и за открытым вебом.
Я долго не рассматривал JS всерьез как платформу для разработки игр. Ведь это интерпретированный язык, и скорость JS оставляет желать лучшего. Но совсем недавно был портирован на JS мой любимый фреймворк для анимации TweenLite. Вместе с этим автор создал тестовый пример показывающий производительность актуальных JS фреймворков: здесь.

Мне стало очень интересно, так как TweenLite JS выдавал неплохие FPS. И тут я решил написать такой же пример для сравнения Flash и JS фреймворков.
Дальше мне стало интересно сравнить FPS этих примеров в разных браузерах, и на разных ОС.
Сам тест — это анимация передвижения, и изменения размеров картинок, при чем можно изменять их количество. Тестовый пример для Flash лежит здесь, исходники примера здесь.

Картинка стоит тысячи слов — мы же предлагаем взлянуть на скринкаст:



Засветились:

• LiveEdit — обновляет фрагменты страницы без перезагрузки, включая javascript
• ZenCoding — мгновенная генерация сложных конструкций из соответствующих CSS-селекторов
• AceJump — навигация по видимому участку кода

Разумеется мы умеем гораздо больше
Загрузить последнюю версию для вашей платформы

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

1. Контактная форма, в которой есть поле «телефон». Пользователь может добавить еще несколько дополнительных полей для телефонов, если возникнет желание.

2. Счет на оплату. Есть фиксированный набор полей, таких как «имя плательщика» и «номер счета». Кроме того, есть таблица с позициями. Каждая позиция состоит следующих полей: «наименование», «количество», «цена». Пользователь может добавлять произвольное количество дополнительных позиций.

Давайте рассмотрим работу с jqDynaForm на примере такого счета. Вот пример такой формы:

16-я версия браузера Firefox, релиз которой намечен на 9 октября, содержит серьёзное обновление движка JavaScript. Сборщик мусора перейдёт от стратегии «stop-the-world», когда на время уборки полностью замораживается работа скриптов, к инкрементальной стратегии, когда сборка мусора происходит в несколько этапов. Хотя в целом работа сборщика мусора будет отнимать немного больше времени, отзывчивость браузера существенно улучшится, так как элементы интерфейса, анимация и игры не будут больше подвисать на несколько сотен миллисекунд на время уборки.

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

delete testedObject[ i ].obj;

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

Крошечная (2 килобайта в минифицированном виде) JavaScript-библиотека Piecon генерирует круговую диаграмму на месте фавикона. API предельно прост и состоит из трёх методов объекта Piecon.

Как ни странно, на Хабре упоминание этого мощнейшего фреймворка нашлось лишь в одном комментарии от апреля 2012 года.

Вступление

Для меня эта тема особенно актуальна, ведь последнее время на Хабре упоминается огромное количество js-фреймворков. Какие-то из них авторы различных проектов находят в Сети, какие-то — пишут сами, не очень понимая зачем. Кто-то просто пишет свои велосипеды.

Моё же мнение — надо стремиться к отсутствию избыточного кода, к максимальному минимализму, простите за тавтологию.
Если на весь сайт вам нужно только выбирать html-элементы по их id — глупо подключать jQuery.

Если вам на Node.js проекте надо собрать пачку js-файлов и сжать их — глупо писать или подключать тяжёлые фреймворки с кучей настроек, параметров, дополнений и методов, ведь простейший скрипт, склеивающий файлы и прогоняющий их через Кроукфордский jsmin будет намного быстрее, надёжнее и проще.

Чем больше кода — тем больше ошибок. Чем больше стороннего кода — тем сложнее поддерживать проект. Ведь когда вы берёте чужой код, вы берёте на себя и ответственность за его поддержку. Нельзя будет сказать «этот баг не мой, а вон из той библиотеки».

Vanilla JS