Съдържание
- 01. Време е за терен
- 02. $ (‘светлина’). FadeIn ();
- 03. Ръцете ви са създадени за браузъра
- 04. 3D игри, контролирани с вашия геймпад
- 05. Стартиране на Flash на вашия iPad
- 06. Писане на приложения за вашия смартфон
- 07. Стартиране на Ruby и Python във вашия браузър
- 08. Писане на независими от OS програми за настолни компютри
- 09. Стартиране на уеб сървър
- 10. Уебкрапинг и създаване на скрийншот
- Изчакайте! Има още...
JavaScript е извървял дълъг път от раждането си през 1995 г. Със сигурност един труден път, пълен с неразбиране, злоупотреба и невежество. Но времената се промениха, тъй като през последните пет години JavaScript придобива все повече и повече внимание. С повече внимание, повече разработчици всъщност използват JavaScript, използвайки го за много различни цели и се наслаждават на красотата му. Класическа история „Грозно патенце“, ако питате мен.
В следващата статия ще открием 10 случая на използване на JavaScript, които са различни от обичайните за „в браузъра“.
01. Време е за терен
Спомняте ли си визията от 80-те години на видео комуникация, подобна на Facetime?
Отне само 20 години, преди това да се превърне в масово, поради почти навсякъде наличния широколентов интернет и интензивното използване на малко софтуер, наречен Skype.
С възможностите на Adobe's Flash и опита на Google да изгради социална мрежа, ние вече разполагаме с възможностите за видео комуникация в нашия браузър. Не би ли било страхотно да имате тези способности, без да използвате приставка на трета страна като Flash?
За щастие доставчиците на браузъри мислеха същото и внедриха API „getUserMedia“ в своя софтуер. Това беше първата стъпка за достъп до устройства като камери или микрофони директно от вашия браузър.
Използвайки Node.js като сървър в задната част на такова приложение, е удивително лесно да транспортирате видео сигнала по въздуха до един или повече клиенти. За нещастие, към момента на написването на това, само Chrome и Opera поддържат API, но други ще наваксат бързо.
По-чистият подход за двупосочна комуникация в момента е само за Chrome, наречен WebRTC. Поради WebRTC клиентите имат възможност да отварят равнопоставени комуникационни канали, директно свързвайки клиент с клиент.
За забавление вижте внедряването на Photo Booth на Sindre Sorhus, направено в 121 байта!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, 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.
Най-горещата и готина библиотека около блока за JS управлявано Arduino програмиране до момента е 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).
Няколко студенти от MIT славата работят върху решение за разрушаване на тази стена, наречено DepthJS,
приставка за браузър, която позволява използването на Kinect за Chrome и Safari, дори за сайтове, които не са оптимизирани за използване на Kinect под каквато и да е форма. Понастоящем DepthJS е в ранен етап на разработка, но определено си струва да се следи.
04. 3D игри, контролирани с вашия геймпад
Опитвали ли сте някога да играете игра с браузър, която не е Flash? Графичните възможности са невероятни, особено когато видите клонинги на игри като Quake.
Но когато играете тези неща, вие винаги сте обвързани с клавиатурата и (предимно) тромавата мишка. Това е основен недостатък, по-специално за екшън игрите, той наистина ги задържа от браузъра.
Не би ли било страхотно, ако просто можете да включите вашия Xbox контролер към вашия компютър и да започнете да играете любимата си игра в браузъра? Това вече не е бъдеща визия, поздравете API на Gamepad!
Ако имате геймпад около бюрото си, включете го веднага и се насладете на някои игри, които вече използват API на Gamepad. Програмирането на контролите за въвеждане също е питка, проверете този кодов фрагмент или дори по-добре, стартирайте го сами:
div id = "gamepads"> / div>
скрипт>
функция gamepadConnected (събитие) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Ако искате да научите повече за 3D възможностите на браузърите, разгледайте Three.js и Jens Arps с отворен код 3D симулатор на Ascent, изграден върху него. Марк Хамил внимавайте, може да се нуждаете от вас за още едно продължение на Wing Commander!
05. Стартиране на Flash на вашия iPad
Като любител на отворените стандарти и фен на Apple, трябва да призная, че наистина бих искал да благодаря на Apple, че не пусна Flash на iPad и iPod, това наистина започна движение за прегръщане на отворени технологии като HTML5, CSS3 и JavaScript.
Като служител на агенция трябва да кажа, че това е наистина лоша ситуация за нашите клиенти.
Повечето от тях трябва да платят два пъти за обикновена реклама или кампания, която стартират, за да има интерактивно съдържание, работещо в старите IE7 или IE8 чрез Flash и в съвременните браузъри, както и iDevices чрез HTML5.
Полифилирането на функциите на старите браузъри има своите граници, най-вече с име на производителност. И така, няма ли възможност за стартиране на Flash на тези Flashless 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) на всяка мобилна среда и излага изчистен JavaScript API за контрол на всички тях. Това ви позволява да поддържате една кодова база, която след това изграждате и разполагате на различни мобилни устройства.
Вижте ресурсите тук, за да разберете как да използвате Cordova за изграждане на мобилни приложения, които създавате веднъж и ще работят навсякъде.
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. Писане на независими от OS програми за настолни компютри
Преди говорихме за насочване към множество мобилни платформи с помощта на 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 е wunderkind по производителност, особено когато става въпрос за изправяне пред проблема с много паралелни връзки. Не само неговата производителност е взрив, наистина простият 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 Cloud Services!
10. Уебкрапинг и създаване на скрийншот
И така, не на последно място, нека да разгледаме проект, който аз лично обичам, защото ми позволи да провеждам своите QUnit тестове без глава в командния ред. PhantomJS е безглавен базиран на WebKit браузър с чист API, базиран на JavaScript (или CoffeScript).
Но тестването на вашия JavaScript и DOM не е единственият случай на използване за Phantom. Това, което наистина ме очарова, са възможностите му да изстъргва уебсайтове и да ви позволява да правите екранни снимки от него!
Да, правилно четете, с Phantom можете да извеждате уеб страници в различни графични формати и, разбира се, това е толкова лесно, колкото кражбата на сладки от бебе.
Нека да разгледаме скрипт, който прави точно това:
var страница = нова WebPage ();
page.open (’http://google.com’, функция (състояние) {
page.render (’google.png’);
phantom.exit ();
});
Това е всичко, от което се нуждаете, за да направите екранна снимка и тъй като е базирана на JavaScript, можете също да използвате jQuery и да манипулирате съдържанието на страницата, преди да я направите скрийншот!
Изчакайте! Има още...
Така че, надявам се, че сте толкова изумени, колкото и аз, когато открих всеки един от тези инструменти. Тази статия просто надраска повърхността на възможното с JavaScript днес. Има толкова много повече като IDE, изцяло написани в JS Cloud9 или неща с висока сигурност, направени с него (Вашата кредитна карта е направена с JavaScript).
Надявам се да се чувствате вдъхновени, да отделите малко време и да поиграете с някои от споменатите тук проекти или дори по-добре да вземете някои от тези инструменти и да изградите нови неща около тях. По-голямата част от това тук е с отворен код и там има разработчици, които ви търсят, за да им помогнете да подобрят работата си, дори ако това е само чрез използване на инструментите, откриване на грешки и докладване за тях.
