Содержание
- 01. Пора на видеовстречу
- 02. $ (’свет’). FadeIn ();
- 03. Ваши руки созданы для браузера
- 04. 3D-игры, управляемые с помощью геймпада.
- 05. Запуск Flash на вашем iPad
- 06. Написание приложений для вашего смартфона
- 07. Запуск Ruby и Python в вашем браузере
- 08. Написание настольных программ, независимых от ОС.
- 09. Запуск веб-сервера
- 10. Веб-сканирование и создание снимков экрана.
- Ждать! Есть больше...
JavaScript прошел долгий путь с момента своего рождения в 1995 году. Трудный путь, полный непонимания, неправильного использования и незнания. Но времена изменились, за последние пять лет JavaScript привлекает к себе все большее внимание. С большим вниманием все больше разработчиков фактически используют JavaScript, используя его для самых разных целей и наслаждаясь его красотой. Классическая сказка «Гадкий утенок», если вы спросите меня.
В следующей статье мы рассмотрим 10 вариантов использования JavaScript, которые отличаются от привычных вам «в браузере».
01. Пора на видеовстречу
Вы помните представление 80-х о видеосвязи в стиле Facetime?
Прошло всего 20 лет, прежде чем это стало массовым из-за почти повсюду доступного широкополосного Интернета и интенсивного использования небольшого программного обеспечения под названием Skype.
Благодаря возможностям Adobe Flash и попыткам Google создать социальную сеть у нас уже есть возможности видеосвязи в нашем браузере. Разве не было бы круто иметь эти возможности без использования сторонних плагинов, таких как Flash?
К счастью, производители браузеров подумали так же и внедрили API "getUserMedia" в свое программное обеспечение. Это был первый шаг к тому, чтобы получить доступ к таким устройствам, как камеры или микрофоны, прямо из браузера.
Используя Node.js в качестве сервера в задней части такого приложения, невероятно легко передать видеосигнал по воздуху одному или нескольким клиентам. К сожалению, на момент написания этого API только Chrome и Opera поддерживают API, но другие быстро их догонят.
Более чистый подход к двусторонней связи - это пока единственная вещь Chrome, которая называется WebRTC. Благодаря WebRTC клиенты могут открывать одноранговые каналы связи, напрямую соединяя клиента с клиентом.
Ради удовольствия, ознакомьтесь с реализацией Photo Booth Синдре Сорхуса, выполненной в 121 байте!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (stream) {
video.src = stream;
}
function errorCallback (error) {
console.log (ошибка);
}
02. $ (’свет’). FadeIn ();
Платформа микроконтроллера Arduino - это пример класса A для нестандартного сценария использования JavaScript. Для тех из вас, кто не знаком с платформой Arduino, вот очень известная цитата с ее веб-сайта:
«Arduino - это платформа для прототипирования электроники с открытым исходным кодом, основанная на гибком, простом в использовании аппаратном и программном обеспечении. Она предназначена для художников, дизайнеров, любителей и всех, кто интересуется созданием интерактивных объектов или сред».
Сама Arduino поддерживает только код, написанный на C, что по-прежнему не имеет большого значения. С помощью нескольких строк C (помимо того, что другие сделали эту работу за вас), Arduino может получать команды через свой USB-порт по протоколу последовательного порта.
Но как получить доступ к последовательному порту через JavaScript? Явно не из браузера.
Node.js спешит на помощь!
Благодаря усилиям защитника сообщества Криса Уильямса у нас есть библиотека последовательного порта Node, куда мы можем отправлять данные по старому протоколу SP. Это был первый прорыв, основанный на библиотеке, разработанной другими людьми с более абстрактным подходом к возможностям Arduino. Например, библиотеки node-arduino и duino.
Самая популярная и крутая библиотека для программирования Arduino на основе JS на данный момент - jonny-five. Загляните в блог Bocoup, чтобы узнать о том, что они сделали с платформой Arduino и множеством плагинов. Также видео JSConf от Николая Онкена и Йорна Заефферера может дать вам представление о том, что возможно сегодня с небольшим кодом.
03. Ваши руки созданы для браузера
Видение Minority Report на будущее (то, где они управляют компьютерами руками, а не уродливыми машинами) приближается с каждым днем. Огромным шагом в этом направлении стала попытка Microsoft играть без контроллера - Kinect. Вы можете подумать потрясающий игровой процесс, но при чем тут JavaScript ?!
С выпуском Microsoft Kinect SDK группа людей перешла через мост использования браузера для Kinect. Прежде всего, ребята из ChildNodes, которые создали полную рабочую библиотеку kinect.js, которая позволяет использовать Microsoft Kinect в вашем браузере.
Я настоятельно рекомендую посмотреть их демоверсии и видео, это здорово. Однако одним из основных недостатков библиотеки kinect.js является то, что в задней части клиента должна быть запущена серверная программа WebSocket (на самом деле это клей Kinect -> C # -> JS).
Несколько известных студентов Массачусетского технологического института работают над решением, чтобы снести эту стену, под названием DepthJS,
плагин для браузера, который позволяет использовать Kinect для Chrome и Safari, даже для сайтов, которые не оптимизированы для использования на базе Kinect ни в какой форме. DepthJS в настоящее время находится на ранней стадии разработки, но за ней определенно стоит следить.
04. 3D-игры, управляемые с помощью геймпада.
Вы когда-нибудь пробовали сейчас играть в браузерные игры без Flash? Графические возможности потрясающие, особенно когда вы видите игровые клоны, такие как Quake.
Но когда вы играете в эту игру, вы всегда привязаны к клавиатуре и (в основном) неуклюжей мышке. Это серьезный недостаток, особенно для экшн-игр, он действительно удерживает их от браузера.
Разве не было бы здорово, если бы вы просто могли подключить контроллер Xbox к компьютеру и начать играть в свою любимую браузерную игру? Это больше не видение будущего, поприветствуйте Gamepad API!
Если у вас на столе есть геймпад, подключите его прямо сейчас и наслаждайтесь играми, в которых уже используется Gamepad API. Программирование элементов управления вводом также представляет собой кусок пирога, посмотрите этот фрагмент кода или, что еще лучше, запустите его самостоятельно:
div id = "геймпады"> / div>
сценарий>
function gamepadConnected (событие) {
var gamepads = document.getElementById ("геймпады"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Геймпад подключен (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ скрипт>
Если вы хотите узнать больше о трехмерных возможностях браузеров, ознакомьтесь с созданным на его основе движком трехмерного симулятора Ascent от Three.js и Йенса Арпса с открытым исходным кодом. Марк Хэммил, берегись, ты нам может понадобиться для еще одного сиквела Wing Commander!
05. Запуск Flash на вашем iPad
Как сторонник открытых стандартов и фанат Apple, я должен признать, что мне очень хотелось бы поблагодарить Apple за то, что она не поставила Flash на iPad и iPod, это действительно положило начало движению в пользу открытых технологий, таких как HTML5, CSS3 и JavaScript.
Как сотрудник агентства, я должен сказать, что это действительно плохая ситуация для наших клиентов.
Большинству из них приходится дважды платить за простую рекламу или кампанию, которую они запускают, чтобы интерактивный контент работал в старом IE7 или IE8 через Flash и в современных браузерах, а также на iDevices через HTML5.
Полифиллинг функций старых браузеров имеет свои границы, в основном называемые производительностью. Так разве нет возможности запускать Flash на этих iDevices без Flash?
Конечно, он есть, и, конечно же, он построен на JavaScript.
Кусочек истории: в 2010 году Тобиас Шнайдер выпустил небольшую библиотеку под названием Gordon.
что позволяло запускать SWF-файлы прямо в браузере. Это хорошо работало для небольших файлов Flash, таких как объявления, в которых использовались функции только до версии Flash 2, но функции более высокого уровня не были включены вообще.
Когда Тобиас присоединился к компании ueberJS UXEBU, у них возникла новая идея.
Так родился Бикешед. Сам Bikeshed является своего рода фреймворком для анимации JavaScript, но также представляет собой JavaScript для Flash для всего, что вы хотите, чтобы он был компилятором (он основан на адаптере, поэтому вы можете писать адаптеры для всего, что захотите, хотя стандартным поведением является компиляция Flash в JavaScript) . Он совместим с Flash 10 и ActionScript 3. Взгляните на его веб-страницу, чтобы узнать больше о множестве его функций, помимо компилятора.
06. Написание приложений для вашего смартфона
Написание собственных приложений для среды мобильных телефонов - тернистый путь. Все начинается с решения, какую платформу вы хотите поддерживать. Если ваше приложение работает на iPhone и iPad, мобильном устройстве под управлением Android, Windows Mobile, устройствах Blackberry, платформе на базе WebOS ... и так далее.
Каждая из этих платформ имеет свои собственные API и в основном использует разные языки программирования.
Если вы пережили войну браузеров, позвольте мне сказать вам, что вступить в эту борьбу будет труднее. Разработчику практически невозможно создать приложение для всех этих платформ вовремя и в бюджет.
Так что делать? Нанять больше разработчиков? Брать больше за приложения? Или найти лучший подход, чтобы ваша кодовая база работала на каждом устройстве? Как и большинство из вас, я предпочел бы последний подход.
Но в чем должны быть встроены эти приложения? Что общего у всех этих платформ? Возможно, вы знаете ответ, это веб-браузер и, следовательно, движок JavaScript.
Это идея Apache Cordova, более известного под прежним названием PhoneGap.
Cordova - это JavaScript-фреймворк, который абстрагирует API-интерфейсы каждой мобильной среды и предоставляет аккуратный JavaScript-API для управления всеми ними. Это позволяет вам поддерживать единую базу кода, которую вы затем создаете и развертываете на разных мобильных устройствах.
Ознакомьтесь с ресурсами здесь, чтобы узнать, как использовать Cordova для создания потрясающих мобильных приложений, которые вы создаете один раз и будут работать везде.
07. Запуск Ruby и Python в вашем браузере
В Mozilla, компании, создавшей знаменитый браузер Firefox, работает множество компьютерных фанатов, это точно. Один из них - Алон Закай, инженер исследовательской группы Mozilla, который создал причудливый инструмент под названием Emscripten.
Emscripten позволяет переносить битовый код LLVM, который может быть сгенерирован из библиотек на основе C / C ++, в JavaScript. Для этого он компилирует библиотеки в битовый код, а затем берет этот битовый код и преобразует его в JavaScript. Хорошо, но что я могу с этим сделать, спросите вы себя?
У меня встречный вопрос: слышали ли вы когда-нибудь фразу «Использование CoffeeScript и Prototype - это лучшее, что вы можете получить для запуска Ruby в браузере»? Нет? Не волнуйтесь, это уже неправда.
С Emscripten вы можете просто взять исходники Ruby, преобразовать их в JavaScript и вуаля, запустить настоящий Ruby в вашем браузере! Но это не относится только к Ruby, например, Python также был написан.
Или посмотрите в браузере декодер h.264 Broadway. На самом деле это библиотека C ++ с написанием emscriptened!
Перейдите на repl.it, чтобы увидеть несколько языков программирования (включая Ruby и Python), работающих в вашем браузере!
08. Написание настольных программ, независимых от ОС.
Ранее мы говорили о таргетинге на несколько мобильных платформ с помощью Apache Cordova. Неудивительно, что JavaScript можно использовать не только для таргетинга на мобильные платформы, но и с нашим старым другом, настольным компьютером, тоже можно заняться.
Первые решения пришли от ребят из Appcelerator с Titanium Desktop Suite и от Adobe - широко используемой платформы Air.
Но, как все мы, любители открытого исходного кода, мы ищем более открытую технологию, основанную на Node.js. Встречайте app.js! app.js - это открытый конструктор настольных программ на основе веб-технологий и Node.js, который позволяет нам писать настоящие настольные программы с доступом к файловой системе, элементами управления окнами и многим другим. Мы можем полагаться на стабильные кросс-платформенные API-интерфейсы Node и создавать пользовательский интерфейс нашего программного обеспечения с помощью HTML и CSS. Как и самые горячие новинки в этом списке.
app.js - довольно молодой проект и поэтому на данный момент поддерживает только Windows и Linux, но, согласно списку рассылки, поддержка Mac уже в пути.
09. Запуск веб-сервера
В настоящее время никого не шокирует, когда вы говорите, что ваш веб-сайт обслуживается веб-сервером на основе JavaScript. Если вы вспомните два или три года назад и сказали веб-разработчикам то же самое, они, вероятно, посмеялись бы над вами или даже хуже.
Но с невероятным успехом Node.js до этого, к счастью, еще далеко. Мало того, что это больше не удивляет людей, из-за своей асинхронной природы Node.js - вундеркинд в производительности, особенно когда дело доходит до решения проблемы большого количества параллельных подключений. На высоте не только его производительность, но и по-настоящему простой API привлекает множество разработчиков. Давайте посмотрим на пример «Hello World» из мира узлов, это не только вывод «Hello World» на экране, это веб-сервер http!
var http = require (’http’);
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hello World n’);
}). listen (1337, ’127.0.0.1’);
Если вас не поразила такая простота, я тоже ничем не могу вам помочь.
Одна из лучших составляющих популярности (или ажиотажа) Node заключается в том, что крупные компании, такие как Microsoft, фактически поддерживают его, то есть в своих облачных службах Azure!
10. Веб-сканирование и создание снимков экрана.
И последнее, но не менее важное: давайте взглянем на проект, который мне лично нравится, потому что он позволяет мне запускать тесты QUnit без заголовка в командной строке. PhantomJS - это безголовый браузер на основе WebKit с аккуратным API на основе JavaScript (или CoffeScript).
Но тестирование вашего JavaScript и DOM - не единственный вариант использования Phantom. Что меня действительно очаровывает, так это его способность очищать веб-сайты и позволять вам делать их скриншоты!
Да, вы правильно читаете, с Phantom вы можете выводить веб-страницы в различных графических форматах, и, конечно же, это так же просто, как украсть сладости у ребенка.
Давайте посмотрим на сценарий, который именно это делает:
var page = new WebPage ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
phantom.exit ();
});
Это все, что вам нужно, чтобы сделать снимок экрана, и, поскольку он основан на JavaScript, вы также можете использовать jQuery и манипулировать содержимым страницы перед тем, как снимать ее!
Ждать! Есть больше...
Итак, я надеюсь, вы были так же удивлены, как и я, когда я открыл для себя все эти инструменты. Эта статья лишь поверхностно коснулась того, что сегодня возможно с помощью JavaScript. Гораздо больше похоже на IDE, полностью написанные на JS Cloud9, или на вещи с высоким уровнем безопасности, сделанные с его помощью (ваша кредитная карта была создана с помощью JavaScript).
Я надеюсь, вы почувствуете вдохновение, потратите немного времени и поиграйте с некоторыми из проектов, упомянутых здесь, или, еще лучше, возьмите некоторые из этих инструментов и создайте на их основе новые вещи. По большей части это открытый исходный код, и есть разработчики, которые ищут вас, чтобы помочь им улучшить их работу, даже если они используют только инструменты, обнаруживают ошибки и сообщают о них.
