Innehåll
- 01. Det är dags för en hangout
- 02. $ ('light'). FadeIn ();
- 03. Dina händer är gjorda för webbläsaren
- 04. 3D-spel som styrs med din gamepad
- 05. Kör Flash på din iPad
- 06. Skrivappar för din smartphone
- 07. Köra Ruby och Python i din webbläsare
- 08. Skriv OS-oberoende skrivbordsprogram
- 09. Köra en webbserver
- 10. Webscraping och skärmdumpning
- Vänta! Det finns mer...
JavaScript har gått långt sedan dess födelse 1995. Ett svårt sätt med säkerhet, fullt av missförstånd, missbruk och okunnighet. Men tiderna har förändrats sedan de senaste fem åren har JavaScript fått mer och mer uppmärksamhet. Med mer uppmärksamhet använder fler utvecklare faktiskt JavaScript, använder det för många olika ändamål och njuter av dess skönhet. Klassisk "Ugly Duckling" -historia, om du frågar mig.
I följande artikel kommer vi att upptäcka 10 användningsfall för JavaScript som skiljer sig från de vanliga "i webbläsare" som du är vana vid.
01. Det är dags för en hangout
Kommer du ihåg 80-talets vision om Facetime-liknande videokommunikation?
Det tog bara 20 år innan detta har gått mainstream på grund av nästan överallt tillgängligt bredbandsinternet och den stora användningen av lite programvara som heter Skype.
Med funktionerna i Adobes Flash och Googles försök att bygga ett socialt nätverk har vi redan möjligheterna med videokommunikation i vår webbläsare. Skulle det inte vara kul att ha dessa förmågor utan att använda en tredjeparts plugin-program som Flash?
Lyckligtvis trodde webbläsarleverantörerna samma sak och implementerade "getUserMedia" API i sin programvara. Detta var ett första steg för att komma åt enheter som kameror eller mikrofoner direkt från din webbläsare.
Med Node.js som server på baksidan av en sådan applikation är det otroligt enkelt att transportera videosignalen över luften till en eller flera klienter. Olyckligtvis är det bara Chrome och Opera som stöder API: n när det här skrivs, men andra kommer att komma ikapp snabbt.
Det renare tillvägagångssättet för tvåvägskommunikation är en enda Chrome-sak just nu, kallad WebRTC. På grund av WebRTC kan klienter öppna peer-to-peer-kommunikationskanaler och direkt koppla klienten till klienten.
För skojs skull, kolla in Sindre Sorhus Photo Booth-implementering gjort i 121 byte!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
funktion successCallback (stream) {
video.src = ström;
}
funktionsfel Återuppringning (fel) {
console.log (fel);
}
02. $ ('light'). FadeIn ();
Arduino-mikroprocessorplattformen är ett bra exempel för ett JavaScript-fall "out of the box". För dig som inte känner till Arduino-plattformen, här är ett superkänt citat från dess webbplats:
"Arduino är en prototypplattform med öppen källkod som bygger på flexibel, lättanvänd hårdvara och programvara. Den är avsedd för artister, designers, hobbyister och alla som är intresserade av att skapa interaktiva objekt eller miljöer."
Arduino själv stöder bara kod skriven i C, vilket fortfarande inte är en stor sak. Med några rader C (förutom att andra har gjort detta för dig), kan Arduino ta emot kommandon via sin USB-port via det seriella portprotokollet.
Men hur kan du komma åt den seriella porten via JavaScript? Klart inte från webbläsaren.
Node.js till undsättning!
På grund av samhällsförespråkarens ansträngningar Chris Williams har vi ett nodserieportbibliotek där vi kan skicka data över det gamla SP-protokollet. Detta var det första genombrottet, baserat på biblioteket kom andra människor med ett mer abstrakt tillvägagångssätt för Arduinos kapacitet. Till exempel nod-arduino- och duino-biblioteken.
Det hetaste och coolaste biblioteket runt blocket för JS-driven Arduino-programmering är nu jonny-five. Kolla in Bocoups blogg för lite skit de har gjort med Arduino-plattformen och massor av plug-ins. Även JSConf-videon från Nicolai Onken och Jörn Zaefferer kan ge dig en snurr på vad som är möjligt idag med lite kod.
03. Dina händer är gjorda för webbläsaren
Minority Report's framtidsvision (den där de styr datorer med händerna, inte de fula bilarna) kommer närmare varje dag. Ett stort steg i den här riktningen var Microsofts mindre försök att spela, Kinect. Fantastisk spel du kanske tror, men vad har detta med JavaScript att göra ?!
Med Microsofts Kinect SDK-utgåva gick ett gäng människor över bron i webbläsaranvändning för Kinect. Först och främst killarna i ChildNodes som har byggt ett komplett fungerande kinect.js-bibliotek som gör det möjligt att använda Microsofts Kinect i din webbläsare.
Jag rekommenderar starkt att kolla in demos och videor, det är kul. En stor nackdel med kinect.js-biblioteket är dock att det måste finnas ett WebSocket-serverprogram som körs på baksidan av klienten (det är faktiskt Kinect -> C # -> JS-lim).
Några studenter av MIT-berömmelse arbetar med en lösning för att riva ner den här väggen, kallad DepthJS,
ett insticksprogram i webbläsaren som möjliggör Kinect-användning för Chrome och Safari, även för webbplatser som inte är optimerade för Kinect-baserad användning i någon form. DepthJS är för närvarande i ett tidigt utvecklingsskede, men definitivt värt att hålla reda på.
04. 3D-spel som styrs med din gamepad
Har du någonsin försökt spela ett webbläsarspel som inte är Flash nuförtiden? De grafiska funktionerna är fantastiska, särskilt när du ser spelkloner som Quake.
Men när du spelar de här grejerna är du alltid bunden till ditt tangentbord och den (mest) klumpiga musen. Detta är en stor nackdel, särskilt för actionspel, det håller dem verkligen tillbaka från webbläsaren.
Skulle det inte vara kul om du bara kunde ansluta din Xbox-kontroller till din dator och börja spela ditt favoritwebbläsarspel? Det här är inte en framtidsvision längre, säg hej till Gamepad API!
Om du har en gamepad runt skrivbordet kan du ansluta den direkt och njuta av några spel som redan använder Gamepad API. Programmering av ingångskontrollerna är också en bit kaka, kolla in det här kodavsnittet eller ännu bättre, kör det själv:
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>
Om du vill veta mer om webbläsarnas 3D-funktioner, kolla in Three.js och Jens Arps 3D-simuleringsmotor med öppen källkod Ascent byggd ovanpå den. Mark Hammil se upp, vi kanske behöver dig för en ny Wing Commander uppföljare!
05. Kör Flash på din iPad
Som en älskare av öppen standard och Apple-fanboy måste jag erkänna att jag verkligen skulle vilja tacka Apple för att de inte satte Flash på iPad och iPod, detta startade verkligen en rörelse som omfattar öppna tekniker som HTML5, CSS3 och JavaScript.
Som byråmedarbetare måste jag säga att detta är en riktigt dålig situation för våra kunder.
De flesta av dem måste betala två gånger för en enkel annons eller kampanj som de lanserar för att ha interaktivt innehåll som körs i gamla IE7 eller IE8 via Flash och i moderna webbläsare samt iDevices via HTML5.
Att fylla i de gamla webbläsarens funktioner har sina gränser, mestadels namngiven prestanda. Så finns det ingen möjlighet att köra Flash på dessa Flashless iDevices?
Naturligtvis finns det en, och naturligtvis är den inbyggd i JavaScript.
En historia: År 2010 släppte Tobias Schneider ett litet bibliotek som heter Gordon
vilket gjorde att SWF-filer kunde köras direkt i webbläsaren. Detta fungerade ganska bra för små Flash-filer som annonser som bara använde funktioner upp till Flash version 2, men högre funktionalitet inkluderades inte alls.
När Tobias gick med i ueberJS-företaget UXEBU kom de på en ny idé.
Och så föddes Bikeshed. Bikeshed själv är ett slags JavaScript-animeringsramverk, men är också ett JavaScript till Flash för allt du vill att det ska vara kompilator (det är adapterbaserat, så du kan skriva adaptrar för vad du vill, även om standardbeteendet är att sammanställa Flash till JavaScript) . Den är kompatibel med Flash 10 och ActionScript 3. Ta en titt på dess webbsida för att lära dig mer om dess många funktioner förutom kompilatorn.
06. Skrivappar för din smartphone
Att skriva inbyggda applikationer för mobiltelefonmiljöer är en stenig väg. Det börjar med beslutet vilken plattform du vill stödja. Bör din applikation köras på en iPhone och iPad, en Android-driven mobil enhet, Windows Mobile, Blackberry-enheter, webOS-baserad pla ... och så vidare.
Var och en av dessa plattformar har sina egna API: er och använder mestadels olika programmeringsspråk.
Om du har överlevt webbläsarkriget, låt mig berätta att det här är ett sätt som är svårare för att komma in. Det är nästan omöjligt för en utvecklare att bygga en applikation för alla dessa plattformar i tid och budget.
Så vad ska man göra? Anställa fler utvecklare? Ladda mer för appar? Eller hitta ett bättre sätt att se till att din kodbas körs på alla enheter? Som de flesta av er skulle jag föredra det sista tillvägagångssättet.
Men i vad ska dessa appar byggas? Vad har alla dessa plattformar gemensamt? Du kanske vet svaret, det är en webbläsare och därför en JavaScript-motor.
Det är tanken bakom Apache Cordova, bättre känd under sitt tidigare namn PhoneGap.
Cordova är ett JavaScript-ramverk som sammanfattar API: erna för varje mobilmiljö och exponerar ett snyggt JavaScript-API för att kontrollera dem alla. Detta gör att du kan upprätthålla en enda kodbas som du sedan bygger och distribuerar på olika mobila enheter.
Kolla in resurserna här för att ta reda på hur du använder Cordova för att bygga kick-ass-mobilappar som du bygger en gång och kommer att köras överallt.
07. Köra Ruby och Python i din webbläsare
Mozilla, företaget bakom den berömda Firefox-webbläsaren, använder många nördar, det är säkert. En av dem är Alon Zakai, ingenjör vid Mozilla Research Team, som byggde ett freaky verktyg som heter Emscripten.
Med Emscripten kan du ta LLVM-bitkod - som kan genereras från C / C ++ -baserade bibliotek, till JavaScript. Det gör det genom att kompilera biblioteken till bitkod och sedan ta bitkoden och förvandla den till JavaScript. Snyggt, men vad kan jag faktiskt göra med det här, kan du fråga dig själv?
Jag har en motfråga till dig: har du någonsin hört frasen "Att använda CoffeeScript och prototyp är det närmaste du kan komma att köra Ruby i webbläsaren"? Nej? Oroa dig inte, för det här är inte sant längre.
Med Emscripten kan du helt enkelt ta Ruby-källorna, förvandla dem till JavaScript och voilà, ha den riktiga Ruby igång i din webbläsare! Men detta gäller inte bara Ruby, till exempel Python var också emscriptened.
Eller kolla in webbläsaren h.264 avkodare Broadway. Det är faktiskt ett emscriptened C ++ - bibliotek!
Gå till repl.it för att se några programmeringsspråk (inklusive Ruby och Python) som körs i din webbläsare!
08. Skriv OS-oberoende skrivbordsprogram
Vi pratade om att rikta in oss på flera mobila plattformar med hjälp av Apache Cordova tidigare. Det är inte förvånande att JavaScript inte bara kan användas för att rikta in sig på mobila plattformar, vår gamla vän, stationära datorer kan också hanteras.
De första lösningarna kom från killarna i Appcelerator med Titanium Desktop Suite och från Adobe den allmänt använda Air-plattformen.
Men som öppen källkod älskare som vi alla är, en mer öppen och Node.js-baserad teknik är vad vi letar efter. Möt app.js! app.js är en öppen webbteknik och Node.js-baserad desktop-programbyggare, som gör att vi kan skriva riktiga skrivbordsprogram med filsystemåtkomst, fönsterkontroller och mer. Vi kan lita på de stabila plattforms-API: erna för Node och bygga vårt programvarugränssnitt med HTML och CSS. Precis som de hetaste nya sakerna på den här listan här.
app.js är ett ganska ungt projekt och stöder därför bara Windows och Linux nu, men enligt e-postlistan är Mac-support på väg.
09. Köra en webbserver
Numera chockar du ingen när du säger till dem att din webbplats betjänas av en JavaScript-baserad webbserver. Om du tänker tillbaka för två eller tre år sedan och berättade för webbutvecklare exakt samma, skulle de förmodligen ha skrattat åt dig eller ännu värre.
Men med Node.js otroliga framgång är det lyckligtvis långt ifrån nu. Inte bara överraskar det inte människor längre, på grund av dess asynkrona natur är Node.js en underbar typ i prestanda, särskilt när det gäller att möta problemet med många parallella anslutningar. Inte bara dess prestanda är en explosion, den verkligt enkla API lockar också många utvecklare. Låt oss kolla in "Hello World" -exemplet från Node-världen, det är inte bara ett tryck "Hello World" på skärmexemplet, det är en http-webbserver!
var http = kräver (’http’);
http.createServer (funktion (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hello World n');
}). lyssna (1337, ’127.0.0.1’);
Om du inte är bortblåst av denna enkelhet kan jag inte heller hjälpa dig.
En av de bästa delarna av Node-popularitet (eller hype) är att stora företag som Microsoft faktiskt stöder det, dvs i sina Azure Cloud Services!
10. Webscraping och skärmdumpning
Så sist men inte minst, låt oss ta en titt på ett projekt som jag personligen älskar att låta mig köra mina QUnit-tester utan huvud på kommandoraden. PhantomJS är en headless WebKit-baserad webbläsare med en snygg JavaScript (eller CoffeScript) -baserad API.
Men testning av JavaScript och DOM är inte det enda användningsfallet för Phantom. Vad som verkligen fascinerar mig är dess möjligheter att skrapa webbplatser och låta dig ta skärmdumpar av det!
Ja, du läser rätt, med Phantom kan du skicka webbsidor i olika grafiska format och det är naturligtvis lika enkelt som att stjäla sötsaker från en bebis.
Låt oss titta på ett manus som exakt gör detta:
var sida = ny webbsida ();
page.open (’http://google.com’, funktion (status) {
page.render (’google.png’);
phantom.exit ();
});
Det är allt du behöver för att skapa en skärmdump och eftersom den är JavaScript-baserad kan du också använda jQuery och manipulera sidinnehållet innan du skärmdumpar det!
Vänta! Det finns mer...
Så jag hoppas att du är lika förvånad som jag, när jag upptäckte alla dessa verktyg. Denna artikel skrapade bara på ytan av vad som är möjligt med JavaScript idag. Det finns så mycket mer som IDE: er helt skrivna i JS Cloud9 eller saker med hög säkerhet gjort med det (Ditt kreditkort har gjorts med JavaScript).
Jag hoppas att du känner dig inspirerad, tar dig lite tid och leker med några av de projekt som nämns här, eller ännu bättre tar några av dessa verktyg och bygger nya saker runt dem. Det mesta av detta här är öppen källkod och det finns utvecklare där ute som letar efter dig för att hjälpa dem att förbättra sitt arbete, även om det bara är genom att använda verktygen, upptäcka fel och rapportera dem.
