Zawartość
- 01. Czas na spotkanie
- 02. $ ('light'). FadeIn ();
- 03. Twoje ręce są stworzone dla przeglądarki
- 04. Gry 3D sterowane za pomocą gamepada
- 05. Uruchamianie Flasha na iPadzie
- 06. Pisanie aplikacji na smartfona
- 07. Uruchamianie Rubiego i Pythona w przeglądarce
- 08. Pisanie programów komputerowych niezależnych od systemu operacyjnego
- 09. Uruchamianie serwera WWW
- 10. Webscraping i zrzuty ekranu
- Czekać! Jest więcej...
JavaScript przeszedł długą drogę od swoich narodzin w 1995 roku. Z pewnością trudna droga, pełna nieporozumień, nadużyć i ignorancji. Ale czasy się zmieniły, ponieważ od pięciu lat JavaScript zyskuje coraz więcej uwagi. Z większą uwagą więcej programistów używa JavaScript, używając go do wielu różnych celów i ciesząc się jego pięknem. Klasyczna historia "Brzydkie kaczątko", jeśli o mnie chodzi.
W następnym artykule odkryjemy 10 przypadków użycia JavaScript, które różnią się od tych typowych „w przeglądarce”, do których jesteś przyzwyczajony.
01. Czas na spotkanie
Czy pamiętasz wizję komunikacji wideo w stylu Facetime z lat 80-tych?
Minęło tylko 20 lat, zanim to stało się głównym nurtem ze względu na prawie wszędzie dostępny szerokopasmowy internet i intensywne wykorzystanie małego oprogramowania o nazwie Skype.
Dzięki możliwościom Adobe Flash i próbie Google zbudowania sieci społecznościowej mamy już możliwości komunikacji wideo w naszej przeglądarce. Czy nie byłoby fajnie mieć te możliwości bez korzystania z wtyczki innej firmy, takiej jak Flash?
Na szczęście producenci przeglądarek pomyśleli to samo i zaimplementowali w swoim oprogramowaniu API „getUserMedia”. To był pierwszy krok w celu uzyskania dostępu do urządzeń, takich jak kamery lub mikrofony, bezpośrednio z przeglądarki.
Używając Node.js jako serwera z tyłu takiej aplikacji, niezwykle łatwe jest przesyłanie sygnału wideo drogą radiową do jednego lub większej liczby klientów. Niestety, w chwili pisania tego, tylko Chrome i Opera obsługują API, ale inne szybko nadrobią zaległości.
Bardziej przejrzyste podejście do komunikacji dwukierunkowej to obecnie jedyna rzecz w Chrome, zwana WebRTC. Dzięki WebRTC klienci mogą otwierać kanały komunikacji peer to peer, bezpośrednio łącząc klienta z klientem.
Dla zabawy sprawdź implementację Photo Booth firmy Sindre Sorhus wykonaną w 121 bajtach!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia ('video', successCallback, errorCallback);
function successCallback (stream) {
video.src = stream;
}
function errorCallback (błąd) {
console.log (błąd);
}
02. $ ('light'). FadeIn ();
Platforma mikrokontrolera Arduino jest przykładem klasy A dla przykładu użycia JavaScript „po wyjęciu z pudełka”. Dla tych z Was, którzy nie znają platformy Arduino, oto bardzo znany cytat z jej witryny internetowej:
„Arduino to platforma do prototypowania elektroniki typu open source oparta na elastycznym, łatwym w obsłudze sprzęcie i oprogramowaniu. Jest przeznaczona dla artystów, projektantów, hobbystów i wszystkich zainteresowanych tworzeniem interaktywnych obiektów lub środowisk”.
Samo Arduino obsługuje tylko kod napisany w C, co nadal nie jest wielkim problemem. Za pomocą kilku wierszy C (poza tym, że inni wykonali tę pracę za Ciebie), Arduino może odbierać polecenia przez port USB za pośrednictwem protokołu portu szeregowego.
Ale jak uzyskać dostęp do portu szeregowego za pomocą JavaScript? Najwyraźniej nie z przeglądarki.
Node.js na ratunek!
Dzięki staraniom obrońcy społeczności, Chrisa Williamsa, mamy bibliotekę portu szeregowego Node, do której możemy przesyłać dane starym protokołem SP. To był pierwszy przełom, ponieważ w oparciu o bibliotekę, inni ludzie wymyślili bardziej abstrakcyjne podejście do możliwości Arduino. Na przykład biblioteki node-arduino i duino.
Najgorętszą i najfajniejszą biblioteką w całym bloku do programowania Arduino opartego na JS jest teraz jonny-five. Zapoznaj się z blogiem Bocoup, gdzie znajdziesz gorące rzeczy, które zrobili za pomocą platformy Arduino i wielu wtyczek. Również film JSConf autorstwa Nicolai Onken i Jörn Zaefferer może pokazać, co jest dziś możliwe przy niewielkiej ilości kodu.
03. Twoje ręce są stworzone dla przeglądarki
Przyszła wizja Raportu mniejszości (ta, w której kontrolują komputery za pomocą rąk, a nie brzydkie samochody) zbliża się każdego dnia. Ogromnym krokiem w tym kierunku była próba mniejszego grania kontrolerem Microsoftu, Kinect. Niesamowita rozgrywka, którą możesz pomyśleć, ale co to ma wspólnego z JavaScriptem ?!
Wraz z wydaniem Microsoft Kinect SDK, grupa ludzi przeszła przez most do korzystania z sensora Kinect w przeglądarce. Przede wszystkim faceci z ChildNodes, którzy zbudowali kompletną działającą bibliotekę kinect.js, która umożliwia korzystanie z Kinect firmy Microsoft w Twojej przeglądarce.
Gorąco polecam obejrzenie ich wersji demonstracyjnych i filmów, to super. Jedną z głównych wad biblioteki kinect.js jest jednak to, że z tyłu klienta musi być uruchomiony program serwera WebSocket (w rzeczywistości jest to klej Kinect -> C # -> JS).
Kilku sławnych studentów MIT pracuje nad rozwiązaniem, które pozwoli zburzyć tę ścianę, zwanym DepthJS,
wtyczka do przeglądarki, która umożliwia korzystanie z sensora Kinect w przeglądarce Chrome i Safari, nawet w przypadku witryn, które nie są zoptymalizowane pod kątem korzystania z technologii Kinect w jakiejkolwiek formie. DepthJS jest obecnie na wczesnym etapie rozwoju, ale zdecydowanie warto go śledzić.
04. Gry 3D sterowane za pomocą gamepada
Czy próbowałeś kiedyś zagrać w grę przeglądarkową inną niż Flash? Możliwości graficzne są niesamowite, zwłaszcza gdy widzisz klony gry, takie jak Quake.
Ale kiedy grasz w te rzeczy, zawsze jesteś przywiązany do klawiatury i (głównie) niezdarnej myszy. Jest to poważna wada, szczególnie w przypadku gier akcji, ponieważ naprawdę powstrzymuje je przed przeglądarką.
Czy nie byłoby fajnie, gdybyś mógł po prostu podłączyć kontroler Xbox do komputera i zacząć grać w swoją ulubioną grę przeglądarkową? To już nie jest wizja przyszłości, przywitaj się z interfejsem Gamepad API!
Jeśli masz gamepad wokół swojego biurka, podłącz go teraz i ciesz się grami, które już korzystają z interfejsu Gamepad API. Programowanie kontrolek wejścia również to bułka z masłem, sprawdź ten fragment kodu lub nawet lepiej, uruchom go samodzielnie:
div id = "gamepady"> / div>
skrypt>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepady"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Podłączono gamepad (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skrypt>
Jeśli chcesz dowiedzieć się więcej o możliwościach 3D przeglądarek, zapoznaj się z wbudowanym na jego podstawie silnikiem trójwymiarowego symulatora Open Source firmy Three.js i Jens Arps, Ascent. Mark Hammil, uważaj, być może będziemy cię potrzebować do kolejnej kontynuacji Wing Commander!
05. Uruchamianie Flasha na iPadzie
Będąc miłośnikiem otwartych standardów i fanem Apple, muszę przyznać, że naprawdę chciałbym podziękować Apple za to, że nie umieścił Flasha na iPadzie i iPodzie. To naprawdę zapoczątkowało ruch na rzecz otwartych technologii, takich jak HTML5, CSS3 i JavaScript.
Jako pracownik agencji muszę powiedzieć, że to bardzo zła sytuacja dla naszych klientów.
Większość z nich musi dwukrotnie zapłacić za prostą reklamę lub kampanię, którą uruchamiają, aby interaktywne treści działały w starym IE7 lub IE8 za pośrednictwem Flasha i na nowoczesnych przeglądarkach, a także iDevices za pośrednictwem HTML5.
Wypełnianie funkcji starszych przeglądarek ma swoje granice, głównie nazywane wydajnością. Czy nie ma więc możliwości uruchomienia Flasha na tych iDevices bez Flash?
Oczywiście, że jest i oczywiście jest wbudowany w JavaScript.
Fragment historii: W 2010 Tobias Schneider wydał małą bibliotekę o nazwie Gordon
co umożliwiło uruchamianie plików SWF bezpośrednio w przeglądarce. Działało to całkiem dobrze w przypadku małych plików Flash, takich jak reklamy, które korzystały tylko z funkcji do wersji Flash 2, ale funkcje wyższego poziomu w ogóle nie zostały uwzględnione.
Kiedy Tobias dołączył do firmy UXEBU ueberJS, wpadł na nowy pomysł.
I tak narodził się Bikeshed. Sam Bikeshed jest rodzajem frameworka animacji JavaScript, ale jest także JavaScript do Flash do wszystkiego, co chcesz, aby był kompilatorem (jest oparty na adapterach, więc możesz pisać adaptery do wszystkiego, co chcesz, chociaż standardowym zachowaniem jest kompilacja Flash do JavaScript) . Jest kompatybilny z Flash 10 i ActionScript 3. Zajrzyj na jego stronę internetową, aby dowiedzieć się więcej o wielu jego funkcjach poza kompilatorem.
06. Pisanie aplikacji na smartfona
Pisanie natywnych aplikacji dla środowisk telefonów komórkowych to trudna droga. Zaczyna się od decyzji, którą platformę chcesz wspierać. Jeśli Twoja aplikacja będzie działać na iPhonie i iPadzie, urządzeniu mobilnym z systemem Android, urządzeniach z systemem Windows Mobile, Blackberry, platformie opartej na webOS i tak dalej.
Każda z tych platform ma własne interfejsy API i najczęściej używa różnych języków programowania.
Jeśli przeżyłeś wojny przeglądarek, powiem ci, że jest to o wiele trudniejsza walka, aby się do niej dostać. Deweloper jest prawie niemożliwy do zbudowania aplikacji na wszystkie te platformy w terminie i budżecie.
Więc co robić? Zatrudnić więcej programistów? Ładować więcej za aplikacje? Albo znaleźć lepsze podejście, aby upewnić się, że baza kodu działa na każdym urządzeniu? Jak większość z was, wolałbym ostatnie podejście.
Ale w czym powinny być budowane te aplikacje? Co łączy te wszystkie platformy? Być może znasz odpowiedź, to przeglądarka internetowa, a zatem silnik JavaScript.
Taka jest idea Apache Cordova, lepiej znanego pod dawną nazwą PhoneGap.
Cordova to framework JavaScript, który wyodrębnia interfejsy API każdego środowiska mobilnego i udostępnia zgrabny interfejs API JavaScript do kontrolowania ich wszystkich. Umożliwia to utrzymanie jednej bazy kodu, którą następnie tworzysz i wdrażasz na różnych urządzeniach mobilnych.
Zapoznaj się z zasobami tutaj, aby dowiedzieć się, jak używać Cordova do tworzenia niesamowitych aplikacji mobilnych, które tworzysz raz i będą działać wszędzie.
07. Uruchamianie Rubiego i Pythona w przeglądarce
Mozilla, firma stojąca za słynną przeglądarką Firefox, zatrudnia wielu maniaków, to na pewno. Jednym z nich jest Alon Zakai, inżynier w Zespole Badawczym Mozilli, który stworzył dziwaczne narzędzie o nazwie Emscripten.
Emscripten umożliwia przeniesienie kodu bitowego LLVM - który można wygenerować z bibliotek opartych na C / C ++ do JavaScript. Robi to poprzez kompilację bibliotek do kodu bitowego, a następnie pobranie tego kodu bitowego i przekształcenie go w JavaScript. Schludnie, ale co właściwie mogę z tym zrobić, możesz zadać sobie pytanie?
Mam do Ciebie kontrpytanie: czy kiedykolwiek słyszałeś zdanie „Używanie CoffeeScript i Prototype jest najbliższe, jakie możesz uzyskać, uruchamiając Rubiego w przeglądarce”? Nie? Nie martw się, bo to już nieprawda.
Dzięki Emscripten możesz po prostu pobrać źródła Ruby, przekształcić je w JavaScript i voilà, uruchomić prawdziwy Ruby w swojej przeglądarce! Ale to nie dotyczy tylko Rubiego, na przykład Python był również emscriptened.
Lub sprawdź w przeglądarce dekoder h.264 Broadway. W rzeczywistości jest to biblioteka C ++ z emscriptenem!
Przejdź do repl.it, aby zobaczyć kilka języków programowania (w tym Ruby i Python) uruchomionych w Twojej przeglądarce!
08. Pisanie programów komputerowych niezależnych od systemu operacyjnego
Wcześniej rozmawialiśmy o kierowaniu na wiele platform mobilnych z pomocą Apache Cordova. Nic dziwnego, że JavaScript może być używany nie tylko do kierowania reklam na platformy mobilne, ale także do naszego starego przyjaciela, komputera stacjonarnego.
Pierwsze rozwiązania wyszły od ludzi z Appceleratora z Titanium Desktop Suite oraz od Adobe powszechnie używanej platformy Air.
Ale jako miłośnicy open source, którymi wszyscy jesteśmy, szukamy bardziej otwartej i opartej na Node.js technologii. Poznaj app.js! app.js jest otwartą technologią internetową i opartym na Node.js konstruktorem programów komputerowych, który umożliwia nam pisanie prawdziwych programów komputerowych z dostępem do systemu plików, kontrolkami okien i nie tylko. Możemy polegać na stabilnych, międzyplatformowych interfejsach API Node i zbudować nasz interfejs oprogramowania z HTML i CSS. Podobnie jak najgorętsze nowe rzeczy na tej liście tutaj.
app.js to całkiem młody projekt i dlatego obecnie obsługuje tylko systemy Windows i Linux, ale zgodnie z listą mailingową wsparcie dla komputerów Mac jest w drodze.
09. Uruchamianie serwera WWW
W dzisiejszych czasach nikogo nie szokujesz, kiedy mówisz im, że Twoja witryna jest obsługiwana przez serwer WWW oparty na JavaScript. Jeśli pomyślisz dwa lub trzy lata temu i powiesz twórcom stron internetowych dokładnie to samo, prawdopodobnie wyśmialiby cię lub nawet gorzej.
Ale dzięki niesamowitemu sukcesowi Node.js jest to na szczęście daleko od teraz. Nie dość, że nikogo to już nie dziwi, ze względu na swoją asynchroniczną naturę Node.js jest cudownym pomysłem pod względem wydajności, zwłaszcza jeśli chodzi o zmierzenie się z problemem wielu połączeń równoległych. Nie tylko jego wydajność jest niesamowita, ale naprawdę proste API przyciąga również wielu programistów. Zobaczmy przykład „Hello World” ze świata węzłów. To nie tylko wydrukowany przykład „Hello World” na ekranie, to serwer WWW http!
var http = require („http”);
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ('Witaj świecie n');
}). Listen (1337, ’127.0.0.1’);
Jeśli nie zaskoczy Cię ta prostota, cóż, ja też nie mogę ci pomóc.
Jedną z najlepszych części popularności (lub szumu) węzła jest to, że duże firmy, takie jak Microsoft, faktycznie je wspierają, tj. W swoich usługach Azure Cloud!
10. Webscraping i zrzuty ekranu
Na koniec przyjrzyjmy się projektowi, który osobiście uwielbiam za to, że pozwalał mi bezgłowo uruchamiać testy QUnit w wierszu poleceń. PhantomJS to bezgłowa przeglądarka oparta na WebKit z czystym interfejsem API opartym na JavaScript (lub CoffeScript).
Ale testowanie JavaScript i DOM to nie jedyny przypadek użycia Phantoma. To, co mnie naprawdę fascynuje, to możliwość pobierania stron internetowych i robienia zrzutów ekranu!
Tak, dobrze czytasz, dzięki Phantom możesz tworzyć strony internetowe w różnych formatach graficznych i, oczywiście, jest to tak proste, jak kradzież słodyczy dziecku.
Przyjrzyjmy się skryptowi, który dokładnie to robi:
var page = new WebPage ();
page.open („http://google.com”, funkcja (stan) {
page.render („google.png”);
phantom.exit ();
});
To wszystko, czego potrzebujesz, aby zrobić zrzut ekranu, a ponieważ jest on oparty na JavaScript, możesz również użyć jQuery i manipulować zawartością strony przed wykonaniem zrzutu ekranu!
Czekać! Jest więcej...
Mam więc nadzieję, że jesteś tak samo zdumiony jak ja, kiedy odkryłem każde z tych narzędzi. Ten artykuł właśnie zarysował powierzchnię tego, co jest obecnie możliwe dzięki JavaScriptowi. Jest o wiele więcej takich samych środowisk IDE, które są w całości napisane w JS Cloud9, ani rzeczy o wysokim poziomie bezpieczeństwa, które zostały z nimi zrobione (Twoja karta kredytowa została utworzona przy użyciu JavaScript).
Mam nadzieję, że poczujesz inspirację, poświęć trochę czasu i pobaw się niektórymi z wymienionych tutaj projektów, a nawet lepiej weź niektóre z tych narzędzi i zbuduj wokół nich nowe rzeczy. Większość z tego to oprogramowanie typu open source i są tam programiści, którzy szukają pomocy w ulepszaniu ich pracy, nawet jeśli odbywa się to tylko przy użyciu narzędzi, wykrywaniu błędów i zgłaszaniu ich.
