10 вещей, о которых вы не знали, на что способен JavaScript

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 клиенты могут открывать одноранговые каналы связи, напрямую соединяя клиента с клиентом.

Ради удовольствия зацените Синдре Сорхус ' Фотобудка реализация сделана в 121 байте!

var video = document.getElementsByTagName ('video') [0],
navigator.getUserMedia ('видео', successCallback, errorCallback);

function successCallback (stream) {
video.src = поток;
}

function errorCallback (error) {
console.log (ошибка);
}

02. $ ('свет'). FadeIn ();

В Ардуино Платформа микроконтроллера представляет собой пример класса A для нестандартного сценария использования JavaScript. Для тех из вас, кто не знаком с платформой Arduino, вот очень известная цитата с ее веб-сайта:

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

Сама Arduino поддерживает только код, написанный на C, что по-прежнему не имеет большого значения. С помощью нескольких строк C (помимо того, что другие сделали эту работу за вас), Arduino может получать команды через свой USB-порт по протоколу последовательного порта.

Но как получить доступ к последовательному порту через JavaScript? Ясно не из браузера.
Node.js спешит на помощь!

Благодаря усилиям адвоката сообщества Крис Уильямс , у нас есть Библиотека последовательного порта узла , куда мы можем отправлять данные по старому протоколу SP. Это был первый прорыв, основанный на библиотеке, разработанной другими людьми с более абстрактным подходом к возможностям Arduino. Например, узел-ардуино и Duino библиотеки.

Самая популярная и самая крутая библиотека для программирования Arduino на основе JS на данный момент - Джонни пять . Проверить Блог Bocoup ради горячего дерьма, которое они сделали с платформой Arduino и множеством плагинов. Так же JSConf видео из Николай Онкен и Йорн Заефферер может дать вам представление о том, что возможно сегодня с небольшим кодом.

Adobe Stock является частью Creative Cloud

03. Ваши руки созданы для браузера

Видение будущего Minority Report (то, где они управляют компьютерами руками, а не уродливыми автомобилями), приближается с каждым днем. Огромным шагом в этом направлении стала попытка Microsoft играть без контроллера Kinect. Вы можете подумать потрясающий игровой процесс, но при чем тут JavaScript ?!

С SDK Microsoft Kinect выпуска, группа людей перешла через мост в использовании браузера для Kinect. В первую очередь ребята из ChildNodes которые создали полную рабочую библиотеку kinect.js, которая позволяет использовать Microsoft Kinect в вашем браузере.

Я очень рекомендую посмотреть их демо и видео, это здорово. Однако одним из основных недостатков библиотеки kinect.js является то, что в задней части клиента должна быть запущена серверная программа WebSocket (на самом деле это клей Kinect -> C # -> JS).

Несколько известных студентов Массачусетского технологического института работают над решением снести эту стену, которое называется DepthJS ,
плагин в браузере, который позволяет использовать Kinect для Chrome и Safari, даже для сайтов, которые не оптимизированы для использования на основе Kinect ни в какой форме. DepthJS в настоящее время находится на ранней стадии разработки, но за ней определенно стоит следить.

04. 3D-игры, управляемые с помощью геймпада.

Вы когда-нибудь пробовали сейчас играть в браузерные игры без Flash? Графические возможности потрясающие, особенно когда вы видите игровые клоны, такие как Землетрясение .

Но когда вы играете в эту игру, вы всегда привязаны к клавиатуре и (в основном) неуклюжей мышке. Это серьезный недостаток, особенно для экшн-игр, он действительно удерживает их от браузера.

Было бы здорово, если бы вы просто могли подключить контроллер Xbox к компьютеру и начать играть в свою любимую браузерную игру? Это больше не видение будущего, поздоровайся с API геймпада !

Если у вас на столе есть геймпад, подключите его прямо сейчас и наслаждайтесь играми, в которых уже используется Gamepad API. Программирование элементов управления вводом также несложно, посмотрите этот фрагмент кода или, что еще лучше, запустите его самостоятельно:



function gamepadConnected (событие) {
var gamepads = document.getElementById ('геймпады'),
gamepadId = event.gamepad.id;

gamepads.innerHTML + = 'Геймпад подключен (id =' + gamepadId + ')';
}

window.addEventListener ('MozGamepadConnected', gamepadConnected, false);

Если вы хотите узнать больше о 3D-возможностях браузеров, посетите Three.js и J США Арпс 'движок 3D-симулятора с открытым исходным кодом Восхождение построен на нем. Марк Хэммил, берегись, ты нам может понадобиться для еще одного сиквела Wing Commander!

05. Запуск Flash на вашем iPad

Как сторонник открытых стандартов и фанат Apple, я должен признать, что мне очень хотелось бы поблагодарить Apple за то, что она не поставила Flash на iPad и iPod, это действительно положило начало движению в пользу открытых технологий, таких как HTML5, CSS3 и JavaScript.

Как сотрудник агентства, я должен сказать, что это действительно плохая ситуация для наших клиентов.
Большинству из них приходится дважды платить за простую рекламу или кампанию, которую они запускают, чтобы интерактивный контент работал в старом IE7 или IE8 через Flash и в современных браузерах, а также на iDevices через HTML5.

Полифиллинг возможностей старых браузеров имеет свои границы, в основном называемые производительностью. Так разве нет возможности запускать Flash на этих iDevices без Flash?

Конечно, есть, и, конечно, он построен на JavaScript.

Кусочек истории: 2010 год. Тобиас Шнайдер выпустила небольшую библиотеку под названием Гордон
что позволяло запускать 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 позволяет переносить битовый код LLVM, который может быть сгенерирован из библиотек на основе C / C ++, в JavaScript. Для этого он компилирует библиотеки в битовый код, а затем берет этот битовый код и преобразует его в JavaScript. Хорошо, но что я могу с этим поделать, спросите вы себя?

У меня встречный вопрос: слышали ли вы когда-нибудь фразу «Использование CoffeeScript и Prototype - это лучшее, что вы можете получить для запуска Ruby в браузере»? Нет? Не волнуйтесь, это уже не так.

С Emscripten вы можете просто взять Рубин источников, преобразуйте их в JavaScript и вуаля, пусть в вашем браузере работает настоящий Ruby! Но это относится не только к Ruby, Python например, был также написан.

Или посмотрите декодер h.264 в браузере Бродвей . На самом деле это библиотека C ++ с написанием emscriptened!

Идти к REPL.IT чтобы увидеть несколько языков программирования (включая Ruby и Python), работающих в вашем браузере!

08. Написание настольных программ, независимых от ОС

Ранее мы говорили о таргетинге на несколько мобильных платформ с помощью Apache Cordova. Неудивительно, что JavaScript можно использовать не только для таргетинга на мобильные платформы, но и с нашим старым другом, настольным компьютером, тоже можно заняться.

Первые решения пришли от ребят из Appcelerator с Titanium Desktop Suite и широко используемыми Воздуха Платформа.

Но, как все мы, любители открытого исходного кода, мы ищем более открытую технологию, основанную на 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 ('Привет, мир 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 Облако 9 или что-то с высоким уровнем безопасности, сделанное с ним ( Ваша кредитная карта была создана с помощью JavaScript) .

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