Innhold
- 01. Det er tid for en hangout
- 02. $ (’light’). FadeIn ();
- 03. Hendene dine er laget for nettleseren
- 04. 3D-spill kontrollert med spillkontrollen
- 05. Kjører Flash på iPad
- 06. Skriveapper for smarttelefonen din
- 07. Kjører Ruby og Python i nettleseren din
- 08. Skrive OS-uavhengige stasjonære programmer
- 09. Kjører en webserver
- 10. Webskraping og skjermbilder
- Vente! Det er mer...
JavaScript har gått langt siden fødselen i 1995. En vanskelig måte helt sikkert, full av misforståelse, misbruk og uvitenhet. Men tidene har endret seg, siden JavaScript har fått mer og mer oppmerksomhet siden de siste fem årene. Med mer oppmerksomhet bruker flere utviklere faktisk JavaScript, bruker det til mange forskjellige formål og nyter skjønnheten. Klassisk "Ugly Duckling" -historie, hvis du spør meg.
I den følgende artikkelen vil vi oppdage 10 brukstilfeller for JavaScript som er forskjellige fra de vanlige "i nettleseren", du er vant til.
01. Det er tid for en hangout
Husker du 80-tallet visjonen om Facetime-lignende videokommunikasjon?
Det tok bare 20 år før dette har gått mainstream på grunn av nesten overalt tilgjengelig bredbåndsinternett og den tunge bruken av litt programvare som heter Skype.
Med mulighetene til Adobes Flash og Googles forsøk på å bygge et sosialt nettverk, har vi allerede mulighetene for videokommunikasjon i nettleseren vår. Ville det ikke vært kult å ha disse evnene uten å bruke en tredjeparts plugin-modul som Flash?
Heldigvis tenkte nettleserleverandørene det samme og implementerte "getUserMedia" API i programvaren. Dette var et første skritt for å få tilgang til enheter som kameraer eller mikrofoner direkte fra nettleseren din.
Ved å bruke Node.js som en server på baksiden av et slikt program, er det utrolig enkelt å transportere videosignalet over luften til en eller flere klienter. Uheldigvis er det bare Chrome og Opera som støtter API-en når dette skrives, men andre vil ta igjen raskt.
Den renere tilnærmingen for toveiskommunikasjon er en eneste Chrome for øyeblikket, kalt WebRTC. På grunn av WebRTC kan klienter åpne peer to peer-kommunikasjonskanaler, og koble klient direkte til klient direkte.
For moro skyld, sjekk ut Sindre Sorhus ’Photo Booth implementering gjort i 121 byte!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
funksjon successCallback (stream) {
video.src = stream;
}
funksjonsfeilTilbakering (feil) {
console.log (feil);
}
02. $ (’light’). FadeIn ();
Arduino-mikrocontrollerplattformen er et karaktereksempel for et JavaScript-tilfelle "out of the box". For de av dere, som ikke er kjent med Arduino-plattformen, er det et superberømt sitat fra nettstedet:
"Arduino er en open source-elektronikk-prototypeplattform basert på fleksibel, brukervennlig maskinvare og programvare. Den er ment for kunstnere, designere, hobbyister og alle som er interessert i å skape interaktive objekter eller miljøer."
Arduino selv støtter bare kode skrevet i C, noe som fremdeles ikke er så farlig. Med noen få linjer C (i tillegg til at andre har gjort dette for deg), kan Arduino motta kommandoer via USB-porten via den serielle portprotokollen.
Men hvordan kan du få tilgang til serieporten via JavaScript? Tydeligvis ikke fra nettleseren.
Node.js til unnsetning!
På grunn av innsatsen fra samfunnets advokat Chris Williams har vi et Node seriell portbibliotek, der vi kan sende data over den gamle SP-protokollen. Dette var det første gjennombruddet, basert på biblioteket andre mennesker kom med en mer abstrakt tilnærming for Arduinos evner. For eksempel node-arduino- og duino-bibliotekene.
Det hotteste og kuleste biblioteket rundt blokken for JS-drevet Arduino-programmering nå er jonny-five. Ta en titt på Bocoups blogg for å få litt hot shit de har gjort med Arduino-plattformen og mange plug-ins. Også JSConf-videoen fra Nicolai Onken og Jörn Zaefferer kan gi deg et snurr av hva som er mulig i dag med liten kode.
03. Hendene dine er laget for nettleseren
Minority Report's fremtidsvisjon (den der de styrer datamaskiner med hendene, ikke de stygge bilene) kommer nærmere hver dag. Et stort skritt i denne retningen var Microsofts kontroller mindre spillforsøk, Kinect. Fantastisk spill kan du tro, men hva har dette med JavaScript å gjøre ?!
Med Microsofts Kinect SDK-utgivelse krysset en haug mennesker broen i nettleserbruk for Kinect. Først og fremst gutta fra ChildNodes som har bygget et komplett fungerende kinect.js-bibliotek, som muliggjør bruk av Microsofts Kinect i nettleseren din.
Jeg anbefaler på det sterkeste å sjekke ut demoer og videoer, det er en blast. En stor ulempe med kinect.js-biblioteket er imidlertid at det må være et WebSocket-serverprogram som kjører på baksiden av klienten (det er faktisk Kinect -> C # -> JS-lim).
Noen få studenter av MIT-berømmelse jobber med en løsning for å rive ned denne veggen, kalt DepthJS,
et nettleser-plugin som muliggjør Kinect-bruk for Chrome og Safari, selv for nettsteder som ikke er optimalisert for Kinect-basert bruk i noen form. DepthJS er for tiden i et tidlig utviklingsstadium, men absolutt verdt å holde rede på.
04. 3D-spill kontrollert med spillkontrollen
Har du noen gang prøvd å spille et nettleserspill som ikke er Flash nå til dags? De grafiske mulighetene er fantastiske, spesielt når du ser spillkloner som Quake.
Men når du spiller disse tingene, er du alltid knyttet til tastaturet og den (for det meste) klumpete musen. Dette er en stor ulempe, spesielt for actionspill, det holder dem virkelig tilbake fra nettleseren.
Ville det ikke vært kult hvis du bare kunne koble Xbox-kontrolleren til PC-en din og begynne å spille ditt favorittleserspill? Dette er ikke en fremtidsvisjon lenger, si hei til Gamepad API!
Hvis du har en gamepad rundt skrivebordet, kan du koble den til akkurat nå og glede deg over noen spill som allerede bruker Gamepad API. Programmering av inngangskontrollene er også et stykke kake, sjekk ut dette kodebiten eller enda bedre, kjør den selv:
div id = "gamepads"> / div>
skript>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skript>
Hvis du vil vite mer om nettlesernes 3D-funksjoner, kan du sjekke ut Three.js og Jens Arps ’open source 3D-simulatormotor Ascent bygget på toppen av den. Mark Hammil pass opp, vi trenger deg kanskje en ny oppfølger av Wing Commander!
05. Kjører Flash på iPad
Som en elskere av åpen standard og Apple-fanboy må jeg innrømme at jeg virkelig vil takke Apple for at de ikke satte Flash på iPad og iPod. Dette startet virkelig en bevegelse av å omfavne åpne teknologier som HTML5, CSS3 og JavaScript.
Som byråansatt må jeg si at dette er en veldig dårlig situasjon for kundene våre.
De fleste av dem må betale to ganger for en enkel annonse eller kampanje som de lanserer for å ha interaktivt innhold som kjører i gamle IE7 eller IE8 via Flash og i moderne nettlesere, samt iDevices via HTML5.
Å fylle ut de gamle nettlesernes funksjoner har sine grenser, for det meste kalt ytelse. Så er det ikke mulig å kjøre Flash på disse Flashless iDevices?
Selvfølgelig er det en, og selvfølgelig er den innebygd i JavaScript.
Et stykke historie: I 2010 ga Tobias Schneider ut et lite bibliotek kalt Gordon
som tillot SWF-filer å kjøre direkte i nettleseren. Dette fungerte ganske bra for små Flash-filer som annonser som bare brukte funksjoner opp til Flash versjon 2, men funksjonalitet på høyere nivå var ikke inkludert i det hele tatt.
Da Tobias ble med i ueberJS-selskapet UXEBU, kom de på en ny idé.
Og så ble Bikeshed født. Bikeshed i seg selv er et slags JavaScript-animasjonsrammeverk, men er også et JavaScript til Flash for alt du vil at det skal være kompilator (det er adapterbasert, slik at du kan skrive adaptere for alt du vil, selv om standardoppførselen er å kompilere Flash til JavaScript) . Den er kompatibel med Flash 10 og ActionScript 3. Ta en titt på websiden for å lære mer om dens mange funksjoner i tillegg til kompilatoren.
06. Skriveapper for smarttelefonen din
Å skrive innfødte applikasjoner for mobiltelefonmiljøer er en steinete vei. Det starter med avgjørelsen hvilken plattform du vil støtte. Skulle applikasjonen kjøre på en iPhone og iPad, en Android-drevet mobilenhet, Windows Mobile, Blackberry-enheter, webOS-basert pla ... og så videre.
Hver av disse plattformene har sine egne APIer og bruker for det meste forskjellige programmeringsspråk.
Hvis du har overlevd nettleserkrigen, la meg fortelle deg at dette er en vanskeligere kamp for å komme inn. Det er nesten umulig for en utvikler å bygge en applikasjon for alle disse plattformene i tid og budsjett.
Så, hva gjør vi? Ansette flere utviklere? Lade mer for apper? Eller finn en bedre tilnærming for å sikre at kodebasen kjører på alle enheter? Som de fleste av dere, foretrekker jeg den siste tilnærmingen.
Men i hva skal disse appene bygges? Hva har alle disse plattformene til felles? Du vet kanskje svaret, det er en nettleser og derfor en JavaScript-motor.
Det er ideen bak Apache Cordova, bedre kjent under sitt tidligere navn PhoneGap.
Cordova er et JavaScript-rammeverk som trekker ut API-ene til hvert mobilmiljø og avslører et pent JavaScript-API for å kontrollere dem alle. Dette gjør at du kan opprettholde en enkelt kodebase, som du deretter bygger og distribuerer på forskjellige mobile enheter.
Ta en titt på ressursene her for å finne ut hvordan du bruker Cordova til å bygge kick ass mobilapper som du bygger en gang og vil kjøre overalt.
07. Kjører Ruby og Python i nettleseren din
Mozilla, selskapet bak den berømte Firefox-nettleseren, bruker mange nerdene, det er sikkert. En av dem er Alon Zakai, ingeniør ved Mozilla Research Team, som bygde et freaky verktøy kalt Emscripten.
Emscripten lar deg ta LLVM-bitkode - som kan genereres fra C / C ++ -baserte biblioteker, til JavaScript. Den gjør dette ved å kompilere bibliotekene til bitkode og deretter ta bitkoden og transformere den til JavaScript. Ryddig, men hva kan jeg egentlig gjøre med dette, kan du spørre deg selv?
Jeg har et motspørsmål til deg: har du noen gang hørt uttrykket "Å bruke CoffeeScript og Prototype er det nærmeste du kan komme med å kjøre Ruby i nettleseren"? Nei? Ikke bekymre deg, for dette er ikke sant lenger.
Med Emscripten kan du ganske enkelt ta Ruby-kildene, forvandle dem til JavaScript og voilà, ha den virkelige Ruby i gang i nettleseren din! Men dette gjelder ikke bare Ruby, for eksempel ble Python også emskriptert.
Eller sjekk ut i nettleseren h.264 dekoder Broadway. Det er faktisk et emscriptened C ++ - bibliotek!
Gå til repl.it for å se noen få programmeringsspråk (inkludert Ruby og Python) som kjører i nettleseren din!
08. Skrive OS-uavhengige stasjonære programmer
Vi snakket om å målrette mot flere mobile plattformer ved hjelp av Apache Cordova tidligere. Ikke overraskende kan JavaScript ikke bare brukes til å målrette mot mobile plattformer, vår gamle venn, stasjonær datamaskin, kan også takles.
De første løsningene kom fra gutta fra Appcelerator med Titanium Desktop Suite og fra Adobe den mye brukte Air-plattformen.
Men som open source-elskere som vi alle er, er en mer åpen og Node.js-basert teknologi det vi leter etter. Møt app.js! app.js er en åpen webteknologi og Node.js-basert desktop-programbygger, som lar oss skrive ekte desktop-programmer med filsystemtilgang, vinduskontroller og mer. Vi kan stole på stabile API-er på tvers av plattformene til Node og bygge programvare-brukergrensesnittet vårt med HTML og CSS. Akkurat som de mest hotte tingene på denne listen her.
app.js er et ganske ungt prosjekt og støtter derfor bare Windows og Linux nå, men ifølge adresselisten er Mac-støtte på vei.
09. Kjører en webserver
I dag sjokkerer du ingen når du forteller dem at nettstedet ditt betjenes av en JavaScript-basert webserver. Hvis du tenker tilbake for to eller tre år siden, og fortalte nettutviklere nøyaktig det samme, ville de sannsynligvis ha led av deg eller enda verre.
Men med den utrolige suksessen til Node.js er dette heldigvis langt borte fra nå. Ikke bare overrasker det ikke folk lenger, på grunn av sin asynkrone natur er Node.js et underverk i ytelse, spesielt når det kommer til å møte problemet med mange parallelle forbindelser. Ikke bare ytelsen er en eksplosjon, den virkelig enkle API tiltrekker seg mange utviklere også. La oss sjekke ut "Hello World" -eksemplet fra Node-verdenen, det er ikke bare en utskrift "Hello World" på skjermeksemplet, det er en http-webserver!
var http = krever (’http’);
http.createServer (funksjon (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hello World n’);
}). lytt (1337, ’127.0.0.1’);
Hvis du ikke blir blåst bort av denne enkelheten, kan jeg heller ikke hjelpe deg.
En av de beste delene av Node-popularitet (eller hype) er at store selskaper som Microsoft faktisk støtter det, dvs. i deres Azure Cloud Services!
10. Webskraping og skjermbilder
Så, sist men ikke minst, la oss ta en titt på et prosjekt som jeg personlig liker å la meg kjøre mine QUnit-tester hodeløs på kommandolinjen. PhantomJS er en hodeløs WebKit-basert nettleser med et pent JavaScript (eller CoffeScript) basert API.
Men å teste JavaScript og DOM er ikke det eneste bruksområdet for Phantom. Det som virkelig fascinerer meg er dens evner til å skrape nettsteder og la deg ta skjermbilder av det!
Ja, du leser riktig, med Phantom kan du sende websider i forskjellige grafiske formater, og selvfølgelig er det like enkelt som å stjele søtsaker fra en baby.
La oss se på et skript som akkurat gjør dette:
var side = ny webside ();
page.open (’http://google.com’, funksjon (status) {
page.render (’google.png’);
phantom.exit ();
});
Det er alt du trenger for å lage et skjermbilde, og fordi det er JavaScript-basert, kan du også bruke jQuery og manipulere sideinnholdet før du skjermbilder det!
Vente! Det er mer...
Så jeg håper du er like overrasket som jeg var da jeg oppdaget hvert av disse verktøyene. Denne artikkelen riper bare på overflaten av det som er mulig med JavaScript i dag. Det er så mye mer som IDEer helt skrevet i JS Cloud9 eller ting med høy sikkerhet gjort med det (Kredittkortet ditt er laget med JavaScript).
Jeg håper du føler deg inspirert, tar deg litt tid og leker med noen av prosjektene som er nevnt her, eller enda bedre tar noen av disse verktøyene og bygger nye ting rundt dem. Det meste av dette her er åpen kildekode, og det er utviklere der ute som leter etter deg for å hjelpe dem med å forbedre sitt arbeid, selv om det bare er ved å bruke verktøyene, oppdage feil og rapportere dem.
