Beyond jQuery: Panduan pakar untuk rangka kerja JavaScript

Ciri utama pengaturcara yang sangat baik adalah kemalasan. Itu tidak bermaksud bodoh atau bodoh. Pengaturcara malas yang benar-benar baik tidak menulis (maka perlu debug dan menguji) 100 baris kod apabila 10 akan dilakukan. Dalam dunia JavaScript, pemaju yang benar-benar malas akan bergantung pada kerangka kerja yang cekap, teruji, dan disokong dengan baik untuk mengelakkan penemuan semula penyelesaian terhadap masalah biasa.

Kerangka kerja "mengetepikan" sebahagian besar fungsi bahasa JavaScript yang halus menjadi panggilan kaedah, mengurangkan jumlah kod yang perlu ditulis, diuji, dan disahpepala oleh pemrogram malas. Terdapat dua rintangan yang harus diselesaikan sebelum memperoleh kelebihan itu: memilih kerangka untuk tujuan anda, dan mempelajarinya.

Sebaik sahaja anda mengetahui kerangka kerja, kursus yang jelas adalah mengikutinya untuk semua yang anda kembangkan sehingga anda tidak perlu belajar sesuatu yang lain, tetapi itu tidak selalu berguna. Sebenarnya, salah satu petunjuk yang mengatakan bahawa anda menggunakan kerangka yang salah untuk tugas anda sekarang ialah anda mendapati diri anda melakukan banyak pekerjaan. Jadi benar-benar malas dan sentiasa terus belajar.

Sedikit sejarah JavaScript

Sejarah JavaScript kembali ke pekerjaan pengembangan yang dilakukan Brendan Eich pada bahasa Mocha untuk syarikat penyemak imbas Web Netscape pada tahun 1995. Mocha diluncurkan sebagai LiveScript pada akhir tahun itu dan dinamakan semula menjadi JavaScript ketika Sun memberikan Netscape lesen tanda dagangan. Mencuba mengaitkan jurubahasa JavaScript ringan seperti C dengan Java kelas berat yang tidak berkaitan — bahasa yang berorientasikan objek, disusun token — dengan nama yang serupa sepertinya merupakan idea yang baik untuk tujuan pemasaran pada tahun 1995, tetapi selama bertahun-tahun pilihan itu menyebabkan tiada kekeliruan.

Perkembangan JavaScript pada dekad berikutnya ditandai oleh ketidaksetujuan di antara pelaksana penyemak imbas dan usaha standard ECMA yang agak lemah. Apa yang mengubah malaise ini dan menghidupkan kembali bahasa adalah munculnya Dynamic HTML dan Ajax pada pertengahan tahun 2000-an, diikuti dengan cepat dengan pengenalan perpustakaan JavaScript sumber terbuka seperti Prototaip, jQuery, Dojo, dan MooTools, yang bertujuan untuk membuat Dynamic HTML dan Ajax lebih mudah digunakan, dan menyediakan "widget" untuk JavaScript yang akan meningkatkan fungsi kawalan bentuk HTML.

Walaupun Netscape melancarkan pelayan JavaScript sejurus selepas JavaScript untuk penyemak imbas, bahasa itu tidak benar-benar lepas untuk penggunaan back-end sehingga munculnya Node.js mulai tahun 2009. Sebahagian daripada yang menjadikan Node.js menarik adalah penggunaan Google enjin JavaScript V8 yang sangat sesuai untuk modul perpustakaan, dengan kod teras dalam C ++ yang cukup mudah alih.

Lawatan kerangka kerja JavaScript ini adalah usaha untuk memahami perpustakaan JavaScript utama hari ini dalam tiga kategori: yang berjalan di pelayan Node.js, yang berfungsi di penyemak imbas, dan yang menyokong aplikasi mudah alih asli atau hibrid.

Rangka kerja Node.js

Node.js adalah teknologi pelayan berasaskan JavaScript dan C ++ yang telah menarik banyak perhatian dan sokongan sejak diperkenalkan (kepada penghormatan) oleh pengarang Ryan Dahl di JSConf Eropah pada bulan November 2009. Node.js dibezakan oleh seni bina berasaskan acara yang mampu I / O tidak segerak, jejak memori kecil, dan throughput tinggi dan skalabiliti untuk aplikasi Web.

