Di luar jQuery: Panduan ahli untuk kerangka JavaScript

Ciri khas dari programmer yang sangat baik adalah kemalasan. Itu tidak berarti bodoh atau bodoh. Pemrogram malas yang benar-benar baik tidak menulis (lalu perlu men-debug dan menguji) 100 baris kode ketika 10 sudah cukup. Di dunia JavaScript, pengembang yang benar-benar malas akan mengandalkan kerangka kerja yang efisien, teruji dengan baik, dan didukung dengan baik untuk menghindari terus-menerus menemukan kembali solusi untuk masalah umum.

Framework "membagi" sebagian besar fungsionalitas bahasa JavaScript menjadi pemanggilan metode, mengurangi jumlah kode yang dibutuhkan programmer malas untuk menulis, menguji, dan men-debug. Ada dua rintangan yang harus diselesaikan sebelum menuai keuntungan itu: memilih kerangka kerja untuk tujuan Anda, dan mempelajarinya.

Setelah Anda mempelajari kerangka kerja, kursus yang jelas adalah mematuhinya untuk semua yang Anda kembangkan sehingga Anda tidak perlu mempelajari hal lain, tetapi itu tidak selalu berguna. Faktanya, salah satu petunjuk yang mengatakan Anda menggunakan kerangka kerja yang salah untuk tugas Anda saat ini adalah Anda mendapati diri Anda melakukan banyak pekerjaan. Jadi malas banget dan terus belajar.

Sedikit sejarah JavaScript

Sejarah JavaScript kembali ke pekerjaan pengembangan yang dilakukan Brendan Eich pada bahasa Mocha untuk perusahaan browser Web Netscape pada tahun 1995. Mocha dirilis sebagai LiveScript akhir tahun itu dan diganti namanya menjadi JavaScript ketika Sun memberikan lisensi merek dagang kepada Netscape. Mencoba mengaitkan penerjemah JavaScript ringan mirip C dengan Java kelas berat yang tidak terkait — bahasa yang dikompilasi dengan token berorientasi objek — dengan menggunakan nama yang mirip sepertinya ide yang bagus untuk tujuan pemasaran pada tahun 1995, tetapi selama bertahun-tahun pilihan itu menyebabkan kebingungan yang tiada akhir.

Perkembangan JavaScript selama dekade berikutnya ditandai dengan ketidaksepakatan di antara pelaksana browser dan upaya standar ECMA yang cukup lemah. Apa yang mengubah malaise ini dan menghidupkan kembali bahasanya adalah munculnya Dynamic HTML dan Ajax di pertengahan 2000-an, diikuti dengan cepat oleh pengenalan pustaka JavaScript open source seperti Prototype, jQuery, Dojo, dan MooTools, yang dimaksudkan untuk membuat Dynamic HTML dan Ajax lebih mudah digunakan, dan menyediakan "widget" untuk JavaScript yang akan meningkatkan fungsionalitas kontrol formulir HTML.

Meskipun Netscape merilis server JavaScript tak lama setelah JavaScript untuk browser, bahasanya tidak benar-benar lepas landas untuk penggunaan back-end sampai munculnya Node.js mulai tahun 2009. Bagian dari apa yang membuat Node.js menarik adalah penggunaan Google mesin JavaScript V8 yang sangat disetel untuk modul perpustakaan, dengan kode inti dalam C ++ yang cukup portabel.

Tur kerangka kerja JavaScript ini adalah upaya untuk memahami pustaka JavaScript utama saat ini dalam tiga kategori: yang berjalan di server Node.js, yang bekerja di browser, dan yang mendukung aplikasi seluler asli atau hibrida.

Kerangka kerja Node.js.

Node.js adalah teknologi server berbasis JavaScript dan C ++ yang telah menarik cukup banyak perhatian dan dukungan sejak diperkenalkan (dengan tepuk tangan meriah) oleh penulis Ryan Dahl di JSConf Eropa pada November 2009. Node.js dibedakan oleh arsitektur event-driven mampu asynchronous I / O, footprint memori kecil, dan throughput tinggi serta skalabilitas untuk aplikasi Web.

