Tartalom
- 01. Itt az ideje egy társalgónak
- 02. $ (’fény’). FadeIn ();
- 03. A kezed a böngészőhöz készült
- 04. 3D-s játékok, amelyeket a játékvezérlővel vezérel
- 05. Flash futtatása az iPad-en
- 06. Alkalmazások írása okostelefonjára
- 07. A Ruby és a Python futtatása a böngészőben
- 08. OS-től független asztali programok írása
- 09. Webszerver futtatása
- 10. Weblapolás és képernyőfelvétel
- Várjon! Van még...
A JavaScript hosszú utat tett meg 1995-ös születése óta. Biztosan nehéz út, tele félreértéssel, visszaéléssel és tudatlansággal. De az idők megváltoztak, az elmúlt öt év óta a JavaScript egyre nagyobb figyelmet kap. Nagyobb figyelemmel több fejlesztő használja a JavaScriptet, sokféle célra használja és élvezi annak szépségét. Klasszikus "csúnya kiskacsa" történet, ha engem kérdezel.
A következő cikkben 10 olyan esetet fedezünk fel a JavaScript számára, amelyek eltérnek a megszokott "böngészőben" használtaktól.
01. Itt az ideje egy társalgónak
Emlékszel a 80-as évek víziójára a Facetime-szerű videokommunikációról?
Csak 20 év telt el, mire ez szinte mindenütt elérhetővé vált a szinte mindenhol elérhető szélessávú internet és a Skype nevű kis szoftverek intenzív használata miatt.
Az Adobe Flash képességeivel és a Google közösségi hálózat kiépítésére tett kísérletével böngészőnkben már megvan a videokommunikáció képessége. Nem lenne jó, ha megvannak ezek a képességek egy harmadik féltől származó plug-in, például a Flash használata nélkül?
Szerencsére a böngésző gyártói is ugyanezt gondolták, és szoftverükbe beépítették a "getUserMedia" API-t. Ez volt az első lépés annak eléréséhez, hogy az eszközökhöz, például kamerákhoz vagy mikrofonokhoz közvetlenül hozzáférhessen a böngészőből.
A Node.js kiszolgálóként történő használatával egy ilyen alkalmazás hátulján elképesztően könnyű a videojelet levegőben továbbítani egy vagy több kliens felé. Szerencsére ennek megírásáig csak a Chrome és az Opera támogatja az API-t, de mások gyorsan felzárkóznak.
A kétirányú kommunikáció tisztább megközelítése jelenleg csak egy Chrome, WebRTC néven. A WebRTC miatt az ügyfelek képesek peer to peer kommunikációs csatornák megnyitására, közvetlenül összekapcsolva az ügyfelet az ügyféllel.
A szórakozás kedvéért nézze meg Sindre Sorhus Photo Booth megvalósítását 121 bájtban!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’videó’, successCallback, errorCallback);
function successCallback (stream) {
video.src = folyam;
}
function errorCallback (hiba) {
console.log (hiba);
}
02. $ (’fény’). FadeIn ();
Az Arduino mikrokontroller platform kiváló minőségű példa a "dobozon kívüli" JavaScript használati esetre. Azok számára, akik nem ismerik az Arduino platformot, íme egy nagyon híres idézet a weboldaláról:
"Az Arduino egy nyílt forráskódú elektronikai prototípus-készítő platform, amely rugalmas, könnyen használható hardveren és szoftveren alapul. Művészeknek, tervezőknek, hobbistáknak és bárkinek, aki érdeklődik interaktív tárgyak vagy környezetek létrehozása iránt."
Maga az Arduino csak C-ben írt kódot támogat, ami még mindig nem nagy baj. Néhány sor C-vel (azon kívül, hogy mások elvégezték ezt a munkát az Ön számára), az Arduino USB portján keresztül fogadhat parancsokat a soros port protokollján keresztül.
De hogyan lehet elérni a soros portot JavaScript-en keresztül? Egyértelmű, hogy nem a böngészőből.
Node.js a megmentéshez!
Chris Williams közösségi szószólójának erőfeszítései miatt van egy Node soros port könyvtár, ahol adatokat küldhetünk a régi SP protokollon keresztül. Ez volt a kezdeti áttörés, a könyvtár alapján más emberek elvontabb megközelítéssel álltak elő Arduino képességeivel kapcsolatban. Például a node-arduino és a duino könyvtár.
A JS által vezérelt Arduino programozás blokkja körüli legforróbb és legmenőbb könyvtár mostanra már ötös. Nézze meg a Bocoup blogját az Arduino platformmal végzett rengeteg szarról és rengeteg plug-inről. Nicolai Onken és Jörn Zaefferer JSConf videója is megvilágíthatja a ma lehetséges kódot.
03. A kezed a böngészőhöz készült
A Minority Report jövőbeli jövőképe (az, ahol a számítógépet irányítják a kezével, nem a csúnya autókkal) minden nap egyre közelebb kerül. Óriási lépés volt ebben az irányban a Microsoft vezérlője kevesebb játékkísérlete, a Kinect. Csodálatos játékmenet, gondolhatja, de mi köze ennek a JavaScript-hez ?!
A Microsoft Kinect SDK kiadásával egy csomó ember lépte át a hidat a Kinect böngészőjében. Először azok a ChildNodes srácok, akik egy teljes működő kinect.js könyvtárat építettek, amely lehetővé teszi a Microsoft Kinect használatát a böngészőben.
Nagyon ajánlom, hogy nézze meg a demóikat és videóikat, ez robbanásszerű. A kinect.js könyvtár egyik fő hátránya, hogy a kliens hátulján futnia kell egy WebSocket szerver programnak (ez valójában a Kinect -> C # -> JS ragasztó).
Néhány MIT hírnevű hallgató dolgozik a megoldás lebontásában, amelyet DepthJS-nek hívnak.
egy in böngésző plugin, amely lehetővé teszi a Kinect használatát a Chrome és a Safari számára, még olyan webhelyek esetében is, amelyek nincsenek bármilyen formában Kinect alapú felhasználásra optimalizálva. A DepthJS jelenleg a fejlesztés korai szakaszában van, de mindenképpen érdemes nyomon követni.
04. 3D-s játékok, amelyeket a játékvezérlővel vezérel
Próbáltál már manapság nem Flash böngészővel játszani? A grafikai képességek elképesztőek, különösen, ha olyan játékklónokat lát, mint a Quake.
De amikor ezt a cuccot játszik, mindig a billentyűzetéhez és a (többnyire) ügyetlen egérhez van kötve. Ez nagy hátrány, különösen az akciójátékok esetében, valóban visszatartja őket a böngészőből.
Nem lenne jó, ha egyszerűen csatlakoztathatná az Xbox vezérlőjét a számítógépéhez, és elkezdheti játszani kedvenc böngészős játékát? Ez már nem jövőkép, köszönjön a Gamepad API-nak!
Ha az asztalodon van egy játékvezérlő, csatlakoztasd azonnal, és élvezd a játékokat, amelyek már használják a Gamepad API-t. A bemeneti vezérlők programozása is egy sütemény, nézze meg ezt a kódrészletet, vagy még jobb, futtassa maga:
div id = "gamepads"> / div>
szkript>
function gamepadConnected (esemény) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad csatlakoztatva (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Ha többet szeretne megtudni a böngészők 3D-képességeiről, nézze meg a Three.js és a Jens Arps nyílt forráskódú 3D szimulátor motorját, amely a tetejére épült. Mark Hammil vigyázz, szükségünk lehet rád egy újabb Wing Commander folytatáshoz!
05. Flash futtatása az iPad-en
Nyílt szabványok kedvelőjeként és az Apple rajongóként el kell ismernem, hogy nagyon szeretném megköszönni az Apple-nek, hogy nem helyezte a Flash-t az iPadre és az iPod-ra. Ez valóban elindította az olyan nyílt technológiák átfogó mozgását, mint a HTML5, CSS3 és a JavaScript.
Ügynökségi alkalmazottként azt kell mondanom, hogy ez valóban rossz helyzet ügyfeleink számára.
Legtöbbjüknek kétszer kell fizetnie egy egyszerű hirdetésért vagy kampányért, amelyet azért indítanak, hogy az interaktív tartalom a régi IE7 vagy IE8 Flash-en és a modern böngészőkön, valamint az iDevices HTML5-n keresztül fusson.
A régi böngészők funkcióinak többszörös kitöltésével határai vannak, többnyire teljesítménynek nevezve. Tehát nincs lehetőség a Flash futtatására ezeken a Flashless iDevices eszközökön?
Természetesen van ilyen, és természetesen beépített JavaScript-be.
Egy darab történelem: 2010-ben Tobias Schneider kiadott egy kis könyvtárat, Gordon néven
amely lehetővé tette az SWF fájlok közvetlen futtatását a böngészőben. Ez elég jól működött olyan kis Flash-fájlok esetében, mint például azok a hirdetések, amelyek csak a Flash 2-es verziójáig használták a funkciókat, de a magasabb szintű funkcionalitás egyáltalán nem volt benne.
Amikor Tobias csatlakozott az ueberJS UXEBU céghez, új ötlettel álltak elő.
Így született meg Bikeshed. Maga a Bikeshed egyfajta JavaScript-animációs keretrendszer, de egyben a Flash-t is a Flash-hez mindenre, amire fordítónak kíván lenni (ez adapteralapú, így bármihez írhat adaptereket, bár a szokásos viselkedés a Flash JavaScript-be fordítása) . Kompatibilis a Flash 10 és az ActionScript 3 szoftverekkel. Vessen egy pillantást a weboldalára, hogy többet tudjon meg a fordítón kívüli rengeteg szolgáltatásról.
06. Alkalmazások írása okostelefonjára
Natív alkalmazások írása mobiltelefonos környezetekhez sziklás út. Azzal a döntéssel kezdődik, hogy melyik platformot szeretné támogatni. Ha az alkalmazás iPhone-on és iPad-en, Android-alapú mobileszközön, Windows Mobile-, Blackberry-eszközökön, webOS-alapú Pla ... és így tovább fut.
Ezen platformok mindegyikének megvan a saját API-ja, és többnyire különböző programozási nyelveket használ.
Ha túlélted a böngészőháborúkat, hadd mondjam el, hogy ez egy sokkal nehezebb harc a bejutáshoz. Szinte lehetetlen, hogy egy fejlesztő időben és költségkeretben alkalmazást készítsen ezekre a platformokra.
Szóval mit kéne tenni? Béreljen további fejlesztőket? Töltsön többet az alkalmazásokért? Vagy talál egy jobb megközelítést, hogy megbizonyosodjon arról, hogy a kódbázis minden eszközön fut? Mint a legtöbben, inkább az utolsó megközelítést preferálnám.
De miben kell ezeket az alkalmazásokat felépíteni? Mi a közös ezekben a platformokban? Lehet, hogy tudja a választ, ez egy webböngésző, ezért egy JavaScript motor.
Ez az ötlet az Apache Cordova mögött, amely ismertebb nevén korábbi nevén PhoneGap.
A Cordova egy olyan JavaScript keretrendszer, amely kivonatolja az egyes mobil környezetek API-ját, és egy letisztult JavaScript API-t tesz ki mindegyikük irányítására. Ez lehetővé teszi egyetlen kódbázis fenntartását, amelyet aztán különböző mobileszközökön épít és telepít.
Nézze meg az itt található forrásokat, hogy megtudja, hogyan lehet a Cordovát felhasználni olyan kick ass mobilalkalmazások készítéséhez, amelyeket egyszer felépített és mindenhol futtatni fog.
07. A Ruby és a Python futtatása a böngészőben
A Mozilla, a híres Firefox böngésző mögött álló vállalat rengeteg geeket alkalmaz, ez biztos. Egyikük Zakai Alon, a Mozilla Research Team mérnöke, aki egy furcsa eszközt épített Emscripten néven.
Az Emscripten lehetővé teszi, hogy az LLVM bitkódot - amely C / C ++ alapú könyvtárakból generálható - JavaScript-be vigye. Ezt úgy csinálja, hogy a könyvtárakat bites kódokká állítja össze, majd felveszi azt a kódot és átalakítja JavaScript-be. Ügyes, de valójában mit tehetek ezzel, kérdezheted magadtól?
Van egy ellenkérdésem önnek: hallotta-e már azt a mondatot, hogy "A CoffeeScript és a Prototype használata a legközelebb a Ruby futtatásához a böngészőben?" Nem? Ne aggódjon, mert ez már nem igaz.
Az Emscripten segítségével egyszerűen átveheti a Ruby forrásokat, átalakíthatja azokat JavaScript-be és voilà-ba, és az igazi Ruby-t futtathatja a böngészőben! De ez nem csak a Ruby-ra vonatkozik, például a Pythont is leírták.
Vagy nézze meg a Broadway böngésző h.264 dekóderét. Ez valójában egy leírt C ++ könyvtár!
Látogasson el a repl.it oldalra, és nézzen meg néhány böngészőben futó programozási nyelvet (beleértve a Ruby-t és a Python-ot is)!
08. OS-től független asztali programok írása
Korábban már beszéltünk arról, hogy több mobil platformot céloznak meg az Apache Cordova segítségével. Nem meglepő, hogy a JavaScript nem csak a mobil platformok célzására használható, hanem régi barátunk, az asztali számítógép is megoldható.
Az első megoldásokat a Titanium Desktop Suite-t kínáló Appcelerator srácok és az Adobe által széles körben használt Air platform jelentette.
De mivel mindannyian a nyílt forráskód kedvelői vagyunk, egy nyitottabb és a Node.js alapú technológiát keresünk. Ismerje meg az app.js-t! Az app.js egy nyílt webtechnológiai és Node.js alapú asztali program-készítő, amely lehetővé teszi számunkra, hogy valódi asztali programokat írjunk fájlrendszer-hozzáféréssel, ablakvezérlőkkel és egyebekkel. Bízhatunk a Node stabil cross-platform API-jaiban, és HTML és CSS segítségével felépíthetjük szoftveres felhasználói felületünket. Csakúgy, mint itt a lista legforróbb új anyagai.
Az app.js egy meglehetősen fiatal projekt, ezért mára csak a Windows és a Linux rendszereket támogatja, de a levelezőlista szerint a Mac támogatás már úton van.
09. Webszerver futtatása
Manapság senkit nem sokkol, ha elmondja nekik, hogy webhelyét egy JavaScript alapú webszerver szolgálja ki. Ha visszagondol két vagy három évvel ezelőttre, és pontosan ugyanezt mondta a webfejlesztőknek, valószínűleg kinevettek volna rajtad, vagy még rosszabbul.
De a Node.js hihetetlen sikerével ez szerencsére messze van. A Node.js aszinkron jellege miatt már nemcsak meglepő az embereken, mivel aszinkron jellege miatt a Wunderkind a teljesítménye, különösen akkor, ha a sok párhuzamos kapcsolat problémájával kell szembenéznie. Nem csak a teljesítménye robbanásszerű, hanem az igazán egyszerű API is rengeteg fejlesztőt vonz. Nézzük meg a "Hello World" példát a Node világból, ez nem csak egy nyomtatott "Hello World" a képernyőn, hanem egy http webszerver!
var http = igény (’http’);
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hello World n’);
}). figyelj (1337, ’127.0.0.1’);
Ha nem fújt el ez az egyszerűség, nos, én sem tudok segíteni.
A Node népszerűségének (vagy hype) egyik legjobb része az, hogy a nagyvállalatok, mint például a Microsoft, valóban támogatják, vagyis az Azure Cloud Services szolgáltatásukban!
10. Weblapolás és képernyőfelvétel
Végül, de nem utolsósorban vessünk egy pillantást egy olyan projektre, amelyet személy szerint szeretek, mert fej nélkül engedtem lefuttatni a QUnit tesztjeimet a parancssorban. A PhantomJS egy fej nélküli WebKit alapú böngésző, amely ügyes JavaScript (vagy CoffeScript) alapú API-val rendelkezik.
De a JavaScript és a DOM tesztelése nem az egyetlen eset a Phantom számára. Ami engem igazán elbűvöl, az a képesség, hogy megkaparom a weboldalakat, és lehetővé teszi, hogy képernyőképeket készítsenek róla!
Igen, jól olvasod, a Phantom segítségével weblapokat adhatsz ki különböző grafikus formátumokban, és ez természetesen olyan egyszerű, mint édességet lopni egy csecsemőtől.
Vessünk egy pillantást egy szkriptre, amely pontosan ezt csinálja:
var page = new WebPage ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
fantom.kimenet ();
});
Ennyi kell egy képernyőkép elkészítéséhez, és mivel ez JavaScript alapú, használhatja a jQuery-t és manipulálhatja az oldal tartalmát, mielőtt a képernyőn megjelenítené!
Várjon! Van még...
Tehát, remélem, ugyanolyan csodálkozik, mint én, amikor felfedeztem ezeket az eszközöket. Ez a cikk csak megvakarta a felületét annak, ami manapság lehetséges a JavaScript használatával. Sokkal több az IDE-k teljes egészében JS Cloud9-be írva, vagy az ezzel végzett magas szintű biztonsági dolgok (a hitelkártyád JavaScript-sel készült).
Remélem, hogy inspiráltnak érzi magát, szánjon egy kis időt, és játsszon el néhány itt említett projektet, vagy még jobb, ha vesz néhány ilyen eszközt, és új dolgokat épít köréjük. Ennek nagy része nyílt forráskódú, és vannak fejlesztők, akik téged keresnek, hogy segítsen nekik javítani a munkájukon, még akkor is, ha csak az eszközök használatával, a hibák felfedezésével és azok jelentésével jár.
