Apa tumpukan MERN, dan bagaimana cara mengatasinya?

Halo, Habr!

Sekali waktu, kami merilis proyek percontohan pada tumpukan MEAN (Mongo, Express, Angular, Node), yang umumnya tidak mengecewakan kami, namun, kami memutuskan untuk tidak melakukan cetakan tambahan dan pembaruan pada saat itu - tidak seperti Manning, yang memperbarui buku ini. . Namun demikian, kami terus mencari ke arah ini dan hari ini kami ingin berbicara dengan Anda tentang tumpukan MERN terkait, di mana React berada pada klien, bukan Angular. Lantai diberikan kepada Tim Smith .



Peringatan: semua kode untuk artikel ini ada di sini .

Dalam panduan tumpukan MERN ini, kami akan menulis blog sederhana menggunakan React.js, Node.js, Express.js, dan MongoDB untuk memperluas gudang senjata stack penuh kami.

Apa itu tumpukan?

Mungkin hal pertama yang dibahas adalah gagasan "tumpukan". Ada banyak tumpukan berbeda, dan semuanya hanyalah jalur yang berbeda untuk mencapai tujuan yang sama. Saat membuat aplikasi tumpukan penuh, kami menyediakan untuk bagian klien dengan siapa pengguna akan berinteraksi, dan bagian klien yang sama akan memediasi pekerjaan dengan server dan database - membuat seluruh proses ini sesederhana dan dapat dikelola mungkin.

Kita dapat mengatakan bahwa tumpukan adalah seperangkat teknologi tertentu yang digunakan untuk menyelesaikan masalah ini.

Meskipun ada banyak tumpukan yang layak dibicarakan, beberapa di antaranya lebih populer daripada yang lain saat ini. Salah satu tumpukan populer ini disebut MEAN, dan terdiri dari:

• M ongoDb
• E xpress.js
• A ngular.js
• Tidak ada

Hari ini kita akan berbicara tentang tumpukan MERN, yang sangat mirip dengan MEAN kecuali bahwa Angular.js diganti di sini dengan React.js. Dengan demikian, kita dapat menggunakan MongoDB sebagai database, Node.js dan Express, masing-masing, untuk server dan perutean, dan React.js - untuk membuat bagian klien yang dengannya pengguna akan berinteraksi.

Bagaimana pengembangan dilakukan dengan tumpukan ini?

Sebelum beralih ke semua seluk-beluk, mari kita lihat secara umum bagaimana semua elemen ini bekerja bersama. Secara pribadi, butuh beberapa saat untuk membahas hal ini, karena latar belakang saya terkait dengan PHP, di mana bagian klien dan server agak campur aduk.

1. Bagian server (Node dan Express.js) dan bagian klien (React.js)

Pertama-tama, Anda perlu memahami bahwa bagian server dan bagian klien adalah entitas yang terpisah. Bagian klien mungkin dalam repositori yang sama dengan server, atau mungkin dalam yang sama sekali berbeda.

2. Terminal API digunakan untuk komunikasi

Jika Anda sudah memikirkan cara berteman dengan klien dan bagian server, saya akan menjawab: ini dilakukan melalui API. API (antarmuka program aplikasi) dibuat di server, di mana kita akan mendapatkan "terminal" di mana aplikasi yang terletak di bagian klien dapat berinteraksi dengan server.

Mari kita jelaskan dengan jari: bayangkan tangan kiri Anda adalah sisi server, dan tangan kanan Anda adalah sisi klien.

Sekarang lipat tangan Anda dan putar jari-jari Anda seolah-olah menjabat tangan Anda sendiri. Itulah cara kerja bahasa templat. Mereka memungkinkan Anda untuk hanya menampilkan markup bersama dengan data yang dibuang dengan server - dan di dalamnya komponen klien dan server tumpang tindih sebagian besar.

Sekarang buka tanganmu. Sebarkan jari-jari Anda selebar mungkin dan buat tangan kiri dan kanan hanya menyentuh ujung jari Anda. Ini adalah cara kerja tumpukan MERN. Bagian server menyediakan terminal (ujung jari dari tangan kiri) untuk akses ke server, tempat klien mengirim panggilan (melalui ujung jari-jari tangan kanan) dan melalui titik-titik kontak ini bertukar informasi dengan server (tangan kiri).

Saya berharap itu menjadi sedikit lebih jelas, dan jika tidak, lupakan semua metafora ini, seolah-olah saya tidak menyebutkannya.

Sisi server kami dari Node.js dan Express.js

Meskipun saya tidak akan memberikan petunjuk langkah demi langkah tentang cara membangun tumpukan ini di sini (ini adalah topik untuk artikel terpisah), saya ingin mempertimbangkan berbagai elemen tumpukan yang biasanya digunakan atau dapat digunakan di dalamnya. Saya sendiri membaca beberapa manual yang memberi tahu cara mengkonfigurasi server, tetapi tidak menjelaskan mengapa perpustakaan khusus ini digunakan untuk ini.

