Isi
- 01. Saatnya hangout
- 02. $ ('light'). FadeIn ();
- 03. Tangan Anda dibuat untuk browser
- 04. Game 3D yang dikontrol dengan gamepad Anda
- 05. Menjalankan Flash di iPad Anda
- 06. Menulis aplikasi untuk smartphone Anda
- 07. Menjalankan Ruby dan Python di browser Anda
- 08. Menulis program desktop OS independen
- 09. Menjalankan webserver
- 10. Webscraping dan screenshot
- Tunggu! Masih ada lagi ...
JavaScript telah berkembang pesat sejak kelahirannya pada tahun 1995. Cara yang sulit pasti, penuh dengan kesalahpahaman, penyalahgunaan dan ketidaktahuan. Tetapi waktu telah berubah, sejak lima tahun terakhir JavaScript telah mendapatkan lebih banyak perhatian. Dengan perhatian lebih, lebih banyak pengembang yang benar-benar menggunakan JavaScript, menggunakannya untuk berbagai tujuan dan menikmati keindahannya. Cerita klasik "Ugly Duckling", jika Anda bertanya kepada saya.
Dalam artikel berikut, kita akan menemukan 10 kasus penggunaan untuk JavaScript yang berbeda dari penggunaan "di browser" yang biasa Anda lakukan.
01. Saatnya hangout
Apakah Anda ingat visi 80-an tentang komunikasi video seperti Facetime?
Hanya butuh waktu 20 tahun sebelum ini menjadi arus utama karena hampir di mana-mana tersedia internet broadband dan penggunaan berat dari perangkat lunak kecil yang disebut Skype.
Dengan kemampuan Flash Adobe dan upaya Google untuk membangun jaringan sosial, kami telah memiliki kemampuan komunikasi video di browser kami. Bukankah keren memiliki kemampuan tersebut tanpa menggunakan plugin pihak ketiga seperti Flash?
Untungnya, vendor browser berpikiran sama dan menerapkan API "getUserMedia" ke dalam perangkat lunak mereka. Ini adalah langkah pertama untuk mengakses perangkat seperti kamera atau mikrofon langsung dari browser Anda.
Menggunakan Node.js sebagai server di bagian belakang aplikasi semacam itu, sangat mudah untuk mengirimkan sinyal video melalui udara ke satu atau beberapa klien. Sayangnya, pada saat penulisan ini, hanya Chrome dan Opera yang mendukung API, tetapi yang lain akan menyusul dengan cepat.
Pendekatan yang lebih bersih untuk komunikasi dua arah saat ini adalah satu-satunya Chrome, yang disebut WebRTC. Karena WebRTC, klien diaktifkan untuk membuka saluran komunikasi peer to peer, langsung menghubungkan klien dengan klien.
Demi kesenangan, lihat implementasi Photo Booth Sindre Sorhus yang dilakukan dalam 121 byte!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (stream) {
video.src = aliran;
}
function errorCallback (kesalahan) {
console.log (kesalahan);
}
02. $ ('light'). FadeIn ();
Platform mikrokontroler Arduino adalah contoh kelas A untuk kasus penggunaan JavaScript "di luar kotak". Bagi Anda yang belum terbiasa dengan platform Arduino, berikut kutipan yang sangat terkenal dari situsnya:
"Arduino adalah platform pembuatan prototipe elektronik sumber terbuka yang didasarkan pada perangkat keras dan perangkat lunak yang fleksibel dan mudah digunakan. Arduino ditujukan untuk seniman, desainer, penghobi, dan siapa pun yang tertarik untuk membuat objek atau lingkungan interaktif."
Arduino sendiri hanya mendukung kode yang ditulis dalam C, yang masih bukan masalah besar. Dengan beberapa baris C (selain itu orang lain telah melakukan pekerjaan ini untuk Anda), Arduino dapat menerima perintah melalui port USB-nya melalui protokol port serial.
Tetapi bagaimana Anda bisa mengakses port serial melalui JavaScript? Jelas bukan dari browser.
Node.js untuk menyelamatkan!
Karena upaya advokat komunitas Chris Williams, kami memiliki perpustakaan port serial Node, tempat kami dapat mengirim data melalui protokol SP lama. Ini adalah terobosan awal, berdasarkan perpustakaan, orang lain muncul dengan pendekatan yang lebih abstrak untuk kemampuan Arduino. Misalnya pustaka node-arduino dan duino.
Perpustakaan terpanas dan paling keren di sekitar blok untuk pemrograman Arduino yang digerakkan JS saat ini adalah jonny-five. Kunjungi blog Bocoup untuk mengetahui beberapa hal keren yang telah mereka lakukan dengan platform Arduino dan banyak plugin. Juga video JSConf dari Nicolai Onken dan Jörn Zaefferer mungkin memberi Anda gambaran tentang apa yang mungkin dilakukan hari ini dengan sedikit kode.
03. Tangan Anda dibuat untuk browser
Visi masa depan Minority Report (di mana mereka mengontrol komputer dengan tangan mereka, bukan mobil jelek) semakin dekat setiap hari. Langkah besar ke arah ini adalah upaya bermain tanpa pengontrol Microsoft, Kinect. Gameplay luar biasa yang mungkin Anda pikirkan, tetapi apa hubungannya ini dengan JavaScript ?!
Dengan rilis SDK Kinect Microsoft, sekelompok orang melewati jembatan dalam penggunaan browser untuk Kinect. Pertama-tama orang-orang ChildNodes yang telah membangun pustaka kinect.js yang berfungsi lengkap, yang memungkinkan penggunaan Kinect Microsoft di browser Anda.
Saya sangat merekomendasikan untuk melihat demo dan video mereka, itu sangat menyenangkan. Namun, satu kelemahan utama dari pustaka kinect.js adalah, harus ada program server WebSocket yang berjalan di belakang klien (itu sebenarnya adalah lem Kinect -> C # -> JS).
Beberapa mahasiswa MIT terkenal sedang mengerjakan solusi untuk meruntuhkan tembok ini, yang disebut DepthJS,
plugin dalam browser yang memungkinkan penggunaan Kinect untuk Chrome dan Safari, bahkan untuk situs yang tidak dioptimalkan untuk penggunaan berbasis Kinect dalam bentuk apa pun. DepthJS saat ini sedang dalam tahap pengembangan awal, tetapi pasti layak untuk dilacak.
04. Game 3D yang dikontrol dengan gamepad Anda
Pernahkah Anda mencoba memainkan game browser non-Flash saat ini? Kemampuan grafisnya luar biasa, terutama ketika Anda melihat game klon seperti Quake.
Namun saat memainkan hal ini, Anda selalu terikat dengan keyboard dan mouse (yang sebagian besar) kikuk. Ini adalah kerugian utama, khususnya untuk game aksi, ini benar-benar menahan mereka dari browser.
Bukankah lebih keren jika Anda cukup mencolokkan pengontrol Xbox ke PC dan mulai memainkan game browser favorit Anda? Ini bukan lagi visi masa depan, sambutlah API Gamepad!
Jika Anda memiliki gamepad di sekitar meja Anda, hubungkan sekarang dan nikmati beberapa game, yang sudah menggunakan API Gamepad. Memprogram kontrol input juga sangat mudah, lihat cuplikan kode ini atau bahkan lebih baik, jalankan sendiri:
div id = "gamepads"> / div>
script>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Terhubung (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Jika Anda ingin tahu lebih banyak tentang kemampuan 3D browser, lihat mesin simulator 3D sumber terbuka Three.js dan Jens Arps Ascent yang dibangun di atasnya. Mark Hammil hati-hati, kami mungkin membutuhkan Anda untuk sekuel Komandan Sayap lainnya!
05. Menjalankan Flash di iPad Anda
Sebagai pecinta standar terbuka dan penggemar Apple, saya harus mengakui bahwa saya ingin berterima kasih kepada Apple karena tidak memasang Flash di iPad dan iPod, ini benar-benar memulai gerakan merangkul teknologi terbuka seperti HTML5, CSS3, dan JavaScript.
Sebagai karyawan agensi, saya harus mengatakan bahwa ini adalah situasi yang sangat buruk bagi pelanggan kami.
Sebagian besar dari mereka harus membayar dua kali untuk iklan atau kampanye sederhana yang mereka luncurkan agar konten interaktif berjalan di IE7 atau IE8 lama melalui Flash dan di browser modern serta iDevices melalui HTML5.
Mengisi banyak fitur browser lama memiliki batasannya, yang sebagian besar dinamai kinerja. Jadi, apakah tidak ada kemampuan untuk menjalankan Flash di iDevices Tanpa Flash tersebut?
Tentu saja ada, dan tentu saja itu dibangun dalam JavaScript.
Sepenggal sejarah: Pada tahun 2010 Tobias Schneider merilis sebuah perpustakaan kecil bernama Gordon
yang memungkinkan file SWF berjalan langsung di browser. Ini bekerja cukup baik untuk file Flash kecil seperti iklan yang hanya menggunakan fungsi hingga Flash versi 2, tetapi fungsionalitas tingkat yang lebih tinggi tidak disertakan sama sekali.
Saat Tobias bergabung dengan perusahaan ueberJS UXEBU, mereka mendapatkan ide baru.
Maka, Bikeshed lahir. Bikeshed sendiri adalah sejenis kerangka kerja animasi JavaScript, tetapi juga merupakan JavaScript ke Flash untuk semua yang Anda inginkan menjadi kompiler (berbasis adaptor, sehingga Anda dapat menulis adaptor untuk apa pun yang Anda inginkan, meskipun perilaku standarnya adalah mengompilasi Flash ke JavaScript) . Kompatibel dengan Flash 10 dan ActionScript 3. Lihat halaman webnya untuk mempelajari lebih lanjut tentang banyak fiturnya selain compiler.
06. Menulis aplikasi untuk smartphone Anda
Menulis aplikasi asli untuk lingkungan ponsel adalah jalan yang sulit. Ini dimulai dengan keputusan platform mana yang ingin Anda dukung. Jika aplikasi Anda berjalan di iPhone dan iPad, perangkat seluler yang diberdayakan Android, Windows Mobile, perangkat Blackberry, perangkat berbasis webOS ... dan seterusnya.
Masing-masing platform ini memiliki API-nya sendiri dan sebagian besar menggunakan bahasa pemrograman yang berbeda.
Jika Anda selamat dari perang browser, izinkan saya memberi tahu Anda bahwa ini adalah perjuangan yang jauh lebih sulit. Hampir tidak mungkin bagi pengembang untuk membangun aplikasi untuk semua platform ini dalam waktu dan anggaran.
Lalu apa yang harus dilakukan? Pekerjakan lebih banyak pengembang? Tagih lebih banyak untuk aplikasi? Atau temukan pendekatan yang lebih baik untuk memastikan basis kode Anda berjalan di setiap perangkat? Seperti kebanyakan dari Anda, saya lebih suka pendekatan terakhir.
Tetapi dalam hal apa aplikasi ini harus dibuat? Apa kesamaan dari semua platform ini? Anda mungkin tahu jawabannya, ini adalah browser web dan karenanya merupakan mesin JavaScript.
Itulah ide di balik Apache Cordova, yang lebih dikenal dengan nama sebelumnya PhoneGap.
Cordova adalah kerangka kerja JavaScript yang mengabstraksi API dari setiap lingkungan seluler dan memperlihatkan API JavaScript yang rapi untuk mengontrol semuanya. Ini memungkinkan Anda untuk mempertahankan satu basis kode, yang kemudian Anda buat dan terapkan pada perangkat seluler yang berbeda.
Lihat sumber daya di sini untuk mengetahui cara menggunakan Cordova untuk membangun aplikasi seluler kick ass yang Anda buat sekali dan akan berjalan di mana-mana.
07. Menjalankan Ruby dan Python di browser Anda
Mozilla, perusahaan di balik peramban Firefox yang terkenal, mempekerjakan banyak ahli, itu pasti. Salah satunya adalah Alon Zakai, seorang insinyur di Tim Riset Mozilla, yang membuat alat aneh bernama Emscripten.
Emscripten memungkinkan Anda mengambil kode bit LLVM - yang dapat dihasilkan dari pustaka berbasis C / C ++, ke JavaScript. Ini dilakukan dengan mengkompilasi pustaka menjadi kode bit dan kemudian, mengambil kode bit itu dan mengubahnya menjadi JavaScript. Baik, tapi apa yang sebenarnya bisa saya lakukan dengan ini, Anda mungkin bertanya pada diri sendiri?
Saya punya pertanyaan balasan untuk Anda: pernahkah Anda mendengar ungkapan "Menggunakan CoffeeScript dan Prototipe adalah cara terdekat untuk menjalankan Ruby di browser"? Tidak? Jangan khawatir, karena ini tidak benar lagi.
Dengan Emscripten Anda cukup mengambil sumber Ruby, mengubahnya menjadi JavaScript dan voila, menjalankan Ruby asli di browser Anda! Tetapi ini tidak berlaku untuk Ruby saja, Python misalnya juga di-emscripten.
Atau lihat di browser h.264 decoder Broadway. Itu sebenarnya adalah pustaka C ++ yang di-emscripten!
Buka repl.it untuk melihat beberapa bahasa pemrograman (termasuk Ruby dan Python) yang berjalan di browser Anda!
08. Menulis program desktop OS independen
Kami berbicara tentang menargetkan beberapa platform seluler dengan bantuan Apache Cordova sebelumnya. Tidak mengherankan, JavaScript tidak hanya dapat digunakan untuk menargetkan platform seluler, teman lama kita, komputer desktop, juga dapat digunakan.
Solusi pertama datang dari Appcelerator dengan Titanium Desktop Suite dan dari Adobe platform Air yang banyak digunakan.
Tetapi sebagai pecinta open source seperti kita semua, teknologi yang lebih terbuka dan berbasis Node.js adalah apa yang kita cari. Temui app.js! app.js adalah pembuat program desktop berbasis webtechnology dan Node.js terbuka, yang memungkinkan kita untuk menulis program desktop nyata dengan akses sistem file, kontrol jendela, dan banyak lagi. Kita dapat mengandalkan API Node lintas platform yang stabil dan membangun UI perangkat lunak kita dengan HTML dan CSS. Sama seperti barang baru paling panas di daftar ini di sini.
app.js adalah proyek yang cukup muda dan oleh karena itu hanya mendukung Windows dan Linux sekarang, tetapi menurut milis, dukungan Mac sedang dalam perjalanan.
09. Menjalankan webserver
Saat ini, Anda tidak perlu mengejutkan siapa pun ketika Anda memberi tahu mereka bahwa situs web Anda disajikan oleh server web berbasis JavaScript. Jika Anda mengingat kembali dua atau tiga tahun lalu, dan memberi tahu pengembang web dengan cara yang persis sama, mereka mungkin akan menertawakan Anda atau bahkan lebih buruk lagi.
Tetapi dengan kesuksesan luar biasa dari Node.js, untungnya ini masih jauh dari sekarang. Tidak hanya tidak mengejutkan orang lagi, karena sifat asynchronous Node.js adalah wunderkind dalam kinerja, terutama ketika menghadapi masalah banyak koneksi paralel. Tidak hanya kinerjanya yang luar biasa, API yang benar-benar sederhana juga menarik banyak pengembang. Mari kita lihat contoh "Hello World" dari dunia Node, ini bukan hanya cetakan "Hello World" pada contoh layar, ini juga server web http!
var http = membutuhkan (’http’);
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hello World n’);
}). dengar (1337, ’127.0.0.1’);
Jika Anda tidak terpesona oleh kesederhanaan ini, saya juga tidak dapat membantu Anda.
Salah satu bagian terbaik dari popularitas (atau hype) Node adalah, bahwa perusahaan besar seperti Microsoft sebenarnya mendukungnya, yaitu dalam Azure Cloud Services!
10. Webscraping dan screenshot
Jadi, yang tak kalah pentingnya, mari kita lihat proyek yang secara pribadi saya sukai karena mengizinkan saya menjalankan pengujian QUnit tanpa kepala pada baris perintah. PhantomJS adalah browser berbasis WebKit tanpa kepala dengan API berbasis JavaScript (atau CoffeScript) yang rapi.
Namun menguji JavaScript dan DOM Anda bukanlah satu-satunya kasus penggunaan untuk Phantom. Yang benar-benar membuat saya terpesona adalah kemampuannya untuk mengikis situs web dan memungkinkan Anda mengambil tangkapan layarnya!
Ya, Anda benar, dengan Phantom Anda dapat menghasilkan laman web dalam format grafis yang berbeda dan, tentu saja, semudah mencuri permen dari bayi.
Mari kita lihat skrip yang persis seperti ini:
var page = new WebPage ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
phantom.exit ();
});
Hanya itu yang Anda butuhkan untuk membuat tangkapan layar dan karena ini berbasis JavaScript, Anda juga dapat menggunakan jQuery dan memanipulasi konten halaman sebelum mengambilnya!
Tunggu! Masih ada lagi ...
Jadi, saya harap Anda sama kagumnya dengan saya, ketika saya menemukan semua alat ini. Artikel ini hanya menggores permukaan dari apa yang mungkin dilakukan dengan JavaScript saat ini. Masih banyak lagi yang seperti IDE yang seluruhnya ditulis di JS Cloud9 atau hal-hal dengan keamanan tinggi yang diselesaikan dengannya (Kartu Kredit Anda dibuat dengan JavaScript).
Saya harap Anda merasa terinspirasi, luangkan waktu dan bermain-main dengan beberapa proyek yang disebutkan di sini, atau bahkan lebih baik menggunakan beberapa alat ini dan membangun hal-hal baru di sekitarnya. Sebagian besar di sini adalah open source dan ada pengembang di luar sana, mencari Anda untuk membantu mereka meningkatkan pekerjaan, meskipun hanya dengan menggunakan alat, menemukan bug, dan melaporkannya.
