Conţinut
- 01. Este timpul pentru un hangout
- 02. $ (‘light’). FadeIn ();
- 03. Mâinile tale sunt făcute pentru browser
- 04. Jocuri 3D controlate cu gamepad-ul tău
- 05. Rularea Flash pe iPad
- 06. Scrierea aplicațiilor pentru smartphone-ul dvs.
- 07. Rularea Ruby și Python în browser
- 08. Scrierea de programe desktop independente de SO
- 09. Rularea unui server web
- 10. Webscraping și screenshotting
- Aștepta! Mai este...
JavaScript a parcurs un drum lung de la nașterea sa în 1995. Un drum greu sigur, plin de neînțelegeri, utilizare greșită și ignoranță. Dar vremurile s-au schimbat, de la ultimii cinci ani JavaScript câștigând din ce în ce mai multă atenție. Cu mai multă atenție, mai mulți dezvoltatori folosesc de fapt JavaScript, îl folosesc în multe scopuri diferite și se bucură de frumusețea sa. Povestea clasică „Rățușa urâtă”, dacă mă întrebați.
În articolul următor, vom descoperi 10 cazuri de utilizare pentru JavaScript care sunt diferite de cele obișnuite „în browser”, cu care sunteți obișnuiți.
01. Este timpul pentru un hangout
Vă amintiți viziunea anilor 80 a comunicării video de tip Facetime?
A trecut doar 20 de ani înainte ca acest lucru să devină obișnuit din cauza internetului de bandă largă disponibil aproape peste tot și a utilizării grele a unui mic software numit Skype.
Având capacitățile Adobe Flash și încercarea Google de a construi o rețea socială, avem deja capacitățile de comunicare video în browserul nostru. Nu ar fi minunat să ai acele abilități fără să folosești un plug-in terță parte, cum ar fi Flash?
Din fericire, furnizorii de browsere au gândit la fel și au implementat API-ul „getUserMedia” în software-ul lor. Acesta a fost un prim pas pentru a accesa dispozitive precum camere sau microfoane direct din browser.
Folosind Node.js ca server în spatele unei astfel de aplicații, este uimitor de ușor să transportați semnalul video prin aer către unul sau mai mulți clienți. Din fericire, până la scrierea acestui lucru, doar Chrome și Opera acceptă API-ul, dar alții vor ajunge din urmă rapid.
Abordarea mai curată pentru o comunicare bidirecțională este un singur lucru Chrome în acest moment, numit WebRTC. Datorită WebRTC, clienții sunt abilitați să deschidă canale de comunicare peer to peer, conectând direct clientul cu clientul.
Pentru a vă distra, verificați implementarea Photo Booth a lui Sindre Sorhus realizată în 121 de octeți!
var video = document.getElementsByTagName („video”) [0],
navigator.getUserMedia („video”, successCallback, errorCallback);
funcție successCallback (flux) {
video.src = flux;
}
function errorCallback (eroare) {
console.log (eroare);
}
02. $ (‘light’). FadeIn ();
Platforma de microcontroler Arduino este un exemplu de gradul A pentru un caz de utilizare JavaScript „out of the box”. Pentru cei dintre voi, care nu sunt familiarizați cu platforma Arduino, iată un citat super celebru de pe site-ul său:
"Arduino este o platformă de prototipare electronică open-source bazată pe hardware și software flexibil, ușor de utilizat. Este destinat artiștilor, designerilor, pasionaților și oricui este interesat să creeze obiecte sau medii interactive."
Arduino în sine acceptă doar codul scris în C, care încă nu este mare lucru. Cu câteva linii de C (în afară de faptul că alții au făcut acest lucru pentru dvs.), Arduino poate primi comenzi prin portul USB prin protocolul portului serial.
Dar cum puteți accesa portul serial prin JavaScript? În mod clar, nu din browser.
Node.js la salvare!
Datorită eforturilor avocatului comunității Chris Williams, avem o bibliotecă de port serial Node, unde putem trimite date prin vechiul protocol SP. Aceasta a fost descoperirea inițială, pe baza bibliotecii, alți oameni au venit cu o abordare mai abstractă a capacităților Arduino. De exemplu, bibliotecile nod-arduino și duino.
Cea mai tare și mai tare bibliotecă din jurul blocului pentru programarea Arduino bazată pe JS este acum jonny-five. Consultați blogul lui Bocoup pentru a găsi niște rahaturi pe care le-au făcut cu platforma Arduino și o mulțime de pluginuri. De asemenea, videoclipul JSConf de la Nicolai Onken și Jörn Zaefferer vă poate oferi o răsucire a ceea ce este posibil astăzi, cu puțin cod.
03. Mâinile tale sunt făcute pentru browser
Viziunea viitoare a Minority Report (cea în care controlează computerele cu mâinile lor, nu mașinile urâte) se apropie în fiecare zi. Un pas imens în această direcție a fost încercarea de joc a controlerului Microsoft, Kinect. Un joc uimitor ai putea crede, dar ce legătură are asta cu JavaScript ?!
Odată cu lansarea Microsoft Kinect SDK, o grămadă de oameni au trecut podul în utilizarea browserului pentru Kinect. În primul rând, băieții ChildNodes care au construit o bibliotecă completă de lucru kinect.js, care permite utilizarea Kinect a Microsoft în browserul dvs.
Vă recomand cu drag să verificați demonstrațiile și videoclipurile lor, este o explozie. Un dezavantaj major al bibliotecii kinect.js este, totuși, că trebuie să existe un program de server WebSocket care rulează în spatele clientului (acesta este de fapt lipiciul Kinect -> C # -> JS).
Câțiva studenți de renume MIT lucrează la o soluție pentru dărâmarea acestui zid, numită DepthJS,
un plugin în browser care permite utilizarea Kinect pentru Chrome și Safari, chiar și pentru site-urile care nu sunt optimizate pentru o utilizare bazată pe Kinect sub nicio formă. În prezent, DepthJS se află într-o etapă de dezvoltare timpurie, dar cu siguranță merită urmărit.
04. Jocuri 3D controlate cu gamepad-ul tău
Ați încercat vreodată să jucați un joc de browser non-Flash în zilele noastre? Capacitățile grafice sunt uimitoare, mai ales când vedeți clone de jocuri precum Quake.
Dar când jucați aceste lucruri, sunteți întotdeauna legat de tastatură și de mouse-ul (în mare parte) obraznic. Acesta este un dezavantaj major, în special pentru jocurile de acțiune, chiar le reține de la browser.
Nu ar fi grozav dacă ai putea să conectezi controlerul Xbox la computer și să începi să joci jocul tău preferat de browser? Aceasta nu mai este o viziune de viitor, salutați API-ul Gamepad!
Dacă aveți un gamepad în jurul biroului, conectați-l chiar acum și bucurați-vă de câteva jocuri, care deja folosesc API-ul Gamepad. Programarea comenzilor de intrare este, de asemenea, o bucată de tort, verificați acest fragment de cod sau chiar mai bine, rulați-l singur:
div id = "gamepads"> / div>
script>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad conectat (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Dacă doriți să aflați mai multe despre capacitățile 3D ale browserelor, consultați Three.js și motorul simulator 3D open source al lui Jens Arps, Ascension, construit deasupra acestuia. Mark Hammil ai grijă, s-ar putea să avem nevoie de tine pentru o altă continuare a Wing Commander!
05. Rularea Flash pe iPad
În calitate de iubitor al standardelor deschise și fanboy al Apple, trebuie să recunosc că aș vrea să mulțumesc Apple pentru că nu a pus Flash pe iPad și iPod, aceasta a început cu adevărat o mișcare de a adopta tehnologii deschise precum HTML5, CSS3 și JavaScript.
În calitate de angajat al agenției, trebuie să spun că este o situație foarte proastă pentru clienții noștri.
Majoritatea dintre ei trebuie să plătească de două ori pentru un anunț sau o campanie simplă pe care o lansează pentru a avea conținut interactiv difuzat în vechile IE7 sau IE8 prin Flash și pe browserele moderne, precum și pe iDevices prin HTML5.
Completarea funcțiilor vechilor browsere are marginile sale, în special performanță. Deci, nu există capacitatea de a rula Flash pe acele iDevices Flashless?
Desigur, există unul și, desigur, este încorporat în JavaScript.
O bucată de istorie: în 2010 Tobias Schneider a lansat o mică bibliotecă numită Gordon
ceea ce a permis fișierelor SWF să ruleze direct în browser. Acest lucru a funcționat destul de bine pentru fișierele Flash mici, cum ar fi anunțurile care foloseau doar funcționalități până la versiunea Flash 2, dar funcționalitatea de nivel superior nu a fost deloc inclusă.
Când Tobias s-a alăturat companiei ueberJS UXEBU, au venit cu o idee nouă.
Și așa s-a născut Bikeshed. Bikeshed în sine este un fel de cadru de animație JavaScript, dar este, de asemenea, un JavaScript pentru Flash pentru tot ceea ce doriți să fie compilator (este bazat pe adaptor, astfel încât să puteți scrie adaptoare pentru orice doriți, deși comportamentul standard este compilarea Flash în JavaScript) . Este compatibil cu Flash 10 și ActionScript 3. Aruncați o privire la pagina sa web pentru a afla mai multe despre numeroasele caracteristici pe lângă compilator.
06. Scrierea aplicațiilor pentru smartphone-ul dvs.
Scrierea aplicațiilor native pentru mediile de telefonie mobilă este un drum stâncos. Începe cu decizia ce platformă doriți să susțineți. În cazul în care aplicația dvs. rulează pe un iPhone și iPad, un dispozitiv mobil cu Android, Windows Mobile, dispozitive Blackberry, plăti bazate pe webOS și așa mai departe.
Fiecare dintre aceste platforme are propriile API-uri și utilizează în principal limbaje de programare diferite.
Dacă ați supraviețuit războaielor browserelor, permiteți-mi să vă spun că este o luptă mult mai dificilă pentru a intra. Este aproape imposibil pentru un dezvoltator să construiască o aplicație pentru toate aceste platforme în timp și buget.
Deci ce să fac? Angajați mai mulți dezvoltatori? Încărcați mai mult pentru aplicații? Sau găsiți o abordare mai bună pentru a vă asigura că baza de coduri rulează pe fiecare dispozitiv? Ca cel mai mult dintre voi, aș prefera ultima abordare.
Dar în ce ar trebui construite aceste aplicații? Ce au în comun toate aceste platforme? S-ar putea să știți răspunsul, este un browser web și, prin urmare, un motor JavaScript.
Aceasta este ideea din spatele Apache Cordova, mai bine cunoscută sub fostul său nume PhoneGap.
Cordova este un cadru JavaScript care abstractizează API-urile fiecărui mediu mobil și expune un API JavaScript corect pentru a le controla pe toate. Acest lucru vă permite să mențineți o singură bază de cod, pe care apoi o construiți și o implementați pe diferite dispozitive mobile.
Consultați resursele de aici pentru a afla cum să utilizați Cordova pentru a crea aplicații mobile kick ass pe care le construiți o singură dată și care vor rula peste tot.
07. Rularea Ruby și Python în browser
Mozilla, compania din spatele celebrului browser Firefox, folosește o mulțime de geeks, asta este sigur. Unul dintre ei este Alon Zakai, inginer la echipa de cercetare Mozilla, care a construit un instrument ciudat numit Emscripten.
Emscripten vă permite să luați codul de biți LLVM - care poate fi generat din bibliotecile bazate pe C / C ++, în JavaScript. Face acest lucru prin compilarea bibliotecilor în cod de biți și apoi, luând acel cod de biți și transformându-l în JavaScript. Frumos, dar ce pot face de fapt cu asta, s-ar putea să te întrebi?
Am o contraîntrebare pentru dvs.: ați auzit vreodată expresia „Folosirea CoffeeScript și Prototype este cel mai aproape de a rula Ruby în browser”? Nu? Nu vă faceți griji, pentru că acest lucru nu mai este adevărat.
Cu Emscripten puteți pur și simplu să luați sursele Ruby, să le transformați în JavaScript și voilà, să aveți adevăratul Ruby rulat în browserul dvs.! Dar acest lucru nu se aplică doar Ruby, Python, de exemplu, a fost și el inscris.
Sau verificați decodorul din browser h.264 Broadway. Aceasta este de fapt o bibliotecă C ++ inscripționată!
Accesați repl.it pentru a vedea câteva limbaje de programare (inclusiv Ruby și Python) care rulează în browserul dvs.!
08. Scrierea de programe desktop independente de SO
Am vorbit despre direcționarea mai multor platforme mobile cu ajutorul Apache Cordova înainte. În mod surprinzător, JavaScript nu poate fi folosit doar pentru a viza platformele mobile, ci și vechiul nostru prieten, computerul desktop poate fi abordat.
Primele soluții au venit de la băieții Appcelerator cu Titanium Desktop Suite și de la Adobe, platforma Air folosită pe scară largă.
Însă, în calitate de iubitori ai sursei deschise, cu toții suntem, căutăm o tehnologie mai deschisă și bazată pe Node.js. Faceți cunoștință cu app.js! app.js este un constructor de programe desktop bazat pe tehnologia web deschisă și bazat pe Node.js, care ne permite să scriem programe desktop reale cu acces la sistemul de fișiere, controale de fereastră și multe altele. Ne putem baza pe API-urile stabile cu platforme transversale ale Node și să construim interfața noastră de utilizare a software-ului cu HTML și CSS. La fel ca cele mai noi lucruri noi de pe această listă aici.
app.js este un proiect destul de tânăr și, prin urmare, acceptă doar Windows și Linux până acum, dar conform listei de corespondență, suportul Mac este pe cale.
09. Rularea unui server web
În zilele noastre, nu șochezi pe nimeni când le spui că site-ul tău web este servit de un server web bazat pe JavaScript. Dacă vă gândiți în urmă cu doi sau trei ani în urmă și le-ați spus dezvoltatorilor web exact la fel, probabil că ar fi râs de voi sau chiar mai rău.
Dar, cu succesul incredibil al Node.js, acest lucru este din fericire departe de acum. Nu numai că nu-i mai surprinde pe oameni, datorită naturii sale asincrone, Node.js este un tip de performanță, mai ales atunci când vine vorba să se confrunte cu o mulțime de conexiuni paralele. Nu numai că performanțele sale sunt superbe, API-ul cu adevărat simplu atrage și mulți dezvoltatori. Să vedem exemplul „Hello World” din lumea Node, nu este doar un exemplu „Hello World” pe ecran, este un server web http!
var http = require ('http');
http.createServer (funcție (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end („Hello World n”);
}). ascultați (1337, '127.0.0.1');
Dacă nu sunteți uimiți de această simplitate, ei bine, nici eu nu vă pot ajuta.
Una dintre cele mai bune părți ale popularității nodului (sau hype) este că marile companii precum Microsoft îl susțin, de exemplu, în serviciile lor Azure Cloud!
10. Webscraping și screenshotting
Așadar, nu în ultimul rând, să aruncăm o privire la un proiect care îmi place personal pentru că mi-a permis să-mi fac testele QUnit fără cap pe linia de comandă. PhantomJS este un browser bazat pe WebKit cu un API bazat pe JavaScript (sau CoffeScript).
Dar testarea JavaScript și DOM nu este singurul caz de utilizare pentru Phantom. Ceea ce mă fascinează cu adevărat sunt capacitățile sale de a răzuie site-urile web și de a vă permite să faceți capturi de ecran ale acestuia!
Da, citești bine, cu Phantom poți reda pagini web în diferite formate grafice și, desigur, este la fel de ușor ca să furi dulciuri de la un bebeluș.
Să aruncăm o privire la un script care face exact acest lucru:
var page = newPage Web ();
page.open („http://google.com”, funcție (stare) {
page.render („google.png”);
phantom.exit ();
});
Asta este tot ce aveți nevoie pentru a face o captură de ecran și, deoarece este bazat pe JavaScript, puteți utiliza jQuery și puteți manipula conținutul paginii înainte de a o captura!
Aștepta! Mai este...
Așadar, sper să fiți la fel de uimiți ca mine, când am descoperit fiecare dintre aceste instrumente. Acest articol tocmai a zgâriat suprafața a ceea ce este posibil cu JavaScript în zilele noastre. Există multe altele precum IDE-uri scrise în întregime în JS Cloud9 sau lucruri de înaltă securitate realizate cu acesta (cardul dvs. de credit a fost realizat cu JavaScript).
Sper să vă simțiți inspirați, să luați ceva timp și să vă jucați cu unele dintre proiectele menționate aici sau chiar mai bine să luați unele dintre aceste instrumente și să construiți lucruri noi în jurul lor. Cele mai multe dintre acestea sunt open source și există dezvoltatori acolo, care vă caută să îi ajutați să își îmbunătățească munca, chiar dacă este doar folosind instrumentele, descoperind erori și raportându-le.