Walaupun Node.js mempunyai semua bahagian yang diperlukan untuk melaksanakan pelayan Web, menulis lapisan itu memerlukan banyak kerja. TJ Holowaychuk mengeluarkan Express 1.0 Beta pada bulan Julai 2010, dan ia segera menjadi pelayan belakang "lalai" untuk Node.js dan sebahagian daripada stack MEAN, dengan pangkalan data MongoDB dan kerangka depan Angular.JS.

Walaupun begitu, pemaju dan organisasi yang berbeza mempunyai keperluan yang berbeza. Express secara langsung atau tidak langsung melahirkan Locomotive, Hapi, Koa, Kraken, dan Sails.js. Meteor agak berbeza, walaupun terlalu berjalan di Node.js.

Menyatakan. Express adalah kerangka aplikasi Web Node.js yang minimum dan fleksibel, menyediakan sekumpulan ciri yang kuat untuk membina aplikasi Web satu halaman, berbilang halaman, dan hibrid. API Express berurusan dengan aplikasi Web, permintaan dan respons HTTP, routing, dan middleware. Pada Express 4.x, middleware yang disokong untuk Express berada di sejumlah repositori yang berasingan.

Beberapa garpu Express dan tambahan untuk Express telah muncul, termasuk Lokomotif, Hapi, dan Koa. Koa dicipta oleh salah satu penyumbang utama Express.

Express lebih tua dari bayangnya, dan mempunyai jejak yang lebih besar. Walaupun begitu, ia juga mempunyai komuniti yang lebih besar dan lebih stabil. Saya selalu melihat Express dimasukkan ke dalam kerangka kerja dan alat lain tanpa komen, seolah-olah itu adalah satu-satunya pilihan yang mungkin untuk membina pelayan Web di Node.js. Di GitHub, rangka kerja mempunyai lebih daripada 23,000 bintang dan 4,000 garpu.

Hapi. Hapi adalah kerangka kerja konfigurasi yang mudah digunakan dan disokong dengan sokongan terpadu untuk pengesahan input, caching, pengesahan, dan kemudahan penting lain untuk membina aplikasi Web dan perkhidmatan. Hapi membolehkan pembangun memberi tumpuan untuk menulis logik aplikasi yang boleh digunakan semula dengan cara yang sangat modular dan preskriptif. Ia dibangunkan oleh Walmart Labs dan merupakan pilihan yang baik untuk pasukan besar dan projek besar.

Hapi pada mulanya dibina di atas Express, tetapi kemudiannya direka bentuk semula untuk berdiri sendiri. Ini didasarkan pada gagasan bahawa "konfigurasi lebih baik daripada kod" dan "logik perniagaan mesti diasingkan dari lapisan transport." Dalam contoh di atas, perhatikan seberapa jelas dan bersih konfigurasi laluan pelayan muncul dalam kod.

Koa. Koa adalah kerangka Web baru yang direka oleh pasukan di belakang Express, tetapi bebas dari kod Express. Koa bertujuan untuk menjadi asas yang lebih kecil, lebih ekspresif, dan lebih mantap untuk aplikasi dan API Web. Koa menggunakan penjana ES6 untuk perisian tengah daripada menggunakan panggilan balik Node.js. Berikut ini adalah aplikasi Koa "hello, world" menggunakan generator, yang melakukan yield nextkawalan ke penjana seterusnya:

Perbezaan antara generator middleware, seperti yang digunakan oleh Koa, dan callback, seperti yang digunakan oleh Express dan Connect, adalah anda mendapat lebih banyak fleksibiliti dengan generator. Sebagai contoh, Connect hanya melalui kawalan melalui serangkaian fungsi sehingga satu kembali, sementara Koa menghasilkan kawalan "hilir," kemudian kawalan mengalir kembali "ke hulu." Dalam contoh di atas, masa tindak balas-x "membungkus" penjana respons, dengan yield nextpernyataan menandakan panggilan. Hasil lebih fleksibel daripada panggilan fungsi eksplisit, kerana memudahkan memasukkan penjana lain ke dalam urutan — misalnya, pembalak Web antara pemasa dan tindak balas.

