Sisu
- 01. On aeg hangoutiks
- 02. $ (’valgus’). FadeIn ();
- 03. Teie käed on loodud brauseri jaoks
- 04. 3D-mängud, mida juhitakse teie mängupuldiga
- 05. Flashi käitamine oma iPadis
- 06. Rakenduste kirjutamine nutitelefoni jaoks
- 07. Ruby ja Pythoni käitamine teie brauseris
- 08. OS-st sõltumatute töölauaprogrammide kirjutamine
- 09. Veebiserveri käitamine
- 10. Veebikraapimine ja ekraanipildistamine
- Oota! Seal on veel ...
JavaScript on oma sünnist 1995. aastal kaugele jõudnud. Kindlasti on see raske viis, täis arusaamatusi, väärkasutust ja teadmatust. Kuid ajad on muutunud, kuna viimasel viiel aastal on JavaScript üha enam tähelepanu pälvinud. Suurema tähelepanuga kasutab rohkem arendajaid JavaScripti, kasutades seda mitmel erineval eesmärgil ja nautides selle ilu. Klassikaline lugu "Kole pardipoeg", kui minult küsida.
Järgmises artiklis avastame JavaScripti jaoks 10 kasutamisjuhtu, mis erinevad tavapärasest "brauseris".
01. On aeg hangoutiks
Kas mäletate 80ndate nägemust Facetime’i-laadsest videosuhtlusest?
Kulus vaid 20 aastat, enne kui see on muutunud peavooluks peaaegu kõikjal kättesaadava lairiba Interneti ja väikese Skype'i tarkvara kasutamise tõttu.
Tänu Adobe Flashi võimalustele ja Google'i püüdlusele luua suhtlusvõrgustik on meil juba brauseris videokommunikatsiooni võimalused. Kas poleks lahe omada neid võimeid ilma kolmanda osapoole pistikprogrammi (näiteks Flash) kasutamata?
Õnneks mõtlesid brauserimüüjad sama ja juurutasid oma tarkvarasse API "getUserMedia". See oli esimene samm, et pääseda seadmetele nagu kaamerad või mikrofonid otse oma brauserist juurde.
Node.js-i kasutamine sellise rakenduse tagaküljel oleva serverina on hämmastavalt lihtne videosignaali edastamine üle õhu ühele või mitmele kliendile. Õnneks toetavad selle kirjutamise ajaks API-d ainult Chrome ja Opera, kuid teised jõuavad kiiresti järele.
Puhtam lähenemine kahesuunalisele suhtlemisele on praegu ainus Chrome'i asi, mida nimetatakse WebRTC-ks. WebRTC tõttu on klientidel lubatud avada peer to peer suhtluskanaleid, ühendades kliendi otse kliendiga.
Lõbususe huvides vaadake Sindre Sorhuse fotoboksi rakendust, mis on tehtud 121 baiti!
var video = document.getElementsByTagName (’video’) [0],
navigaator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (voog) {
video.src = voog;
}
function errorCallback (tõrge) {
console.log (viga);
}
02. $ (’valgus’). FadeIn ();
Arduino mikrokontrolleri platvorm on A-klassi näide JavaScripti kasutamise juhtumist. Neile teist, kes pole Arduino platvormiga tuttavad, siin on ülikuulus tsitaat selle veebisaidilt:
"Arduino on avatud lähtekoodiga elektroonika prototüüpimisplatvorm, mis põhineb paindlikul ja hõlpsasti kasutataval riistvaral ja tarkvaral. See on mõeldud kunstnikele, disaineritele, harrastajatele ja kõigile, kes on huvitatud interaktiivsete objektide või keskkondade loomisest."
Arduino ise toetab ainult C-ga kirjutatud koodi, mis pole ikkagi suurem asi. Mõne rea C-ga (lisaks sellele, et teised on selle töö teie eest teinud), saab Arduino käske oma USB-porti kaudu jadapordiprotokolli kaudu.
Aga kuidas pääsete JavaScripti kaudu jadapordile juurde? Selgelt mitte brauserist.
Node.js appi!
Kogukonna kaitsja Chris Williamsi jõupingutuste tõttu on meil Node jadapordi teek, kuhu saame andmeid saata vana SP-protokolli kaudu. See oli esialgne läbimurre, lähtudes raamatukogust, leidsid teised inimesed Arduino võimete abstraktsema lähenemise. Näiteks node-arduino ja duino teegid.
JS-i juhitava Arduino programmeerimise jaoks on praeguse aja kuumim ja lahedam raamatukogu ploki ümbruses jonny-five. Tutvuge Bocoupi ajaveebiga, et leida mõned kuumad värvid, mida nad on Arduino platvormiga teinud, ja palju pistikprogramme. Ka Nicolai Onkeni ja Jörn Zaeffereri JSConfi video annab teile võimaluse keerutada seda, mis täna vähese koodiga võimalik on.
03. Teie käed on loodud brauseri jaoks
Minority Report'i tulevikuvisioon (see, kus nad kontrollivad arvutit oma kätega, mitte koledate autodega), läheneb iga päevaga. Suur samm selles suunas oli Microsofti kontrolleri vähem mängimise katse Kinect. Hämmastav gameplay võite mõelda, kuid mis see on pistmist JavaScriptiga ?!
Microsofti Kinect SDK väljalaskega ületas hulk inimesi Kinecti brauserikasutuse silda. Kõigepealt ChildNodesi poisid, kes on loonud täieliku töötava kinect.js teegi, mis võimaldab teie brauseris kasutada Microsofti Kinecti.
Soovitan tungivalt tutvuda nende demode ja videotega, see on lööklaine. Kinect.js teegi üks suur puudus on aga see, et kliendi taga peab töötama WebSocket'i serveriprogramm (see on tegelikult Kinect -> C # -> JS liim).
Mõni MIT kuulsusega õpilane töötab selle müüri lammutamise lahenduse nimel, nimega DepthJS,
brauserisisene pistikprogramm, mis võimaldab Kinecti kasutada Chrome'is ja Safaris isegi saitide jaoks, mis pole optimeeritud Kinecti mis tahes kujul kasutamiseks. DepthJS on praegu varajases arengujärgus, kuid kindlasti tasub seda jälgida.
04. 3D-mängud, mida juhitakse teie mängupuldiga
Kas olete kunagi proovinud tänapäeval mängida mitte-Flashi brauserimängu? Graafilised võimalused on hämmastavad, eriti kui näete mänguklooni nagu Quake.
Kuid seda kraami mängides olete alati seotud oma klaviatuuri ja (enamasti) kohmetu hiirega. See on peamine puudus, eriti põnevusmängude puhul, see hoiab neid tõesti brauserist tagasi.
Kas poleks lahe, kui saaksite lihtsalt ühendada oma Xboxi kontrolleri arvutiga ja hakata oma lemmikbrauserimängu mängima? See pole enam tulevikuvisioon, tere öelda Gamepad API-le!
Kui teil on laua ümber mängupult, ühendage see kohe ja nautige mõnda mängu, mis juba kasutab Gamepad API-d. Sisendjuhtimise programmeerimine on ka käkitegu, vaadake seda koodilõiku või veelgi parem, käivitage see ise:
div id = "mängupuldid"> / div>
skript>
function gamepadConnected (sündmus) {
var gamepads = document.getElementById ("mängupuldid"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Mängupult ühendatud (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skript>
Kui soovite rohkem teada saada brauserite 3D-võimalustest, vaadake selle peale ehitatud Three.js ja Jens Arps'i avatud lähtekoodiga 3D-simulaatorimootorit Ascent. Mark Hammil olge ettevaatlik, meil võib vaja minna teist Wing Commanderi järge!
05. Flashi käitamine oma iPadis
Avatud standardite armastaja ja Apple'i fännina pean tunnistama, et tahaksin tõesti tänada Apple'i selle eest, et ta ei pannud Flashi iPadi ja iPodi, see tõepoolest alustas avatud tehnoloogiate nagu HTML5, CSS3 ja JavaScripti omaksvõtmist.
Agentuuritöötajana pean ütlema, et see on meie klientide jaoks tõesti halb olukord.
Enamik neist peab kaks korda maksma lihtsa reklaami või kampaania eest, mida nad käivitavad, et interaktiivne sisu töötaks vanas IE7-s või IE8-s Flashi kaudu ja kaasaegsetes brauserites, samuti HTML-i kaudu iDevices.
Vanade brauserite funktsioonide mitmetäitmisel on piirid, enamasti nimega jõudlus. Niisiis, kas Flash-i töötamine nendes Flashless iDevices'is puudub?
Muidugi on üks ja loomulikult on see sisse ehitatud JavaScripti.
Tükk ajalugu: 2010. aastal andis Tobias Schneider välja väikese raamatukogu nimega Gordon
mis võimaldas SWF-failidel töötada otse brauseris. See toimis üsna hästi selliste väikeste Flash-failide puhul nagu reklaamid, mis kasutasid ainult funktsioone kuni Flash 2. versioonini, kuid kõrgema taseme funktsionaalsust ei kaasatud üldse.
Kui Tobias ühines ueberJS-i ettevõttega UXEBU, tulid nad välja uue ideega.
Ja nii sündiski Bikeshed. Bikeshed ise on omamoodi JavaScripti animatsiooniraamistik, kuid on ka JavaScripti Flash-fail kõigele, mida soovite kompilaatoriks (see on adapteripõhine, nii et saate kirjutada adapterid kõigele, mida soovite, kuigi tavapärane käitumine on Flash-i kompileerimine JavaScripti) . See ühildub Flash 10 ja ActionScript 3-ga. Vaadake selle veebileht, et saada lisateavet selle paljude funktsioonide kohta lisaks kompilaatorile.
06. Rakenduste kirjutamine nutitelefoni jaoks
Natiivrakenduste kirjutamine mobiiltelefonikeskkondadesse on kivine tee. See algab otsusest, millist platvormi soovite toetada. Kui teie rakendus peaks töötama iPhone'is ja iPadis, Android-toega mobiilseadmes, Windows Mobile'is, Blackberry seadmetes, WebOS-põhistel plaatidel ja nii edasi.
Igal sellel platvormil on oma API-d ja enamasti kasutatakse erinevaid programmeerimiskeeli.
Kui olete brauserisõjad üle elanud, lubage mul teile öelda, et see on viis, kuidas pääseda on raskem. Arendajal on peaaegu võimatu kõigi nende platvormide jaoks aja ja eelarvega rakendust luua.
Mida siis teha? Kas palgata veel arendajaid? Kas laadida rakenduste eest rohkem? Või leiate parema lähenemisviisi, et veenduda, et teie koodibaas töötab igas seadmes? Enamik teist eelistaksin viimast lähenemist.
Kuid millesse need rakendused tuleks ehitada? Mis on kõigil neil platvormidel ühist? Võib-olla teate vastust, see on veebibrauser ja seetõttu JavaScripti mootor.
See on Apache Cordova idee, mis on paremini tuntud endise nime PhoneGap all.
Cordova on JavaScripti raamistik, mis võtab kokku iga mobiilse keskkonna API-d ja palub nende kõigi juhtimiseks korraliku JavaScripti API. See võimaldab teil säilitada ühe koodibaasi, mille seejärel ehitate ja juurutate erinevates mobiilseadmetes.
Siit leiate ressursid, et teada saada, kuidas kasutada Cordovat ühe korra üles ehitatud ja kõikjal käivitatavate mobiilirakenduste jaoks.
07. Ruby ja Pythoni käitamine teie brauseris
Kuulsa Firefoxi brauseri taga tegutsev ettevõte Mozilla töötab palju geeke, see on kindel. Üks neist on Mozilla uurimisrühma insener Alon Zakai, kes ehitas kohutava tööriista nimega Emscripten.
Emscripten võimaldab teil LLVM-i bittkoodi - mida saab genereerida C / C ++ -põhistest teekidest - JavaScripti viia. Ta teeb seda, kompileerides teegid bittkoodiks ja võttes seejärel selle bittkoodi ja teisendades selle JavaScripti. Korralik, aga mida ma saan sellega tegelikult teha, võite endalt küsida?
Mul on teile vastusküsimus: kas olete kunagi kuulnud fraasi "CoffeeScripti ja prototüübi kasutamine on kõige lähem, kui brauseris Ruby käivitamist saate"? Ei? Ärge muretsege, sest see pole enam tõsi.
Emscripteni abil saate lihtsalt võtta Ruby-allikad, muuta need JavaScripti ja voilà, lasta tõelisel Ruby-l teie brauseris töötada! Kuid see ei kehti ainult Ruby kohta, näiteks Python ka vabastati.
Või vaadake brauseri h.264 dekooderit Broadway. See on tegelikult välja kirjutatud C ++ teek!
Minge saidile repl.it, et näha mõnda brauseris töötavat programmeerimiskeelt (sh Ruby ja Python)!
08. OS-st sõltumatute töölauaprogrammide kirjutamine
Rääkisime Apache Cordova abiga mitme mobiilplatvormi sihtimisest varem. Pole üllatav, et JavaScripti ei saa kasutada mitte ainult mobiilsete platvormide sihtimiseks, vaid ka meie vana sõbra, lauaarvuti vastu.
Esimesed lahendused tulid Appceleratori meestelt Titanium Desktop Suite'iga ja Adobe laialt kasutatavalt Air platvormilt.
Kuna me kõik oleme avatud lähtekoodiga armastajad, siis otsime avatumat ja Node.js-põhist tehnoloogiat. Tutvuge app.js-ga! app.js on avatud veebitehnoloogia ja Node.js-põhine töölauaprogrammi koostaja, mis võimaldab meil kirjutada tõelisi töölauaprogramme, millel on juurdepääs failisüsteemile, akende juhtnuppudele ja muule. Saame tugineda Node'i stabiilsetele platvormiülestele API-dele ja ehitada oma tarkvara UI HTML-i ja CSS-iga. Täpselt nagu siin nimekirjas kõige kuumemad uued asjad.
app.js on päris noor projekt ja seetõttu toetab praeguseks vaid Windowsi ja Linuxi, kuid meililistide järgi on Maci tugi teel.
09. Veebiserveri käitamine
Tänapäeval ei šokeeri te kedagi, kui ütlete neile, et teie veebisaiti teenindab JavaScripti põhine veebiserver. Kui mõelda tagasi kaks või kolm aastat tagasi ja öelda veebiarendajatele täpselt sama, oleksid nad ilmselt teie üle naernud või veelgi hullem.
Kuid Node.js uskumatu eduga on see nüüd õnneks kaugel. See mitte ainult ei üllata enam inimesi, vaid ka oma asünkroonse olemuse tõttu on Node.js jõudlusega äge, eriti kui tegemist on paljude paralleelsete ühenduste probleemiga silmitsi seismisega. Mitte ainult selle jõudlus on lööklaine, vaid ka tõeliselt lihtne API meelitab palju arendajaid. Vaatame sõlmede maailma näidet "Tere maailm", see pole mitte ainult ekraanil toodud näide "Tere maailm", vaid ka http-veebiserver!
var http = nõudma (’http’);
http.createServer (funktsioon (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Tere maailm n’);
}). kuula (1337, ’127.0.0.1’);
Kui teid see lihtsus ei paista, siis ei saa ma ka teid aidata.
Node'i populaarsuse (või hype) üks paremaid osi on see, et suured ettevõtted nagu Microsoft toetavad seda tegelikult, st oma Azure'i pilveteenustes!
10. Veebikraapimine ja ekraanipildistamine
Nii et viimaks, kuid mitte vähem oluline, heitkem pilk projektile, mis mulle isiklikult meeldib, kui lasin mul oma QUniti teste käsureal peata käitada. PhantomJS on peata veebibrauser, millel on korralik JavaScripti (või CoffeScripti) põhine API.
Kuid teie JavaScripti ja DOM-i testimine pole Phantomi ainus kasutusjuht. Mis mind tegelikult paelub, on selle võime veebisaite kraapida ja lasta teil sellest ekraanipilte teha!
Jah, loete õigesti, Phantomiga saate veebisaite väljastada erinevates graafilistes vormingutes ja loomulikult on see sama lihtne kui beebilt maiustuste varastamine.
Vaatame skripti, mis täpselt seda teeb:
var leht = uus veebileht ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
fantoom.välju ();
});
See on kõik, mida vajate ekraanipildi tegemiseks ja kuna see on JavaScripti põhine, võiksite enne ekraanipildistamist kasutada ka jQuery-d ja lehe sisuga manipuleerida!
Oota! Seal on veel ...
Loodan, et olete sama üllatunud kui mina, kui avastasin kõik need tööriistad. See artikkel lihtsalt kraapis selle, mis on JavaScripti abil tänapäeval võimalik. Seal on veel palju muud nagu täielikult JS Cloud9-s kirjutatud IDE-sid või sellega tehtud kõrge turvalisusega asju (teie krediitkaart on tehtud JavaScripti abil).
Loodetavasti tunnete end inspireerituna, võtate natuke aega ja mängite mõne siin mainitud projektiga ringi või isegi parem võtate mõned neist tööriistadest ja ehitate nende ümber uusi asju. Enamik sellest on siin avatud lähtekoodiga ja seal on arendajaid, kes otsivad teid, et aidata neil oma tööd paremaks muuta, isegi siis, kui kasutatakse ainult tööriistu, avastatakse vigu ja teatatakse neist.
