Inhalt
- 01. Es ist Zeit für einen Hangout
- 02. $ (’light’). FadeIn ();
- 03. Ihre Hände sind für den Browser gemacht
- 04. 3D-Spiele, die mit Ihrem Gamepad gesteuert werden
- 05. Flash auf Ihrem iPad ausführen
- 06. Apps für Ihr Smartphone schreiben
- 07. Ruby und Python in Ihrem Browser ausführen
- 08. Betriebssystemunabhängige Desktop-Programme schreiben
- 09. Ausführen eines Webservers
- 10. Webscraping und Screenshots
- Warten! Es gibt mehr...
JavaScript hat seit seiner Geburt im Jahr 1995 einen langen Weg zurückgelegt. Ein harter Weg, voller Missverständnisse, Missbrauch und Ignoranz. Aber die Zeiten haben sich geändert, seit JavaScript in den letzten fünf Jahren immer mehr Beachtung gefunden hat. Mit mehr Aufmerksamkeit verwenden immer mehr Entwickler JavaScript, verwenden es für viele verschiedene Zwecke und genießen seine Schönheit. Klassische "Ugly Duckling" -Geschichte, wenn Sie mich fragen.
Im folgenden Artikel werden 10 Anwendungsfälle für JavaScript beschrieben, die sich von den üblichen "im Browser" unterscheiden.
01. Es ist Zeit für einen Hangout
Erinnern Sie sich an die 80er-Jahre-Vision einer Facetime-ähnlichen Videokommunikation?
Es dauerte nur 20 Jahre, bis dies aufgrund des fast überall verfügbaren Breitband-Internets und der starken Nutzung einer kleinen Software namens Skype zum Mainstream wurde.
Mit den Funktionen von Adobe Flash und dem Versuch von Google, ein soziales Netzwerk aufzubauen, verfügen wir bereits über die Funktionen der Videokommunikation in unserem Browser. Wäre es nicht cool, diese Fähigkeiten zu haben, ohne ein Plug-In eines Drittanbieters wie Flash zu verwenden?
Glücklicherweise dachten die Browser-Anbieter dasselbe und implementierten die "getUserMedia" -API in ihre Software. Dies war ein erster Schritt, um direkt über Ihren Browser auf Geräte wie Kameras oder Mikrofone zuzugreifen.
Mit Node.js als Server auf der Rückseite einer solchen Anwendung ist es erstaunlich einfach, das Videosignal drahtlos zu einem oder mehreren Clients zu transportieren. Leider unterstützen zum Zeitpunkt des Schreibens nur Chrome und Opera die API, andere werden jedoch schnell aufholen.
Der sauberere Ansatz für eine bidirektionale Kommunikation ist derzeit nur in Chrome verfügbar und wird als WebRTC bezeichnet. Aufgrund von WebRTC können Clients Peer-to-Peer-Kommunikationskanäle öffnen und den Client direkt mit dem Client verbinden.
Schauen Sie sich zum Spaß die Photo Booth-Implementierung von Sindre Sorhus in 121 Bytes an!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia ("Video", successCallback, errorCallback);
Funktion successCallback (Stream) {
video.src = stream;
}
Funktion errorCallback (Fehler) {
console.log (Fehler);
}
02. $ (’light’). FadeIn ();
Die Arduino-Mikrocontroller-Plattform ist ein Beispiel der Klasse A für einen JavaScript-Anwendungsfall, der sofort einsatzbereit ist. Für diejenigen unter Ihnen, die mit der Arduino-Plattform nicht vertraut sind, ist hier ein super berühmtes Zitat von ihrer Website:
"Arduino ist eine Open-Source-Plattform für das Prototyping von Elektronik, die auf flexibler, benutzerfreundlicher Hardware und Software basiert. Sie richtet sich an Künstler, Designer, Bastler und alle, die an der Erstellung interaktiver Objekte oder Umgebungen interessiert sind."
Das Arduino selbst unterstützt nur in C geschriebenen Code, was immer noch keine große Sache ist. Mit ein paar Zeilen C (abgesehen davon, dass andere diese Arbeit für Sie erledigt haben) kann der Arduino Befehle über seinen USB-Anschluss über das Protokoll der seriellen Schnittstelle empfangen.
Aber wie können Sie über JavaScript auf die serielle Schnittstelle zugreifen? Ganz klar nicht aus dem Browser.
Node.js zur Rettung!
Aufgrund der Bemühungen von Community-Anwalt Chris Williams verfügen wir über eine serielle Node-Port-Bibliothek, über die wir Daten über das alte SP-Protokoll senden können. Dies war der erste Durchbruch, basierend auf der Bibliothek, die andere Leute mit einem abstrakteren Ansatz für Arduinos Fähigkeiten entwickelten. Zum Beispiel die Node-Arduino- und Duino-Bibliotheken.
Die derzeit heißeste und coolste Bibliothek für JS-gesteuerte Arduino-Programmierung ist jonny-five. Schauen Sie sich Bocoups Blog an, um zu erfahren, was sie mit der Arduino-Plattform und vielen Plug-Ins gemacht haben. Auch das JSConf-Video von Nicolai Onken und Jörn Zaefferer gibt Ihnen einen Einblick in das, was heute mit wenig Code möglich ist.
03. Ihre Hände sind für den Browser gemacht
Die Zukunftsvision von Minority Report (die Vision, Computer mit den Händen zu steuern, nicht die hässlichen Autos) kommt jeden Tag näher. Ein großer Schritt in diese Richtung war Kinect, der weniger spielversuchte Versuch des Microsoft-Controllers. Erstaunliches Gameplay, könnte man meinen, aber was hat das mit JavaScript zu tun?!
Mit der Kinect SDK-Version von Microsoft haben einige Leute die Brücke über die Verwendung von Browsern für Kinect überschritten. Zuallererst die Jungs von ChildNodes, die eine vollständig funktionierende kinect.js-Bibliothek erstellt haben, die die Verwendung von Microsoft Kinect in Ihrem Browser ermöglicht.
Ich kann nur empfehlen, sich die Demos und Videos anzusehen. Es ist ein Knaller. Ein Hauptnachteil der kinect.js-Bibliothek besteht jedoch darin, dass auf der Rückseite des Clients ein WebSocket-Serverprogramm ausgeführt werden muss (das ist eigentlich der Kinect -> C # -> JS-Kleber).
Einige Studenten des MIT arbeiten an einer Lösung, um diese Mauer niederzureißen. Sie heißt DepthJS.
Ein In-Browser-Plugin, das die Verwendung von Kinect für Chrome und Safari ermöglicht, auch für Websites, die in keiner Form für eine Kinect-basierte Verwendung optimiert sind. DepthJS befindet sich derzeit in einem frühen Entwicklungsstadium, ist es aber definitiv wert, den Überblick zu behalten.
04. 3D-Spiele, die mit Ihrem Gamepad gesteuert werden
Haben Sie jemals versucht, heutzutage ein Nicht-Flash-Browsergame zu spielen? Die Grafikfunktionen sind erstaunlich, besonders wenn Sie Spielklone wie Quake sehen.
Aber wenn Sie dieses Zeug spielen, sind Sie immer an Ihre Tastatur und die (meistens) klobige Maus gebunden. Dies ist ein großer Nachteil, insbesondere bei Actionspielen, der sie wirklich vom Browser abhält.
Wäre es nicht cool, wenn Sie einfach Ihren Xbox-Controller an Ihren PC anschließen und Ihr Lieblingsbrowserspiel spielen könnten? Dies ist keine Zukunftsvision mehr, begrüßen Sie die Gamepad-API!
Wenn Sie ein Gamepad um Ihren Schreibtisch haben, schließen Sie es sofort an und genießen Sie einige Spiele, die bereits die Gamepad-API verwenden. Das Programmieren der Eingabesteuerungen ist ebenfalls ein Kinderspiel. Schauen Sie sich dieses Code-Snippet an oder führen Sie es noch besser selbst aus:
div id = "gamepads"> / div>
Skript>
Funktion gamepadConnected (Ereignis) {
var gamepads = document.getElementById ("Gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad verbunden (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Wenn Sie mehr über die 3D-Funktionen von Browsern erfahren möchten, lesen Sie die Open-Source-3D-Simulator-Engine Ascent von Three.js und Jens Arps, die darauf aufbaut. Mark Hammil aufgepasst, wir brauchen dich vielleicht für eine weitere Fortsetzung von Wing Commander!
05. Flash auf Ihrem iPad ausführen
Als Liebhaber offener Standards und Apple-Fan muss ich zugeben, dass ich Apple wirklich dafür danken möchte, dass er Flash nicht auf iPad und iPod installiert hat. Dies hat wirklich dazu geführt, dass offene Technologien wie HTML5, CSS3 und JavaScript eingeführt wurden.
Als Agenturangestellter muss ich sagen, dass dies eine wirklich schlechte Situation für unsere Kunden ist.
Die meisten von ihnen müssen zweimal für eine einfache Anzeige oder Kampagne bezahlen, die sie starten, damit interaktive Inhalte in alten IE7 oder IE8 über Flash und in modernen Browsern sowie in iDevices über HTML5 ausgeführt werden.
Das Polyfilling der Funktionen der alten Browser hat seine Grenzen, meistens als Leistung bezeichnet. Gibt es also keine Möglichkeit, Flash auf diesen flashless iDevices auszuführen?
Natürlich gibt es eine, und natürlich ist sie in JavaScript integriert.
Ein Stück Geschichte: 2010 veröffentlichte Tobias Schneider eine kleine Bibliothek namens Gordon
Dadurch konnten SWF-Dateien direkt im Browser ausgeführt werden. Dies funktionierte ziemlich gut für kleine Flash-Dateien wie Anzeigen, die nur Funktionen bis zu Flash Version 2 verwendeten, aber Funktionen auf höherer Ebene waren überhaupt nicht enthalten.
Als Tobias zur ueberJS-Firma UXEBU kam, kamen sie auf eine neue Idee.
Und so wurde Bikeshed geboren. Bikeshed selbst ist eine Art JavaScript-Animationsframework, aber auch ein JavaScript für Flash für alles, was Sie als Compiler wünschen (es basiert auf Adaptern, sodass Sie Adapter für alles schreiben können, was Sie möchten, obwohl das Standardverhalten das Kompilieren von Flash für JavaScript ist). . Es ist kompatibel mit Flash 10 und ActionScript 3. Schauen Sie sich die Webseite an, um mehr über die zahlreichen Funktionen neben dem Compiler zu erfahren.
06. Apps für Ihr Smartphone schreiben
Das Schreiben nativer Anwendungen für Mobiltelefonumgebungen ist ein steiniger Weg. Es beginnt mit der Entscheidung, welche Plattform Sie unterstützen möchten. Sollte Ihre Anwendung auf einem iPhone und iPad, einem Android-basierten Mobilgerät, Windows Mobile, Blackberry-Geräten, webOS-basierten Geräten usw. ausgeführt werden.
Jede dieser Plattformen verfügt über eigene APIs und verwendet meist unterschiedliche Programmiersprachen.
Wenn Sie die Browserkriege überstanden haben, lassen Sie mich Ihnen sagen, dass dies ein viel schwierigerer Kampf ist. Für einen Entwickler ist es nahezu unmöglich, eine Anwendung für alle diese Plattformen in Bezug auf Zeit und Budget zu erstellen.
Was tun? Weitere Entwickler einstellen? Mehr für Apps verlangen? Oder einen besseren Ansatz finden, um sicherzustellen, dass Ihre Codebasis auf jedem Gerät ausgeführt wird? Als die meisten von Ihnen würde ich den letzten Ansatz bevorzugen.
Aber in was sollen diese Apps gebaut werden? Was haben all diese Plattformen gemeinsam? Möglicherweise kennen Sie die Antwort. Es handelt sich um einen Webbrowser und daher um eine JavaScript-Engine.
Das ist die Idee hinter Apache Cordova, besser bekannt unter dem früheren Namen PhoneGap.
Cordova ist ein JavaScript-Framework, das die APIs jeder mobilen Umgebung abstrahiert und eine übersichtliche JavaScript-API bereitstellt, um alle zu steuern. Auf diese Weise können Sie eine einzige Codebasis verwalten, die Sie dann auf verschiedenen Mobilgeräten erstellen und bereitstellen.
Schauen Sie sich die Ressourcen hier an, um herauszufinden, wie Sie mit Cordova mobile Apps erstellen können, die Sie einmal erstellt haben und die überall ausgeführt werden.
07. Ruby und Python in Ihrem Browser ausführen
Mozilla, das Unternehmen hinter dem berühmten Firefox-Browser, beschäftigt viele Geeks, das ist sicher. Einer von ihnen ist Alon Zakai, ein Ingenieur des Mozilla-Forschungsteams, der ein verrücktes Tool namens Emscripten gebaut hat.
Mit Emscripten können Sie LLVM-Bitcode - der aus C / C ++ - basierten Bibliotheken generiert werden kann - in JavaScript übertragen. Dazu werden die Bibliotheken in Bitcode kompiliert und dann dieser Bitcode in JavaScript umgewandelt. Ordentlich, aber was kann ich eigentlich damit machen, könnte man sich fragen?
Ich habe eine Gegenfrage an Sie: Haben Sie jemals den Satz "Die Verwendung von CoffeeScript und Prototype ist die beste Möglichkeit, Ruby im Browser auszuführen" gehört? Nein? Mach dir keine Sorgen, denn das stimmt nicht mehr.
Mit Emscripten können Sie einfach die Ruby-Quellen nehmen, sie in JavaScript und voilà umwandeln und den echten Ruby in Ihrem Browser ausführen lassen! Dies gilt jedoch nicht nur für Ruby, sondern auch für Python.
Oder schauen Sie sich den im Browser h.264 Decoder Broadway an. Das ist eigentlich eine verschlüsselte C ++ - Bibliothek!
Gehen Sie zu repl.it, um einige Programmiersprachen (einschließlich Ruby und Python) in Ihrem Browser zu sehen!
08. Betriebssystemunabhängige Desktop-Programme schreiben
Wir haben bereits darüber gesprochen, mit Hilfe von Apache Cordova auf mehrere mobile Plattformen abzuzielen. Es überrascht nicht, dass JavaScript nicht nur für mobile Plattformen verwendet werden kann, sondern auch für unseren alten Freund, den Desktop-Computer.
Die ersten Lösungen kamen von Appcelerator mit der Titanium Desktop Suite und von Adobe, der weit verbreiteten Air-Plattform.
Aber als Open-Source-Liebhaber, die wir alle sind, suchen wir nach einer offeneren und auf Node.js basierenden Technologie. Treffen Sie app.js! app.js ist eine offene Webtechnologie und ein auf Node.js basierender Desktop-Programm-Builder, mit dem wir echte Desktop-Programme mit Dateisystemzugriff, Fenstersteuerelementen und mehr schreiben können. Wir können uns auf die stabilen plattformübergreifenden APIs von Node verlassen und unsere Software-Benutzeroberfläche mit HTML und CSS erstellen. Genau wie die heißesten neuen Sachen auf dieser Liste hier.
app.js ist ein ziemlich junges Projekt und unterstützt daher derzeit nur Windows und Linux. Laut Mailingliste ist die Mac-Unterstützung jedoch auf dem Weg.
09. Ausführen eines Webservers
Heutzutage schockieren Sie niemanden, wenn Sie ihnen mitteilen, dass Ihre Website von einem JavaScript-basierten Webserver bereitgestellt wird. Wenn Sie vor zwei oder drei Jahren zurückdenken und Webentwicklern genau dasselbe sagen, hätten sie Sie wahrscheinlich ausgelacht oder noch schlimmer.
Aber mit dem unglaublichen Erfolg von Node.js ist dies glücklicherweise noch weit entfernt. Es überrascht nicht nur die Menschen nicht mehr, da Node.js aufgrund seiner asynchronen Natur ein Wunderkind in der Leistung ist, insbesondere wenn es darum geht, sich dem Problem vieler paralleler Verbindungen zu stellen. Die Leistung ist nicht nur beeindruckend, die wirklich einfache API zieht auch viele Entwickler an. Schauen wir uns das Beispiel "Hallo Welt" aus der Knotenwelt an. Es ist nicht nur ein Ausdruck "Hallo Welt" auf dem Bildschirm, sondern ein http-Webserver!
var http = require (’http’);
http.createServer (Funktion (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ("Hallo Welt n");
}). listen (1337, ’127.0.0.1’);
Wenn Sie von dieser Einfachheit nicht begeistert sind, kann ich Ihnen auch nicht helfen.
Einer der besten Aspekte der Popularität (oder des Hype) von Node ist, dass große Unternehmen wie Microsoft dies tatsächlich unterstützen, dh in ihren Azure Cloud Services!
10. Webscraping und Screenshots
Schauen wir uns zu guter Letzt ein Projekt an, das ich persönlich sehr liebe, weil ich meine QUnit-Tests ohne Kopf in der Befehlszeile ausführen kann. PhantomJS ist ein Headless-WebKit-basierter Browser mit einer übersichtlichen JavaScript- (oder CoffeScript-) API.
Das Testen von JavaScript und DOM ist jedoch nicht der einzige Anwendungsfall für Phantom. Was mich wirklich fasziniert, ist seine Fähigkeit, Websites zu kratzen und Screenshots davon zu machen!
Ja, Sie lesen richtig. Mit Phantom können Sie Webseiten in verschiedenen Grafikformaten ausgeben. Natürlich ist es so einfach, wie einem Baby Süßigkeiten zu stehlen.
Schauen wir uns ein Skript an, das genau dies tut:
var page = new WebPage ();
page.open ("http://google.com", Funktion (Status) {
page.render (’google.png’);
phantom.exit ();
});
Das ist alles, was Sie brauchen, um einen Screenshot zu erstellen. Da er auf JavaScript basiert, können Sie auch jQuery verwenden und den Seiteninhalt bearbeiten, bevor Sie einen Screenshot erstellen!
Warten! Es gibt mehr...
Ich hoffe, Sie sind genauso erstaunt wie ich, als ich jedes dieser Tools entdeckte. Dieser Artikel hat gerade die Oberfläche dessen zerkratzt, was heutzutage mit JavaScript möglich ist. Es gibt so viel mehr wie IDEs, die vollständig in JS Cloud9 geschrieben sind, oder hochsichere Dinge, die damit gemacht wurden (Ihre Kreditkarte wurde mit JavaScript erstellt).
Ich hoffe, Sie fühlen sich inspiriert, nehmen sich etwas Zeit und spielen mit einigen der hier genannten Projekte herum oder nehmen noch besser einige dieser Tools und bauen neue Dinge um sie herum auf. Das meiste davon ist Open Source und es gibt Entwickler, die nach Ihnen suchen, um ihnen zu helfen, ihre Arbeit zu verbessern, auch wenn dies nur durch die Verwendung der Tools, das Erkennen von Fehlern und das Melden von Fehlern geschieht.
