mulai dengan express.js

Membuat aplikasi yang menghadap browser dengan node.js menjadi membosankan. Express.js. adalah Kerangka Javascript. Didedikasikan untuk aplikasi satu halaman dan multi-halaman yang dihosting di lingkungan Node.js.

• 29 alat desain web untuk mempercepat alur kerja Anda

Ini menyediakan lapisan tipis fitur aplikasi web fundamental yang tidak akan mengaburkan fitur node.js yang sudah Anda kenal, sehingga Anda dapat yakin bahwa aplikasi jadi Anda akan hingga kinerja-bijak. Dan itu juga bagus untuk menciptakan API yang kuat, berkat tumpukan metode utilitas HTTP dan middleware siap digunakan.

Jika Anda menginginkan opsi yang kurang kompleks, Anda dapat membuat situs tanpa pengkodean dengan a Pembangun Situs Web . Either way, pastikan Anda mendapatkan hosting web. Layanan yang tepat. Ingin memulai? Inilah yang perlu Anda ketahui tentang express.js.

01. Hasilkan struktur yang bisa diterapkan

Express.j banggakan dirinya sendiri dalam 'unopinionated' - yaitu, kerangka kerja memungkinkan pengembang untuk mencampur dan mencocokkan dalam hal arsitektur, template dan mesin markup. Sayangnya, dengan kekuatan besar datang tanggung jawab besar.

Tim pengembang ekspres berupaya melunakkan pukulan dengan memperkenalkan generator proyek (jika Anda merancang bersama tim, menyebarkan yang terbaik penyimpanan awan untuk menjaga hal-hal yang kohesif). Muncul di workstation Anda dalam bentuk paket NPM, dan akan membantu percobaan kami dengan kerangka kerja berikut:

 Tamhan @ Tamhan-Thinkpad: ~ / Desktop /
Stuff / 2018Aug / FutureExpressjs /
Workspace $ SUDO NPM Instal
Express-Generator -G 

Generator juga berisi puluhan opsi proyek - angka yang menyertai langkah ini menunjukkan output bantuan penuh. Demi kesederhanaan, kami akan membatasi diri pada proyek berdasarkan pengaturan default. Kick off proses generasinya dengan:

 Tamhan @ Tamhan-Thinkpad: ~ / Desktop /
Stuff / 2018Aug / FutureExpressjs /
Workspace $ Ekspres Futuretest 

Peringatan: Mesin tampilan default tidak akan jade di rilis mendatang.

Setelah selesai, direktori kerja saat ini berisi folder baru yang disebut 'Futuretest'. Ini adalah rumah bagi proyek pengujian kami dan harus dikonfigurasi menggunakan perintah unduhan paket NPM. Pada saat penulisan, generator termasuk Generator View Jade - proyek berencana untuk mengubah ini dalam waktu dekat, mewajibkan Anda untuk melewati parameter yang memilih mesin tampilan yang dimaksudkan. Atau, minta penggunaan PUG - ini adalah penerus resmi mesin giok:

 CD Futuretest /
Instal NPM 

02. Memahami struktur aplikasi