Setelah kami membuat file app.js, Anda perlu menginstal sejumlah paket. Berikut ini adalah paket paling umum yang sebelumnya saya gunakan dalam proyek saya dengan Express.js - mungkin mereka akan berguna bagi Anda juga.

• Express.js adalah kerangka kerja untuk membuat aplikasi web. Ini memiliki fungsi bawaan untuk menyelesaikan banyak masalah, khususnya, untuk menetapkan rute.
• Mongoose adalah manajer data objek (ODM) yang menyediakan interoperabilitas antara aplikasi express.js dan database MongoDB.
• BodyParser adalah pustaka yang memungkinkan aplikasi express.js untuk membaca isi (mis., Konten) dari permintaan yang masuk.
• DotENV - memungkinkan Anda menggunakan file dengan ekstensi .env untuk bekerja dengan data rahasia.
• Passport.js - menyediakan otentikasi dalam aplikasi kami, dan menyediakan beberapa metode otentikasi yang berbeda.
• Validator - validasi sederhana dari banyak tipe data
• bCrypt - enkripsi data sensitif, seperti kata sandi
• Nodemon - “hot reboot” untuk node-server kami jika situasinya berubah; Berkat Nodemon, Anda tidak dapat menghentikan atau memulai ulang server setelah melakukan perubahan apa pun.

Tentu saja, ada banyak paket lain, tetapi menurut pengalaman saya, perpustakaan inilah yang paling sering digunakan.

Jadi, setelah memilah-milah beberapa paket yang paling banyak digunakan, mari kita lihat kodenya. Untuk memulai - server kami:



Ini adalah server API sederhana. Seperti yang Anda lihat, itu dilengkapi dengan fungsionalitas CRUD dasar (Buat-Baca-Perbarui-Hapus) - tidak ada yang supernatural. Melihat lebih dekat, kita melihat bahwa res.json() digunakan di sini untuk memberikan data output untuk URL tertentu - yaitu, HTML atau templat lain tidak digunakan untuk output. Ini adalah bagaimana kami membangun API kami dengan membuka akses data ke React.js.

Anda mungkin juga memperhatikan bahwa saya baru saja menunjuk luwak ke server mongodb saya sendiri yang diinstal pada komputer saya. Agar mekanisme seperti itu berfungsi dengan benar, MongoDB harus diinstal di komputer dan kantor Anda. Jika tidak berhasil, buka saja jendela konsol dan masukkan perintah berikut:



Ini akan memulai server MongoDB pada mesin lokal Anda. Karena semua ini dilakukan secara lokal, Anda tidak akan dapat melihat posting saya jika Anda menjalankan kode dari repositori. Kami harus menulis konten baru sendiri. Jika Anda memerlukan rintisan konten, saya sarankan generator Fillerama.io yang sangat baik, mengiris teks dari beberapa film dan acara TV favorit saya.

Jika Anda tertarik untuk menguji server sendiri, Anda dapat memulainya dengan perintah berikut:



Setelah server mulai dan memberi tahu kami bahwa ia berfungsi pada port 3333, dan juga terhubung ke MongoDB, Anda dapat membuka tukang pos dan menguji rute kami di sana. Adapun opsi GET, Anda cukup menyisipkan rute dan klik "Kirim". Dalam hal POST, Anda harus memilih "Badan" dan mengisi bidang untuk header dan konten utama.

Catatan sisi klien

Sekarang kami telah mengkonfigurasi dan meluncurkan server kami, kami dapat mulai bekerja pada klien yang akan berinteraksi dengan pengguna kami. Klien akan ditulis dalam React.js, dan ini dapat dilakukan dengan beberapa cara berbeda.

Yang pertama adalah hanya menambahkan semua pustaka yang diperlukan untuk sisi klien (react, react-dom, react-router, dll) semua ke file package.json sama di mana kami menulis pustaka server. Dalam proyek ini, saya hanya melakukan itu, tetapi saya harus mengatakan bahwa saya tidak berpikir opsi ini optimal. Saya pikir seiring perkembangan proyek kami, basis kode akan menjadi semakin rumit, dan jika Anda hanya menggunakan metode ini, maka bekerja dengannya akan menjadi lebih rumit di masa mendatang. Saya lebih suka jalur ini dalam aplikasi yang dijelaskan justru karena saya tahu pasti: itu tidak akan tumbuh dan tidak akan berubah sama sekali. Aplikasi ini ditulis hanya untuk keperluan demonstrasi.

Pendekatan kedua dan (menurut saya) yang lebih optimal adalah membuat repositori terpisah untuk sisi server dan terpisah untuk klien. Kami masih dapat mengkloning repositori bagian klien ke direktori dengan proyek kami tanpa masalah, pastikan saja bahwa bagian klien terdaftar dalam file .gitignore kami. Misalnya, dalam struktur file untuk aplikasi ini ada direktori client , di mana semua kode bagian klien berada. Kita bisa membawanya ke repositori yang benar-benar terpisah, dan kemudian cukup menambahkan entri berikut ke file .gitignore repositori kami dengan sisi server:



