Pemikiran dan amalan pemisahan front-end dan back-end berdasarkan NodeJS (2) Template exploration

Kata Pengantar

Apabila melakukan pemisahan bahagian hadapan dan belakang, isu pertama yang kami beri perhatian ialah pemaparan, iaitu kerja di peringkat Paparan.

Dalam model pembangunan tradisional, bahagian penyemak imbas dan bahagian pelayan dibangunkan oleh pasukan bahagian hadapan dan bahagian belakang yang berbeza, tetapi templat berada di kawasan kabur antara kedua-duanya. Oleh itu, tidak dapat dielakkan bahawa logik yang lebih dan lebih kompleks akan ditambah pada templat, yang akhirnya akan menjadi sukar untuk dikekalkan.

Dan kami memilih NodeJS sebagai lapisan tengah antara bahagian depan dan belakang. Cuba menggunakan NodeJS untuk menyelaraskan kerja di peringkat Paparan.

Jadikan pembahagian kerja antara hujung depan dan belakang lebih jelas, membolehkan projek diselenggara dengan lebih baik dan mencapai pengalaman pengguna yang lebih baik.

Artikel ini

Rendering menyumbang sebahagian besar kerja harian pembangun bahagian hadapan, dan ia juga merupakan kawasan yang kemungkinan besar akan terjerat dengan pembangunan bahagian belakang.

Mengimbas kembali perkembangan teknologi bahagian hadapan dalam beberapa tahun kebelakangan ini, kerja di peringkat Paparan telah melalui banyak perubahan, seperti:

Borang Hantar muat semula halaman penuh => AJAX muat semula separa
Paparan sebelah pelayan MVC => Paparan sebelah pelanggan MVC
Lompatan perubahan halaman tradisional => Aplikasi halaman tunggal
Dapat diperhatikan bahawa dalam beberapa tahun kebelakangan ini, semua orang cenderung untuk memindahkan rendering dari bahagian pelayan ke bahagian penyemak imbas.

Sebelah pelayan memfokuskan pada penservitan dan menyediakan antara muka data.

Faedah pemaparan sebelah penyemak imbas

Kita semua tahu faedah pemaparan sebelah penyemak imbas, seperti

1. Hilangkan gandingan dan kekeliruan logik perniagaan dan logik persembahan dalam enjin templat Java.
2. Untuk aplikasi multi-terminal, ia adalah lebih mudah untuk antara muka. Gunakan templat yang berbeza pada bahagian pelayar untuk membentangkan aplikasi yang berbeza.
3. Penyajian halaman bukan sahaja HTML pemaparan hadapan boleh menyediakan fungsi dalam bentuk komponen (html js css) dengan lebih mudah, supaya komponen bahagian hadapan tidak perlu bergantung pada struktur html yang dihasilkan oleh pelayan.
4. Buang pergantungan pada proses pembangunan dan pelepasan belakang.
5. Memudahkan penyahpepijatan bersama.

Kelemahan yang disebabkan oleh pemaparan sebelah penyemak imbas

Tetapi sambil menikmati faedah, kami juga menghadapi kelemahan yang dibawa oleh pemaparan sebelah penyemak imbas, seperti:

1. Templat diasingkan ke dalam perpustakaan yang berbeza. Sesetengah templat diletakkan di bahagian pelayan (JAVA), manakala sebahagian lagi diletakkan di bahagian pelayar (JS). Bahasa templat bahagian hadapan dan bahagian belakang tidak disambungkan.
2. Anda perlu menunggu semua templat dan komponen dimuatkan dalam penyemak imbas sebelum pemaparan boleh dimulakan dan anda tidak boleh melihatnya serta-merta.
3. Apabila masuk buat kali pertama, akan ada skrin putih menunggu masa rendering, yang tidak kondusif untuk pengalaman pengguna
4. Apabila membangunkan aplikasi satu halaman, Laluan bahagian hadapan dan Laluan bahagian pelayan tidak sepadan, yang sangat menyusahkan untuk ditangani.
5. Kandungan penting dipasang di bahagian hadapan, yang tidak sesuai untuk SEO

Renungkan definisi front-end dan back-end

Sebenarnya, memikirkan kembali, apabila kami mengalihkan kerja rendering dari bahagian pelayan (Java) ke bahagian penyemak imbas (JS), tujuan kami hanyalah untuk membahagikan tanggungjawab bahagian hadapan dan bahagian belakang dengan jelas, dan ia berjaya tidak bermakna pemaparan penyemak imbas sangat diperlukan.