Sementara Node.js memiliki semua bagian yang diperlukan untuk mengimplementasikan server Web, menulis lapisan itu membutuhkan beberapa pekerjaan. TJ Holowaychuk merilis Express 1.0 Beta pada Juli 2010, dan segera menjadi server back-end "default" untuk Node.js dan bagian dari tumpukan MEAN, dengan database MongoDB dan kerangka front-end Angular.JS.

Namun demikian, pengembang dan organisasi yang berbeda memiliki kebutuhan yang berbeda. Express secara langsung atau tidak langsung telah melahirkan Lokomotif, Hapi, Koa, Kraken, dan Sails.js. Meteor sangat berbeda, meskipun ia juga berjalan di Node.js.

Mengekspresikan. Express adalah framework aplikasi Web Node.js yang minimal dan fleksibel, menyediakan serangkaian fitur yang kuat untuk membangun aplikasi Web satu halaman, multi halaman, dan hybrid. Express API berhubungan dengan aplikasi Web, permintaan dan tanggapan HTTP, perutean, dan middleware. Mulai Express 4.x, middleware yang didukung untuk Express berada di sejumlah repositori terpisah.

Beberapa cabang Express dan add-on untuk Express telah muncul, termasuk Lokomotif, Hapi, dan Koa. Koa dibuat oleh salah satu kontributor utama Express.

Express lebih tua dari batang atas, dan memiliki footprint yang lebih besar. Namun demikian, ia juga memiliki komunitas yang lebih besar dan lebih stabil. Saya terus-menerus melihat Express dimasukkan ke dalam kerangka kerja dan alat lain tanpa komentar, seolah-olah itu adalah satu-satunya pilihan yang mungkin untuk membangun server Web di Node.js. Di GitHub, kerangka kerja ini memiliki lebih dari 23.000 bintang dan 4.000 garpu.

Hapi. Hapi adalah kerangka kerja yang mudah digunakan dan berpusat pada konfigurasi dengan dukungan bawaan untuk validasi input, caching, otentikasi, dan fasilitas penting lainnya untuk membangun aplikasi Web dan layanan. Hapi memungkinkan pengembang untuk fokus pada penulisan logika aplikasi yang dapat digunakan kembali dengan cara yang sangat modular dan preskriptif. Ini dikembangkan oleh Walmart Labs dan merupakan pilihan yang baik untuk tim besar dan proyek besar.

Hapi awalnya dibangun di atas Express, tetapi kemudian didesain ulang agar berdiri sendiri. Ini didasarkan pada gagasan bahwa "konfigurasi lebih baik daripada kode" dan "logika bisnis harus diisolasi dari lapisan transport". Dalam contoh di atas, perhatikan betapa jelas dan bersihnya konfigurasi rute server yang muncul di kode.

Koa. Koa adalah kerangka kerja Web baru yang dirancang oleh tim di belakang Express, tetapi tidak bergantung pada kode Express. Koa bertujuan untuk menjadi fondasi yang lebih kecil, lebih ekspresif, dan lebih kuat untuk aplikasi Web dan API. Koa menggunakan generator ES6 untuk middleware daripada menggunakan callback Node.js. Berikut ini adalah aplikasi Koa “halo, dunia” menggunakan generator, yang melakukan a yield nextuntuk meneruskan kontrol ke generator berikutnya:

Perbedaan antara generator middleware, seperti yang digunakan oleh Koa, dan callback, seperti yang digunakan oleh Express dan Connect, adalah Anda mendapatkan lebih banyak fleksibilitas dengan generator. Misalnya, Connect hanya meneruskan kontrol melalui serangkaian fungsi sampai kembali, sementara Koa menghasilkan kontrol "downstream", lalu kontrol mengalir kembali "upstream". Dalam contoh di atas, x-response-time “membungkus” generator respons, dengan yield nextpernyataan yang menandai panggilan tersebut. Menghasilkan lebih fleksibel daripada pemanggilan fungsi eksplisit, karena memudahkan untuk memasukkan generator lain ke dalam urutan — misalnya, pencatat Web antara pengatur waktu dan respons.

