Inhoud
- 01. Het is tijd voor een ontmoetingsplaats
- 02. $ (’licht’). FadeIn ();
- 03. Je handen zijn gemaakt voor de browser
- 04. 3D-games bestuurd met je gamepad
- 05. Flash draaien op je iPad
- 06. Apps schrijven voor uw smartphone
- 07. Ruby en Python draaien in je browser
- 08. Het schrijven van OS-onafhankelijke desktopprogramma's
- 09. Het runnen van een webserver
- 10. Webscraping en screenshots
- Wacht! Er is meer...
JavaScript heeft een lange weg afgelegd sinds de geboorte in 1995. Zeker een moeilijke weg, vol misverstanden, misbruik en onwetendheid. Maar de tijden zijn veranderd, sinds de afgelopen vijf jaar heeft JavaScript steeds meer aandacht gekregen. Met meer aandacht gebruiken meer ontwikkelaars JavaScript, gebruiken het voor veel verschillende doeleinden en genieten ze van de schoonheid ervan. Klassiek "Ugly Duckling" -verhaal, als je het mij vraagt.
In het volgende artikel zullen we 10 gebruiksscenario's voor JavaScript ontdekken die verschillen van de gebruikelijke "in browser" -toepassingen die u gewend bent.
01. Het is tijd voor een ontmoetingsplaats
Herinner je je de visie uit de jaren 80 van FaceTime-achtige videocommunicatie nog?
Het duurde slechts 20 jaar voordat dit mainstream werd vanwege bijna overal beschikbaar breedbandinternet en het intensieve gebruik van een beetje software genaamd Skype.
Met de mogelijkheden van Adobe's Flash en de poging van Google om een sociaal netwerk op te bouwen, hebben we al de mogelijkheden van videocommunicatie in onze browser. Zou het niet cool zijn om over die mogelijkheden te beschikken zonder een plug-in van derden zoals Flash te gebruiken?
Gelukkig dachten de browserleveranciers hetzelfde en implementeerden ze de "getUserMedia" API in hun software. Dit was een eerste stap om rechtstreeks vanuit uw browser toegang te krijgen tot apparaten zoals camera's of microfoons.
Door Node.js als server achter in een dergelijke applicatie te gebruiken, is het verbazingwekkend eenvoudig om het videosignaal via de ether naar een of meer clients te transporteren. Helaas ondersteunen alleen Chrome en Opera de API op het moment dat dit wordt geschreven, maar anderen zullen het snel inhalen.
De schonere benadering voor tweerichtingscommunicatie is momenteel alleen voor Chrome, genaamd WebRTC. Dankzij WebRTC kunnen clients peer-to-peer-communicatiekanalen openen, waardoor de klant rechtstreeks met de klant wordt verbonden.
Bekijk voor de lol de implementatie van Sindre Sorhus 'Photo Booth in 121 bytes!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
functie successCallback (stream) {
video.src = stroom;
}
functie errorCallback (fout) {
console.log (fout);
}
02. $ (’licht’). FadeIn ();
Het Arduino-microcontrollerplatform is een A-voorbeeld voor een "out-of-the-box" JavaScript-use case. Voor degenen onder u die niet bekend zijn met het Arduino-platform: hier is een superberoemd citaat van de website:
"Arduino is een open-source prototypeplatform voor elektronica op basis van flexibele, gebruiksvriendelijke hardware en software. Het is bedoeld voor kunstenaars, ontwerpers, hobbyisten en iedereen die geïnteresseerd is in het maken van interactieve objecten of omgevingen."
De Arduino zelf ondersteunt alleen code geschreven in C, wat nog steeds geen probleem is. Met een paar regels C (naast dat anderen dit werk voor je hebben gedaan), kan de Arduino opdrachten ontvangen via zijn USB-poort via het seriële poortprotocol.
Maar hoe krijg je via JavaScript toegang tot de seriële poort? Duidelijk niet vanuit de browser.
Node.js schiet te hulp!
Dankzij de inspanningen van de voorstander van de gemeenschap, Chris Williams, hebben we een Node-seriële poortbibliotheek, waar we gegevens via het oude SP-protocol kunnen verzenden. Dit was de eerste doorbraak, op basis van de bibliotheek kwamen andere mensen met een meer abstracte benadering van de mogelijkheden van Arduino. Bijvoorbeeld de node-arduino en duino-bibliotheken.
De heetste en coolste bibliotheek rond het blok voor JS-gestuurde Arduino-programmering is nu jonny-five. Bekijk de blog van Bocoup voor wat hete dingen die ze hebben gedaan met het Arduino-platform en tal van plug-ins. Ook de JSConf-video van Nicolai Onken en Jörn Zaefferer zou je een idee kunnen geven van wat er vandaag mogelijk is met weinig code.
03. Je handen zijn gemaakt voor de browser
De toekomstvisie van Minority Report (die waarin ze computers met hun handen besturen, niet de lelijke auto's) komt elke dag dichterbij. Een enorme stap in deze richting was Kinect, de poging tot spelen zonder controller van Microsoft. Geweldige gameplay zou je kunnen denken, maar wat heeft dit met JavaScript te maken ?!
Met de Kinect SDK-release van Microsoft staken een aantal mensen de brug over in browsergebruik voor de Kinect. Allereerst de jongens van ChildNodes die een volledig werkende kinect.js-bibliotheek hebben gebouwd, die het gebruik van Microsoft's Kinect in uw browser mogelijk maakt.
Ik raad ten zeerste aan om hun demo's en video's te bekijken, het is geweldig. Een belangrijk nadeel van de kinect.js-bibliotheek is echter dat er een WebSocket-serverprogramma achter in de client moet draaien (dat is eigenlijk de Kinect -> C # -> JS-lijm).
Een paar MIT-studenten werken aan een oplossing om deze muur af te breken, genaamd DepthJS,
een in-browser plug-in die het gebruik van Kinect voor Chrome en Safari mogelijk maakt, zelfs voor sites die niet zijn geoptimaliseerd voor gebruik op basis van Kinect in welke vorm dan ook. DepthJS bevindt zich momenteel in een vroege ontwikkelingsfase, maar zeker de moeite waard om bij te houden.
04. 3D-games bestuurd met je gamepad
Heb je tegenwoordig ooit geprobeerd een browsergame zonder Flash te spelen? De grafische mogelijkheden zijn verbluffend, vooral als je gameklonen zoals Quake ziet.
Maar als je dit spul speelt, ben je altijd gebonden aan je toetsenbord en de (meestal) onhandige muis. Dit is een groot nadeel, met name voor actiegames, het houdt ze echt tegen van de browser.
Zou het niet cool zijn als je je Xbox-controller gewoon op je pc zou kunnen aansluiten en je favoriete browsergame zou kunnen spelen? Dit is geen toekomstvisie meer, zeg hallo tegen de Gamepad API!
Als je een gamepad rond je bureau hebt, sluit hem dan nu aan en geniet van een aantal games die al gebruikmaken van de Gamepad-API. Het programmeren van de invoerbedieningen is ook een fluitje van een cent, bekijk dit codefragment of nog beter, voer het zelf uit:
div id = "gamepads"> / div>
script>
functie gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad verbonden (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Als je meer wilt weten over de 3D-mogelijkheden van browsers, ga dan naar de open source 3D-simulator-engine Ascent van Three.js en Jens Arps die er bovenop is gebouwd. Mark Hammil, kijk uit, we hebben je misschien nodig voor nog een Wing Commander-vervolg!
05. Flash draaien op je iPad
Als liefhebber van open standaarden en Apple-fanboy moet ik toegeven dat ik Apple heel graag wil bedanken voor het feit dat hij Flash niet op de iPad en iPod heeft gezet. Dit bracht echt een beweging op gang om open technologieën zoals HTML5, CSS3 en JavaScript te omarmen.
Als uitzendkracht moet ik zeggen dat dit een heel slechte situatie is voor onze klanten.
De meesten van hen moeten twee keer betalen voor een eenvoudige advertentie of campagne die ze lanceren om interactieve inhoud te laten draaien in het oude IE7 of IE8 via Flash en in moderne browsers en in iDevices via HTML5.
Polyfilling van de functies van de oude browser heeft zijn grenzen, meestal prestatie genoemd. Is het niet mogelijk om Flash op die Flashless iDevices uit te voeren?
Natuurlijk is er een, en die is natuurlijk ingebouwd in JavaScript.
Een stukje geschiedenis: in 2010 bracht Tobias Schneider een kleine bibliotheek uit met de naam Gordon
waardoor SWF-bestanden rechtstreeks in de browser konden worden uitgevoerd. Dit werkte redelijk goed voor kleine Flash-bestanden zoals advertenties die alleen functionaliteiten gebruikten tot Flash versie 2, maar functionaliteit op een hoger niveau was helemaal niet inbegrepen.
Toen Tobias zich aansloot bij het ueberJS-bedrijf UXEBU, kwamen ze met een nieuw idee.
En zo werd Bikeshed geboren. Bikeshed zelf is een soort JavaScript-animatieframework, maar is ook een JavaScript naar Flash voor alles wat u wilt dat het compileert (het is op een adapter gebaseerd, dus u kunt adapters schrijven voor alles wat u maar wilt, hoewel het standaardgedrag is om Flash naar JavaScript te compileren) . Het is compatibel met Flash 10 en ActionScript 3. Bekijk de webpagina voor meer informatie over de vele functies naast de compiler.
06. Apps schrijven voor uw smartphone
Het schrijven van native applicaties voor mobiele telefoonomgevingen is een rotsachtige weg. Het begint met de beslissing welk platform u wilt ondersteunen. Mocht uw applicatie draaien op een iPhone en iPad, een Android-aangedreven mobiel apparaat, Windows Mobile, Blackberry-apparaten, webOS-gebaseerde pla ... enzovoort.
Elk van deze platforms heeft zijn eigen API's en gebruikt meestal verschillende programmeertalen.
Als je de browseroorlogen hebt overleefd, wil ik je zeggen dat dit een veel moeilijkere strijd is om binnen te komen. Het is bijna onmogelijk voor een ontwikkelaar om op tijd en binnen het budget een applicatie voor al deze platforms te bouwen.
Dus wat te doen? Meer ontwikkelaars inhuren? Meer in rekening brengen voor apps? Of vindt u een betere aanpak om ervoor te zorgen dat uw codebasis op elk apparaat werkt? Als de meesten van jullie zou ik de voorkeur geven aan de laatste benadering.
Maar waarin moeten deze apps worden gebouwd? Wat hebben al deze platforms gemeen? Misschien weet u het antwoord: het is een webbrowser en daarom een JavaScript-engine.
Dat is het idee achter Apache Cordova, beter bekend onder de vroegere naam PhoneGap.
Cordova is een JavaScript-framework dat de API's van elke mobiele omgeving abstraheert en een handige JavaScript-API beschikbaar stelt om ze allemaal te beheren. Hierdoor kunt u één codebasis onderhouden, die u vervolgens bouwt en implementeert op verschillende mobiele apparaten.
Bekijk de bronnen hier om erachter te komen hoe je Cordova kunt gebruiken om geweldige mobiele apps te bouwen die je een keer bouwt en overal kan draaien.
07. Ruby en Python draaien in je browser
Mozilla, het bedrijf achter de beroemde Firefox-browser, heeft veel nerds in dienst, dat is zeker. Een van hen is Alon Zakai, een ingenieur bij het Mozilla Research Team, dat een bizarre tool heeft gebouwd met de naam Emscripten.
Met Emscripten kunt u LLVM-bitcode - die kan worden gegenereerd vanuit op C / C ++ gebaseerde bibliotheken - naar JavaScript overbrengen. Het doet dit door de bibliotheken in bitcode te compileren en vervolgens die bitcode te nemen en deze om te zetten in JavaScript. Netjes, maar wat kan ik hier eigenlijk mee, vraagt u zich misschien af?
Ik heb een tegenvraag voor je: heb je ooit de zin gehoord "Het gebruik van CoffeeScript en Prototype komt het dichtst in de buurt van het draaien van Ruby in de browser"? Nee? Maakt u zich geen zorgen, want dit is niet meer waar.
Met Emscripten kun je gewoon de Ruby-bronnen nemen, ze omzetten in JavaScript en voilà, de echte Ruby in je browser laten draaien! Maar dit geldt niet alleen voor Ruby, Python werd bijvoorbeeld ook geëmscripteerd.
Of bekijk de in browser h.264 decoder Broadway. Dat is eigenlijk een emscriptened C ++ -bibliotheek!
Ga naar repl.it om een paar programmeertalen (inclusief Ruby en Python) in je browser te zien draaien!
08. Het schrijven van OS-onafhankelijke desktopprogramma's
We hadden het eerder over het targeten van meerdere mobiele platforms met de hulp van Apache Cordova. Het is niet verwonderlijk dat JavaScript niet alleen kan worden gebruikt om mobiele platforms te targeten, onze oude vriend de desktopcomputer kan ook worden aangepakt.
De eerste oplossingen kwamen van de jongens van Appcelerator met de Titanium Desktop Suite en van Adobe, het veelgebruikte Air-platform.
Maar als open source-liefhebbers die we allemaal zijn, is een meer open en op Node.js gebaseerde technologie wat we zoeken. Maak kennis met app.js! app.js is een open webtechnologie en op Node.js gebaseerde desktop programmabouwer, waarmee we echte desktopprogramma's kunnen schrijven met toegang tot het bestandssysteem, vensterbesturing en meer. We kunnen vertrouwen op de stabiele cross-platform API's van Node en onze software UI bouwen met HTML en CSS. Net als de meest opwindende nieuwe dingen op deze lijst hier.
app.js is een vrij jong project en ondersteunt daarom inmiddels alleen Windows en Linux, maar volgens de mailinglijst is Mac-ondersteuning onderweg.
09. Het runnen van een webserver
Tegenwoordig schrik je niemand meer als je ze vertelt dat je website wordt bediend door een op JavaScript gebaseerde webserver. Als je twee of drie jaar geleden terugdenkt en webontwikkelaars precies hetzelfde vertelde, hadden ze je waarschijnlijk uitgelachen of erger.
Maar met het ongelooflijke succes van Node.js is dit gelukkig nog ver weg van nu. Niet alleen verbaast het mensen niet meer, vanwege zijn asynchrone aard is Node.js een wonderkind in prestaties, vooral als het erop aankomt het probleem van veel parallelle verbindingen onder ogen te zien. Niet alleen de prestaties zijn geweldig, de werkelijk eenvoudige API trekt ook veel ontwikkelaars aan. Laten we eens kijken naar het "Hallo Wereld" -voorbeeld uit de Node-wereld, het is niet alleen een gedrukte "Hallo Wereld" op het schermvoorbeeld, het is een http-webserver!
var http = vereisen (’http’);
http.createServer (functie (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hallo wereld n’);
}). luister (1337, ’127.0.0.1’);
Als je niet weggeblazen wordt door deze eenvoud, dan kan ik je ook niet helpen.
Een van de beste aspecten van de populariteit (of hype) van Node is dat grote bedrijven zoals Microsoft het daadwerkelijk ondersteunen, dwz in hun Azure Cloud Services!
10. Webscraping en screenshots
Dus, last but not least, laten we eens kijken naar een project waar ik persoonlijk dol op ben omdat het me mijn QUnit-tests headless op de opdrachtregel liet uitvoeren. PhantomJS is een headless WebKit-gebaseerde browser met een nette op JavaScript (of CoffeScript) gebaseerde API.
Maar het testen van uw JavaScript en DOM is niet de enige use case voor Phantom. Wat me echt fascineert, zijn de mogelijkheden om websites te schrapen en je er screenshots van te laten maken!
Ja, je leest het goed, met Phantom kun je webpagina's in verschillende grafische formaten weergeven en het is natuurlijk net zo eenvoudig als snoepjes van een baby stelen.
Laten we eens kijken naar een script dat dit precies doet:
var page = nieuwe webpagina ();
page.open (’http://google.com’, functie (status) {
page.render (’google.png’);
phantom.exit ();
});
Dat is alles wat je nodig hebt om een screenshot te maken en omdat het op JavaScript is gebaseerd, kun je ook jQuery gebruiken en de pagina-inhoud manipuleren voordat je er een screenshot van maakt!
Wacht! Er is meer...
Dus ik hoop dat je net zo verbaasd bent als ik toen ik al deze tools ontdekte. Dit artikel heeft zojuist de oppervlakte bekrast van wat er tegenwoordig mogelijk is met JavaScript. Er is zoveel meer zoals IDE's die volledig zijn geschreven in JS Cloud9 of er worden high-security-dingen mee gedaan (uw creditcard is gemaakt met JavaScript).
Ik hoop dat je je geïnspireerd voelt, neem wat tijd en speel met enkele van de hier genoemde projecten, of nog beter, neem een aantal van deze tools en bouw er nieuwe dingen omheen. Het meeste hiervan is open source en er zijn ontwikkelaars die op zoek zijn naar jou om hen te helpen hun werk te verbeteren, al was het maar door de tools te gebruiken, bugs te ontdekken en ze te rapporteren.