Hanya kerana dalam model pembangunan tradisional, selepas meninggalkan pelayan, ia pergi ke penyemak imbas, jadi kandungan kerja bahagian hadapan hanya boleh dihadkan pada bahagian penyemak imbas.

Atas sebab ini, ramai orang percaya bahawa bahagian belakang = bahagian pelayan dan bahagian hadapan = bahagian pelayar, sama seperti gambar di bawah.

Dalam projek Midway yang sedang dijalankan oleh Taobao UED, dengan membina lapisan tengah NodeJS antara JAVA dan Penyemak Imbas, kami cuba mentakrifkan semula garis pemisah antara hujung hadapan dan belakang berdasarkan tanggungjawab kerja dan bukannya persekitaran perkakasan. Untuk membezakan (pelayan & pelayar).

Jadi kami berpeluang untuk berkongsi templat dan laluan, yang juga merupakan keadaan paling ideal dalam pembahagian kerja antara bahagian depan dan belakang.

Taobao Midway Midway

Dalam projek Midway, kami mengalihkan barisan yang memisahkan hujung depan dan belakang dari sisi penyemak imbas kembali ke sisi pelayan.

Dengan lapisan Nodejs yang mudah dikawal oleh bahagian hadapan dan biasa dengan penyemak imbas, pemisahan bahagian hadapan dan belakang boleh diselesaikan dengan lebih jelas.

Anda juga boleh membenarkan pembangun bahagian hadapan memutuskan penyelesaian yang paling sesuai untuk situasi yang berbeza. Daripada segala-galanya dikendalikan di sisi penyemak imbas.

Pembahagian tanggungjawab

Midway bukanlah projek bahagian hadapan yang cuba mencuri kerja bahagian belakang. Tujuannya hanyalah untuk memotong kawasan templat yang kabur dan mendapatkan pembahagian tanggungjawab yang lebih jelas.

Backend (JAVA), memfokuskan pada
1. Lapisan perkhidmatan
2. Format data dan kestabilan data
3.Logik perniagaan

Bahagian hadapan, fokus pada
1.Lapisan UI
2. Kawal logik dan logik rendering
3. Interaksi dan pengalaman pengguna

Tidak lagi berpegang kepada perbezaan antara bahagian pelayan atau bahagian penyemak imbas.

Perkongsian templat

Dengan NodeJS, pelajar bahagian belakang boleh menumpukan pada pembangunan logik dan data perniagaan pada lapisan JAVA. Pelajar bahagian hadapan memberi tumpuan kepada pembangunan logik kawalan dan rendering. Dan anda boleh memilih sama ada templat ini harus diberikan pada bahagian pelayan (NodeJS) atau pada bahagian penyemak imbas.

Menggunakan bahasa templat yang sama XTemplate dan JavaScript enjin pemaparan yang sama

Memberi hasil yang sama dalam persekitaran pemaparan yang berbeza (Sebelah Pelayan, Pelayar PC, Penyemak Imbas Mudah Alih, Paparan Web, dsb.).

Perkongsian laluan

Oleh kerana lapisan NodeJS, penghalaan boleh dikawal dengan lebih terperinci.

Jika anda perlu melakukan penghalaan sebelah penyemak imbas di bahagian hadapan, anda boleh mengkonfigurasi penghalaan sebelah pelayan pada masa yang sama supaya anda boleh mendapatkan kesan pemaparan yang konsisten semasa perubahan halaman sebelah penyemak imbas atau perubahan halaman sebelah pelayan.

Pada masa yang sama, isu SEO turut ditangani.

Amalan perkongsian templat

Biasanya apabila kami membuat templat di sebelah penyemak imbas, prosesnya tidak lebih daripada

Muatkan enjin templat (xtmpleate, juicer, handlerbar, dll.) dalam penyemak imbas
Muatkan fail templat dalam penyemak imbas, kaedahnya mungkin
Gunakan Gunakan alat pemuatan modul untuk memuatkan fail templat (KISSY, requireJS, dll.)
Lain-lain
Dapatkan data dan gunakan enjin templat untuk menjana html
Masukkan html ke lokasi yang ditentukan.
Dari proses di atas dapat diperhatikan bahawa untuk mencapai perkongsian templat silang, tumpuan sebenarnya adalah pada pemilihan modul yang konsisten.