Kraken. Proyek sumber terbuka PayPal, Kraken adalah lapisan aman dan dapat diskalakan yang memperluas Express dengan menyediakan struktur dan konvensi, seperti Lokomotif. Meskipun Kraken adalah pilar utama kerangka kerjanya, modul berikut juga dapat digunakan secara independen: Lusca (keamanan), Kappa (proxy NPM), Makara (LinkedIn Dust.js I18N), dan Adaro (LinkedIn Dust.js Templating).

Kraken mengandalkan yountuk menghasilkan proyek, seperti yang ditunjukkan pada gambar di sebelah kiri. Seperti Lokomotif, ia mengatur proyeknya ke dalam direktori seperti Rails konvensional, termasuk model, pengontrol, dan konfigurasi. Seperti yang dihasilkan, ikatan Kraken ke Express sebagai middleware standar, didefinisikan sebagai app, yang kemudian memiliki nya app.use()dan app.listen()metode yang disebut. Setiap rute di server Kraken berada di filenya sendiri di folder pengontrol.

Lokomotif. Sebagai kerangka kerja Web untuk Node.js, Lokomotif mendukung pola MVC, rute RESTful, dan konvensi atas konfigurasi (seperti Rails), sambil berintegrasi dengan mulus dengan database dan mesin templat apa pun. Lokomotif dibangun di atas Express dan Connect, yang merupakan kerangka kerja lem sederhana untuk middleware yang digunakan oleh sejumlah kerangka kerja Node.js.

Lokomotif menambahkan Express beberapa struktur mirip Ruby on Rails, yang dapat Anda lihat pada gambar di atas, yang sebaliknya tidak dimiliki Express. Tampilan lokomotif sering kali berupa file JavaScript (html.ejs) yang disematkan, seperti yang ditunjukkan di sini, tetapi Lokomotif juga mendukung Jade dan mesin templat lain yang sesuai untuk Express. Fungsionalitas REST dikontrol oleh rute, seperti yang biasanya terjadi di server berbasis Express. Anda dapat menggunakan database dan lapisan ORM (pemetaan relasional objek) apa pun yang Anda inginkan dengan Lokomotif. Panduan ini mendemonstrasikan penggunaan MongoDB dengan Mongoose, serta bekerja dengan Passport untuk otentikasi pengguna.

Meteor. Meteor memberi Anda cara yang jauh lebih sederhana untuk membangun aplikasi seluler dan Web waktu nyata, seluruhnya dalam JavaScript, dari satu basis kode. Alih-alih mengirim HTML melalui kabel, Meteor mengirim data dari server untuk dirender oleh klien. Selain berjalan mandiri, Meteor dapat berintegrasi dengan AngularJS dan React. Meteor tidak seperti Express, meskipun ia juga dibangun di atas Node.js dan mendukung template Handlebars, Blaze, dan Jade.

Meteor memungkinkan pembuatan prototipe cepat dan menghasilkan kode lintas platform (Web, Android, iOS). Ini terintegrasi dengan MongoDB, menggunakan Distributed Data Protocol dan pola publish-subscribe untuk secara otomatis menyebarkan perubahan data ke klien tanpa memerlukan pengembang untuk menulis kode sinkronisasi apa pun. Pada klien, Meteor bergantung pada jQuery dan dapat digunakan dengan pustaka widget JavaScript UI.

Meteor dikembangkan oleh Meteor Development Group, sebuah startup yang diinkubasi oleh Y Combinator. Meteor sekarang cukup dewasa untuk mendukung setengah lusin buku tutorial. Proyek ini telah menarik lebih dari 32.000 bintang di GitHub.

Meteor sendiri adalah perangkat lunak sumber terbuka gratis, tetapi grup Meteor memonetisasinya dengan menjual langganan Meteor Galaxy DevOps, yang mencakup ruang server AWS dan dukungan Meteor dasar, dan langganan dukungan Premium terpisah.