Sekarang bahwa generator proyek telah melakukan hal itu, mari kita buka app.js dalam editor pilihan. Ini - banyak struktur - struktur menyajikan dirinya sebagai berikut:

 var indexrouter = memerlukan ('/
rute / indeks ');
var usersrouter = membutuhkan ('./
rute / pengguna ');
var app = express ();
// Lihat Pengaturan Mesin
App.Set ('Views', path.join (__
Dirname, 'Tampilan'));
App.Set ('Lihat Mesin', 'Jade');
aplikasi.Gunakan (logger ('dev');
app.use (express.json ());
app.use (express.urlencoded ({
diperpanjang: false}));
aplikasi.Gunakan (cookieParser ());
app.use (express.static (path.
Bergabunglah dengan (__ dirname, 'publik'))); 

Express.js sangat modular. App.js berfungsi sebagai titik masuk, di mana satu atau lebih 'gunakan ()' fungsi memungkinkan penambahan komponen yang dimaksudkan untuk menangani berbagai permintaan. Informasi 'set ()' memungkinkan Anda menyesuaikan parameter di mesin - salah satunya adalah instalasi mesin Jade View yang disebutkan pada langkah sebelumnya.

Emisi aktual konten web berlangsung di kelas router. Demi Brevity, mari kita batasi dirimu ke index.js:

 var express = memerlukan ('ekspres');
var router = express.router ();
router.get ('/', fungsi (req, res,
lanjut) {
  res.render ('indeks', {judul:
'Ekspres'});
});
module.exports = router; 

'Dapatkan ()' disediakan dengan string matcher dan pawang acara yang akan dipanggil setiap kali acara yang sesuai terjadi. Dalam kasus kami, metode render dari mesin template yang dipilih disuruh mengembalikan konten ke browser pengguna yang masuk.

03. Jalankan halaman web

Pada titik ini, kami siap untuk mengambil situs web untuk putaran untuk pertama kalinya. Kembali ke terminal yang berisi instalasi Express.js, dan hubungi NPM mulai dengan set flag debug:

 Debug = MyApp: * NPM Mulai 

Setelah selesai, masukkan http: // localhost: 3000 / ke browser pilihan untuk melihat perancah yang dibuat oleh generator proyek. Setelah selesai, tekan Ctrl. + C. Untuk menutup jendela dan mengembalikan kontrol ke interpreter baris perintah - Perlu diingat bahwa ini juga menutup server web debugging.

04. Ini semua tentang perutean dan titik akhir

Demi kesederhanaan, marilah kami setuju bahwa aplikasi web biasanya terdiri dari urutan titik masuk. Express.js menangani ini melalui kelas router - pikirkan sebagai repositori metode yang dipanggil sebagai tanggapan atas permintaan masuk.

Menambahkan titik akhir baru ke aplikasi dicapai dengan menambahkan pekerja baru ke dalam antrian. Contoh yang dihasilkan secara otomatis kami membuat dua jenis router, yang masing-masing diangkat menggunakan metode 'memerlukan':

 var indexrouter = memerlukan ('/
rute /
indeks');
var usersrouter = membutuhkan ('./
rute /
pengguna); 

Pada langkah berikutnya, 'aplikasi.Gunakan' mendaftarkan router dan menghubungkannya ke string permintaan. Kode kami selanjutnya menambahkan penangan kesalahan yang dipanggil jika URL yang tidak ada dimasukkan ke dalam sistem:

 aplikasi.Gunakan ('/', indexrouter);
aplikasi.Gunakan ('/ pengguna', usersrouter);
aplikasi.Gunakan (fungsi (req, res, selanjutnya)
{
  Selanjutnya (createError (404));
}); 

05. Buat rute baru

Buka pengguna.js, dan modifikasi kodenya seperti di bawah ini:

 router.get ('/ user1', fungsi (req,
res,
lanjut) {
  res. Sesuai ('masa depan mengatakan halo
1 ');
});
router.get ('/', fungsi (req, res,
lanjut) {
  res. Sesuai (menanggapi dengan a
sumber');
}); 

Menambahkan rute baru ke express.js adalah proses mekanis. Raih objek router pilihan, dan memohon metode yang sesuai dengan kata kerja HTTP yang ingin Anda tangani. Selanjutnya, lewati string yang akan ditambahkan ke 'Offset' terdaftar dengan 'App.Gunakan'. Sejak saat itu, baik, baik http: // localhost: 3000 / pengguna / user1 dan http: // localhost: 3000 / pengguna / mengembalikan respons yang valid.

Perlu diingat bahwa Express.js tidak terbatas pada penanganan sumber daya 'dapatkan'. 'Posting ()', 'Put ()' dan 'Delete ()' menangani empat permintaan HTTP tradisional, dengan puluhan metode kata kerja tambahan melayani kebutuhan yang lebih tidak biasa. Akhirnya, objek 'req' menyediakan akses ke tajuk permintaan - letakkan untuk digunakan dengan baik saat parameter parsing atau informasi klien.

06. Pencocokan lanjutan

Menambahkan rute dengan tangan menjadi membosankan karena kompleksitas program tumbuh. Express.js melayani masalah ini dengan memperkenalkan dukungan wildcard dan ekspresi reguler. Misalnya, lihat deklarasi berikut yang menggunakan ekspresi reguler untuk mencocokkan terhadap berbagai string yang berisi sequence dog karakter.

 app.get (/.* Dog $ /, fungsi (req,
res) {
  ...}) 

07. Routing Abnormal.

Saat menangani empat permintaan HTTP seharusnya cukup bagi siapa pun (Tip Tip untuk Bill Gates), Express.js juga dapat bekerja dengan protokol tambahan. Express-WS. Adalah kandidat yang sangat lezat untuk bagian ini - itu memperpanjang jangkauan Express.js untuk memasukkan komunikasi WebSocket.

Setelah plugin ditambahkan ke proyek Main Express.js, memungkinkannya dilakukan melalui panggilan 'memerlukan'. Ini mengembalikan objek pembantu yang berisi semua kecuali satu metode - menyebutnya untuk membuat koneksi antara router dan plugin:

 var expressws = membutuhkan ('ekspres-
ws ')
aplikasi);
Setelah itu, metode baru yang disebut 'WS ()' dapat dipanggil untuk menambahkan rute baru berdasarkan teknologi WebSocket:
app.ws ('/', fungsi (ws, req) {
  ws.on ('pesan', fungsi (msg)
{
    konsol.log (msg);
  });
  konsol.log ('socket', req.
pengujian); }); 

Prototipe mereka berbeda dari rute normal karena keberadaan objek 'WS' - ia menyediakan akses ke instance WebSocket yang mendasari yang terhubung dengan klien yang bertanggung jawab untuk koneksi.

08. Mengintegrasikan database dan mesin templating

Berdasarkan node.js berarti bahwa ekosistem plugin yang kaya adalah pada perintah Anda saat mengerjakan aplikasi berbasis web. Misalnya, mengakses database SQL dan NOSQL - biasanya tugas yang sangat membosankan - dapat ditangani menggunakan plugin yang disediakan oleh vendor basis data. Penyebaran yang sebenarnya semudah menginstal modul NPM yang dibutuhkan - jika kode Anda akan mengakses database Redis, cukup tambahkan yang berikut:

var redis = membutuhkan ('redis')
klien var = redis.createclient ()
client.set ('stringkey', 'aval',
redis.print)
. . . 

Tentu saja, dalam memori SQLite juga didukung:

 var sqlite3 = membutuhkan ('sqlite3').
verbose ()
var db = sqlite3 baru.
Database (': Memori:')
db.serialize (fungsi () {
  db.run ('Buat Tabel Lorem
(info teks) ') 

Ingatlah bahwa integrasi node.js tidak terbatas pada plugin basis data. Pengembang petualangan bisa melibatkan produk seperti Tessel, dengan demikian membuat aplikasi web yang juga dapat berinteraksi dengan Internet untuk segala perangkat.

09. templating dalam gaya

Satu area di mana program sederhana dan nyata berbeda adalah penciptaan pandangan. Sementara contoh kecil proyek biasanya menggunakan string kerajinan tangan, merakit petak besar HTML dengan serangkaian hal-hal yang terhubung sangat menyebalkan.

Mesin template menyediakan solusi yang rapi. Mereka mengizinkan penciptaan file skema yang telah ditentukan, yang dapat dihuni secara terprogram dalam eksekusi.

Dalam hal program contoh kami, pandangan terletak pada file .jade. Indeks pembukaan mengungkapkan struktur berikut:

 Memperluas tata letak
Blokir konten
  h1 = title.
  P Selamat Datang ke # {judul} 

Ekspresi terlampir dalam kurung keriting bertindak sebagai bidang templat yang nilainya harus diganti saat runtime. Index.js meminta render dengan objek parameter, mengarah ke rendering halaman awal yang ditunjukkan pada gambar yang menyertai langkah ini:

 router.get ('/', fungsi (req, res,
lanjut) {
  res.render ('indeks', {judul:
'Ekspres'});
}); 

Sebagian besar mesin templating juga dapat menguraikan array ketika disediakan dengan template item. Dalam hal ini, setiap baris array ditampilkan dengan satu instance model DOM - kesamaan dengan model tampilan daftar yang ditemukan di Android murni kebetulan. Express.js tidak terbatas pada mesin templating yang telah ditentukan. Jika Anda merasa ingin meluncurkannya untuk beberapa alasan, cukup ikuti langkah-langkah yang diuraikan sini - Pada prinsipnya, Anda harus menimpa semua kecuali satu fungsi.

10. menangani konten statis

Aplikasi Express.js cenderung mengandung file dan gambar CSS. Melayani ini melalui fungsi render tidak efisien - cara yang lebih cerdas akan melibatkan mengirimkannya pada cara Merry mereka dengan permintaan HTTP tradisional. Ini dapat dicapai melalui fungsi 'express.static ()', yang dapat menandai seluruh folder untuk ekspor:

 aplikasi.Gunakan (express.static ('publik'))
aplikasi.Gunakan (express.static ('file')) 

11. Ubah aliran acara

Akhirnya, izinkan kami untuk menyebutkan istilah middleware segera. Di bidang Express.js, middleware adalah satu set satu atau lebih komponen yang mengintegrasikan diri ke dalam alur yang ditunjukkan berlawanan. Mereka dapat, kemudian, digunakan untuk memodifikasi permintaan karena mereka melewati sistem perutean - ketika diimplementasikan dengan benar, fungsi tidak terbatas dapat dicapai.

Selanjutnya, beberapa komponen siap dapat ditemukan sini - Kunjungi situs ini sebelum memulai proyek pengembangan skala besar.

12. Bagaimana cara meng-host aplikasi Express.js

Menguji aplikasi berbasis express.js itu mudah. Masalah terjadi setelah Anda menginginkan halaman untuk dapat diakses oleh pihak ketiga - karena itu dihasilkan oleh lingkungan node.js, tidak ada cara untuk mendapatkan gambar statis yang cocok untuk penyebaran FTP untuk layanan hosting web.

Secara teori, tidak ada yang menentang menggunakan Raspberry PI, orangepi, server khusus atau mesin virtual yang disewa dari layanan cloud atau penyedia host web yang menawarkan hosting virtual. Namun, menyewa mesin virtual penuh dapat membebani Anda dengan tanggung jawab menjaga lingkungan eksekusi dan sistem operasi terkini.

Jika tugas ini bukan untuk selera Anda, penyedia platform-as-A-service dapat menjadi pilihan yang lebih menarik (meskipun, dalam banyak kasus, cukup mahal).

Banyak pengembang menganggap Heroku, dengan penetapan harga yang ditunjukkan pada sosok yang menyertai boxout ini, menjadi standar emas untuk semua hal yang terkait dengan node.js hosting.

Namun, ini agak tidak adil dalam kebenaran - beanstalk elastis Amazon, platform cloud Google dan Azure Microsoft semuanya memberikan dukungan serupa untuk eksekusi jarak jauh dari muatan berbasis Node.js. Dalam semua sistem ini, masalah utama adalah penanganan - sementara Azure dikenal dengan penyebarannya yang lambat, penyedia lain yang membebani pengembang dengan layanan back-end yang sulit digunakan dari sistem konfigurasi yang sangat kompleks.

Selanjutnya, versi node.js yang didukung berbeda dari penyedia ke penyedia. Tentu saja, kami tidak memiliki cukup ruang untuk menutupi topik secara mendalam. Mengunjungi Tutorial Penempatan Mozilla dan express.js ' kinerja dan keandalan dan keamanan Halaman praktik terbaik untuk beberapa masalah yang terlibat. Pastikan untuk melihat dokumentasi penyedia untuk mengumpulkan lebih banyak praktik terbaik.

13. Bukti Masa Depan Aplikasi Anda

Siklus pengembangan Express.js jauh dari mulus: Pengembang terkenal dengan perubahan API yang sering membutuhkan penulisan ulang kode klien. Sakelar dari 3.x hingga 4.x sangat menyakitkan, itulah sebabnya pelepasan 5.x yang akan datang mungkin meninggalkan beberapa dari Anda merasa tidak nyaman.

Sementara Express.js 5.0 membawa beberapa perubahan putus, dampaknya lebih terbatas. Pertama-tama, satu set fungsi yang sudah usang dihapus untuk kode nyata - jika masih menggunakannya, peningkatan ke 5.x memerlukan pemeliharaan.

Desainer mesin tampilan perlu memeriksa 'res .render ():' Pertumbuhan peringkat sehubungan dengan memandang renderer, yang telah menyebabkan beberapa implementasi sinkron tergelincir. Versi 5 kerangka meningkatkan kinerja dengan menegakkan rendering asinkron.

Selain itu, satu set perbaikan dan perubahan yang didokumentasikan sini Melihat kembalinya beberapa fitur yang punah dari versi sebelumnya - selanjutnya, beberapa bug berdiri lama akan diperbaiki dalam rilis baru.

Akhirnya, ketahuilah bahwa Anda sudah dapat mencoba versi baru. Cukup buat salinan kode sumber Anda, ambil terminal dan masukkan perintah berikut untuk mengunduh nilai arsip JavaScript yang nyaris tidak teruji. Berhati-hatilah.

 $ NPM Instal Express @ & gt; = 5.0-
alpha.1 --save 

Artikel ini awalnya diterbitkan dalam edisi 279 dari desainer web Majalah Desain Web Kreatif. Beli masalah 279 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• Semua yang perlu Anda ketahui tentang node.js 8 baru
• 20 modul node.js yang perlu Anda ketahui
• 25 Peralatan JavaScript Game-Mengubah