Задаволены
- 01. Надышоў час сустрэчы
- 02. $ ("святло"). FadeIn ();
- 03. Вашы рукі зроблены для аглядальніка
- 04. 3D-гульні, кіраваныя геймпадам
- 05. Запуск Flash на вашым iPad
- 06. Напісанне прыкладанняў для смартфона
- 07. Запуск Ruby і Python у вашым браўзэры
- 08. Напісанне незалежных ад настольных праграм АС
- 09. Запуск вэб-сервера
- 10. Сеткі і скрыншоты
- Пачакайце! Ёсць яшчэ ...
JavaScript прайшоў доўгі шлях з моманту свайго нараджэння ў 1995 г. Напэўна цяжкі шлях, поўны неразумення, няправільнага выкарыстання і недасведчанасці. Але часы змяніліся, бо апошнія пяць гадоў JavaScript набывае ўсё большую ўвагу. З большай увагай усё больш распрацоўшчыкаў на самай справе выкарыстоўваюць JavaScript, выкарыстоўваючы яго для мноства розных мэт і атрымліваючы асалоду ад яго прыгажосці. Класічная гісторыя "Гадкае качаня", калі вы спытаеце мяне.
У наступным артыкуле мы выявім 10 выпадкаў выкарыстання JavaScript, якія адрозніваюцца ад звычайных "у браўзэры", да якіх вы прывыклі.
01. Надышоў час сустрэчы
Вы памятаеце бачанне відэасувязі, падобнай на Facetime, у 80-я?
Прайшло ўсяго 20 гадоў, перш чым гэта стала галоўным дзякуючы амаль усюды даступнаму шырокапалоснаму Інтэрнэту і актыўнаму выкарыстанню невялікай колькасці праграмнага забеспячэння пад назвай Skype.
Дзякуючы магчымасцям Flash Adobe і спробе Google стварыць сацыяльную сетку, мы ўжо маем магчымасці відэасувязі ў нашым аглядальніку. Ці не было б крута мець гэтыя здольнасці, не выкарыстоўваючы незалежны убудова, напрыклад Flash?
На шчасце, пастаўшчыкі браўзэраў думалі тое самае і ўкаранілі ў сваё праграмнае забеспячэнне API "getUserMedia". Гэта быў першы крок для доступу да такіх прылад, як камеры ці мікрафоны, непасрэдна з вашага аглядальніка.
Выкарыстоўваючы Node.js у якасці сервера ў задняй частцы такога прыкладання, надзвычай проста пераносіць відэасігнал па паветры аднаму або некалькім кліентам. На жаль, на момант напісання гэтага артыкула API падтрымліваюць толькі Chrome і Opera, але іншыя хутка дагоняць.
Больш чысты падыход для двухбаковай сувязі - гэта адзіная рэч для Chrome, якая называецца WebRTC. З-за WebRTC кліентам дазволена адкрываць аднарангавыя каналы сувязі, непасрэдна звязваючы кліента з кліентам.
Дзеля весялосці азнаёмцеся з рэалізацыяй Photo Booth Сіндры Сорхус, зробленай у 121 байт!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’відэа’, successCallback, errorCallback);
функцыя successCallback (паток) {
video.src = паток;
}
функцыя errorCallback (памылка) {
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. Вашы рукі зроблены для аглядальніка
Будучыня Minority Report (той, дзе яны кіруюць камп'ютэрам рукамі, а не непрыгожымі машынамі) набліжаецца з кожным днём. Велізарным крокам у гэтым кірунку стала спроба кантролера Microsoft менш гуляць Kinect. Вы можаце падумаць, дзіўны геймплэй, але якое дачыненне гэта мае да JavaScript ?!
Пасля выпуску Kinect SDK ад Microsoft куча людзей перайшла мост выкарыстання браўзэраў для Kinect. Перш за ўсё хлопцы ChildNodes, якія стварылі поўную працуючую бібліятэку kinect.js, якая дазваляе выкарыстоўваць Kinect ад Microsoft у вашым браўзэры.
Я настойліва рэкамендую праверыць іх дэма-версіі і відэа, гэта выбух. Аднак адным з галоўных недахопаў бібліятэкі kinect.js з'яўляецца тое, што ў задняй частцы кліента павінна працаваць серверная праграма WebSocket (гэта на самай справе клей Kinect -> C # -> JS).
Некалькі студэнтаў славы Масачусецкага тэхналагічнага інстытута працуюць над рашэннем разбурэння гэтай сцяны, якое называецца DepthJS,
убудова для аглядальніка, якая дазваляе выкарыстоўваць Kinect для Chrome і Safari, нават для сайтаў, якія не аптымізаваны для выкарыстання на аснове Kinect у любой форме. У цяперашні час DepthJS знаходзіцца на ранняй стадыі распрацоўкі, але, безумоўна, варта сачыць за гэтым.
04. 3D-гульні, кіраваныя геймпадам
Вы калі-небудзь спрабавалі гуляць у браузерную гульню не ўспышкі ў наш час? Графічныя магчымасці дзіўныя, асабліва калі вы бачыце клоны гульняў, такія як Quake.
Але падчас гульні вы заўсёды прывязаныя да клавіятуры і (у асноўным) нязграбнай мышы. Гэта галоўны недахоп, у прыватнасці для экшн-гульняў, ён сапраўды стрымлівае іх ад браўзэра.
Ці не было б крута, калі б вы маглі проста падключыць кантролер Xbox да ПК і пачаць гуляць у любімую гульню ў браўзэры? Гэта ўжо не будучае бачанне, прывітанне з Gamepad API!
Калі ў вас ёсць геймпад за сталом, падключыце яго зараз і атрымлівайце асалоду ад некалькіх гульняў, якія ўжо выкарыстоўваюць API геймпада. Праграмаванне элементаў кіравання ўводам - гэта таксама кавалак торта, праверце гэты фрагмент кода ці нават лепш запусціце яго самастойна:
div id = "gamepads"> / div>
сцэнар>
функцыя gamepadConnected (падзея) {
var gamepads = document.getElementById ("геймпады"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Падлучаны геймпад (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, ілжыва);
/ сцэнар>
Калі вы хочаце даведацца больш пра 3D-магчымасці браўзэраў, азнаёмцеся з 3D-рухавіком Ascent з адкрытым зыходным кодам Three.js і Jens Arps, убудаваным над ім. Марк Хаміль, асцярожна, нам можа спатрэбіцца яшчэ адзін працяг камандзіра крыла!
05. Запуск Flash на вашым iPad
Як аматар адкрытых стандартаў і прыхільнік Apple, я павінен прызнаць, што я б вельмі хацеў падзякаваць Apple за тое, што яна не паставіла Flash на iPad і iPod, гэта сапраўды пачало рух за прыняцце адкрытых тэхналогій, такіх як HTML5, CSS3 і JavaScript.
Як супрацоўнік агенцтва, я павінен сказаць, што гэта сапраўды дрэнная сітуацыя для нашых кліентаў.
Большасці з іх прыходзіцца плаціць двойчы за простую рэкламу альбо кампанію, якую яны запускаюць, каб інтэрактыўны кантэнт працаваў у старым IE7 ці IE8 праз Flash і ў сучасных аглядальніках, а таксама iDevices праз HTML5.
Поліфілінг старых функцый браўзэраў мае свае межы, у асноўным з імем прадукцыйнасці. Дык хіба няма магчымасці запусціць Flash на гэтых Flashless iDevices?
Вядома, ёсць адзін, і, вядома, ён пабудаваны ў JavaScript.
Частка гісторыі: У 2010 годзе Тобіас Шнайдэр выпусціў невялікую бібліятэку пад назвай Gordon
што дазволіла 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 для кіравання ўсімі. Гэта дазваляе вам падтрымліваць адзіную базу кода, якую вы потым ствараеце і разгортваеце на розных мабільных прыладах.
Праверце рэсурсы тут, каб даведацца, як выкарыстоўваць Cordova для стварэння мабільных прыкладанняў, якія вы ствараеце адзін раз і будуць працаваць паўсюдна.
07. Запуск Ruby і Python у вашым браўзэры
У Mozilla, кампаніі, якая стаіць за вядомым браўзэрам Firefox, працуе шмат дзівакоў, гэта дакладна. Адзін з іх - Алон Закай, інжынер з даследчай групы Mozilla, які стварыў дзіўны інструмент пад назвай Emscripten.
Emscripten дазваляе перанесці біт-код LLVM - які можа быць створаны з бібліятэк на аснове C / C ++, у JavaScript. Ён робіць гэта шляхам кампіляцыі бібліятэк у бітавы код, а затым, узяўшы гэты бітавы код і пераўтварыўшы яго ў JavaScript. Акуратна, але што я магу з гэтым зрабіць, вы можаце спытаць сябе?
У мяне ёсць сустрэчнае пытанне да вас: вы калі-небудзь чулі фразу "Карыстанне CoffeeScript і прататыпам - бліжэйшае ад запуску Ruby ў браўзэры"? Не? Не хвалюйцеся, бо гэта ўжо не так.
З Emscripten вы можаце проста ўзяць крыніцы Ruby, пераўтварыць іх у JavaScript і voilà, запусціць сапраўдны Ruby ў вашым браўзэры! Але гэта не тычыцца толькі Ruby, напрыклад, Python таксама быў апісаны.
Або праверце дэшыфратар h.264 у браўзэры Broadway. Гэта на самай справе эскрыптаваная бібліятэка C ++!
Перайдзіце на 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" са свету Node, гэта не толькі надрукаваны "Hello World" на прыкладзе экрана, гэта і вэб-сервер http!
var http = require (’http’);
http.createServer (функцыя (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ('Прывітанне, свет 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).
Я спадзяюся, што вы адчуеце натхненне, зоймеце трохі часу і пагуляеце з некаторымі згаданымі тут праектамі, ці нават лепш узяць некаторыя з гэтых інструментаў і стварыць вакол іх новыя рэчы. Большасць з гэтага тут з адкрытым зыходным кодам, і ёсць распрацоўшчыкі, якія шукаюць вас, каб дапамагчы ім палепшыць працу, нават калі гэта толькі з дапамогай інструментаў, выяўлення памылак і паведамлення пра іх.
