Indhold
- 01. Det er tid til et hangout
- 02. $ ('lys'). FadeIn ();
- 03. Dine hænder er lavet til browseren
- 04. 3D-spil styret med din gamepad
- 05. Kører Flash på din iPad
- 06. Skrivning af apps til din smartphone
- 07. Kørsel af Ruby og Python i din browser
- 08. Skrivning af OS-uafhængige desktop-programmer
- 09. Kørsel af en webserver
- 10. Webskrabning og skærmbilleder
- Vente! Der er mere ...
JavaScript er gået langt siden dets fødsel i 1995. En hård vej helt sikkert, fuld af misforståelse, misbrug og uvidenhed. Men tiderne har ændret sig, siden JavaScript har været mere og mere opmærksom siden de sidste fem år. Med mere opmærksomhed bruger flere udviklere faktisk JavaScript, bruger det til mange forskellige formål og nyder dets skønhed. Klassisk "Ugly Duckling" -historie, hvis du spørger mig.
I den følgende artikel vil vi finde 10 brugssager til JavaScript, der adskiller sig fra de almindelige "i browser", som du er vant til.
01. Det er tid til et hangout
Kan du huske 80'ernes vision om Facetime-lignende videokommunikation?
Det tog kun 20 år, før dette er gået mainstream på grund af næsten overalt tilgængeligt bredbåndsinternet og den tunge brug af lidt software kaldet Skype.
Med kapaciteterne i Adobes Flash og Googles forsøg på at opbygge et socialt netværk har vi allerede kapaciteterne til videokommunikation i vores browser. Ville det ikke være sejt at have disse evner uden at bruge en tredjeparts plug-in som Flash?
Heldigvis troede browserleverandørerne det samme og implementerede "getUserMedia" API i deres software. Dette var et første skridt for at få adgang til enheder som kameraer eller mikrofoner direkte fra din browser.
Ved hjælp af Node.js som server bag på en sådan applikation er det utroligt nemt at transportere videosignalet over luften til en eller flere klienter. Desværre er det kun Chrome og Opera, der skriver API'en, der understøtter API'et, men andre indhenter hurtigt.
Den renere tilgang til en tovejskommunikation er en eneste ting i Chrome i øjeblikket, kaldet WebRTC. På grund af WebRTC er klienter i stand til at åbne peer-to-peer-kommunikationskanaler og direkte forbinde klient med klient.
For sjovs skyld skal du tjekke Sindre Sorhus 'implementering af Photo Booth udført i 121 byte!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
funktion successCallback (stream) {
video.src = stream;
}
funktionsfejlTilbage (fejl) {
console.log (fejl);
}
02. $ ('lys'). FadeIn ();
Arduino-mikrocontrollerplatformen er et eksempel på en JavaScript-brugssag, "out of the box". For dem af jer, der ikke er bekendt med Arduino-platformen, her er et superberømt citat fra dets websted:
"Arduino er en open source-elektronik-prototypeplatform baseret på fleksibel, brugervenlig hardware og software. Den er beregnet til kunstnere, designere, hobbyfolk og alle, der er interesserede i at skabe interaktive objekter eller miljøer."
Arduino selv understøtter kun kode skrevet i C, hvilket stadig ikke er noget stort. Med et par linjer C (udover at andre har gjort dette arbejde for dig), kan Arduino modtage kommandoer via sin USB-port via den serielle portprotokol.
Men hvordan kan du få adgang til den serielle port via JavaScript? Klart ikke fra browseren.
Node.js til undsætning!
På grund af samfundsadvokatens indsats Chris Williams har vi et Node-seriel portbibliotek, hvor vi kan sende data over den gamle SP-protokol. Dette var det indledende gennembrud, baseret på biblioteket kom andre mennesker med en mere abstrakt tilgang til Arduinos muligheder. For eksempel node-arduino- og duino-bibliotekerne.
Det hotteste og sejeste bibliotek rundt om blokken til JS-drevet Arduino-programmering er nu jonny-five. Tjek Bocoups blog for noget hot shit, de har gjort med Arduino-platformen og masser af plug-ins. Også JSConf-videoen fra Nicolai Onken og Jörn Zaefferer kan give dig et spin på, hvad der er muligt i dag med lidt kode.
03. Dine hænder er lavet til browseren
Minority Report's fremtidige vision (den, hvor de styrer computere med deres hænder, ikke de grimme biler) kommer tættere hver dag. Et kæmpe skridt i denne retning var Microsofts controller-mindre forsøg på at spille, Kinect. Fantastisk gameplay tror du måske, men hvad har dette at gøre med JavaScript ?!
Med Microsofts Kinect SDK-udgivelse krydsede en flok mennesker broen i browserbrug til Kinect. Først og fremmest de fyre fra ChildNodes, der har bygget et komplet fungerende kinect.js-bibliotek, der muliggør brug af Microsofts Kinect i din browser.
Jeg kan varmt anbefale at tjekke deres demoer og videoer, det er en blast. En væsentlig ulempe ved kinect.js-biblioteket er dog, at der skal være et WebSocket-serverprogram, der kører bag på klienten (det er faktisk Kinect -> C # -> JS-lim).
Et par studerende med MIT-berømmelse arbejder på en løsning til at nedbryde denne mur, kaldet DepthJS,
et browser-plugin, der muliggør Kinect-brug til Chrome og Safari, selv til websteder, der ikke er optimeret til en Kinect-baseret brug i nogen form. DepthJS er i øjeblikket i et tidligt udviklingsstadium, men absolut værd at holde styr på.
04. 3D-spil styret med din gamepad
Har du nogensinde prøvet at spille et browser-spil, der ikke er Flash i dag? De grafiske muligheder er fantastiske, især når du ser spilkloner som Quake.
Men når du spiller disse ting, er du altid bundet til dit tastatur og den (for det meste) klodset mus. Dette er en stor ulempe, især for actionspil, det holder dem virkelig tilbage fra browseren.
Ville det ikke være sejt, hvis du bare kunne tilslutte din Xbox-controller til din pc og begynde at spille dit yndlingsbrowserspil? Dette er ikke en fremtidig vision længere, hils på Gamepad API!
Hvis du har en gamepad omkring dit skrivebord, skal du tilslutte den lige nu og nyde nogle spil, der allerede bruger Gamepad API. Programmering af inputkontrollerne er også et stykke kage, tjek dette kodestykke eller endnu bedre, kør det selv:
div id = "gamepads"> / div>
script>
funktion gamepadConnected (begivenhed) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Hvis du gerne vil vide mere om browsers 3D-funktioner, skal du tjekke Three.js og Jens Arps 'open source 3D-simulatormotor Ascent bygget oven på den. Mark Hammil pas på, vi har muligvis brug for dig til endnu en Wing Commander-efterfølger!
05. Kører Flash på din iPad
Som en elsker af åben standard og Apple-fanboy må jeg indrømme, at jeg virkelig vil takke Apple for ikke at sætte Flash på iPad og iPod, dette startede virkelig en bevægelse med at omfavne åbne teknologier som HTML5, CSS3 og JavaScript.
Som agentur skal jeg sige, at dette er en virkelig dårlig situation for vores kunder.
De fleste af dem skal betale to gange for en simpel annonce eller kampagne, som de lancerer for at have interaktivt indhold, der kører i gamle IE7 eller IE8 via Flash og i moderne browsere samt iDevices via HTML5.
Polyfilling af de gamle browsers funktioner har sine grænser, mest navngivet ydeevne. Så er der ikke en mulighed for at køre Flash på disse Flashless iDevices?
Selvfølgelig er der en, og selvfølgelig er den indbygget i JavaScript.
Et stykke historie: I 2010 udgav Tobias Schneider et lille bibliotek ved navn Gordon
som tillod SWF-filer at køre direkte i browseren. Dette fungerede temmelig godt for små Flash-filer som annoncer, der kun brugte funktioner op til Flash-version 2, men funktionalitet på højere niveau var slet ikke inkluderet.
Da Tobias sluttede sig til ueberJS-firmaet UXEBU, kom de op med en ny idé.
Og så blev Bikeshed født. Bikeshed i sig selv er en slags JavaScript-animationsramme, men er også en JavaScript til Flash til alt, hvad du vil have den til at være kompilator (den er adapterbaseret, så du kan skrive adaptere til alt hvad du vil, selvom standardadfærden er at kompilere Flash til JavaScript) . Det er kompatibelt med Flash 10 og ActionScript 3. Se på websiden for at lære mere om dens mange funktioner udover compileren.
06. Skrivning af apps til din smartphone
At skrive native applikationer til mobiltelefonmiljøer er en stenet vej. Det starter med beslutningen, hvilken platform du vil støtte. Skulle din applikation køre på en iPhone og iPad, en Android-drevet mobilenhed, Windows Mobile, Blackberry-enheder, webOS-baseret pla ... og så videre.
Hver af disse platforme har sine egne API'er og bruger for det meste forskellige programmeringssprog.
Hvis du har overlevet browser-krigene, så lad mig fortælle dig, at dette er en måde, der er sværere at kæmpe for at komme ind på. Det er næsten umuligt for en udvikler at oprette en applikation til alle disse platforme i tid og budget.
Så hvad skal jeg gøre? Ansæt flere udviklere? Oplad mere for apps? Eller find en bedre tilgang til at sikre, at din kodebase kører på alle enheder? Som de fleste af jer foretrækker jeg den sidste tilgang.
Men i hvad skal disse apps bygges? Hvad har alle disse platforme til fælles? Du ved muligvis svaret, det er en webbrowser og derfor en JavaScript-motor.
Det er ideen bag Apache Cordova, bedre kendt under sit tidligere navn PhoneGap.
Cordova er en JavaScript-ramme, der opsummerer API'erne for hvert mobilmiljø og udsætter en pæn JavaScript-API til at kontrollere dem alle. Dette giver dig mulighed for at opretholde en enkelt kodebase, som du derefter bygger og implementerer på forskellige mobile enheder.
Tjek ressourcerne her for at finde ud af, hvordan du bruger Cordova til at opbygge kick ass mobile apps, som du bygger en gang og vil køre overalt.
07. Kørsel af Ruby og Python i din browser
Mozilla, firmaet bag den berømte Firefox-browser, beskæftiger mange nørder, det er helt sikkert. En af dem er Alon Zakai, en ingeniør ved Mozilla Research Team, der byggede et freaky værktøj kaldet Emscripten.
Emscripten giver dig mulighed for at tage LLVM-bitkode - som kan genereres fra C / C ++ - baserede biblioteker, til JavaScript. Det gør det ved at kompilere bibliotekerne i bitkode og derefter tage bitkoden og omdanne den til JavaScript. Pænt, men hvad kan jeg faktisk gøre med dette, kan du spørge dig selv?
Jeg har et kontraspørgsmål til dig: Har du nogensinde hørt sætningen "Brug af CoffeeScript og Prototype er det tætteste du kan komme med at køre Ruby i browseren"? Ingen? Bare rolig, for dette er ikke sandt længere.
Med Emscripten kan du simpelthen tage Ruby-kilderne, omdanne dem til JavaScript og voilà, få den rigtige Ruby til at køre i din browser! Men dette gælder ikke kun for Ruby, for eksempel blev Python også emscriptened.
Eller tjek i browser h.264-dekoder Broadway. Det er faktisk et emscriptened C ++ - bibliotek!
Gå til repl.it for at se et par programmeringssprog (inklusive Ruby og Python), der kører i din browser!
08. Skrivning af OS-uafhængige desktop-programmer
Vi talte om at målrette mod flere mobile platforme ved hjælp af Apache Cordova før. Ikke overraskende kan JavaScript ikke kun bruges til at målrette mod mobile platforme, vores gamle ven, desktopcomputeren kan også tackles.
De første løsninger kom fra fyrene fra Appcelerator med Titanium Desktop Suite og fra Adobe den meget anvendte Air-platform.
Men som open source-elskere, som vi alle er, er en mere åben og Node.js-baseret teknologi det, vi leder efter. Mød app.js! app.js er en åben webteknologi og Node.js-baseret desktop-programbygger, der giver os mulighed for at skrive ægte desktop-programmer med filsystemadgang, vinduskontroller og mere. Vi kan stole på de stabile cross-platform API'er i Node og opbygge vores software UI med HTML og CSS. Ligesom de mest hotte nye ting på denne liste her.
app.js er et ret ungt projekt og understøtter derfor kun Windows og Linux nu, men ifølge mailinglisten er Mac-support på vej.
09. Kørsel af en webserver
I dag chokerer du ingen, når du fortæller dem, at dit websted serveres af en JavaScript-baseret webserver. Hvis du tænker tilbage for to eller tre år siden og fortalte webudviklere nøjagtigt det samme, ville de sandsynligvis have grinet af dig eller endnu værre.
Men med Node.js utrolige succes er dette heldigvis langt væk fra nu. Ikke alene overrasker det ikke folk længere på grund af sin asynkrone natur er Node.js en vidunderlig slags ydeevne, især når det kommer til at stå over for problemet med mange parallelle forbindelser. Ikke kun dens ydeevne er en eksplosion, den virkelig enkle API tiltrækker også mange udviklere. Lad os tjekke "Hello World" -eksemplet fra Node-verdenen, det er ikke kun et print "Hello World" på skærmeksemplet, det er en http-webserver!
var http = kræve (’http’);
http.createServer (funktion (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hello World n');
}). lyt (1337, '127.0.0.1');
Hvis du ikke sprænges væk af denne enkelhed, kan jeg heller ikke hjælpe dig.
En af de bedste dele af Node-popularitet (eller hype) er, at store virksomheder som Microsoft faktisk understøtter det, dvs. i deres Azure Cloud Services!
10. Webskrabning og skærmbilleder
Så sidst men ikke mindst, lad os se på et projekt, som jeg personligt elsker at lade mig køre mine QUnit-tests hovedløs på kommandolinjen. PhantomJS er en headless WebKit-baseret browser med en pæn JavaScript (eller CoffeScript) -baseret API.
Men test af din JavaScript og DOM er ikke det eneste anvendelige tilfælde for Phantom. Hvad der virkelig fascinerer mig er dens evner til at skrabe websteder og lade dig tage skærmbilleder af det!
Ja, du læser rigtigt, med Phantom kan du sende websider i forskellige grafiske formater, og det er selvfølgelig lige så let som at stjæle slik fra en baby.
Lad os se på et script, der præcist gør dette:
var side = ny webside ();
page.open ('http://google.com', funktion (status) {
page.render (’google.png’);
phantom.exit ();
});
Det er alt hvad du behøver for at lave et skærmbillede, og fordi det er JavaScript-baseret, kan du også bruge jQuery og manipulere sideindholdet, før du skærmbilleder det!
Vente! Der er mere ...
Så jeg håber, du er lige så forbløffet, som jeg var, da jeg opdagede hvert af disse værktøjer. Denne artikel ridsede bare overfladen af, hvad der er muligt med JavaScript i dag. Der er så meget mere som IDE'er, der er helt skrevet i JS Cloud9 eller ting med høj sikkerhed gjort med det (dit kreditkort er lavet med JavaScript).
Jeg håber, du føler dig inspireret, tager dig tid og leger med nogle af de projekter, der er nævnt her, eller endda bedre tager nogle af disse værktøjer og bygger nye ting omkring dem. Det meste af dette her er open source, og der er udviklere derude, der leder efter dig til at hjælpe dem med at forbedre deres arbejde, selvom det kun er ved at bruge værktøjerne, opdage fejl og rapportere dem.