Dengan menambahkan folder client ke file .gitignore , kami menjamin bahwa sistem tidak akan menganggap folder ini sebagai repositori kedua dalam proyek. Selain itu, pendekatan ini memfasilitasi pekerjaan mendesain ulang atau mengganti bagian klien, karena bagian server tidak terpengaruh sama sekali.

Bagaimana tepatnya aplikasi tumpukan penuh Anda akan dirancang sepenuhnya terserah Anda. Sepertinya saya bahwa jika Anda menyimpan repositori terpisah untuk bagian klien dan server, struktur aplikasi akan sedikit lebih akurat.

Kami membuat bagian klien di React.js

Sekarang, setelah memahami organisasi proyek, mari kita bicara, sebenarnya, tentang kode klien. Di bawah ini adalah file app.js saya untuk aplikasi di React.js, dan saya tidak akan menyisipkan kode untuk setiap komponen dalam posting ini, saya hanya meninggalkan tautan ke repositori dan menjelaskan apa yang masing-masing komponen Bereaksi lakukan.

Dan inilah tampilan screenshot halaman utama aplikasi kita:



Seperti yang Anda lihat, app.js sekali tidak rumit. Ada <Router> yang memungkinkan Anda mengatur rute di React.js yang menampilkan berbagai komponen berdasarkan URL mereka. Berikut adalah komponen lain yang akan digunakan dalam aplikasi React.js kami:

• Header - Bilah navigasi yang terletak di bagian atas layar
• Indeks - Mendaftar entri blog yang tersedia
• Baru - Formulir di mana pengguna dapat membuat posting baru
• Single - Menampilkan entri blog tertentu berdasarkan id -nya
• Sunting - Formulir di mana pengguna dapat memperbarui entri blog yang ditemukan oleh id

Kami menggunakan Axios untuk melakukan panggilan http ke terminal API, dan kemudian menggunakan React.js untuk menampilkan data sesuka kami. Dalam posting ini saya akan memberikan kode Index.js untuk membuatnya lebih jelas bagaimana semuanya bekerja bersama.



Dalam kode di atas, komponen kelas terlibat, memungkinkan kita untuk menggunakan metode status dan siklus hidup. Ini diperlukan karena panggilan Axios harus dibuat dalam metode siklus hidup componentDidMount() . Perlu dicatat bahwa saya mendapatkan kesalahan CORS ketika mencoba melakukan panggilan ke API lokal saya. Untuk mengatasi masalah ini, saya menambahkan beberapa header ke file server.js di server Express saya - dan itu berhasil. Kode ini tercantum dalam komentar di file server.js.

Mari kita pastikan bahwa bot pencarian membaca aplikasi React.js kami secara normal.

Mengakhiri, saya ingin berbicara singkat tentang rendering. Jika Anda meluncurkan situs kami dan langsung menuju beberapa posting blog, maka mungkin ada beberapa masalah dengan tampilan konten. Dalam hal ini, menjelajah situs akan merepotkan tidak hanya untuk pengguna, tetapi juga untuk mencari konten pengindeksan robot. Untuk mengatasi masalah ini, saya sarankan menggunakan alat seperti Gatsby js atau Next js. Kedua solusi ini berbeda satu sama lain, tetapi keduanya dapat berguna, tergantung pada apa yang Anda butuhkan.

Gatsby js adalah generator situs statis. Anda dapat menulis situs di React.js, dan kemudian Gatsby akan mengubahnya menjadi file statis selama pembuatan, yang akan membuat situs tersebut super cepat. Gatsby hadir dengan banyak plugin berguna yang membuat alat ini hampir universal. Omong-omong, situs saya dibuat menggunakan Gatsby.js! Karena file statis dibuat selama perakitan, situs perlu dibangun kembali setiap kali konten aslinya berubah.

Next.js , pada gilirannya, adalah komponen server untuk menampilkan situs React.js. Banyak fitur berguna dibangun di dalamnya, khususnya, perutean, pemecahan kode, komponen yang dirancang, dan banyak lagi. Render server berarti bahwa data akan diperbarui secara otomatis, seperti yang dilakukan pada server, tetapi, sebelum ditampilkan di jendela browser, tahap rendering akan berlangsung. Itulah mengapa seharusnya tidak ada masalah dengan menampilkan data kepada pengguna, dan robot pencarian juga akan melakukan pekerjaan mereka tanpa masalah.

Ada banyak solusi lain dari jenis ini, tetapi saya paling banyak mendengar tentang keduanya, dan ketika mengerjakan proyek ini saya menggunakannya. Keduanya didokumentasikan dengan sangat baik, sehingga mudah untuk dengan cepat menangani keduanya dan memulai bisnis.

Pikiran terakhir pada tumpukan MERN

Semoga artikel ini telah membantu Anda sedikit lebih akurat bagaimana tumpukan MERN bekerja. Di dalamnya, kita hanya mengambil MongoDB, Express.js dan Node.js dan membuat dari mereka server yang sudah menyediakan terminal API di mana aplikasi React.js kita dapat mengakses data. Jadi sekarang Anda mengerti banyak, sekarang saatnya untuk melakukan hal-hal hebat!