Kraken. Sebagai projek sumber terbuka PayPal, Kraken adalah lapisan aman dan berskala yang meluas Express dengan menyediakan struktur dan konvensyen, seperti Lokomotif. Walaupun Kraken adalah tonggak utama kerangka kerjanya, modul berikut juga dapat digunakan secara bebas: Lusca (keamanan), Kappa (NPM proksi), Makara (LinkedIn Dust.js I18N), dan Adaro (LinkedIn Dust.js Templating).

Kraken bergantung yountuk menghasilkan projek, seperti yang ditunjukkan dalam tangkapan skrin di sebelah kiri. Seperti Locomotive, ia mengatur projeknya ke dalam direktori seperti Rails konvensional, termasuk model, pengawal, dan konfigurasi. Seperti yang dihasilkan, Kraken mengaitkan dengan Express sebagai middleware standard, yang didefinisikan sebagai app, yang kemudian disebut app.use()dan app.listen()kaedahnya disebut. Setiap laluan dalam pelayan Kraken tinggal dalam failnya sendiri dalam folder pengawal.

Lokomotif. Sebagai kerangka Web untuk Node.js, Locomotive menyokong corak MVC, laluan RESTful, dan konvensyen mengenai konfigurasi (seperti Rails), sambil menyatu dengan lancar dengan pangkalan data dan mesin templat. Lokomotif menggunakan Express dan Connect, yang merupakan kerangka gam sederhana untuk middleware yang digunakan oleh sebilangan kerangka Node.js.

Lokomotif menambah kepada Express beberapa struktur seperti Ruby on Rails, yang dapat anda lihat dalam gambar di atas, yang dinyatakan kekurangan Express. Paparan lokomotif sering kali disertakan fail JavaScript (html.ejs), seperti yang ditunjukkan di sini, tetapi Locomotive juga menyokong Jade dan mesin templat lain yang sesuai untuk Express. Fungsi REST dikendalikan oleh laluan, seperti biasa dalam pelayan berasaskan Express. Anda boleh menggunakan apa sahaja pangkalan data dan lapisan ORM (pemetaan hubungan-objek) yang anda mahukan dengan Lokomotif. Panduan menunjukkan penggunaan MongoDB dengan Mongoose, serta bekerja dengan Passport untuk pengesahan pengguna.

Meteor. Meteor memberi anda kaedah yang lebih sederhana secara radikal untuk membina aplikasi mudah alih dan Web masa nyata, sepenuhnya dalam JavaScript, dari satu pangkalan kod. Daripada menghantar HTML melalui wayar, Meteor menghantar data dari pelayan untuk diberikan oleh klien. Selain berjalan sendiri, Meteor dapat berintegrasi dengan AngularJS dan React. Meteor tidak seperti Express, walaupun ia juga dibina di atas Node.js dan menyokong templat Handlebars, Blaze, dan Jade.

Meteor memungkinkan untuk membuat prototaip pantas dan menghasilkan kod lintas platform (Web, Android, iOS). Ini berintegrasi dengan MongoDB, menggunakan Protokol Data Terdistribusi dan corak penerbitan-langganan untuk menyebarkan perubahan data secara automatik kepada klien tanpa memerlukan pembangun untuk menulis kod penyegerakan. Pada pelanggan, Meteor bergantung pada jQuery dan dapat digunakan dengan pustaka widget UI JavaScript mana pun.

Meteor dibangunkan oleh Meteor Development Group, sebuah permulaan yang diinkubasi oleh Y Combinator. Meteor kini cukup dewasa untuk menyokong setengah lusin buku tutorial. Projek ini telah menarik lebih daripada 32,000 bintang di GitHub.

Meteor sendiri adalah perisian sumber terbuka percuma, tetapi kumpulan Meteor mengewangkannya dengan menjual langganan Meteor Galaxy DevOps, yang merangkumi ruang pelayan AWS dan sokongan asas Meteor, dan langganan sokongan Premium yang berasingan.

