Contenuto
- 01. È ora di un ritrovo
- 02. $ (’light’). FadeIn ();
- 03. Le tue mani sono fatte per il browser
- 04. Giochi 3D controllati con il tuo gamepad
- 05. Esecuzione di Flash sul tuo iPad
- 06. Scrivere app per il tuo smartphone
- 07. Esecuzione di Ruby e Python nel tuo browser
- 08. Scrittura di programmi desktop indipendenti dal sistema operativo
- 09. Esecuzione di un server web
- 10. Webscraping e screenshot
- Aspettare! C'è più...
JavaScript ha fatto molta strada dalla sua nascita nel 1995. Sicuramente una strada difficile, piena di incomprensioni, abusi e ignoranza. Ma i tempi sono cambiati, dagli ultimi cinque anni JavaScript ha guadagnato sempre più attenzione. Con maggiore attenzione, più sviluppatori stanno effettivamente utilizzando JavaScript, utilizzandolo per molti scopi diversi e godendosi la sua bellezza. Classica storia di "Brutto anatroccolo", se me lo chiedi.
Nel seguente articolo scopriremo 10 casi d'uso di JavaScript diversi da quelli comuni "nel browser" a cui sei abituato.
01. È ora di un ritrovo
Ricordi la visione degli anni '80 della comunicazione video simile a FaceTime?
Ci sono voluti solo 20 anni prima che questo diventasse mainstream a causa di Internet a banda larga disponibile quasi ovunque e dell'uso massiccio di un piccolo software chiamato Skype.
Con le capacità di Adobe Flash e il tentativo di Google di creare un social network, abbiamo già le capacità di comunicazione video nel nostro browser. Non sarebbe bello avere queste capacità senza utilizzare un plug-in di terze parti come Flash?
Fortunatamente, i fornitori di browser hanno pensato la stessa cosa e hanno implementato l'API "getUserMedia" nel loro software. Questo è stato un primo passo per accedere a dispositivi come fotocamere o microfoni direttamente dal tuo browser.
Utilizzando Node.js come server sul retro di un'applicazione di questo tipo, è incredibilmente facile trasportare il segnale video via etere a uno o più client. Sfortunatamente, nel momento in cui scrivo questo articolo, solo Chrome e Opera supportano l'API, ma altri lo raggiungeranno rapidamente.
L'approccio più pulito per una comunicazione bidirezionale è al momento l'unica cosa di Chrome, chiamata WebRTC. Grazie a WebRTC, i client sono abilitati ad aprire canali di comunicazione peer to peer, collegando direttamente il client con il client.
Per divertimento, controlla l'implementazione Photo Booth di Sindre Sorhus realizzata in 121 byte!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (stream) {
video.src = stream;
}
function errorCallback (error) {
console.log (errore);
}
02. $ (’light’). FadeIn ();
La piattaforma del microcontrollore Arduino è un esempio di grado A per un caso d'uso JavaScript "fuori dagli schemi". Per quelli di voi che non hanno familiarità con la piattaforma Arduino, ecco una citazione super famosa dal suo sito web:
"Arduino è una piattaforma di prototipazione elettronica open source basata su hardware e software flessibili e facili da usare. È destinata ad artisti, designer, hobbisti e chiunque sia interessato a creare oggetti o ambienti interattivi".
Lo stesso Arduino supporta solo il codice scritto in C, il che non è ancora un grosso problema. Con poche righe di C (oltre al fatto che altri hanno fatto questo lavoro per te), Arduino può ricevere comandi tramite la sua porta USB tramite il protocollo della porta seriale.
Ma come si accede alla porta seriale tramite JavaScript? Chiaramente non dal browser.
Node.js in soccorso!
Grazie agli sforzi del sostenitore della comunità Chris Williams, abbiamo una libreria di porte seriali Node, dove possiamo inviare dati tramite il vecchio protocollo SP. Questa è stata la svolta iniziale, in base alla libreria che altre persone hanno escogitato un approccio più astratto per le capacità di Arduino. Ad esempio le librerie node-arduino e duino.
La libreria più calda e interessante intorno al blocco per la programmazione Arduino guidata da JS è ormai jonny-five. Dai un'occhiata al blog di Bocoup per alcune cose interessanti che hanno fatto con la piattaforma Arduino e molti plug-in. Anche il video JSConf di Nicolai Onken e Jörn Zaefferer potrebbe darti un'idea di ciò che è possibile oggi con poco codice.
03. Le tue mani sono fatte per il browser
La visione futura di Minority Report (quella in cui controllano i computer con le mani, non le brutte macchine) si avvicina ogni giorno di più. Un enorme passo in questa direzione è stato Kinect, il tentativo di riproduzione senza controller di Microsoft. Potresti pensare che un gameplay incredibile, ma cosa c'entra questo con JavaScript ?!
Con il rilascio dell'SDK Kinect di Microsoft, un gruppo di persone ha attraversato il ponte dell'uso del browser per Kinect. Prima di tutto i ragazzi di ChildNodes che hanno creato una libreria kinect.js funzionante completa, che consente l'uso di Kinect di Microsoft nel tuo browser.
Consiglio vivamente di dare un'occhiata ai loro video e demo, è fantastico. Uno dei principali svantaggi della libreria kinect.js, tuttavia, è che deve esserci un programma server WebSocket in esecuzione nella parte posteriore del client (che in realtà è la colla Kinect -> C # -> JS).
Alcuni studenti famosi del MIT stanno lavorando a una soluzione per abbattere questo muro, chiamato DepthJS,
un plug-in nel browser che consente l'utilizzo di Kinect per Chrome e Safari, anche per i siti che non sono ottimizzati per un utilizzo basato su Kinect in qualsiasi forma. DepthJS è attualmente in una fase di sviluppo iniziale, ma vale sicuramente la pena tenerne traccia.
04. Giochi 3D controllati con il tuo gamepad
Hai mai provato a giocare a un browser game non Flash al giorno d'oggi? Le capacità grafiche sono sorprendenti, specialmente quando vedi cloni di giochi come Quake.
Ma quando suoni queste cose sei sempre legato alla tua tastiera e al mouse (per lo più) goffo. Questo è uno dei principali svantaggi, in particolare per i giochi d'azione, li trattiene davvero dal browser.
Non sarebbe bello se potessi collegare il tuo controller Xbox al PC e iniziare a giocare al tuo browser game preferito? Questa non è più una visione futura, saluta l'API del gamepad!
Se hai un gamepad intorno alla scrivania, collegalo subito e goditi alcuni giochi che già utilizzano l'API del gamepad. Anche la programmazione dei controlli di input è un gioco da ragazzi, dai un'occhiata a questo frammento di codice o, ancora meglio, eseguilo da solo:
div id = "gamepad"> / div>
script>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Se desideri saperne di più sulle funzionalità 3D dei browser, dai un'occhiata al motore di simulazione 3D open source di Three.js e Jens Arps Ascent costruito su di esso. Mark Hammil attento, potremmo aver bisogno di te per un altro sequel di Wing Commander!
05. Esecuzione di Flash sul tuo iPad
In quanto amante degli standard aperti e fan di Apple, devo ammettere che vorrei davvero ringraziare Apple per non aver messo Flash su iPad e iPod, questo ha davvero avviato un movimento di abbraccio di tecnologie aperte come HTML5, CSS3 e JavaScript.
In qualità di dipendente di un'agenzia, devo dire che questa è davvero una brutta situazione per i nostri clienti.
La maggior parte di loro deve pagare due volte per un semplice annuncio o campagna che sta lanciando per avere contenuti interattivi in esecuzione nel vecchio IE7 o IE8 tramite Flash e sui browser moderni e iDevice tramite HTML5.
Il polyfilling delle funzionalità dei vecchi browser ha i suoi confini, per lo più denominati prestazioni. Quindi non è possibile eseguire Flash su quegli iDevice senza Flash?
Ovviamente ce n'è uno e ovviamente è integrato in JavaScript.
Un pezzo di storia: nel 2010 Tobias Schneider ha pubblicato una piccola libreria chiamata Gordon
che consentiva ai file SWF di essere eseguiti direttamente nel browser. Funzionava abbastanza bene per file Flash di piccole dimensioni come gli annunci che utilizzavano solo funzionalità fino alla versione 2 di Flash, ma le funzionalità di livello superiore non erano affatto incluse.
Quando Tobias è entrato a far parte della società ueberJS UXEBU, hanno avuto una nuova idea.
E così è nata Bikeshed. Bikeshed stesso è una sorta di framework di animazione JavaScript, ma è anche un JavaScript per Flash per tutto ciò che vuoi che sia compilatore (è basato su adattatore, quindi puoi scrivere adattatori per tutto ciò che desideri, anche se il comportamento standard è la compilazione da Flash a JavaScript) . È compatibile con Flash 10 e ActionScript 3. Dai un'occhiata alla sua pagina web per saperne di più sulle sue numerose funzionalità oltre al compilatore.
06. Scrivere app per il tuo smartphone
La scrittura di applicazioni native per ambienti di telefonia mobile è una strada difficile. Inizia con la decisione su quale piattaforma desideri supportare. Se la tua applicazione deve essere eseguita su un iPhone e iPad, un dispositivo mobile Android, Windows Mobile, dispositivi Blackberry, pla basato su webOS ... e così via.
Ciascuna di queste piattaforme ha le proprie API e utilizza principalmente linguaggi di programmazione diversi.
Se sei sopravvissuto alle guerre dei browser, lascia che ti dica che questo è un modo più difficile per entrare. È quasi impossibile per uno sviluppatore creare un'applicazione per tutte queste piattaforme in tempo e budget.
Quindi che si fa? Assumere più sviluppatori? Vuoi pagare di più per le app? O trovi un approccio migliore per assicurarti che la tua base di codice funzioni su ogni dispositivo? Come la maggior parte di voi, preferirei l'ultimo approccio.
Ma in cosa dovrebbero essere costruite queste app? Cosa hanno in comune tutte queste piattaforme? Potresti conoscere la risposta, è un browser web e quindi un motore JavaScript.
Questa è l'idea alla base di Apache Cordova, meglio conosciuto con il suo precedente nome PhoneGap.
Cordova è un framework JavaScript che astrae le API di ogni ambiente mobile ed espone un'API JavaScript pulita per controllarle tutte. Ciò consente di mantenere una singola base di codice, che viene quindi creata e distribuita su diversi dispositivi mobili.
Dai un'occhiata alle risorse qui per scoprire come utilizzare Cordova per creare app mobili potenti che crei una volta e funzioneranno ovunque.
07. Esecuzione di Ruby e Python nel tuo browser
Mozilla, la società dietro il famoso browser Firefox, impiega molti smanettoni, questo è certo. Uno di loro è Alon Zakai, un ingegnere del Mozilla Research Team, che ha creato uno strumento bizzarro chiamato Emscripten.
Emscripten ti consente di portare il bitcode LLVM, che può essere generato da librerie basate su C / C ++, in JavaScript. Lo fa compilando le librerie in codice bit e quindi, prendendo quel codice bit e trasformandolo in JavaScript. Perfetto, ma cosa posso fare con questo, potresti chiederti?
Ho una contro domanda per te: hai mai sentito la frase "Usare CoffeeScript e Prototype è quanto di più simile si possa ottenere eseguendo Ruby nel browser"? No? Non preoccuparti, perché questo non è più vero.
Con Emscripten puoi semplicemente prendere i sorgenti di Ruby, trasformarli in JavaScript e voilà, avere il vero Ruby in esecuzione nel tuo browser! Ma questo non si applica solo a Ruby, anche Python, ad esempio, è stato emesso.
Oppure controlla il decoder Broadway h.264 del browser. Questa è in realtà una libreria C ++ modificata!
Vai su repl.it per vedere alcuni linguaggi di programmazione (inclusi Ruby e Python) in esecuzione nel tuo browser!
08. Scrittura di programmi desktop indipendenti dal sistema operativo
Abbiamo già parlato del targeting di più piattaforme mobili con l'aiuto di Apache Cordova. Non sorprende che JavaScript non possa essere utilizzato solo per indirizzare le piattaforme mobili, ma anche il nostro vecchio amico, il computer desktop, può essere affrontato.
Le prime soluzioni sono arrivate dai ragazzi di Appcelerator con Titanium Desktop Suite e da Adobe la piattaforma Air ampiamente utilizzata.
Ma come amanti dell'open source che siamo tutti, una tecnologia più aperta e basata su Node.js è ciò che stiamo cercando. Incontra app.js! app.js è un generatore di programmi desktop basato su tecnologia web e Node.js, che ci consente di scrivere programmi desktop reali con accesso al file system, controlli delle finestre e altro ancora. Possiamo fare affidamento sulle API multipiattaforma stabili di Node e costruire l'interfaccia utente del nostro software con HTML e CSS. Proprio come le novità più interessanti di questo elenco qui.
app.js è un progetto piuttosto giovane e quindi supporta solo Windows e Linux al momento, ma secondo la mailing list, il supporto per Mac è in arrivo.
09. Esecuzione di un server web
Al giorno d'oggi, non scandalizzi nessuno quando dici che il tuo sito web è servito da un server web basato su JavaScript. Se ripensi a due o tre anni fa e hai detto esattamente la stessa cosa agli sviluppatori web, probabilmente avrebbero riso di te o anche peggio.
Ma con l'incredibile successo di Node.js questo è fortunatamente lontano da ora. Non solo non sorprende più le persone, grazie alla sua natura asincrona Node.js è un prodigio nelle prestazioni, soprattutto quando si tratta di affrontare il problema di molte connessioni parallele. Non solo le sue prestazioni sono fantastiche, ma anche l'API veramente semplice attrae molti sviluppatori. Diamo un'occhiata all'esempio "Hello World" dal mondo Node, non è solo un "Hello World" stampato sullo schermo, è un server web http!
var http = require (’http’);
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hello World n’);
}). listen (1337, ’127.0.0.1’);
Se non sei sbalordito da questa semplicità, beh, neanche io posso aiutarti.
Una delle parti migliori della popolarità (o clamore) di Node è che le grandi aziende come Microsoft lo supportano effettivamente, cioè nei loro servizi cloud di Azure!
10. Webscraping e screenshot
Quindi, ultimo ma non meno importante, diamo un'occhiata a un progetto che personalmente amo per avermi permesso di eseguire i miei test QUnit senza testa sulla riga di comando. PhantomJS è un browser basato su WebKit headless con un'API basata su JavaScript (o CoffeScript) pulita.
Ma testare JavaScript e DOM non è l'unico caso d'uso di Phantom. Ciò che mi affascina davvero sono le sue capacità di raschiare i siti web e di farti fare degli screenshot!
Sì, stai leggendo bene, con Phantom puoi produrre pagine web in diversi formati grafici e, naturalmente, è facile come rubare i dolci a un bambino.
Diamo un'occhiata a uno script che fa esattamente questo:
var page = new WebPage ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
phantom.exit ();
});
È tutto ciò di cui hai bisogno per fare uno screenshot e poiché è basato su JavaScript, puoi anche usare jQuery e manipolare il contenuto della pagina prima di salvarlo!
Aspettare! C'è più...
Quindi, spero che tu sia stupito quanto me, quando ho scoperto ognuno di questi strumenti. Questo articolo ha appena scalfito la superficie di ciò che è possibile fare con JavaScript al giorno d'oggi. C'è molto di più come IDE interamente scritti in JS Cloud9 o cose di alta sicurezza fatte con esso (la tua carta di credito è stata creata con JavaScript).
Spero che ti senta ispirato, prenditi un po 'di tempo e gioca con alcuni dei progetti menzionati qui, o ancora meglio prendi alcuni di questi strumenti e costruisci nuove cose attorno ad essi. La maggior parte di questo qui è open source e ci sono sviluppatori là fuori, che cercano che tu li aiuti a migliorare il loro lavoro, anche se è solo utilizzando gli strumenti, scoprendo bug e segnalandoli.
