Obsah
- 01. Je čas na setkání
- 02. $ ('light'). FadeIn ();
- 03. Vaše ruce jsou stvořeny pro prohlížeč
- 04. 3D hry ovládané vaším gamepadem
- 05. Spuštění aplikace Flash na iPadu
- 06. Psaní aplikací pro váš smartphone
- 07. Ve vašem prohlížeči běží Ruby a Python
- 08. Psaní OS nezávislých desktopových programů
- 09. Spuštění webového serveru
- 10. Webscraping a screenshotování
- Počkejte! Je toho víc ...
JavaScript prošel od svého zrodu v roce 1995 dlouhou cestou. Určitě tvrdá cesta, plná nedorozumění, zneužití a nevědomosti. Ale doba se změnila, protože posledních pět let si JavaScript získává stále více pozornosti. S větší pozorností více vývojářů skutečně používá JavaScript, používá jej k mnoha různým účelům a užívá si jeho krásy. Klasický příběh „Ošklivé káčátko“, pokud se mě ptáte.
V následujícím článku objevíme 10 případů použití JavaScriptu, které se liší od běžných případů „v prohlížeči“, na které jste zvyklí.
01. Je čas na setkání
Vzpomínáte si na vizi 80. let videokonference podobné Facetime?
Trvalo to jen 20 let, než se to stalo hlavním proudem kvůli téměř všude dostupnému širokopásmovému internetu a hojnému používání malého softwaru s názvem Skype.
Díky schopnostem Adobe Flash a Google se snaží vybudovat sociální síť již máme v našem prohlížeči možnosti video komunikace. Nebylo by skvělé mít tyto schopnosti bez použití zásuvného modulu třetí strany, jako je Flash?
Naštěstí si prodejci prohlížečů mysleli totéž a implementovali do svého softwaru API „getUserMedia“. Toto byl první krok k přístupu k zařízením, jako jsou kamery nebo mikrofony, přímo z vašeho prohlížeče.
Při použití Node.js jako serveru v zadní části takové aplikace je neuvěřitelně snadné přenášet videosignál vzduchem k jednomu nebo více klientům. Bohužel v době psaní tohoto článku podporují API pouze Chrome a Opera, ale ostatní to rychle dohoní.
Čistší přístup k obousměrné komunikaci je v současné době pouze Chrome, který se nazývá WebRTC. Z důvodu WebRTC mohou klienti otevírat komunikační kanály typu peer to peer, které přímo spojují klienta s klientem.
Pro zábavu si prohlédněte implementaci Photo Booth Sindre Sorhus ve 121 bajtech!
var video = document.getElementsByTagName („video“) [0],
navigator.getUserMedia ('video', successCallback, errorCallback);
funkce successCallback (stream) {
video.src = stream;
}
funkce errorCallback (chyba) {
console.log (chyba);
}
02. $ ('light'). FadeIn ();
Platforma mikrokontroléru Arduino je příkladem pro případ použití JavaScriptu „out of the box“. Pro ty z vás, kteří nejsou obeznámeni s platformou Arduino, je zde super slavný citát z jejích webových stránek:
„Arduino je open-source platforma pro prototypování elektroniky založená na flexibilním a snadno použitelném hardwaru a softwaru. Je určena umělcům, designérům, fandům a všem, kteří mají zájem o vytváření interaktivních objektů nebo prostředí.“
Samotné Arduino podporuje pouze kód napsaný v jazyce C, což stále není velký problém. S několika řádky C (kromě toho, že to za vás udělali jiní) může Arduino přijímat příkazy přes svůj USB port přes protokol sériového portu.
Jak ale můžete získat přístup k sériovému portu přes JavaScript? Zjevně ne z prohlížeče.
Node.js na záchranu!
Kvůli úsilí obhájce komunity Chrisa Williamse máme knihovnu sériových portů Node, kde můžeme odesílat data přes starý protokol SP. To byl první průlom, založený na knihovně, kterou ostatní lidé přišli s abstraktnějším přístupem k schopnostem Arduina. Například knihovny uzlů arduino a duino.
Nejžhavější a nejúžasnější knihovnou kolem bloku pro programování Arduina řízeného JS je nyní jonny-five. Podívejte se na blog společnosti Bocoup, kde najdete horké hovno, které udělali s platformou Arduino a spoustou zásuvných modulů. Také video JSConf od Nicolaie Onkena a Jörna Zaefferera by vám mohlo pomoci to, co je dnes možné díky malému kódu.
03. Vaše ruce jsou stvořeny pro prohlížeč
Budoucí vize Minority Report (ta, kde ovládají počítače rukama, ne ošklivými auty) se každý den přibližuje. Velkým krokem v tomto směru byl pokus společnosti Microsoft o méně náročné hraní, Kinect. Úžasná hra, kterou si možná myslíte, ale co to má společného s JavaScriptem ?!
S vydáním sady Kinect SDK od společnosti Microsoft překročila v používání prohlížeče Kinect překážky spousta lidí. Nejprve kluci z ChildNodes, kteří vytvořili kompletní funkční knihovnu kinect.js, která umožňuje použití Kinect od Microsoftu ve vašem prohlížeči.
Důrazně doporučuji podívat se na jejich ukázky a videa, je to skvělý. Jednou z hlavních nevýhod knihovny kinect.js však je, že v zadní části klienta musí být spuštěn serverový program WebSocket (to je vlastně lepidlo Kinect -> C # -> JS).
Několik studentů slávy MIT pracuje na řešení, jak tuto zeď strhnout, zvané DepthJS,
plugin v prohlížeči, který umožňuje použití Kinect pro Chrome a Safari, a to i pro weby, které nejsou optimalizovány pro použití založené na Kinect v jakékoli formě. DepthJS je v současné době v rané fázi vývoje, ale rozhodně stojí za to sledovat.
04. 3D hry ovládané vaším gamepadem
Už jste někdy zkoušeli hrát v prohlížeči jinou hru než Flash? Grafické možnosti jsou úžasné, zvláště když vidíte herní klony jako Quake.
Ale při hraní těchto věcí jste vždy svázáni s klávesnicí a (většinou) neohrabanou myší. To je hlavní nevýhoda, zejména u akčních her, ve skutečnosti je drží zpět od prohlížeče.
Nebylo by v pohodě, kdybyste mohli jednoduše připojit ovladač Xbox k počítači a začít hrát svou oblíbenou hru v prohlížeči? Toto již není vize budoucnosti, pozdravte rozhraní Gamepad API!
Pokud máte kolem stolu gamepad, připojte jej hned teď a užívejte si některé hry, které již používají Gamepad API. Programování vstupních ovládacích prvků je také hračkou, podívejte se na tento fragment kódu nebo ještě lépe, spusťte jej sami:
div id = "gamepads"> / div>
skript>
funkce gamepadConnected (událost) {
var gamepads = document.getElementById ("gamepady"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad připojen (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skript>
Pokud byste se chtěli dozvědět více o 3D funkcích prohlížečů, podívejte se na open source 3D simulátor Three.js a Jens Arps postavený na Ascentu. Mark Hammil, dejte si pozor, možná vás budeme potřebovat pro další pokračování Wing Commander!
05. Spuštění aplikace Flash na iPadu
Jako milovník otevřených standardů a fanoušek společnosti Apple musím přiznat, že bych opravdu rád poděkoval společnosti Apple za to, že na iPady a iPod nedal Flash, což skutečně zahájilo hnutí zahrnující otevřené technologie jako HTML5, CSS3 a JavaScript.
Jako zaměstnanec agentury musím říci, že je to pro naše zákazníky opravdu špatná situace.
Většina z nich musí zaplatit dvakrát za jednoduchou reklamu nebo kampaň, kterou spouštějí, aby mohl interaktivní obsah běžet ve starém IE7 nebo IE8 přes Flash a v moderních prohlížečích, stejně jako iDevices přes HTML5.
Polyfilling funkcí starých prohlížečů má své hranice, většinou pojmenované výkon. Není tedy na těchto zařízeních Flashless iDevices možnost spouštět Flash?
Samozřejmě existuje jedna a samozřejmě je zabudována do JavaScriptu.
Kousek historie: V roce 2010 Tobias Schneider vydal malou knihovnu s názvem Gordon
což umožňovalo spuštění souborů SWF přímo v prohlížeči. To fungovalo docela dobře pro malé soubory Flash, jako jsou reklamy, které používaly pouze funkce do verze Flash 2, ale funkce vyšší úrovně nebyly vůbec zahrnuty.
Když se Tobias připojil ke společnosti ueberJS UXEBU, přišli s novým nápadem.
A tak se narodil Bikeshed. Samotný Bikeshed je druh rámce animace JavaScriptu, ale je také JavaScriptem pro Flash ke všemu, co chcete, aby byl kompilátor (je založen na adaptéru, takže můžete psát adaptéry pro cokoli chcete, ačkoli standardní chování je kompilace Flash do JavaScriptu) . Je kompatibilní s Flash 10 a ActionScript 3. Podívejte se na jeho webovou stránku a dozvíte se více o jeho spoustě funkcí kromě kompilátoru.
06. Psaní aplikací pro váš smartphone
Psaní nativních aplikací pro prostředí mobilních telefonů je kamenitá cesta. Začíná to rozhodnutím, kterou platformu chcete podporovat. Měla by vaše aplikace běžet na iPhonu a iPadu, mobilním zařízení se systémem Android, zařízeních Windows Mobile, Blackberry, platformě založené na webOS ... atd.
Každá z těchto platforem má své vlastní API a většinou používá různé programovací jazyky.
Pokud jste války prohlížečů přežili, dovolte mi, abych vám řekl, že je to mnohem těžší boj. Je téměř nemožné, aby vývojář vytvořil aplikaci pro všechny tyto platformy v čase a rozpočtu.
Tak co dělat? Najmout více vývojářů? Účtovat více za aplikace? Nebo najděte lepší přístup, abyste se ujistili, že vaše kódová základna běží na každém zařízení? Jako většina z vás bych upřednostňoval poslední přístup.
Ale v čem by tyto aplikace měly být postaveny? Co mají všechny tyto platformy společné? Odpověď možná znáte, jedná se o webový prohlížeč, a tedy o stroj JavaScript.
To je myšlenka, která stojí za Apache Cordova, známějším pod původním názvem PhoneGap.
Cordova je rámec JavaScriptu, který abstrahuje API každého mobilního prostředí a vystavuje úhledné API API, které je ovládá. To vám umožňuje udržovat jednu kódovou základnu, kterou pak sestavujete a nasazujete na různých mobilních zařízeních.
Podívejte se na zdroje zde a zjistěte, jak pomocí Cordovy vytvořit mobilní aplikace nakopané zadkem, které vytvoříte jednou a budou fungovat všude.
07. Ve vašem prohlížeči běží Ruby a Python
Mozilla, společnost, která stojí za slavným prohlížečem Firefox, zaměstnává spoustu geeků, to je jisté. Jedním z nich je Alon Zakai, inženýr výzkumného týmu Mozilla, který vytvořil podivný nástroj s názvem Emscripten.
Emscripten vám umožní vzít LLVM bitcode - který lze generovat z knihoven založených na C / C ++, do JavaScriptu. Dělá to tak, že kompiluje knihovny do bitového kódu a poté tento bitový kód převede na JavaScript. Elegantní, ale co s tím vlastně mohu udělat, můžete se ptát sami sebe?
Mám pro vás protiotázku: už jste někdy slyšeli frázi „Používání CoffeeScript a prototypů je to nejblíže, co můžete při spuštění Ruby v prohlížeči získat“? Ne? Nebojte se, protože to už není pravda.
S Emscripten můžete jednoduše vzít zdroje Ruby, transformovat je do JavaScriptu a voilà, nechat si ve svém prohlížeči spustit skutečnou Ruby! To však neplatí pouze pro Ruby, například Python byl také vypsán.
Nebo se podívejte na prohlížeč h.264 dekodér Broadway. To je vlastně psaná knihovna C ++!
Přejděte na repl.it a podívejte se, jak ve vašem prohlížeči běží několik programovacích jazyků (včetně Ruby a Pythonu)!
08. Psaní OS nezávislých desktopových programů
Mluvili jsme o cílení na více mobilních platforem pomocí Apache Cordova dříve. Není překvapením, že JavaScript lze použít nejen k cílení na mobilní platformy, ale také k řešení našeho starého přítele, stolního počítače.
První řešení pocházeli od lidí z Appcelerator s Titanium Desktop Suite a od Adobe široce používanou platformou Air.
Ale jako milovníci open source, kterými jsme všichni, hledáme otevřenější technologii založenou na Node.js. Seznamte se s app.js! app.js je otevřená webová technologie a tvůrce desktopových programů založený na Node.js, který nám umožňuje psát skutečné desktopové programy s přístupem k souborovému systému, ovládacími prvky okna a dalšími. Můžeme se spolehnout na stabilní multiplatformní API Node a vytvářet naše softwarové uživatelské rozhraní s HTML a CSS. Stejně jako nejžhavější novinky v tomto seznamu zde.
app.js je docela mladý projekt, a proto nyní podporuje pouze Windows a Linux, ale podle seznamu adres je podpora Mac na cestě.
09. Spuštění webového serveru
V dnešní době nikoho nešokujete, když jim řeknete, že váš web obsluhuje webový server založený na JavaScriptu. Pokud si vzpomínáte před dvěma nebo třemi lety a řekli jste webovým vývojářům přesně to samé, pravděpodobně by se vám vysmáli nebo ještě hůř.
Ale s neuvěřitelným úspěchem Node.js je to naštěstí daleko. Nejen, že už lidi nepřekvapuje, díky své asynchronní povaze je Node.js výkonným zázrakem, zvláště pokud jde o řešení problému mnoha paralelních připojení. Nejen jeho výkon je blast, skutečně jednoduché API přitahuje také mnoho vývojářů. Podívejme se na příklad „Hello World“ ze světa Node, nejde jen o tiskový „Hello World“ na příkladu obrazovky, je to i webový server http!
var http = require („http“);
http.createServer (funkce (požadavek, res) {
res.writeHead (200, {‘Content-Type’: ‘text / plain’});
res.end ('Hello World n');
}). poslouchat (1337, „127.0.0.1“);
Pokud vás tato jednoduchost nepřekvapí, pak vám také nemohu pomoci.
Jednou z nejlepších částí popularity Node (nebo humbuk) je to, že ji velké společnosti jako Microsoft ve skutečnosti podporují, tj. V jejich cloudových službách Azure!
10. Webscraping a screenshotování
V neposlední řadě se tedy podívejme na projekt, který osobně miluji, protože mi umožnil bezhlavě spouštět testy QUnit na příkazovém řádku. PhantomJS je bezhlavý prohlížeč založený na WebKit s elegantním API založeným na JavaScriptu (nebo CoffeScript).
Ale testování vašeho JavaScriptu a DOM není jediným případem použití pro Phantom. To, co mě opravdu fascinuje, jsou jeho schopnosti škrábat webové stránky a umožňovat vám pořizovat z nich snímky obrazovky!
Ano, čtete správně, s Phantomem můžete vytvářet webové stránky v různých grafických formátech a je to samozřejmě stejně snadné jako krást dítěti sladkosti.
Pojďme se podívat na skript, který to přesně dělá:
var page = new WebPage ();
page.open (‘http://google.com’, function (status) {
page.render ('google.png');
phantom.exit ();
});
To je vše, co potřebujete k vytvoření snímku obrazovky a protože je založen na JavaScriptu, můžete také použít jQuery a před vytvořením snímku obrazovky manipulovat s obsahem stránky!
Počkejte! Je toho víc ...
Doufám tedy, že jste ohromeni stejně jako já, když jsem objevil všechny tyto nástroje. Tento článek právě poškrábal povrch toho, co je dnes možné pomocí JavaScriptu. Je toho mnohem víc, jako jsou IDE zcela napsaná v JS Cloud9 nebo s tím spojené vysoké zabezpečení (vaše kreditní karta byla vytvořena pomocí JavaScriptu).
Doufám, že se budete cítit inspirováni, věnovat si čas a pohrát si s některými zde zmíněnými projekty, nebo ještě lépe využít některé z těchto nástrojů a vytvořit kolem nich nové věci. Většina z toho je zde open source a existují vývojáři, kteří hledají, jak jim pomoci zlepšit jejich práci, i když je to jen pomocí nástrojů, zjišťování chyb a hlášení.
