Content
- 01. És hora d’un hangout
- 02. $ ('light'). FadeIn ();
- 03. Les vostres mans estan fetes per al navegador
- 04. Jocs 3D controlats amb el vostre gamepad
- 05. Execució de Flash al vostre iPad
- 06. Escriure aplicacions per al vostre telèfon intel·ligent
- 07. Execució de Ruby i Python al navegador
- 08. Escriptura de programes d'escriptori independents del SO
- 09. Execució d’un servidor web
- 10. Webscraping i captura de pantalla
- Espera! Hi ha més ...
JavaScript ha recorregut un llarg camí des del seu naixement, el 1995. Un camí segur, ple de malentesos, mal ús i ignorància. Però els temps han canviat, des dels darrers cinc anys JavaScript ha guanyat cada vegada més atenció. Amb més atenció, més desenvolupadors utilitzen JavaScript, el fan servir per a molts propòsits diferents i gaudeixen de la seva bellesa. Història clàssica de "Aneguet lleig", si em pregunteu.
A l’article següent, descobrirem 10 casos d’ús de JavaScript diferents dels habituals del navegador, als quals esteu acostumats.
01. És hora d’un hangout
Recordeu la visió dels anys 80 de la comunicació de vídeo semblant al Facetime?
Només van passar 20 anys abans que això passés a la corrent general a causa de la connexió a Internet de banda ampla disponible a tot arreu i de l’ús intensiu d’un petit programari anomenat Skype.
Amb les capacitats de Flash d’Adobe i l’intent de Google de crear una xarxa social, ja tenim les capacitats de comunicació de vídeo al nostre navegador. No seria genial tenir aquestes habilitats sense fer servir cap complement de tercers com Flash?
Afortunadament, els proveïdors de navegadors van pensar el mateix i van implementar l'API "getUserMedia" al seu programari. Aquest va ser un primer pas per accedir a dispositius com ara càmeres o micròfons directament des del navegador.
Si utilitzeu Node.js com a servidor a la part posterior d’aquesta aplicació, és increïblement fàcil transportar el senyal de vídeo per antena a un o més clients. Malauradament, en el moment d’escriure això, només Chrome i Opera donen suport a l’API, però d’altres es posaran al dia ràpidament.
L’enfocament més net per a una comunicació bidireccional és l’únic que fa Chrome en aquest moment, anomenat WebRTC. A causa de WebRTC, els clients estan habilitats per obrir canals de comunicació entre iguals, connectant directament el client amb el client.
Per diversió, consulteu la implementació de Photo Booth de Sindre Sorhus realitzada en 121 bytes.
var video = document.getElementsByTagName ('video') [0],
navigator.getUserMedia (‘vídeo’, successCallback, errorCallback);
funció successCallback (flux) {
video.src = corrent;
}
function errorCallback (error) {
console.log (error);
}
02. $ ('light'). FadeIn ();
La plataforma de microcontroladors Arduino és un exemple de grau A per a un cas d’ús de JavaScript "fora de la caixa". Per a aquells que no estigueu familiaritzats amb la plataforma Arduino, aquí teniu una cita molt famosa del seu lloc web:
"Arduino és una plataforma de prototipatge electrònica de codi obert basada en maquinari i programari flexible i fàcil d'utilitzar. Està pensat per a artistes, dissenyadors, aficionats i qualsevol persona interessada en crear objectes o entorns interactius".
El mateix Arduino només admet el codi escrit en C, que encara no és cap problema. Amb algunes línies de C (a més de que altres han fet aquest treball per vosaltres), l'Arduino pot rebre ordres a través del seu port USB mitjançant el protocol de port sèrie.
Però, com es pot accedir al port sèrie mitjançant JavaScript? És evident que no és del navegador.
Node.js al rescat.
Degut als esforços de l’advocat de la comunitat, Chris Williams, disposem d’una biblioteca de ports sèrie Node, on podem enviar dades mitjançant l’antic protocol SP. Aquest va ser l’avenç inicial, basat en la biblioteca que altres persones van plantejar un enfocament més abstracte de les capacitats d’Arduino. Per exemple, les biblioteques node-arduino i duino.
La biblioteca més calenta i divertida al voltant del bloc per a la programació Arduino basada en JS és ara jonny-five. Consulteu el bloc de Bocoup per conèixer algunes merdes que han fet amb la plataforma Arduino i molts connectors. També el vídeo JSConf de Nicolai Onken i Jörn Zaefferer us pot donar una volta al que és possible avui en dia amb poc codi.
03. Les vostres mans estan fetes per al navegador
La visió de futur de Minority Report (la que controlen els equips amb les mans, no els cotxes lletjos) s’acosta cada dia. Un gran pas en aquesta direcció va ser l’intent de joc del controlador de Microsoft, Kinect. Es pot pensar un joc increïble, però, què té a veure això amb JavaScript ?!
Amb el llançament de Kinect SDK de Microsoft, un munt de persones van creuar el pont per utilitzar el navegador per al Kinect. Primer de tot, els nois de ChildNodes que han creat una completa biblioteca kinect.js que funciona, que permet l’ús de Kinect de Microsoft al vostre navegador.
Us recomano que consulteu les seves demostracions i els vostres vídeos, és una meravella. Un dels principals inconvenients de la biblioteca kinect.js, però, és que hi ha d’haver un programa de servidor WebSocket que s’executi a la part posterior del client (en realitat és la cola Kinect -> C # -> JS).
Alguns estudiants de fama MIT estan treballant en una solució per enderrocar aquest mur, anomenat DepthJS,
un connector al navegador que permet l’ús de Kinect per a Chrome i Safari, fins i tot per a llocs que no estan optimitzats per a cap ús basat en Kinect en cap forma. DepthJS actualment es troba en una etapa inicial de desenvolupament, però definitivament val la pena fer-ne un seguiment.
04. Jocs 3D controlats amb el vostre gamepad
Heu provat mai de jugar a un joc de navegador que no sigui Flash? Les capacitats gràfiques són increïbles, sobretot quan es veuen clons de jocs com Quake.
Però quan toques aquestes coses, sempre estàs lligat al teclat i al ratolí (gairebé) maldestre. Aquest és un desavantatge important, sobretot per als jocs d’acció, ja que els reté del navegador.
No seria genial si poguéssiu connectar el controlador Xbox al vostre PC i començar a jugar al vostre joc de navegador preferit? Ja no és una visió de futur, saludeu l'API del Gamepad.
Si teniu un gamepad al vostre escriptori, connecteu-lo ara mateix i gaudiu d'alguns jocs que ja estan utilitzant l'API Gamepad. Programar els controls d’entrada també és un pastís, mireu aquest fragment de codi o, millor, executeu-lo vosaltres mateixos:
div id = "gamepads"> / div>
script>
funció gamepadConnected (esdeveniment) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad connectat (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, fals);
/ script>
Si voleu obtenir més informació sobre les capacitats 3D dels navegadors, consulteu el motor de simulador 3D de font oberta de Three.js i Jens Arps, Ascent, construït a sobre. Vés amb compte a Mark Hammil, és possible que et necessitem per a una altra seqüela de Wing Commander.
05. Execució de Flash al vostre iPad
Com a amant dels estàndards oberts i fan de l'Apple, he de reconèixer que m'agradaria donar les gràcies a Apple per no posar Flash a l'iPad i l'iPod, això va iniciar realment un moviment que abraça tecnologies obertes com HTML5, CSS3 i JavaScript.
Com a empleat d’una agència, he de dir que és una situació molt dolenta per als nostres clients.
La majoria d’ells han de pagar dues vegades per un simple anunci o campanya que llancen per tenir contingut interactiu publicat a l’antiga IE7 o IE8 a través de Flash i a navegadors moderns, així com a iDevices mitjançant HTML5.
El compliment de les funcions dels navegadors antics té les seves fronteres, principalment el nom de rendiment. Per tant, no hi ha la possibilitat d’executar Flash en aquests iDevices Flashless?
Per descomptat, n’hi ha un i, per descomptat, està integrat en JavaScript.
Un tros d’història: el 2010 Tobias Schneider va llançar una petita biblioteca anomenada Gordon
que permetia que els fitxers SWF s’executessin directament al navegador. Això va funcionar bastant bé per a fitxers Flash petits, com ara anuncis que només utilitzaven funcions fins a la versió 2 de Flash, però no s’incloïa cap funcionalitat de nivell superior.
Quan Tobias es va unir a l’empresa ueberJS UXEBU, se li va ocórrer una nova idea.
I així va néixer Bikeshed. Bikeshed en si és una mena de marc d’animació JavaScript, però també és un JavaScript per Flash per a tot el que vulgueu que sigui un compilador (està basat en adaptadors, de manera que podeu escriure adaptadors per a qualsevol cosa que vulgueu, tot i que el comportament estàndard és compilar Flash a JavaScript) . És compatible amb Flash 10 i ActionScript 3. Mireu la seva pàgina web per obtenir més informació sobre les seves funcions a més del compilador.
06. Escriure aplicacions per al vostre telèfon intel·ligent
Escriure aplicacions natives per a entorns de telefonia mòbil és un camí difícil. Comença per la decisió de quina plataforma voleu donar suport. Si la vostra aplicació s'executés en un iPhone i iPad, un dispositiu mòbil amb tecnologia Android, Windows Mobile, dispositius Blackberry, pla basat en webOS ... etc.
Cadascuna d’aquestes plataformes té les seves pròpies API i utilitza sobretot llenguatges de programació diferents.
Si heu sobreviscut a les guerres dels navegadors, permeteu-me que us digui que és una lluita molt més dura per entrar. És gairebé impossible per a un desenvolupador crear una aplicació per a totes aquestes plataformes en temps i pressupost.
Què fer, doncs? Voleu contractar més desenvolupadors? Voleu cobrar més per les aplicacions? O trobeu un enfocament millor per assegurar-vos que la base de codi s'executa en tots els dispositius? Com a més de vosaltres, preferiria l’últim enfocament.
Però, en què s’haurien de construir aquestes aplicacions? Què tenen en comú totes aquestes plataformes? Potser sabreu la resposta, és un navegador web i, per tant, un motor JavaScript.
Aquesta és la idea que hi ha darrere d’Apache Cordova, més coneguda amb el seu antic nom PhoneGap.
Cordova és un framework JavaScript que abstrau les API de cada entorn mòbil i exposa una API JavaScript adequada per controlar-les totes. Això us permet mantenir una base de codi única, que després podreu crear i desplegar en diferents dispositius mòbils.
Consulteu els recursos aquí per esbrinar com utilitzar Cordova per crear aplicacions per a mòbils kick ass que creeu una vegada i que s'executaran a tot arreu.
07. Execució de Ruby i Python al navegador
Mozilla, l’empresa que està darrere del famós navegador Firefox, dóna feina a molts frikis, això és segur. Un d’ells és Alon Zakai, enginyer de l’equip d’investigació de Mozilla, que va construir una eina estranya anomenada Emscripten.
Emscripten us permet portar codi de bits LLVM, que es pot generar des de biblioteques basades en C / C ++, a JavaScript. Ho fa mitjançant la compilació de les biblioteques en codi de bits i després, prenent aquest codi de bits i transformant-lo en JavaScript. Ordenat, però, què puc fer amb això, us podeu preguntar?
Tinc una pregunta contrària: heu escoltat alguna vegada la frase "Utilitzar CoffeeScript i Prototype és el més proper que podeu executar Ruby al navegador"? No? No us preocupeu, perquè això ja no és cert.
Amb Emscripten, simplement podeu prendre les fonts de Ruby, transformar-les en JavaScript i voilà, fer funcionar el Ruby real al vostre navegador. Però això no s’aplica només a Ruby, per exemple, Python també es va inscriure.
O fes una ullada al descodificador del navegador h.264 de Broadway. En realitat, això és una biblioteca C ++ inscrita.
Aneu a repl.it per veure alguns llenguatges de programació (inclosos Ruby i Python) que s’executen al vostre navegador.
08. Escriptura de programes d'escriptori independents del SO
Abans hem parlat d’orientació a diverses plataformes mòbils amb l’ajut d’Apache Cordova. No és sorprenent que JavaScript no només es pugui utilitzar per orientar-se a plataformes mòbils, sinó que també es pot afrontar el nostre vell amic amb l’ordinador de sobretaula.
Les primeres solucions van venir dels nois d’Appcelerator amb Titanium Desktop Suite i d’Adobe, la àmpliament utilitzada plataforma Air.
Però, com a amants del codi obert que tots som, busquem una tecnologia més oberta i basada en Node.js. Coneix app.js! app.js és un creador de programes d'escriptori basat en tecnologia web i Node.js, que ens permet escriure programes d'escriptori reals amb accés al sistema de fitxers, controls de finestra i molt més. Podem confiar en les API estables de plataforma multiplataforma de Node i construir la nostra interfície d’usuari de programari amb HTML i CSS. Aquí hi ha les novetats més interessants d’aquesta llista.
app.js és un projecte força jove i, per tant, només ara és compatible amb Windows i Linux, però segons la llista de correu, el suport per a Mac està en camí.
09. Execució d’un servidor web
Avui en dia, no escandalitzeu ningú quan els digueu que el vostre lloc web està sent publicat per un servidor web basat en JavaScript. Si us en recordeu fa dos o tres anys i els expliqueu exactament el mateix als desenvolupadors web, probablement s’haurien rigut de vosaltres o encara pitjor.
Però amb l’increïble èxit de Node.js, per sort, això està lluny d’ara. Ja no només sorprèn a la gent, a causa de la seva naturalesa asíncrona, Node.js té un rendiment estupefaent, sobretot quan es tracta d’enfrontar-se al problema de moltes connexions paral·leles. No només el seu rendiment és fantàstic, l’API realment senzilla també atrau a molts desenvolupadors. Vegem l'exemple "Hello World" del món Node, no només es tracta d'un exemple "Hello World" a la pantalla, sinó que és un servidor web http.
var http = require ('http');
http.createServer (funció (requ, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hola món n');
}). escolta (1337, '127.0.0.1');
Si aquesta simplicitat no us deixa impressionats, tampoc no us puc ajudar.
Una de les millors parts de la popularitat (o bombo) de Node és que grans empreses com Microsoft realment ho estan donant suport, és a dir, als seus serveis Azure Cloud.
10. Webscraping i captura de pantalla
Per tant, per últim, però no menys important, fem un cop d’ull a un projecte que personalment m’encanta per deixar-me executar les proves QUnit sense cap cap a la línia d’ordres. PhantomJS és un navegador basat en WebKit amb una API basada en JavaScript (o CoffeScript).
Però provar JavaScript i DOM no és l’únic cas d’ús de Phantom. El que realment em fascina són les seves capacitats per rascar llocs web i deixar-vos fer captures de pantalla.
Sí, estàs llegint bé, amb Phantom pots generar pàgines web en diferents formats gràfics i, per descomptat, és tan fàcil com robar dolços a un nadó.
Vegem un script que fa exactament això:
var pàgina = nova pàgina web ();
page.open ('http://google.com', funció (estat) {
page.render ('google.png');
phantom.exit ();
});
Això és tot el que necessiteu per fer una captura de pantalla i, com que es basa en JavaScript, també podeu utilitzar jQuery i manipular el contingut de la pàgina abans de capturar-la.
Espera! Hi ha més ...
Per tant, espero que estigueu tan meravellats com jo, quan vaig descobrir totes aquestes eines. Aquest article acaba de ratllar la superfície del que és possible amb JavaScript actualment. Hi ha molt més com els IDE escrits completament a JS Cloud9 o coses d’alta seguretat que s’han fet (la vostra targeta de crèdit s’ha creat amb JavaScript).
Espero que us sentiu inspirats, que us dediqueu un temps i que jugueu amb alguns dels projectes esmentats aquí o, millor encara, que aprofiteu algunes d’aquestes eines i creeu coses noves al seu voltant. La major part d’això és de codi obert i hi ha desenvolupadors que us busquen per ajudar-los a millorar el seu treball, encara que només sigui mitjançant les eines, descobrint errors i informant-ne.