Terdapat banyak standard modul popular di pasaran, seperti KMD, AMD, dan CommonJS Selagi fail templat NodeJS boleh dikeluarkan ke bahagian NodeJS melalui spesifikasi modul yang konsisten, perkongsian templat asas boleh dilakukan.

Siri artikel seterusnya akan membincangkan lebih lanjut proksi dan perkongsian Model.

Kajian Kes

Oleh kerana lapisan tengah Midway Island, beberapa masalah pada masa lalu telah dijawab dengan lebih baik, seperti

Aplikasi interaktif Kompleks Kes 1 (seperti troli beli-belah, halaman pesanan)

Status: Semua HTML dipaparkan pada bahagian hadapan dan pelayan hanya menyediakan antara muka.

Masalah: Apabila memasuki halaman, akan ada skrin putih ringkas.
Jawapan:
Apabila anda memasuki halaman untuk kali pertama, lakukan pemaparan halaman penuh pada bahagian NodeJS dan muat turun templat yang berkaitan di latar belakang.
Operasi interaktif seterusnya diselesaikan pada bahagian penyemak imbas dengan muat semula separa
Menggunakan templat yang sama menghasilkan hasil yang sama

Aplikasi satu halaman Kes 2

Status: Gunakan rangka kerja MVC Sisi Pelanggan untuk menukar halaman dalam penyemak imbas.

Masalah: Perenderan dan penukaran halaman selesai pada bahagian penyemak imbas Apabila memasukkan URL secara langsung atau menyegarkan dengan f5, kandungan yang sama tidak boleh dipaparkan secara langsung.
Jawapan:
Kongsi tetapan Laluan yang sama pada bahagian penyemak imbas dan bahagian NodeJS
Apabila menukar halaman di sebelah penyemak imbas, lakukan perubahan Laluan dan pemaparan kandungan halaman di sebelah penyemak imbas
Apabila URL yang sama dimasukkan secara langsung, bingkai halaman dan kandungan halaman dipaparkan di sebelah NodeJS
Sama ada anda menukar halaman di sebelah penyemak imbas atau memasukkan URL yang sama secara langsung, kandungan yang anda lihat adalah sama.
Selain menambah pengalaman dan mengurangkan kerumitan logik. Ia juga menyelesaikan masalah SEO

Halaman penyemakan imbas tulen Kes 3

Status: Halaman hanya menyediakan maklumat, dengan sedikit atau tiada interaksi

Masalah: HTML dijana pada bahagian pelayan, CSS dan JS diletakkan di lokasi lain, dan ia bergantung antara satu sama lain.
Jawapan:
Melalui NodeJS, pengurusan bersatu html css js
Jika anda perlu mengembangkannya menjadi aplikasi kompleks atau aplikasi satu halaman pada masa hadapan, ia boleh dipindahkan dengan mudah.

Halaman rentas terminal Kes 4

Situasi: Aplikasi yang sama perlu membentangkan antara muka dan interaksi yang berbeza pada titik akhir yang berbeza

Masalah: Pengurusan HTML tidak mudah. HTML yang berbeza sering dihasilkan pada bahagian pelayan, dan pemprosesan yang berbeza diperlukan pada bahagian penyemak imbas
Jawapan:
Halaman rentas terminal ialah isu pemaparan dan dikendalikan secara seragam oleh bahagian hadapan.
Melalui lapisan NodeJS dan penservitian bahagian belakang, penyelesaian terbaik boleh direka bentuk untuk jenis aplikasi kompleks ini.

Ringkasan

Kemunculan AJAX, MVC sisi Klien, SPA, Binding Data Dua hala dan teknologi lain pada masa lalu semuanya merupakan percubaan untuk menyelesaikan kesesakan yang dihadapi dalam pembangunan bahagian hadapan pada masa itu.

Kemunculan lapisan tengah NodeJS juga merupakan percubaan untuk menyelesaikan pengehadan bahagian hadapan semasa yang terhad kepada bahagian penyemak imbas.

Artikel ini memfokuskan pada perkongsian templat bahagian hadapan dan bahagian belakang, dan saya harap ia dapat memberi inspirasi kepada orang lain untuk membincangkan cara kami boleh meningkatkan aliran kerja kami dan cara bekerjasama dengan bahagian belakang di bawah seni bina lapisan tengah NodeJS -end melakukan kerja yang lebih baik.

Pemikiran dan amalan pemisahan front-end dan back-end berdasarkan NodeJS (2) Template exploration_node.js