Pendapat saya adalah bahwa WebAssembly adalah masa depan Internet. Teknologi ini saat ini sudah terintegrasi di sebagian besar browser modern (atau lebih tepatnya di mesin mereka) pada PC dan perangkat seluler. Di browser seperti Chrome, Edge, Firefox, dan WebKit.
Pada artikel ini, saya akan menjelaskan cara mulai mengembangkan situs WebAssembly di Visual Studio. Artikel ini cocok untuk mereka yang ingin memahami bagaimana memulai mengembangkan aplikasi SPA tanpa menggunakan JavaScript, hanya tahu asp.net mvc, c #, html dan tata letak css.
Pada saat rilis artikel ini, kerangka kerja NetCore 3 sedang dalam tahap RC1, dan Blazor memiliki versi 3.0.0-preview9.19457.4. Rilis NetCore 3 dijadwalkan untuk September 2019. Adapun Blazor, rilisnya dijanjikan nanti pada November 2019, kemungkinan besar setelah rilis NetCore 3.1
Daftar isi:
I Instalasi (pastikan untuk meletakkan versi saat ini, setelah rilis November 2019 kemungkinan besar)
- Pratinjau Visual Studio - visualstudio.microsoft.com/en/vs/preview
- Templat Blazor - devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-release-candidate-1
II Membuat proyek WebAssembly dari templat
- Buka VS preview 16.3 preview 4
- Buat proyek baru. Pilih templat Aplikasi Blazor dan tentukan jenis WebAssembly.
Proses pembuatan dalam gambar
III Struktur keputusan
Seperti yang Anda lihat, solusi default terdiri dari 3 proyek:
- Ini adalah proyek Klien yang berisi html, file css, gambar, dll. Semuanya itu akan dimuat oleh klien (frontend). Proyek Klien juga berisi kode untuk membuat paket WebAssemly.
- Server dalam proyek ini berisi kode layanan yang diakses klien untuk informasi (backend). Contohnya mengimplementasikan informasi cuaca.
- Shared digunakan untuk menyimpan model data umum untuk dua proyek pertama.
IV Memulai dan men-debug blazer WebAssembly
- Atur dua breakpoints. Satu di kode aplikasi klien, yang kedua di kode server layanan. Anda dapat segera melihat bahwa acara tombol onclick memanggil kode C #, bukan JavaScript. Tidak ada yang aneh tentang kode server layanan.
- Jalankan solusi dalam mode membangun debug. Setelah perakitan berhasil, browser akan terbuka dan situs web berbasis webassembly akan dimuat
- Ayo coba ke bagian "Ambil data". Bagian ini berisi kode yang membuat permintaan ke backend. Segera setelah kami mencoba untuk pergi ke bagian ini, breakpoint yang telah ditentukan di service controller akan segera berfungsi. Perilaku itu standar, bukan hal baru. Lanjutkan eksekusi kode
- Sekarang mari kita pindah ke bagian "Counter". Berikut adalah kode yang diimplementasikan yang sepenuhnya dieksekusi pada klien. Dengan mengklik tombol "klik saya", kami mendapatkan hasil yang tidak terduga. Kode akan berfungsi (menambah jumlah saat ini 1), tetapi set breakpoint dalam kode tidak akan berfungsi.
- Faktanya adalah bahwa debugging aplikasi klien berbasis webassembly terjadi di browser. Sama seperti debugging JavaScript. Untuk melakukan ini, tekan shift + alt + D di jendela dengan situs berjalan. Tetapi ada beberapa syarat.
Browser harus memiliki koneksi langsung dengan studio visual yang sedang berjalan. Untuk melakukan ini, Chrome harus berjalan dalam mode debugging dengan akses ke browser api melalui port tertentu.
Salin baris yang disarankan untuk meluncurkan browser. Tutup semua jendela browser. Dan jalankan baris yang sebelumnya disalin.
- Mulai kembali debugging. Jika Anda mencoba men-debug aplikasi klien yang dibuka di chrome beberapa kali, Anda akan menerima pesan kesalahan. Sisakan hanya satu tab terbuka dengan situs dan hanya satu tab debug.
- Pada tab debug, dalam struktur file Anda akan melihat file yang terletak di disk Anda. Di mana kode sumber berada. Sekarang, pergi ke file "Counter.razor" kita dapat mengatur breakpoint dalam prosedur yang disebut pada event onclick. Ketika Anda mengklik tombol "Klik saya", sebuah breakpoint akan berfungsi, kami akan memiliki akses ke tumpukan panggilan dan melihat nilai-nilai variabel
Ukuran file V dan tautan
- Seperti yang kita lihat dalam contoh, ukuran data situs yang diunduh cukup kecil 2,4MB (setelah membongkar klien 5,4MB). Ketika situs pertama kali dimuat, DLL yang diperlukan dimuat untuk situs untuk bekerja (contohnya adalah cara memuat perpustakaan JS), kemudian mereka tidak dimuat ulang, tetapi digunakan dari cache browser.
- Anda juga harus memperhatikan fakta bahwa tautan digunakan. Ini memungkinkan Anda untuk mengurangi ukuran file dll yang dihasilkan, yaitu, fungsi kode yang tidak digunakan secara otomatis terpotong dari file.
Misalnya, System.Text.Json.dll dari 288KB menjadi 114KB, dan System.Memory.dll dari 146KB menjadi 58.5KB. Ini dipastikan oleh karya tautan, dan juga dengan mengompresi file yang ditransfer.
Selain itu, proses ini dapat dikonfigurasi secara manual docs.microsoft.com/ru-ru/aspnet/core/host-and-deploy/blazor/configure-linker?view=aspnetcore-3.0
VI Publishing dan LazyLoading, pustaka elemen
- Menerbitkan situs berbasis webassembly melalui mesin Core IIS atau ASP.NET. Lebih detail di sini .
- Meskipun teknologi WebAssembly sendiri memungkinkan Anda untuk mengunduh file wasme seperti yang diminta oleh developer.google.com/web/updates/2018/04/loading-wasm .
Saat ini blazor tidak memiliki kemampuan untuk memuat dll (komponen wasm) tergantung pada kebutuhan halaman tertentu. Artinya, semua komponen akan diunduh saat pertama kali Anda mengakses situs.
Rekomendasi ini adalah satu - "Jangan gunakan pustaka kompleks untuk mengimplementasikan fungsi sederhana yang Anda tulis dalam tiga baris kode." Jangan mewarisi dll 100 + MB dalam aplikasi klien demi kemungkinan implementasi sederhana logging (keengganan untuk menulis sendiri 5 baris kode).
Kabar baiknya adalah bahwa mereka berjanji untuk menerapkan pemuatan modular dalam core 3.1 - Jika Anda ingin menggunakan komponen yang sudah jadi untuk implementasi situs, maka koleksi perusahaan terkenal seperti telerik, devexpress atau misalnya paket gratis www.matblazor.com telah tiba untuk blazor
VII Kesimpulan
- Teknologi Weassambly saat ini sudah dapat sepenuhnya digunakan dalam pengembangan situs web.
- Agar nyaman bekerja dengan blazor untuk proyek-proyek Internet, LazyLoading diperlukan. Yang berjanji untuk menambahkan dalam waktu dekat
- Jika proyek ini intranet, maka penggunaan blazor dalam perkembangan baru akan disambut baik. Tidak layak membahas dalam nada ini bahwa PC akhir pada jaringan internal dapat dengan akses lambat, ini dapat diselesaikan dengan menggunakan klien RDP tipis.
- ASP.NET Core 3 + blazor adalah tempat pengembang c # harus mengembangkan
- Saya percaya bahwa teknologi ini akan menyebabkan penolakan javascript di masa depan, tetapi ini adalah pendapat pribadi saya.