Всем доброго дня!
Проанализировав множество блогов, докладов, презентаций, посетив пару конференций и пообщавшись на них с веб-разработчиками разного профиля, я выделил для себя основные направления в области JavaScript-разработки, которые активно развиваются или только начинают развиваться (и, по моему мнению, им стоит уделить внимание в целях ознакомления). Цель статьи – осветить их, и дать пищу для размышлений, как именно полученные знания можно было бы применить на практике.
Меня зовут Михаил Криштопа, я работаю в компании ameria верстальщиком (html/css/js) и plone-разработчиком. В рамках программы самообразования было потрачено время на изучение основных тенденций в развитии и использовании языка JavaScript, чем я и хочу поделиться в этом докладе. Вполне возможно, что опытные разработчики пролистают с улыбкой мой обзор, но в глубине души я надеюсь что кому-то да будет интересно ознакомиться с получившимся материалом (особенно если читатель не держал «руку на пульсе» в этой отрасли). Вцелом у меня не было задачи раскрывать всю глубину по каждой технологии, я всего лишь даю краткую характеристику плюс своё мнение о ней.
Это моя первая «проба пера» на Хабре, прошу не стрелять в музыканта – играет как умеет. Итак...
Один язык для клиента и сервера
На первое место стоит выделить тренд использования JavaScript для разработки приложений как на клиенте (браузер), так и на сервере. Несколько лет назад это было экзотикой, но сейчас есть богатый выбор фреймворков для разработки, и похоже что это пришло надолго. Подобное совмещение имеет преимущества – не требуется знать отдельно серверный и отдельно клиентский язык, тут как раз случай когда «два-в-одном».
Среди наиболее известных стоит выделить NodeJS, AngularJS (продвигается и активно используется Google), KnockoutJS, BackBone.js, Meteor, PhantomJS. Отмечу, что все они активно развиваются, и каждый день для каждого из них энтузиастами выпускаются множество модулей. Естественно, всё это OpenSource.
«Синтаксический сахар»
Брендан Эйх разрабатывал JavaScript в условиях жёсткого цейтнота, язык был разработан за 10 дней («10 дней на то, чтобы сделать лексер, парсер, компилятор в байткод (bytecode emitter), интерпретатор, встроенные классы и декомпилятор»). Возможно, поэтому многим разработчикам не нравится его синтаксис, конструкции и многие особенности. Например, в языке нет классов, в обычном их понимании, довольно необычный механизм наследования и т.д.
CoffeeScript
Разработанный как «надстройка» над JavaScript, по сути является новым языком, цель которого – облегчить разработку на JavaScript, убрать рутину и добавить простоты и скорости в процесс написания кода. Компилируется в JavaScript. Возможна отладка в браузере скомпилированного приложения через Source Map. Синтаксис похож на Ruby. В среднем для одинаковых действий при использовании CoffeScript требуется в 2 раза меньше строк, чем на чистом JavaScript.
TypeScript
Язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript. Также компилируется в JavaScript, с которым обратно совместим. Выпущен под OpenSource.
TypeScript отличается от JavaScript возможностью явного определения типов (статическая типизация), поддержкой использования полноценных классов (как в традиционных объектно-ориентированных языках), а также поддержкой подключения модулей. По идее подобные нововведения должны повысить скорость разработки, читаемость, рефакторинг и повторное использования кода, осуществлять поиск ошибок на этапе разработки и компиляции, а также скорость выполнения программ.
Dart
Google решили не мелочиться, и создали с нуля «новый язык для веба», с блекджеком низким порогом вхождения и классами. Dart позиционируется в качестве замены/альтернативы JavaScript, страдающего от «фундаментальных» изъянов, которые невозможно исправить путём эволюционного развития. Компилируется в JavaScript, но может быть запущен в специальном браузере Dartium (клон Chromium, с добавленной виртуальной машиной для Dart). Есть свой редактор для языка, есть плагины к основным редакторам.
HTML5-тэг «Canvas»
Не JavaScript, но имеет непосредственное отношение с нижеописанным вещам. С получением этого инструмента из набора HTML5-тэгов у разработчиков буквально стали развязаны руки – стало возможно отображать на странице браузера любую графику, в том числе и создаваемую динамически (ранее подобное можно было только во Flash). Это дало сильнейший толчок для развития библиотек работы с 2D- и 3D-графикой. Примеры будут ниже.
WebGL
WebGL (Web-based Graphics Library) — программная библиотека для JavaScript, позволяющая создавать интерактивную 3D-графику, функционирующую в широком спектре совместимых с ней веб-браузерах. За счёт использования низкоуровневых средств поддержки OpenGL, часть кода на WebGL может выполняться непосредственно на видеокартах.
Хотя, на мой взгляд, по-настоящему время технологии не наступило, но в той или иной мене она поддерживается всеми современными браузерами. Когда будет решён вопрос с безопасностью, и её начнут поддерживать мобильные устройства — будет цвести пышным цветом. А это значит, что не загорами напичканные сложной 3D-графикой различные многопользовательские игры в каждом телефоне и планшете.
three.js
Лёгкая и кросс-браузерная библиотека для работы в трёхмерной графикой. Это НУЖНО увидеть, чтобы понять «куда катится» Веб:
- Автолюбителям, must see:
http://threejs.org/examples/webgl_materials_cars.html (FireFox, Chrome) - Отрисовка человека в браузере? Нет проблем:
http://threejs.org/examples/webgl_materials_normalmap2.html
http://threejs.org/examples/webgl_loader_json_objconverter.html
http://threejs.org/examples/webgl_loader_ctm.html - Процедурная генерация текстур:
http://threejs.org/examples/webgl_terrain_dynamic.html - Арт-проект, который сложно даже отнести к какому-то определённому виду искусства (то ли интерактивный фильм, то ли бред сумасшедшего, то ли новый вид искусства):
http://www.ro.me/ (только Chrome)
asm.js (от Mozilla) + Emscripten
Отдельной строкой стоит идея использования JavaScript в роли «ассемблера» для браузера. Сам по себе JavaScript – язык, мягко говоря, небыстрый (по крайней мере был таким, пока за него не взялись разработчики V8 от Google Chrome).
Разработчики asm.js создали подмножество языка, из которого исключили различные «тормозящие» компоненты, добавили строгую типизацию и т.д. Получившийся диалект работает в разы быстрее обычного JavaScript, к тому же под него производители браузеров начинают разрабатывать отдельные компиляторы. Уже сейчас использование asm.js выдаёт нам 50% от скорости обычного, написанного на C приложения. А это действительно очень круто.
Но сам по себе asm.js значит не так много, как в связке с компилятором Emscripten, который позволяет «перегнать» код, написанный на C/C++, в asm.js. Естественно, что результирующий JavaScript нечитаем, но от него этого и не требуется.
Как пример, всего за 4 дня был переведён на веб такой проект как Unreal Engine 3. Как это выглядит – стоит посмотреть демо: http://www.unrealengine.com/html5/ (завораживает, особенно когда понимаешь, что ЭТО работает в браузере).
Контроль качества кода
Немного отойдя от графической части, хочу обратить внимание на повсеместное использование разработчиками таких библиотек, как JSHint, JSLint.
JSLint сканирует JavaScript код. Если он находит проблему, то возвращает сообщение с описанием, и местонахождение в коде. Проблема — это не обязательно ошибка синтаксиса, хотя часто так и есть. JSLint также обращает внимание на соглашения о кодировании и на проблемы в структуре.
«Прежде чем закоммитить код, прогоните его через JSLint чтобы проверить на наличие ошибок, которые вы могли проглядеть.»
К основным редакторам есть модули для проверки кода, но в простейшем случае поможет онлайн-сервис проверки.
Web Workers
Решение проблемы однопоточности JavaScript. Отдельно запускаемые фоновые процессы (по типу «демонов» в unix-системах), в которых можно производить какие-то расчёты, запросы к серверу и т.д. К воркеру можно обратиться из основного процесса, и получить какой-то ответ с результатом.
Документирование кода
Хочется отметить библиотеку JS Doc 3. Генерирует документацию API из комментариев в коде проекта.
- http://usejsdoc.org/ — документация
- https://github.com/jsdoc3/jsdoc
Testing
Покрытие приложения тестами — хорошая практика, не только в JavaScript. Но как раз в нём уже также есть достаточно широкий выбор фреймворков для тестирования, на любой вкус и цвет: Mocha, qUnit, Jasmine, Google JS Test, etc.
- Mocha: http://visionmedia.github.com/mocha/
- qUnit: http://qunitjs.com – jQuery unit testing framework
- Jasmine: http://pivotal.github.io/jasmine/
Grunt: The JavaScript Task Runner
«Grunt is a task-based command line build tool for JavaScript projects.»
Одно слово: «автоматизация». Инструментарий, написанный на JavaScript, для работы над проектом, с модульной архитектурой, позволяющий упростить работу с кодом, берущий на себя функции автоматизации различных рутинных операций: проверка кодаJSHint, компиляция из SASS или CoffeeScript, и т.д). Благодаря модульной архитектуре с помощью множества написанных энтузиастами плагинов реализован широкий функционал, облегчающий разработчику жизнь.
Как простой пример можно рассмотреть плагин grunt-micro, который при сборке проекта будет уведомлять, что размер определённой библиотеки после сборки и минимизации больше положенного спецификацией лимита, и что-то надо укоротить :).
JS Shells
«Песочницы», позволяющие опробовать (или написать) кусок кода, без создания страницы для эксперимента. В считанные минуты можно опробовать новую идею, поделиться примером с другим разработчиком, или поработать совместно над кусочком страницы. Выбор подключаемых JS-фреймворков, история изменений, контроль качества кода (JSLint) и другие «плюшки».
JS Video Codec
«Mozilla teams up for new JavaScript video codec that eliminates need for plug-ins (ORBX.js)». Видео-кодек, работающий на JavaScript и WebGL. И это реально круто. Просмотр HD-видео без кодека, браузером, на чистом JS. Нет необходимости в плагинах, нет проблем с форматами. Адаптивный битрэйт, на 25% лучше компрессия по сравнению с H.264, и длинный список плюсов.
JS Audio Codec
Аудио кодек. Даёт возможность игрррать MP3, Apple Lossless, FLAC, и AAC даже в браузерах, которые не поддерживают эти форматы.
Head Tracking
Вкусное – напоследок. Технология, которая позволяет отслеживать скрипту через веб-камеру положение головы пользователя. Голова может использоваться разными способами – ей можно думать, в неё можно есть. Также её можно использовать для управления. Чем угодно, хотя с непривычки шея будет болеть.
Яркий пример — игра FaceKat (проверял в Chrome). Пронзаем первозданный вселенский хаос, уворачиваясь от летящих в лоб кружочков посредством интенсивного мотания головой. Хорошая разминка для шеи, кстати.
Ещё один интересный пример — возможность покрутить головой, рассматривая перспективу и заглядывая за объекты переднего плана — http://auduno.github.io/headtrackr/examples/targets.html. В данном варианте малопригодна, но как идея для магазина — вполне.
Пример, как эту технологию можно использовать в связке с Google Street View: http://alexhancock.github.io/street-facing/.
Сам модуль называется “headtrackr”: https://github.com/auduno/headtrackr.
Дальнейшее развитие технологии — управление виртуальными объектами. Пример на badassjs.com/post/44786596458/an-iron-man-like-3d-hologram-controlled-by-leap-motion показывает как с помощью JavaScript и устройства LeapMotion за 80$ можно покрутить пальцем голограмму виртуальной Земли. Совсем как Тони Старк.
Заключение
На этом заканчиваю свой опус, надеюсь что не слишком утомил. Также хотелось бы услышать мнение о статье, и о пропущенных моментах, али неточностях. Ну, ежели кому сильно хочется, то можно и помидором запульнуть – лишь бы задело за дело… ;)
Автор: Theo_from_Sed
