Pengenalan kepada Rendr

Rangka kerja JavaScript isomorfik semakin popular, membolehkan penciptaan aplikasi JavaScript yang berjalan dengan lancar pada klien dan pelayan. Pendekatan "Tulis Sekali, Jalankan Di Mana-mana" ini memanfaatkan rendering sisi pelayan untuk beban halaman awal yang lebih cepat dan interaktiviti sisi klien yang lebih baik. Artikel ini meneroka Rendr, perpustakaan sumber terbuka dari Airbnb, yang pada mulanya direka untuk done.js dan aplikasi mudah alih Node.js mereka.

Ciri -ciri utama rendr:

rendering isomorphic:

rendr membuat aplikasi Backbone.js pada kedua -dua klien dan pelayan menggunakan asas kod yang dikongsi. Rendering sisi pelayan menyampaikan kandungan sebelum pelaksanaan JavaScript sisi klien, menghasilkan pengalaman pengguna yang lebih cepat.
• node.js dan integrasi grunt:
memerlukan pelayan Node.js dan menggunakan Grunt, pelari tugas, untuk automasi tugas seperti minifikasi dan ujian.
• Struktur Modular:
Aplikasi RENDR biasanya termasuk komponen seperti laman utama, paparan pengguna, paparan senarai pengguna, paparan repo, dan paparan senarai repos, masing -masing dengan fail yang berkaitan sendiri untuk model, pandangan, pengawal, dll.
• Backbone.js Foundation:
dibina di atas tulang belakang.js, memanfaatkan model, pandangan, koleksi, dan router untuk struktur aplikasi dan pengurusan data.
Memahami fungsi rendr:

Prinsip teras Rendr adalah untuk membolehkan rendering aplikasi Backbone.js pada kedua -dua pelayan dan klien menggunakan kod yang sama. Ini pra-penantian pada pelayan dengan ketara mempercepatkan masa beban halaman awal. Sebaik sahaja kerangka kerja pelanggan beban, Backbone.js menguruskan penghalaan berikutnya. Rendr bukan rangka kerja sepenuhnya; Reka bentuknya memberi tumpuan kepada:

Logik Aplikasi Agnostik Alam Sekitar (meminimumkan

blok).

interaksi API RESTful yang lancar.

• abstraksi kerumitan perpustakaan. if (server) { ... } else { ... }
Penghindaran DOM-Side Server.
aplikasi rendr mudah (contoh penyemak imbas GitHub):

Artikel ini menggunakan aplikasi pelayar GitHub sampel untuk menggambarkan fungsi Rendr. Aplikasi ini, yang terdapat dalam repositori contoh Rendr, terdiri daripada:

senarai senarai repos:

memaparkan senarai repositori GitHub.

• Repo View: Menunjukkan maklumat terperinci untuk repositori yang dipilih.
• Senarai Pengguna Lihat: menyenaraikan pengguna GitHub.
• Pandangan Pengguna: membentangkan profil pengguna dan repositori mereka.
Menyediakan permohonan RENDR:

1. node.js dan pemasangan grunt: Pasang node.js dari laman web rasmi, kemudian pasang grunt secara global menggunakan npm install -g grunt-cli.
2. Ketergantungan projek: Navigasi ke direktori projek anda dan jalankan npm install untuk memasang RENDR dan kebergantungannya.
3. Memulakan pelayan: Jalankan grunt server untuk melancarkan pelayan pembangunan. Permohonan boleh diakses di localhost:3030.

Struktur aplikasi:

Struktur aplikasi sampel mencerminkan aplikasi Backbone.js standard, dengan konvensyen yang dipinjam dari ekspres dan rel. Ia termasuk folder untuk model, pandangan, pengawal, koleksi, dan templat. Setiap folder mengandungi fail untuk setiap pandangan aplikasi (laman utama, paparan pengguna, dan lain -lain).

Komponen Utama:

• routes.js: mentakrifkan konfigurasi penghalaan, pemetaan URL kepada pengawal dan tindakan (mis., match('', 'home#index')).
• index.js atau server.js: Mulakan konfigurasi (mis., dataAdapterConfig, apiPath), Memulakan pelayan, dan menetapkan mekanisme pengambilan data.
• Pandangan: Memperluas Backbone.js Views and Handle Rendering. Contohnya menunjukkan pandangan users_index.js.
• Templat: Tentukan struktur HTML menggunakan enjin templat (mis., Hendal). Contohnya menunjukkan template users/index.hbs.
• Pengawal: Mengendalikan logik penghalaan dan pengambilan data. Contohnya menunjukkan users_controller.js dengan kaedah index.
Model -model:
• Model Backbone.js untuk perwakilan data dan pengambilan dari API GitHub (mis., ). user.js
Koleksi:
• Extend Backbone.js Collections untuk menguruskan set model (mis., ). users.js

Kesimpulan:

Rendr menyediakan cara yang kuat untuk membina aplikasi JavaScript isomorfik. Walaupun artikel ini merangkumi asas -asas, penerokaan lanjut mengenai repositori GitHub dan contoh lanjutannya akan mendedahkan potensi penuhnya. Gabungan interaktiviti penyampaian dan klien-side pelayan menawarkan prestasi yang signifikan dan kelebihan SEO.

(Nota: URL imej tidak termasuk dalam input asal dan diandaikan hadir dan dihubungkan dengan betul dalam fail markdown sebenar. Saya telah mengekalkan rujukan imej pemegang tempat dalam output.)

Atas ialah kandungan terperinci Pengenalan kepada Rendr. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!