Kata pengantar
Saat memisahkan ujung depan dan belakang, masalah pertama yang saya perhatikan adalah rendering, yaitu, bekerja di tingkat tampilan.
Dalam model pengembangan tradisional, browser dan server dikembangkan oleh dua tim, baik ujung depan dan belakang, tetapi template berada di area yang tidak jelas di antara keduanya. Oleh karena itu, selalu ada logika yang lebih dan lebih kompleks pada templat, yang pada akhirnya sulit untuk dipertahankan.
Dan kami memilih nodej sebagai lapisan tengah ujung depan dan belakang. Cobalah menggunakan nodeJs untuk menghapus pekerjaan di level tampilan.
Ini membuat pembagian kerja antara ujung depan dan belakang lebih jelas, membuat proyek lebih baik dipelihara dan mencapai pengalaman pengguna yang lebih baik.
Artikel ini
Pekerjaan rendering adalah proporsi yang sangat besar dari pekerjaan sehari-hari pengembang front-end, dan itu juga merupakan bagian termudah untuk disamakan dengan pengembangan back-end.
Melihat kembali beberapa tahun terakhir pengembangan teknologi front-end, pekerjaan di tingkat tampilan telah mengalami banyak perubahan, seperti:
Formulir Kirim Refresh Halaman Lengkap => Ajax Local Refresh
Lanjutan Sisi Server + MVC => Rendering Sisi Klien + MVC
Perubahan halaman tradisional lompatan => aplikasi halaman tunggal
Dapat diamati bahwa dalam beberapa tahun terakhir, semua orang cenderung memindahkan benda ini dari ujung server ke ujung browser.
Sisi server berfokus pada layanan dan menyediakan antarmuka data.
Manfaat rendering browser
Kita semua tahu manfaat dari rendering sisi browser, seperti
1. Singkirkan kopling dan kebingungan antara logika bisnis dan logika presentasi di mesin template java.
2. Untuk aplikasi multi-terminal, lebih mudah untuk berinteraksi. Pasangkan templat yang berbeda di sisi browser untuk menyajikan aplikasi yang berbeda.
3. Rendering halaman tidak hanya HTML, tetapi rendering di ujung depan dapat dengan mudah menyediakan fungsi dalam bentuk komponen (HTML + JS + CSS), sehingga komponen front-end tidak perlu mengandalkan struktur HTML yang dihasilkan oleh server.
4. Singkirkan ketergantungan pada proses pengembangan dan distribusi back-end.
5. Penyesuaian sambungan yang nyaman.
Kerugian yang disebabkan oleh rendering browser
Tetapi saat menikmati manfaatnya, kami juga menghadapi kerugian rendering sisi browser, seperti:
1. Templat dipisahkan di perpustakaan yang berbeda. Beberapa templat ditempatkan di sisi server (Java), sementara yang lain ditempatkan di sisi browser (JS). Bahasa template depan dan back-end tidak terhubung.
2. Anda harus menunggu semua templat dan komponen dimuat di browser sebelum rendering dapat dimulai, dan Anda tidak dapat membacanya segera.
3. Akan ada layar putih menunggu rendering untuk pertama kalinya, yang tidak kondusif untuk pengalaman pengguna
4. Saat mengembangkan aplikasi satu halaman, rute front-end tidak cocok dengan rute sisi server, yang sangat merepotkan untuk ditangani.
5. Semua konten penting dirakit di ujung depan, yang tidak kondusif untuk SEO
Renungkan definisi ujung depan dan belakang
Bahkan, ketika kita membawa pekerjaan rendering dari sisi server (Java) ke sisi browser (JS), tujuan kita hanya untuk membagi tanggung jawab ujung depan dan belakang dengan jelas, dan tidak perlu untuk membuat browser.
Ini hanya karena dalam model pengembangan tradisional, server dirilis dan browser tercapai, sehingga konten kerja di front-end hanya dapat terbatas pada sisi browser.
Oleh karena itu, banyak orang telah menentukan bahwa sisi backend = server frontend = browser, seperti gambar di bawah ini.
Dalam proyek Midway Midway saat ini sedang berlangsung oleh Taobao Ued, dengan membangun lapisan tengah NodeJS di tengah browser Java, kami mencoba untuk membedakan jalur divisi ujung dan belakang lagi untuk tanggung jawab kerja, daripada untuk lingkungan perangkat keras (server & browser).
Oleh karena itu, kami memiliki kesempatan untuk berbagi templat dan rute, yang juga merupakan keadaan paling ideal di divisi tenaga kerja front-end dan back-end.
Taobao Midway Midway
Di proyek Midway, kami memindahkan garis yang membatasi ujung depan dan belakang dari browser ke sisi server.
Dengan lapisan nodejs yang mudah dikendalikan oleh front-end dan umum ke browser, pemisahan front-end dapat diselesaikan lebih jelas.
Dimungkinkan juga untuk memungkinkan pengembangan front-end untuk memutuskan solusi yang paling tepat untuk situasi yang berbeda. Alih -alih semuanya ditangani di sisi browser.
Membagi tanggung jawab
Midway bukanlah proyek yang mencoba ujung front-end untuk mengambil pekerjaan back-end. Tujuannya adalah untuk secara jelas memotong area templat yang tidak jelas dan mendapatkan pembagian tanggung jawab yang lebih jelas.
Backend (java), fokus pada
1. Lapisan Layanan
2. Format data dan stabilitas data
3. Logika Bisnis
Front-end, fokuslah
1.UI lapisan
2. Logika Kontrol, Rendering Logika
3. Interaksi, Pengalaman Pengguna
Dan tidak lagi berpegang pada perbedaan antara sisi server atau browser.
Berbagi template
Dalam model pengembangan tradisional, browser dan server dikembangkan oleh dua tim, baik ujung depan dan belakang, tetapi template berada di area yang tidak jelas di antara keduanya. Oleh karena itu, selalu ada logika yang lebih dan lebih kompleks pada templat, yang pada akhirnya sulit untuk dipertahankan.
Dengan Nodejs, siswa backend dapat fokus pada pengembangan logika bisnis dan data di lapisan Java. Siswa front-end fokus pada pengembangan logika kontrol dan rendering. Dan Anda dapat memilih templat ini sendiri untuk diterjemahkan di sisi server (nodejs) atau sisi browser.
Menggunakan Xtemplate Bahasa Template yang Sama dan JavaScript Mesin Render
Memberi hasil yang sama di lingkungan rendering yang berbeda (sisi server, browser PC, browser seluler, tampilan web, dll.).
Berbagi routing
Juga karena lapisan nodeJS, Anda dapat mengontrol perutean lebih hati -hati.
Jika Anda perlu melakukan perutean sisi browser di front-end, Anda dapat mengonfigurasi perutean sisi server secara bersamaan sehingga dapat mengubah halaman pada sisi browser atau halaman di sisi server, dan Anda bisa mendapatkan efek rendering yang konsisten.
Pada saat yang sama, masalah SEO juga ditangani.
Praktik berbagi template
Biasanya saat kami membuat templat di browser, prosesnya tidak lebih dari
Masukkan mesin template di browser (xtmpleate, juicer, handlerbar, dll.)
Memuat arsip template di sisi browser, metode mungkin
Cetak di halaman menggunakan <script type = "js/tpl"> ... </script>
Gunakan alat pemuatan modul untuk memuat arsip template (ciuman, persyaratan, dll.)
lainnya
Dapatkan data dan gunakan mesin template untuk menghasilkan HTML
Masukkan HTML ke lokasi yang ditentukan.
Proses di atas dapat dilihat bahwa jika Anda ingin mencapai berbagi template lintas ujung, fokusnya sebenarnya pada pemilihan modul yang konsisten.
Ada banyak standar modul populer di pasaran, seperti KMD, AMD, dan CommonJS. Selama arsip template nodeJS dapat output ke ujung nodejs melalui spesifikasi modul yang konsisten, berbagi templat dasar dapat dilakukan.
Serangkaian artikel selanjutnya akan membahas proksi dan berbagi model.
Diskusi kasus
Karena lapisan perantara Pulau Midway, ada jawaban yang lebih baik untuk beberapa pertanyaan masa lalu, seperti
Aplikasi Interaktif Kasus 1 Kompleks (seperti keranjang belanja, halaman pesanan)
Status: Semua HTML diterjemahkan di ujung depan, dan server hanya menyediakan antarmuka.
Masalah: Saat memasuki halaman, akan ada layar putih singkat.
menjawab:
Masukkan halaman untuk pertama kalinya, render halaman lengkap di sisi nodeJS, dan unduh templat terkait di latar belakang.
Interaksi selanjutnya, penyegaran parsial lengkap di sisi browser
Menggunakan template yang sama menghasilkan hasil yang sama
Aplikasi Kasus 2 Halaman Tunggal
Status: Gunakan kerangka kerja MVC sisi klien untuk mengubah halaman di browser.
Masalah: Rendering dan penggantian halaman keduanya diselesaikan di sisi browser. Saat Anda memasukkan URL langsung ke atau menyegarkan F5, konten yang sama tidak dapat disajikan secara langsung.
menjawab:
Bagikan pengaturan rute yang sama di sisi browser dan sisi nodeJS
Saat mengubah halaman di sisi browser, ubah rute dan render konten halaman di sisi browser.
Saat secara langsung memasukkan URL yang sama, gunakan rendering konten bingkai + halaman di sisi nodeJS
Apakah Anda mengubah halaman di browser atau langsung memasukkan URL yang sama, konten yang Anda lihat adalah sama.
Selain meningkatkan pengalaman dan mengurangi kompleksitas logis. Itu juga memecahkan masalah SEO
Kasus Tiga Halaman Penjelajahan Murni
Status: Halaman hanya memberikan informasi, kurang atau tidak ada interaksi
Masalah: HTML dihasilkan di sisi server, CSS dan JS ditempatkan di lokasi lain, dan mereka memiliki ketergantungan antara satu sama lain.
menjawab:
Melalui Nodejs, manajemen html + css + js yang terpadu
Jika Anda perlu memperluas ke aplikasi kompleks atau aplikasi satu halaman di masa depan, Anda juga dapat dengan mudah mentransfernya.
Halaman Terminal Kasus Empat-Salib
Status: Aplikasi yang sama perlu menyajikan antarmuka dan interaksi yang berbeda pada titik akhir yang berbeda
Masalah: Manajemen HTML tidak mudah, dan HTML yang berbeda akan sering dihasilkan di sisi server, dan pemrosesan yang berbeda akan dilakukan di sisi browser.
menjawab:
Halaman silang adalah masalah dan ditangani oleh front-end.
Melalui lapisan NodeJS dan layanan backend, solusi terbaik dapat dirancang untuk jenis aplikasi kompleks ini.
Meringkaskan
Munculnya teknologi seperti AJAX, MVC sisi klien, SPA, pengikatan data dua arah di masa lalu adalah semua upaya untuk menyelesaikan kemacetan yang dihadapi dalam pengembangan front-end pada waktu itu.
Munculnya lapisan perantara NODEJS juga merupakan upaya untuk memecahkan batasan bahwa front-end saat ini terbatas pada browser.
Artikel ini berfokus pada berbagi templat front-end dan back-end, dan berharap dapat menarik perhatian. Mari kita bahas dengan Anda bagaimana meningkatkan alur kerja kami dan bekerja sama dengan back-end untuk melakukan pekerjaan yang lebih baik di front-end di bawah arsitektur lapisan tengah NodeJS.