Sails.js. Dengan Sails, anda boleh membina aplikasi Node.js kelas perusahaan khusus. Ia dirancang untuk meniru pola kerangka model-view-controller (MVC) yang sudah biasa seperti Ruby on Rails, tetapi dengan sokongan untuk keperluan aplikasi moden: API yang didorong oleh data dengan seni bina berorientasikan perkhidmatan yang berskala. Ia sangat baik untuk membina aplikasi sembang, papan pemuka masa nyata, atau permainan berbilang pemain, tetapi anda boleh menggunakannya untuk sebarang projek aplikasi Web. Sails menyokong WebSockets dan secara automatik menghantar mesej soket ke laluan aplikasi anda.

Seperti Rails, Sails menghargai konvensi atas konfigurasi, menyediakan generator dan perancah untuk membina API REST dengan cepat dari cetak biru, dan menggunakan corak reka bentuk MVC / rakaman aktif. Sails dibina di atas Express dan menggunakan Waterline untuk ORMnya, dengan sokongan untuk ORM bergabung. Talian air menyokong pangkalan data SQL dan NoSQL.

Sails adalah kerangka belakang yang dirancang agar serasi dengan kerangka Web front-end apa pun, seperti Angular atau Backbone, atau peranti mudah alih, seperti iOS atau Android, yang kebetulan anda suka atau perlukan untuk menyokong. Terdapat satu buku dalam karya di Sails.js, yang masih lengkap sepenuhnya.

Kerangka HTML5 / JavaScript

Kami secara tradisional menganggap perpustakaan dan kerangka kerja JavaScript berjalan di penyemak imbas. Seperti yang saya nyatakan sebelumnya, beberapa di antaranya — jQuery, Dojo, dan MooTools — muncul pada pertengahan tahun 2000-an terutamanya untuk menjadikan Dynamic HTML dan Ajax lebih mudah untuk ditulis. Beberapa di antaranya telah berkembang menjadi bidang fungsi tambahan, seperti widget antara muka pengguna dan antara muka peranti mudah alih.

Yang lain baru-baru ini muncul. AngularJS adalah rangka depan yang memperluas HTML dengan markup untuk paparan dinamik dan pengikatan data. Backbone.js dan Ember dirancang untuk mengembangkan aplikasi Web satu halaman. React adalah untuk membina UI atau pandangan, biasanya untuk aplikasi satu halaman.

Masih kerangka lain mengusahakan bidang pengkhususan yang lebih sempit. D3 melakukan visualisasi data dan animasi. Socket.IO melaksanakan aplikasi Web masa nyata. Knockout adalah kaedah peringkat tinggi untuk menghubungkan model data ke UI Web. Polymer menawarkan lapisan "gula" ringan di atas API Komponen Web untuk membantu membina komponen Web anda sendiri. Underscore adalah perpustakaan utiliti umum.

Seperti yang anda jangkakan, anda mempunyai kekayaan yang boleh dipilih untuk pembangunan Web pelanggan.

SudutJS.  AngularJS (atau sederhana Angular, di antara rakan-rakan) adalah kerangka kerja JavaScript-Ajax model-view-apa pun (MVW) yang memperluas HTML dengan markup untuk paparan dinamik dan pengikatan data. Angular sangat baik untuk mengembangkan aplikasi Web satu halaman dan menghubungkan borang HTML ke model dan pengendali JavaScript.

Corak model-pandangan-pelik-pelik-apa pun adalah percubaan untuk memasukkan model-pandangan-pengawal, model-pandangan-viewmodel (MVVM), dan corak model-pandangan-penyampai (MVP) di bawah satu moniker. Walaupun pengaturcara suka membantah perbezaan antara ketiga-tiga corak yang berkait rapat, pembangun sudut memutuskan untuk tidak ikut perbincangan.

Pada dasarnya, Angular secara automatik menyegerakkan data dari UI (paparan) anda dengan objek JavaScript (model) anda melalui pengikatan data dua hala. Untuk membantu anda menyusun aplikasi anda dengan lebih baik dan menjadikannya senang diuji, Angular mengajar penyemak imbas bagaimana melakukan suntikan kebergantungan dan pembalikan kawalan.

Angular dibuat oleh Google dan sumber terbuka di bawah lesen MIT. Repositori di GitHub mempunyai lebih daripada 47,000 bintang dan 22,000 garpu. Dibuat dengan Angular mempamerkan beratus laman web yang dibina dengan Angular, kebanyakan dari mereka mempunyai sifat Web berprofil tinggi.