Sails.js. Dengan Sails, Anda dapat membuat aplikasi Node.js tingkat perusahaan khusus. Ini dirancang untuk meniru pola kerangka kerja model-view-controller (MVC) yang sudah dikenal seperti Ruby on Rails, tetapi dengan dukungan untuk persyaratan aplikasi modern: API berbasis data dengan arsitektur berorientasi layanan yang dapat diskalakan. Ini sangat bagus untuk membuat aplikasi obrolan, dasbor waktu nyata, atau game multipemain, tetapi Anda dapat menggunakannya untuk proyek aplikasi Web apa pun. Sails mendukung WebSockets dan secara otomatis mengirimkan pesan socket ke rute aplikasi Anda.

Seperti Rails, Sails menilai konvensi di atas konfigurasi, menyediakan generator dan perancah untuk membangun REST API dengan cepat dari cetak biru, dan menggunakan pola desain MVC / rekaman aktif. Sails dibangun di atas Express dan menggunakan Waterline untuk ORM-nya, dengan dukungan untuk ORM join. Waterline mendukung database SQL dan NoSQL.

Sails adalah kerangka kerja back-end yang dirancang agar kompatibel dengan kerangka web front-end apa pun, seperti Angular atau Backbone, atau perangkat seluler, seperti iOS atau Android, yang kebetulan Anda sukai atau perlu dukung. Ada satu buku yang sedang dikerjakan di Sails.js, masih belum selesai sebagian.

Kerangka kerja HTML5 / JavaScript

Kami biasanya menganggap pustaka dan kerangka kerja JavaScript berjalan di browser. Seperti yang saya sebutkan sebelumnya, beberapa di antaranya — jQuery, Dojo, dan MooTools — muncul di pertengahan tahun 2000-an terutama untuk membuat Dynamic HTML dan Ajax lebih mudah ditulis. Beberapa di antaranya telah berkembang menjadi area fungsionalitas tambahan, seperti widget antarmuka pengguna dan antarmuka perangkat seluler.

Yang lainnya muncul baru-baru ini. AngularJS adalah kerangka kerja front-end yang memperluas HTML dengan markup untuk tampilan dinamis dan pengikatan data. Backbone.js dan Ember dirancang untuk mengembangkan aplikasi Web satu halaman. React digunakan untuk membangun UI atau tampilan, biasanya untuk aplikasi satu halaman.

Kerangka lain masih mengejar bidang spesialisasi yang lebih sempit. D3 melakukan visualisasi data dan animasi. Socket.IO mengimplementasikan aplikasi Web waktu nyata. Knockout adalah cara tingkat tinggi untuk menghubungkan model data ke UI Web. Polymer menawarkan lapisan "sugaring" ringan di atas API Komponen Web untuk membantu membangun komponen Web Anda sendiri. Underscore adalah pustaka utilitas umum.

Seperti yang mungkin Anda duga, Anda memiliki rasa malu akan kekayaan yang dapat dipilih untuk pengembangan Web sisi klien.

AngularJS.  AngularJS (atau cukup Angular, di antara teman-teman) adalah kerangka kerja Ajax JavaScript model-view-apa saja (MVW) yang memperluas HTML dengan markup untuk tampilan dinamis dan pengikatan data. Angular sangat bagus untuk mengembangkan aplikasi Web satu halaman dan menghubungkan formulir HTML ke model dan pengontrol JavaScript.

Pola model-view-apapun yang terdengar aneh merupakan upaya untuk memasukkan pola model-view-controller, model-view-viewmodel (MVVM), dan model-view-presenter (MVP) di bawah satu moniker. Sementara programmer suka memperdebatkan perbedaan antara ketiga pola yang terkait erat ini, pengembang Angular memutuskan untuk tidak ikut dalam diskusi.

Pada dasarnya, Angular secara otomatis menyinkronkan data dari UI (tampilan) Anda dengan objek JavaScript (model) melalui pengikatan data dua arah. Untuk membantu Anda menyusun aplikasi Anda lebih baik dan membuatnya mudah untuk diuji, Angular mengajarkan browser cara melakukan injeksi ketergantungan dan inversi kontrol.

Angular dibuat oleh Google dan bersumber terbuka di bawah lisensi MIT. Repositori di GitHub memiliki lebih dari 47.000 bintang dan 22.000 garpu. Made with Angular menampilkan ratusan situs web yang dibuat dengan Angular, banyak di antaranya adalah properti Web profil tinggi.