10 vecí, o ktorých ste nevedeli, že dokáže JavaScript
JavaScript prešiel od svojho zrodu v roku 1995 dlhou cestou. Určite je to tvrdá cesta, plná nedorozumení, zneužitia a ignorácie. Časy sa však zmenili, od posledných piatich rokov si JavaScript získava čoraz viac pozornosti. S väčšou pozornosťou skutočne viac vývojárov používa JavaScript, ktorý ho používa na rôzne účely a teší sa z jeho krásy. Klasický príbeh „Škaredé káčatko“, ak sa ma pýtate.
V nasledujúcom článku objavíme 10 prípadov použitia JavaScriptu, ktoré sa líšia od bežných prípadov v prehliadači, na ktoré ste zvyknutí.
01. Je čas na hangout
Pamätáte si na víziu 80. rokov video komunikácie podobnej Facetime?
Trvalo iba 20 rokov, kým sa to stalo hlavným prúdom vďaka takmer všade dostupnému širokopásmovému internetu a veľkému používaniu malého softvéru s názvom Skype.
Vďaka možnostiam programu Adobe Flash a pokusu spoločnosti Google o vybudovanie sociálnej siete už v našom prehliadači máme možnosti video komunikácie. Nebolo by super mať tieto schopnosti bez použitia doplnku tretej strany, ako je Flash?
Predajcovia prehľadávačov to našťastie mysleli rovnako a do svojho softvéru implementovali rozhranie API „getUserMedia“. Toto bol prvý krok umožňujúci prístup k zariadeniam, ako sú fotoaparáty alebo mikrofóny, priamo z vášho prehliadača.
Pri použití servera Node.js ako servera v zadnej časti takejto aplikácie je neuveriteľne ľahké prenášať videosignál vzduchom k jednému alebo viacerým klientom. V čase písania tohto článku bohužiaľ API nepodporujú iba Chrome a Opera, ale ostatní ich dobehnú rýchlo.
Čistší prístup k obojsmernej komunikácii je v súčasnosti iba Chrome WebRTC . Z dôvodu WebRTC môžu klienti otvárať komunikačné kanály peer to peer a priamo tak spájať klienta s klientom.
Kvôli zábave skontrolujte Sindre Sorhus „ Foto búdka implementácia vykonaná v 121 bajtoch!
var video = document.getElementsByTagName ('video') [0],
navigator.getUserMedia ('video', successCallback, errorCallback);
funkcia successCallback (stream) {
video.src = stream;
}
function errorCallback (error) {
console.log (chyba);
}
02. $ ('light'). FadeIn ();
The Arduino platforma mikrokontroléra je príkladom pre prípad použitia JavaScriptu „out of the box“. Pre tých z vás, ktorí nepoznajú platformu Arduino, je tu veľmi slávny citát z ich webových stránok:
„Arduino je prototypová platforma pre elektroniku typu open-source založená na flexibilnom a ľahko použiteľnom hardvéri a softvéri. Je určený pre umelcov, dizajnérov, fandov a všetkým, ktorí majú záujem o vytváranie interaktívnych objektov alebo prostredí. “
Samotné Arduino podporuje iba kód napísaný v jazyku C, čo ešte stále nie je o čom. Vďaka niekoľkým riadkom C (okrem toho, že túto prácu za vás vykonali iní) môže Arduino prijímať príkazy prostredníctvom svojho USB portu prostredníctvom protokolu sériového portu.
Ako však môžete získať prístup k sériovému portu pomocou kódu JavaScript? Zjavne nie z prehliadača.
Node.js na záchranu!
Vďaka úsiliu obhajcu komunity Chris Williams , máme Knižnica sériového portu uzla , kde môžeme odosielať údaje cez starý protokol SP. Toto bol počiatočný prielom, na základe knižnice, ktorú ľudia prišli s abstraktnejším prístupom k možnostiam Arduina. Napríklad uzol-arduino a duino knižnice.
Najteplejšia a najchladnejšia knižnica v okolí bloku pre programovanie Arduina na základe JS je teraz jonny-päť . Odhlásiť sa Blog Bocoup pre nejaké sračky, ktoré urobili s platformou Arduino a množstvom doplnkov. Tiež Video JSConf od Nicolai Onken a Jörn Zaefferer môže vám točiť to, čo je dnes možné, s malým kódom.
03. Vaše ruky sú stvorené pre prehliadač
Budúca vízia Menšej správy (tá, v ktorej ovládajú počítače rukami, nie škaredými autami) sa každým dňom približuje. Obrovským krokom v tomto smere bol pokus spoločnosti Microsoft o menej náročné hranie, Kinect. Úžasná hrateľnosť, ktorú by ste si mohli myslieť, ale čo to má spoločné s jazykom JavaScript ?!
S Microsoft Kinect SDK vydaní, veľa ľudí prešlo cez most v použití prehliadača Kinect. Najskôr zo všetkých ChildNodes ktorí vytvorili úplnú funkčnú knižnicu kinect.js, ktorá umožňuje vo vašom prehliadači používať Kinect od spoločnosti Microsoft.
Vrelo odporúčam pozrieť si ich ukážky a videá, je to výbuch. Jednou z hlavných nevýhod knižnice kinect.js však je, že v zadnej časti klienta musí byť spustený program servera WebSocket (to je vlastne lepidlo Kinect -> C # -> JS).
Niekoľko študentov slávy MIT pracuje na riešení zbúrania tejto steny, tzv HĺbkaJS ,
doplnok v prehliadači, ktorý umožňuje použitie Kinectu pre Chrome a Safari, a to aj pre weby, ktoré nie sú optimalizované na použitie založené na Kinecte v akejkoľvek podobe. DepthJS je momentálne v počiatočnom štádiu vývoja, ale určite stojí za to sledovať ho.
04. 3D hry ovládané gamepadom
Skúšali ste si v dnešnej dobe zahrať hru bez prehliadača Flash? Grafické možnosti sú úžasné, zvlášť keď vidíte podobné herné klony Zemetrasenie .
Ale pri hraní týchto vecí ste vždy pripútaní k svojej klávesnici a (väčšinou) neohrabanej myši. To je hlavná nevýhoda, najmä pri akčných hrách, skutočne ich drží späť od prehľadávača.
Nebolo by v pohode, keby ste mohli jednoducho pripojiť ovládač Xbox k počítaču a začať hrať obľúbenú hru v prehliadači? Toto už nie je vízia do budúcnosti, pozdravte Gamepad API !
Ak máte okolo stola gamepad, pripojte ho hneď teraz a užite si niektoré hry, ktoré už používajú rozhranie Gamepad API. Programovanie vstupných ovládacích prvkov je tiež hračkou, pozrite si tento útržok kódu alebo ešte lepšie, spustite si ho sami:
funkcia gamepadConnected (udalosť) {
var gamepads = document.getElementById ('gamepady'),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = 'Gamepad pripojený (id =' + gamepadId + ')';
}
window.addEventListener ('MozGamepadConnected', gamepadConnected, false);
Ak by ste sa chceli dozvedieť viac o 3D možnostiach prehľadávačov, vyskúšajte Three.js a J nás Arps 'otvorený zdrojový 3D simulátor Výstup postavená na jej vrchole. Mark Hammil pozor, možno vás budeme potrebovať na ďalšie pokračovanie Wing Commander!
05. Spustenie programu Flash na vašom iPade
Ako milovník otvorených štandardov a fanúšik spoločnosti Apple musím priznať, že by som sa skutočne chcel poďakovať spoločnosti Apple za to, že nepoužila Flash na iPad a iPod, čo skutočne začalo s pohybom okolo otvorených technológií ako HTML5, CSS3 a JavaScript.
Ako agentúrny zamestnanec musím povedať, že je to pre našich zákazníkov skutočne zlá situácia.
Väčšina z nich musí zaplatiť dvakrát za jednoduchú reklamu alebo kampaň, ktorú spúšťajú, aby mohli interaktívny obsah bežať v starom IE7 alebo IE8 cez Flash a v moderných prehliadačoch, ako aj v zariadeniach iDevices cez HTML5.
Polyfilmovanie funkcií starých prehliadačov má svoje hranice, väčšinou pomenované ako výkon. Nie je teda na týchto zariadeniach Flashless iDevices možnosť spustenia programu Flash?
Samozrejme, že existuje jeden a samozrejme je zabudovaný v JavaScripte.
Kus histórie: V roku 2010 Tobias Schneider vydala malú knižnicu s názvom Gordon
čo umožňovalo spustenie súborov SWF priamo v prehliadači. Toto fungovalo dosť dobre pre malé súbory vo formáte Flash, ako sú reklamy, ktoré využívali iba funkcie do verzie Flash 2, ale funkcie vyššej úrovne neboli vôbec zahrnuté.
Keď sa Tobias pripojil k spoločnosti ueberJS UXEBU , prišli s novým nápadom.
A tak, Bikeshed narodil sa. Samotný Bikeshed je akýsi rámec animácie JavaScriptu, ale je to aj JavaScript do Flash pre všetko, čo chcete, aby bol kompilátor (je založený na adaptéri, takže môžete písať adaptéry na čokoľvek, čo chcete, hoci štandardné správanie je kompilácia Flash do JavaScriptu) . Je kompatibilný s Flash 10 a ActionScript 3. Pozrite sa na jeho webovú stránku a okrem kompilátora sa dozviete viac o jeho mnohých ďalších funkciách.
06. Písanie aplikácií pre váš smartphone
Písanie natívnych aplikácií pre prostredie mobilných telefónov je kamenistá cesta. Začína sa to rozhodnutím, ktorú platformu chcete podporovať. Ak by vaša aplikácia bežala na zariadeniach iPhone a iPad, mobilných zariadeniach so systémom Android, Windows Mobile, zariadeniach Blackberry, platformách založených na webOS ... atď.
Každá z týchto platforiem má svoje vlastné API a väčšinou používa rôzne programovacie jazyky.
Ak ste prežili vojny s prehliadačmi, poviem vám, že je to oveľa ťažší boj. Je takmer nemožné, aby vývojár vytvoril aplikáciu pre všetky tieto platformy v čase a rozpočte.
Čo teda robiť? Najať ďalších vývojárov? Účtovať viac za aplikácie? Alebo nájdite lepší prístup, aby ste sa ubezpečili, že vaša kódová základňa funguje na každom zariadení? Ako väčšina z vás by som uprednostnila posledný prístup.
V čom by však tieto aplikácie mali byť zabudované? Čo majú všetky tieto platformy spoločné? Možno poznáte odpoveď, je to webový prehliadač, a teda aj engine JavaScriptu.
To je myšlienka v pozadí Apache Cordova , známejšie pod svojim bývalým názvom PhoneGap.
Cordova je rámec JavaScriptu, ktorý abstrahuje API každého mobilného prostredia a poskytuje úhľadné JavaScript API, ktoré ich ovláda. To vám umožňuje udržiavať jednu kódovú základňu, ktorú potom zostavujete a nasadzujete na rôznych mobilných zariadeniach.
Skontrolujte zdroje tu zistiť, ako pomocou Cordovy vytvoriť mobilné aplikácie nakopané zadkom, ktoré vytvoríte raz a budú bežať všade.
07. Vo vašom prehliadači je spustený program Ruby a Python
Spoločnosť Mozilla, ktorá stojí za slávnym prehliadačom Firefox, zamestnáva veľa mágov, to je isté. Jeden z nich je Alon Zakai inžinier z Mozilla Research Team, ktorý postavil podivný nástroj s názvom Zaregistrujte sa .
Emscripten vám umožní prevziať bitový kód LLVM - ktorý je možné vygenerovať z knižníc založených na C / C ++, do JavaScriptu. Robí to tak, že kompiluje knižnice do bitového kódu a potom tento bitový kód vezme a transformuje do JavaScriptu. Úhľadne, ale čo s tým môžem vlastne urobiť, môžete si položiť otázku?
Mám pre vás protiotázku: už ste niekedy počuli frázu „Používanie CoffeeScript a prototypov je najbližšie k spusteniu Ruby v prehliadači“? Nie? Nebojte sa, pretože to už nie je pravda.
S Emscripten môžete jednoducho vziať Ruby zdroje, transformujte ich do jazyka JavaScript a voilà, nechajte vo svojom prehliadači bežať skutočnú Ruby! To sa však netýka iba Ruby, Python napríklad bol tiež vypísaný.
Alebo si pozrite dekodér v prehliadači h.264 Broadway . To je v skutočnosti emscriptovaná knižnica C ++!
Ísť do repl.it vo vašom prehliadači uvidíte spustených niekoľko programovacích jazykov (vrátane Ruby a Python)!
08. Písanie nezávislých desktopových programov pre OS
O zacielení na viac mobilných platforiem s pomocou Apache Cordova sme hovorili už predtým. Nie je prekvapením, že JavaScript nie je možné použiť iba na zacielenie na mobilné platformy, ale aj starý priateľ so stolným počítačom.
Prvé riešenia prišli od chalanov z Appcelerator s balíkom Titanium Desktop Suite a od spoločnosti Adobe, ktorá sa bežne používa Vzduch plošina.
Ale ako milovníci otvoreného zdroja, ktorým sme všetci, hľadáme otvorenejšiu a na Node.js založenú technológiu. Zoznámte sa app.js ! app.js je otvorená webová technológia a tvorca desktopových programov založený na Node.js, ktorý nám umožňuje písať skutočné desktopové programy s prístupom k súborovému systému, ovládacími prvkami okna a ďalšími. Môžeme sa spoľahnúť na stabilné multiplatformové rozhrania API spoločnosti Node a vytvoriť naše softvérové používateľské rozhranie pomocou HTML a CSS. Rovnako ako najobľúbenejšie novinky v tomto zozname tu.
app.js je veľmi mladý projekt, a preto teraz podporuje iba Windows a Linux, ale podľa Windows zoznam adries , Podpora pre Mac je na ceste.
09. Spustenie webového servera
V dnešnej dobe nikoho nešokujete, keď im hovoríte, že vaše webové stránky obsluhuje webový server založený na JavaScripte. Ak si spomeniete pred dvoma alebo tromi rokmi a povedali ste vývojárom webu to isté, pravdepodobne by sa vám vysmiali alebo ešte horšie.
Ale s neuveriteľným úspechom Node.js toto je odteraz našťastie ďaleko. Nielen, že ľudí už neprekvapuje, vďaka svojej asynchrónnej povahe je Node.js výkonným zázrakom, najmä pokiaľ ide o problém mnohých paralelných spojení. Nielen jeho výkon je blast, skutočne jednoduché API láka aj veľa vývojárov. Pozrime sa na príklad „Hello World“ zo sveta uzlov, nejde len o tlač „Hello World“ na príklade obrazovky, ale aj o webový server http!
var http = require ('http');
http.createServer (funkcia (požiadavka, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hello World n');
}). počúvať (1337, '127.0.0.1');
Ak vás táto jednoduchosť neomrzí, tak vám tiež nemôžem pomôcť.
Jednou z najlepších častí popularity uzlov (alebo humbuk) je to, že ich veľké spoločnosti ako Microsoft skutočne podporujú, tj. Azure Cloud Services !
10. Tvorba webových stránok a snímanie obrazovky
V neposlednom rade sa teda poďme pozrieť na projekt, ktorý osobne milujem, pretože mi umožňuje bez problémov spustiť moje testy QUnit na príkazovom riadku. PhantomJS je bezhlavý prehliadač založený na WebKit s prehľadným API založeným na JavaScripte (alebo CoffeScript).
Testovanie vášho JavaScriptu a DOM však nie je jediným prípadom použitia pre Phantom. Čo ma skutočne fascinuje, sú jeho schopnosti škrabať webové stránky a umožniť vám robiť ich snímky obrazovky!
Áno, čítate správne, s Phantomom môžete vytvárať webové stránky v rôznych grafických formátoch a je to samozrejme také ľahké ako ukradnutie sladkostí dieťaťu.
Pozrime sa na skript, ktorý to presne robí:
var page = nová webová stránka ();
page.open ('http://google.com', funkcia (stav) {
page.render ('google.png');
phantom.exit ();
});
To je všetko, čo potrebujete na vytvorenie snímky obrazovky, a pretože je založená na JavaScripte, môžete tiež použiť jQuery a pred vytvorením snímky obrazovky manipulovať s obsahom stránky!
Počkaj! Je toho viac ...
Dúfam teda, že ste rovnako ohromení ako ja, keď som objavil všetky tieto nástroje. Tento článok iba poškriabal povrch toho, čo je v dnešnej dobe možné pomocou JavaScriptu. IDE je oveľa viac napísaných úplne v JS Oblak 9 alebo veci s vysokou bezpečnosťou ( Vaša kreditná karta bola vyrobená pomocou kódu JavaScript) .
Dúfam, že sa budete cítiť inšpirovaní, venujete si čas a pohráte sa s niektorými z tu spomenutých projektov, alebo ešte lepšie, využite niektoré z týchto nástrojov a vytvorte okolo nich nové veci. Väčšina z nich je tu otvorený zdroj a sú tu vývojári, ktorí hľadajú, aby ste im pomohli vylepšiť ich prácu, aj keď je to len pomocou nástrojov, zisťovaním chýb a hlásením.
