Зміст
- 01. Настав час відеокімнати
- 02. $ ('світло'). FadeIn ();
- 03. Ваші руки створені для браузера
- 04. 3D-ігри, керовані за допомогою геймпада
- 05. Запуск Flash на вашому iPad
- 06. Написання програм для вашого смартфона
- 07. Запуск Ruby та Python у вашому браузері
- 08. Написання незалежних від ОС настільних програм
- 09. Запуск веб-сервера
- 10. Створення веб-сторінок та створення скріншотів
- Чекай! Є ще ...
JavaScript пройшов довгий шлях з моменту свого народження в 1995 році. Напевно, важкий шлях, повний нерозуміння, неправильного використання та незнання. Але часи змінилися, оскільки останні п'ять років JavaScript приділяв дедалі більше уваги. З більшою увагою все більше розробників насправді використовують JavaScript, використовуючи його для багатьох різних цілей і насолоджуючись його красою. Класична історія "Гидке каченя", якщо ви запитаєте мене.
У наступній статті ми виявимо 10 випадків використання JavaScript, які відрізняються від звичних "у браузері", до яких ви звикли.
01. Настав час відеокімнати
Ви пам’ятаєте бачення відеозв’язку, схожого на Facetime?
Минуло лише 20 років, перш ніж це стало масовим завдяки майже всюди доступному широкосмуговому Інтернету та інтенсивному використанню невеликого програмного забезпечення під назвою Skype.
Завдяки можливостям Adobe Flash та спробі Google побудувати соціальну мережу, ми вже маємо можливості відеозв’язку у своєму браузері. Чи не було б здорово мати ці здібності без використання стороннього плагіна, такого як Flash?
На щастя, постачальники браузерів думали так само і впровадили API «getUserMedia» у своє програмне забезпечення. Це був перший крок для доступу до таких пристроїв, як камери або мікрофони, безпосередньо з вашого браузера.
Використовуючи Node.js як сервер у задній частині такої програми, надзвичайно легко транспортувати відеосигнал по повітрю до одного або кількох клієнтів. На жаль, на момент написання цього статті лише Chrome і Opera підтримують API, але інші швидко наздоганяють.
Більш чистий підхід для двостороннього спілкування - це на даний момент лише Chrome, який називається WebRTC. Завдяки WebRTC клієнтам дозволяється відкривати однорангові канали зв'язку, безпосередньо підключаючи клієнта до клієнта.
Для розваги перегляньте реалізацію «Фотобудки» Сіндри Сорхус, виконану у 121 байт!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (‘відео’, successCallback, errorCallback);
функція successCallback (потік) {
video.src = потік;
}
function errorCallback (error) {
console.log (помилка);
}
02. $ ('світло'). FadeIn ();
Платформа мікроконтролера Arduino - це приклад класу "нестандартного" випадку використання 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. Ваші руки створені для браузера
Майбутнє бачення звіту меншин (те, де вони керують комп’ютерами своїми руками, а не потворними автомобілями) наближається щодня. Величезним кроком у цьому напрямку стала спроба відтворення контролера 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 до свого ПК і почати грати у свою улюблену гру в браузері? Це вже не майбутнє бачення, привітайтеся з API Gamepad!
Якщо у вас є геймпад за столом, підключіть його зараз і насолоджуйтесь деякими іграми, які вже використовують API геймпада. Програмування елементів керування введенням - це теж шматочок, перевірте цей фрагмент коду або навіть краще, запустіть його самостійно:
div id = "gamepads"> / div>
сценарій>
функція gamepadConnected (подія) {
var gamepads = document.getElementById ("геймпади"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Геймпад підключений (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Якщо ви хочете дізнатись більше про можливості браузерів у 3D, перегляньте побудований поверх нього симулятор 3D-симулятора Three.js та Jens Arps Ascent. Марк Хамміль, пильнуй, нам може знадобитися ти ще одне продовження командира крила!
05. Запуск Flash на вашому iPad
Як любитель відкритих стандартів і фанат Apple, я повинен визнати, що я б дуже хотів подякувати Apple за те, що він не розміщував Flash на iPad і iPod, це справді започаткувало рух, що охоплює відкриті технології, такі як HTML5, CSS3 та JavaScript.
Як співробітник агентства, я повинен сказати, що це справді погана ситуація для наших клієнтів.
Більшості з них доводиться платити двічі за просту рекламу чи кампанію, яку вони запускають, щоб мати інтерактивний вміст, який працює у старому IE7 або IE8 через Flash та в сучасних браузерах, а також iDevices через HTML5.
Полізаповнення функцій старих браузерів має свої межі, здебільшого з назвою продуктивності. Тож чи немає можливості запустити Flash на цих безпроблемних iDevices?
Звичайно, є один, і, звичайно, він побудований на JavaScript.
Частина історії: У 2010 році Тобіас Шнайдер випустив маленьку бібліотеку під назвою Гордон
що дозволило SWF-файлам запускатись безпосередньо у браузері. Це досить добре працювало для невеликих Flash-файлів, таких як оголошення, які використовували лише функції до версії Flash 2, але функціонал вищого рівня взагалі не включався.
Коли Тобіас приєднався до компанії ueberJS UXEBU, вони придумали нову ідею.
І ось, народився Bikeshed. Сам 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 кожного мобільного середовища та виставляє акуратний API API для управління всіма ними. Це дозволяє вам підтримувати єдину базу коду, яку ви потім створюєте та розгортаєте на різних мобільних пристроях.
Ознайомтеся з ресурсами тут, щоб дізнатися, як використовувати Кордову для створення мобільних додатків, які ви створюєте один раз і будуть працювати скрізь.
07. Запуск Ruby та Python у вашому браузері
У Mozilla, компанії, яка стоїть за відомим браузером Firefox, працює безліч виродків, це точно. Одним з них є Алон Закай, інженер з дослідницької групи Mozilla, який створив химерний інструмент під назвою Emscripten.
Emscripten дозволяє вам перенести біт-код LLVM - який може бути сформований з бібліотек на основі C / C ++, до JavaScript. Він робить це шляхом компіляції бібліотек у бітовий код, а потім, беручи цей бітовий код і перетворюючи його в JavaScript. Акуратно, але що я можу з цим насправді зробити, можете запитати себе?
У мене зустрічне запитання до вас: чи чули ви коли-небудь фразу "Використання CoffeeScript і Prototype - це найближче, що можна отримати від запуску Ruby у браузері"? Немає? Не хвилюйтеся, бо це вже неправда.
За допомогою Emscripten ви можете просто взяти джерела Ruby, перетворити їх на JavaScript та voilà, і у вашому браузері запустіть справжній Ruby! Але це не стосується лише Ruby, наприклад, також був написаний Python.
Або перевірте декодер у браузері h.264 Broadway. Це насправді скриптова бібліотека C ++!
Перейдіть на repl.it, щоб побачити кілька мов програмування (включаючи Ruby та Python), які працюють у вашому браузері!
08. Написання незалежних від ОС настільних програм
Ми вже говорили про націлювання на кілька мобільних платформ за допомогою Apache Cordova. Не дивно, що JavaScript можна використовувати не тільки для націлювання на мобільні платформи, але і нашого старого друга, настільного комп’ютера.
Перші рішення надійшли від хлопців Appcelerator із Titanium Desktop Suite та від широко використовуваної платформи 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" зі світу Node, це не лише друк "Hello World" на прикладі екрану, це веб-сервер http!
var http = require (’http’);
http.createServer (функція (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (‘Hello World n’);
}). слухати (1337, ’127.0.0.1’);
Якщо вас не вразить ця простота, ну, я теж не можу вам допомогти.
Однією з найкращих частин популярності Node (або ажіотажу) є те, що такі великі компанії, як Microsoft, насправді підтримують її, тобто у своїх хмарних послугах Azure!
10. Створення веб-сторінок та створення скріншотів
Отож, останнє, але не менш важливе, давайте подивимось на проект, який я особисто люблю за те, що дозволив мені без команди запускати свої тести QUnit. PhantomJS - це безглуздий браузер на базі WebKit з охайним API на основі JavaScript (або CoffeScript).
Але тестування вашого JavaScript і DOM - не єдиний варіант використання Phantom. Мене насправді зачаровує - це можливості сканувати веб-сайти та дозволяти робити їхні скріншоти!
Так, ви правильно читаєте, з Phantom ви можете виводити веб-сторінки в різних графічних форматах, і, звичайно, це так само просто, як викрасти солодощі у дитини.
Давайте подивимось на сценарій, який саме це робить:
сторінка var = new WebPage ();
page.open (‘http://google.com’, функція (статус) {
page.render (’google.png’);
phantom.exit ();
});
Це все, що вам потрібно, щоб зробити скріншот, і оскільки він базується на JavaScript, ви також можете використовувати jQuery і маніпулювати вмістом сторінки, перш ніж знімати його на екрані!
Чекай! Є ще ...
Отже, сподіваюся, ви були вражені таким, як і я, коли виявив кожен із цих інструментів. Ця стаття просто подряпала поверхню того, що сьогодні можливо з JavaScript. Існує набагато більше подібних IDE, повністю написаних у JS Cloud9, або матеріалів із високим рівнем безпеки, зроблених із ними (Ваша кредитна картка була створена за допомогою JavaScript).
Сподіваюся, ви відчуєте натхнення, знайдете трохи часу та пограєтесь із деякими згаданими тут проектами, а ще краще - скористайтеся деякими з цих інструментів і побудуйте навколо них нові речі. Більшість із цього є з відкритим кодом, і там є розробники, які шукають вас, щоб допомогти їм покращити свою роботу, навіть якщо це лише за допомогою інструментів, виявлення помилок та повідомлення про них.
