Ketika semua orang mulai berkenalan dengan React atau Vue, seperti halnya dua kerangka kerja paling populer untuk frontend, tentu saja, kita semua menggunakan perintah ajaib
npm install, npm build . Dan hanya setelah itu ayah 'publik' Kami menyebarkan "di mana perlu."
Tetapi ada cara lain (saya akan menyebutnya cara
mesum ) yang tidak standar, yang bahkan tidak diketahui oleh banyak pengembang pemula front-end, karena mereka "tumbuh" pada npm install / build.
Tetapi bagaimana jika Anda tidak perlu membangun, tetapi hanya memasukkan kode js di html?
Tunggu untuk meludahi wajah saya dan melempar batu dengan tulisan 'I love node' ... Kita tentu tahu bahwa tanpa perakitan kita akan kehilangan unit test, kecepatan, dan bagaimana berurusan dengan komponen impor, dan hierarki file, dan umumnya semacam kode spageti itu akan berubah ...
Jadi mengapa Anda (dan Kami) membutuhkannya dan bagaimana cara kerjanya?
Suatu hari, pesanan datang dari "bisnis" untuk menambahkan fungsionalitas ke sistem BPM / ERP mereka, yang pada dasarnya adalah Redmine yang sangat dimodifikasi. Semua keajaiban ini telah dilakukan untuk waktu yang lama dan berputar pada server VPS dengan sekelompok microservices pembantu untuk membaca data produksi, mesin dan sebagainya. Anda tidak dapat menyentuh OS ...
Redmine - ditulis dalam Ruby on Rails, dan menghasilkan seluruh front di server. Semua interaksi front-end di plugin ditambahkan ada melalui jquery. Sekarang RoR telah belajar untuk bekerja dengan webpack dan Anda dapat mengacaukan "human npm", tetapi ini ada dalam versi terbaru, dan kami memiliki Ruby kuno dan Centos 6 yang di dalamnya tidak ada versi terbaru baik Ruby atau rails. Saya tidak ingin mengumpulkan dari sumber dan menyekop semuanya demi menambahkan beberapa formulir reaktif, jadi kami mulai mencari cara untuk menambahkan Bereaksi atau Vue ke templat laman Rails seperti JS biasa tanpa npm dan rakitan.
Dan dengan cepat ditemukan, dan untuk keduanya.
Vue tanpa Vue npm
Dengan Vue, semuanya ternyata sangat sederhana. Memulai komponen terlihat tentu saja "aneh", tetapi umumnya dapat dibaca dan "dapat ditulis".
Contoh halaman sederhana di Vue dengan komponen:
<html> <head> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> </head> <body> <div id="vue-app"></div> <script type="text/javascript"> const titleComponent = `<h1>{{ title }}</h1>`; var app = new Vue({ el: '#vue-app', template: titleComponent, data: function () { return { title: 'Stranger Vue things' }; } }); </script> </body> </html>
File yang diunduh oleh browser: 371 Kb, waktu: 590 msAnda bahkan dapat mengimpor komponen Vue dalam format .vue biasa menggunakan
http-vue-loader dan tidak menghasilkan kode spaghetti. Saya sangat terkejut bahwa hanya satu vue yang dibutuhkan dari dependensi, yang merupakan kabar baik.
Bereaksi tanpa Bereaksi npm
Dengan Bereaksi, semuanya sedikit lebih rumit tapi tidak banyak. Agar BEJ berfungsi, Anda perlu mengimpor babel. Untuk bekerja dengan DOM, Anda perlu reaksi dom. Tanpa hal di atas, reaksi tidak akan bekerja secara normal. Alih-alih satu impor, Anda perlu melakukan tiga.
Contoh halaman sederhana Bereaksi dengan komponen:
<html lang="en"> <head> <title>React Stranger Things</title> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const rootElement = document.getElementById('root') class TitleComponent extends React.Component { render() { return ( <h1> {this.props.title}</h1> ); } } function App(){ return( <div> <TitleComponent title="React Stranger Things"/> </div> ) } ReactDOM.render( <App />, rootElement ) </script> </body> </html>
File yang diunduh oleh browser: 542 Kb, waktu: 589 msDi sini, tidak seperti Vue, Anda tidak perlu menulis templat komponen sebagai string, kami menulis semuanya seperti biasa, yang cukup nyaman dan tidak menyebabkan ketidaknyamanan.
Dan siapa yang kita pilih?
Jika Anda mengambil ukuran impor js yang diunduh oleh browser, pemenangnya adalah Vue. Tapi ini hanya sekilas. Karena kami tidak memiliki banyak komponen, kami melakukan tugas pada keduanya. Dan itu lebih nyaman untuk menulis dalam Bereaksi: hampir tidak ada perbedaan ketika menulis dengan majelis, dan perbedaan dalam impor tidak terlalu signifikan.
Tapi bagaimana dengan Preact?
Preact adalah versi reaksi "mini", yang sedikit lebih cepat dan beratnya hanya 3 KB. Segera setelah saya mendengar tentang tugas kami, hal pertama yang saya ingat adalah bertindak. Membuka dokumentasi itu bukan kejutan yang menyenangkan: React ≠ Preact.
Preact tidak memiliki JSX, ejaan komponen sangat berbeda dari React. Belajar menulis dengan "preact way" untuk mini-tasking kita sangat berlebihan dan "mahal."
Ini penopang! Pukul dia dengan mereka
Kami tahu ini kruk. Tetapi kadang-kadang Anda harus menemukan solusi seperti itu berdasarkan tugas. Dalam situasi pengembangan frontend yang normal, penggunaan kerangka kerja dalam perwujudan ini adalah penopang yang mengerikan dan tentu saja tidak direkomendasikan sama sekali.