Teknologi web sisi klien umum

  • Artikel

Tip

Konten ini adalah kutipan dari e-book berjudul Architect Modern Web Applications with ASP.NET Core and Azure, yang tersedia di .NET Docs atau sebagai PDF yang dapat diunduh gratis dan dibaca secara offline.

Unduh PDF

Architect Modern Web Applications with ASP.NET Core and Azure eBook cover thumbnail.

"Situs web akan terlihat bagus dari dalam dan luar." - Paul Cookson

ASP.NET Core adalah aplikasi web dan biasanya mengandalkan teknologi web sisi klien seperti HTML, CSS, dan JavaScript. Dengan memisahkan konten halaman (HTML) dari tata letak dan gayanya (CSS), dan perilakunya (melalui JavaScript), aplikasi web kompleks dapat memanfaatkan prinsip Pemisahan Masalah. Perubahan pada struktur, desain, atau perilaku aplikasi di masa mendatang dapat dibuat lebih mudah ketika kekhawatiran ini tidak terjalin.

Meskipun HTML dan CSS relatif stabil, JavaScript, dengan kerangka kerja aplikasi dan pengembang utilitas bekerja dengan untuk membangun aplikasi berbasis web, berkembang dengan kecepatan breakneck. Bab ini melihat beberapa cara agar JavaScript digunakan oleh pengembang web dan memberikan gambaran umum tingkat tinggi tentang pustaka sisi klien Angular dan React.

Catatan

Blazor menyediakan alternatif untuk kerangka kerja JavaScript untuk membangun antarmuka pengguna klien interaktif yang kaya.

HTML

HTML adalah bahasa markup standar yang digunakan untuk membuat halaman web dan aplikasi web. Elemen-elemennya membentuk blok penyusun halaman, mewakili teks yang diformat, gambar, input formulir, dan struktur lainnya. Saat browser membuat permintaan ke URL, baik mengambil halaman atau aplikasi, hal pertama yang dikembalikan adalah dokumen HTML. Dokumen HTML ini dapat mereferensikan atau menyertakan informasi tambahan tentang tampilan dan tata letaknya dalam bentuk CSS, atau perilaku dalam bentuk JavaScript.

CSS

CSS (Lembar Gaya Susun) digunakan untuk mengontrol tampilan dan tata letak elemen HTML. Gaya CSS dapat diterapkan langsung ke elemen HTML, ditentukan secara terpisah pada halaman yang sama, atau ditentukan dalam file terpisah dan dirujuk oleh halaman. Gaya susun berdasarkan bagaimana gaya digunakan untuk memilih elemen HTML tertentu. Misalnya, gaya mungkin berlaku untuk seluruh dokumen, tetapi akan ditimpa oleh gaya yang diterapkan ke elemen tertentu. Demikian juga, gaya khusus elemen akan ditimpa oleh gaya yang diterapkan ke kelas CSS yang diterapkan ke elemen, yang pada gilirannya akan ditimpa oleh gaya yang menargetkan instans tertentu dari elemen tersebut (melalui ID-nya). Gambar 6-1

CSS Specificity rules

Gambar 6-1. Aturan Kekhususan CSS, secara berurutan.

Yang terbaik adalah menyimpan gaya dalam file lembar gaya terpisah mereka sendiri, dan menggunakan kaskade berbasis pilihan untuk mengimplementasikan gaya yang konsisten dan dapat digunakan kembali dalam aplikasi. Menempatkan aturan gaya dalam HTML harus dihindari, dan menerapkan gaya ke elemen individual tertentu (bukan seluruh kelas elemen, atau elemen yang telah menerapkan kelas CSS tertentu) harus menjadi pengecualian, bukan aturan.

Praprosesor CSS

Lembar gaya CSS tidak memiliki dukungan untuk logika kondisi, variabel, dan fitur bahasa pemrograman lainnya. Dengan demikian, lembar gaya besar sering menyertakan sedikit pengulangan, karena warna, font, atau pengaturan lainnya yang sama diterapkan ke banyak variasi elemen HTML dan kelas CSS yang berbeda. Pra-prosesor CSS dapat membantu lembar gaya Anda mengikuti prinsip DRY dengan menambahkan dukungan untuk variabel dan logika.

Praprosesor CSS yang paling populer adalah Sass dan LESS. Perluas CSS dan kompatibel mundur dengannya, yang berarti bahwa file CSS biasa adalah file Sass atau LESS yang valid. Sass berbasis Ruby dan LESS berbasis JavaScript, dan keduanya biasanya dijalankan sebagai bagian dari proses pengembangan lokal Anda. Keduanya memiliki alat baris perintah yang tersedia, serta dukungan bawaan dalam Visual Studio untuk menjalankannya menggunakan tugas Gulp atau Grunt.

JavaScript

JavaScript adalah bahasa pemrograman dinamis yang ditafsirkan yang telah distandarisasi dalam spesifikasi bahasa ECMAScript. Ini adalah bahasa pemrograman web. Seperti CSS, JavaScript dapat ditentukan sebagai atribut dalam elemen HTML, sebagai blok skrip dalam halaman, atau dalam file terpisah. Sama seperti CSS, disarankan untuk mengatur JavaScript ke dalam file terpisah, menjaganya dipisahkan sebanyak mungkin dari HTML yang ditemukan di halaman web individual atau tampilan aplikasi.

Saat bekerja dengan JavaScript di aplikasi web Anda, ada beberapa tugas yang biasanya perlu Anda lakukan:

  • Memilih elemen HTML dan mengambil dan/atau memperbarui nilainya.

  • Mengkueri API Web untuk data.

  • Mengirim perintah ke API Web (dan merespons panggilan balik dengan hasilnya).

  • Melakukan validasi.

Anda dapat melakukan semua tugas ini dengan JavaScript saja, tetapi banyak pustaka yang ada untuk mempermudah tugas-tugas ini. Salah satu pustaka pertama dan paling sukses ini adalah jQuery, yang terus menjadi pilihan populer untuk menyederhanakan tugas-tugas ini di halaman web. Untuk Aplikasi Halaman Tunggal (SPAs), jQuery tidak menyediakan banyak fitur yang diinginkan yang Angular dan React tawarkan.

Aplikasi web lama dengan jQuery

Meskipun kuno oleh standar kerangka kerja JavaScript, jQuery terus menjadi pustaka yang umum digunakan untuk bekerja dengan HTML/CSS dan membangun aplikasi yang membuat panggilan AJAX ke API web. Namun, jQuery beroperasi pada tingkat model objek dokumen browser (DOM), dan secara default hanya menawarkan model yang imperatif, bukan deklaratif.

Misalnya, bayangkan bahwa jika nilai kotak teks melebihi 10, elemen pada halaman harus dibuat terlihat. Di jQuery, fungsionalitas ini biasanya akan diimplementasikan dengan menulis penanganan aktivitas dengan kode yang akan memeriksa nilai kotak teks dan mengatur visibilitas elemen target berdasarkan nilai tersebut. Proses ini adalah pendekatan penting berbasis kode. Kerangka kerja lain mungkin menggunakan pengikatan data untuk mengikat visibilitas elemen ke nilai kotak teks secara deklaratif. Pendekatan ini tidak akan memerlukan penulisan kode apa pun, tetapi sebaliknya hanya memerlukan dekorasi elemen yang terlibat dengan atribut pengikatan data. Ketika perilaku sisi klien tumbuh lebih kompleks, pendekatan pengikatan data sering menghasilkan solusi yang lebih sederhana dengan lebih sedikit kode dan kompleksitas kondisi.

jQuery vs Kerangka Kerja SPA

Kecil jQuery Sudut
Mengabstraksi DOM Ya Ya
Dukungan AJAX Ya Ya
Pengikatan Data Deklaratif Tidak Ya
Perutean gaya MVC Tidak Ya
Pembuatan Templat Tidak Ya
Perutean Deep-Link Tidak Ya

Sebagian besar fitur yang tidak memiliki jQuery secara intrinsik dapat ditambahkan dengan penambahan pustaka lain. Namun, kerangka kerja SPA seperti Angular menyediakan fitur-fitur ini dengan cara yang lebih terintegrasi, karena telah dirancang dengan mengingat semuanya sejak awal. Selain itu, jQuery adalah pustaka imperatif, yang berarti Bahwa Anda perlu memanggil fungsi jQuery untuk melakukan apa pun dengan jQuery. Sebagian besar pekerjaan dan fungsionalitas yang disediakan kerangka kerja SPA dapat dilakukan secara deklaratif, tidak memerlukan kode aktual untuk ditulis.

Pengikatan data adalah contoh yang bagus dari fungsionalitas ini. Dalam jQuery, biasanya hanya membutuhkan satu baris kode untuk mendapatkan nilai elemen DOM atau untuk mengatur nilai elemen. Namun, Anda harus menulis kode ini kapan saja Anda perlu mengubah nilai elemen, dan kadang-kadang ini akan terjadi dalam beberapa fungsi pada halaman. Contoh umum lainnya adalah visibilitas elemen. Di jQuery, mungkin ada banyak tempat berbeda saat Anda akan menulis kode untuk mengontrol apakah elemen tertentu terlihat. Dalam setiap kasus ini, saat menggunakan pengikatan data, tidak ada kode yang perlu ditulis. Anda hanya akan mengikat nilai atau visibilitas elemen yang dimaksud ke viewmodel di halaman, dan perubahan pada viewmodel tersebut akan secara otomatis tercermin dalam elemen terikat.

Angular SPAs

Angular tetap menjadi salah satu kerangka kerja JavaScript paling populer di dunia. Sejak Angular 2, tim membangun kembali kerangka kerja dari bawah ke atas (menggunakan TypeScript) dan berganti nama dari nama AngularJS asli menjadi Angular. Sekarang beberapa tahun, Angular yang didesain ulang terus menjadi kerangka kerja yang kuat untuk membangun Aplikasi Halaman Tunggal.

Angular aplikasi dibangun dari komponen. Komponen menggabungkan templat HTML dengan objek khusus dan mengontrol sebagian halaman. Komponen sederhana dari dokumen Angular ditampilkan di sini:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Komponen ditentukan menggunakan @Component fungsi dekorator, yang mengambil metadata tentang komponen. Properti pemilih mengidentifikasi ID elemen pada halaman tempat komponen ini akan ditampilkan. Properti templat adalah templat HTML sederhana yang menyertakan tempat penampung yang sesuai dengan properti nama komponen, yang ditentukan pada baris terakhir.

Dengan bekerja dengan komponen dan templat, alih-alih elemen DOM, aplikasi Angular dapat beroperasi pada tingkat abstraksi yang lebih tinggi dan dengan kode keseluruhan yang lebih sedikit daripada aplikasi yang ditulis hanya menggunakan JavaScript (juga disebut "JS vanili") atau dengan jQuery. Angular juga memberlakukan beberapa urutan tentang cara Anda mengatur file skrip sisi klien Anda. Berdasarkan konvensi, Angular aplikasi menggunakan struktur folder umum, dengan file skrip modul dan komponen yang terletak di folder aplikasi. Angular skrip yang berkaitan dengan pembuatan, penyebaran, dan pengujian aplikasi biasanya terletak di folder tingkat yang lebih tinggi.

Anda dapat mengembangkan aplikasi Angular dengan menggunakan CLI. Memulai pengembangan Angular secara lokal (dengan asumsi Anda sudah menginstal git dan npm) hanya terdiri dari mengkloning repositori dari GitHub dan menjalankan npm install dan npm start. Di luar ini, Angular mengirimkan CLI sendiri, yang dapat membuat proyek, menambahkan file, dan membantu tugas pengujian, pengemasan, dan penyebaran. Keramahan CLI ini membuat Angular sangat kompatibel dengan ASP.NET Core, yang juga memiliki dukungan CLI yang hebat.

Microsoft telah mengembangkan aplikasi referensi, eShopOnContainers, yang mencakup implementasi ANGULAR SPA. Aplikasi ini mencakup modul Angular untuk mengelola kelopak belanja toko online, memuat dan menampilkan item dari katalognya, dan menangani pembuatan pesanan. Anda dapat mengunduh aplikasi contoh dari repositori GitHub ini.

React

Tidak seperti Angular, yang menawarkan implementasi pola Model-View-Controller lengkap, React hanya berkaitan dengan tampilan. Ini bukan kerangka kerja, hanya pustaka, jadi untuk membangun SPA, Anda harus memanfaatkan pustaka tambahan. Ada sejumlah pustaka yang dirancang untuk digunakan dengan React untuk menghasilkan aplikasi halaman tunggal yang kaya.

Salah satu fitur terpenting React adalah penggunaan DOM virtual. DOM virtual memberikan React dengan beberapa keuntungan, termasuk performa (DOM virtual dapat mengoptimalkan bagian mana dari DOM aktual yang perlu diperbarui) dan kemampuan pengujian (tidak perlu memiliki browser untuk menguji React dan interaksinya dengan DOM virtualnya).

React juga tidak biasa dalam cara kerjanya dengan HTML. Daripada memiliki pemisahan yang ketat antara kode dan markup (dengan referensi ke JavaScript mungkin muncul dalam atribut HTML), React menambahkan HTML langsung dalam kode JavaScript-nya sebagai JSX. JSX adalah sintaks seperti HTML yang dapat dikompilasi ke JavaScript murni. Misalnya:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Jika Anda sudah mengetahui JavaScript, React pembelajaran seharusnya mudah. Tidak ada kurva pembelajaran atau sintaksis khusus yang terkait dengan Angular atau pustaka populer lainnya.

Karena React bukan kerangka kerja penuh, Anda biasanya ingin pustaka lain menangani hal-hal seperti perutean, panggilan API web, dan manajemen dependensi. Yang menyenangkan adalah, Anda dapat memilih perpustakaan terbaik untuk masing-masing ini, tetapi kerugiannya adalah Anda perlu membuat semua keputusan ini dan memverifikasi semua pustaka yang Anda pilih bekerja sama dengan baik ketika Anda selesai. Jika Anda menginginkan titik awal yang baik, Anda dapat menggunakan starter kit seperti React Slingshot, yang telah mengemas sekumpulan pustaka yang kompatibel bersama dengan React.

Vue

Dari panduan memulainya, "Vue adalah kerangka kerja progresif untuk membangun antarmuka pengguna. Tidak seperti kerangka kerja monolitik lainnya, Vue dirancang dari bawah ke atas agar dapat diadopsi secara bertahap. Pustaka inti hanya difokuskan pada lapisan tampilan, dan mudah diambil dan diintegrasikan dengan pustaka lain atau proyek yang ada. Di sisi lain, Vue sangat mampu mendukung Aplikasi Single-Page canggih ketika digunakan dalam kombinasi dengan peralatan modern dan pustaka pendukung."

Memulai Vue hanya memerlukan termasuk skripnya dalam file HTML:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Dengan kerangka kerja ditambahkan, Anda kemudian dapat merender data secara deklaratif ke DOM menggunakan sintaks templat langsung Vue:

<div id="app">
  {{ message }}
</div>

lalu tambahkan skrip berikut:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Ini cukup untuk dirender "Hello Vue!" pada halaman. Namun, perhatikan bahwa Vue tidak hanya merender pesan ke div sekali. Vue mendukung pengikatan data dan pembaruan dinamis sehingga jika nilai message berubah, nilai dalam <div> langsung diperbarui untuk mencerminkan perubahan itu.

Tentu saja, ini hanya menggores permukaan dari kemampuan Vue. Vue mendapatkan banyak popularitas dalam beberapa tahun terakhir dan memiliki komunitas besar. Ada daftar komponen dan pustaka pendukung yang besar dan berkembang yang bekerja dengan Vue yang juga untuk memperluasnya. Jika Anda ingin menambahkan perilaku sisi klien ke aplikasi web Anda atau mempertimbangkan untuk membangun SPA penuh, Vue layak diteliti.

Blazor WebAssembly

Tidak seperti kerangka kerja JavaScript lainnya, Blazor WebAssembly adalah kerangka kerja aplikasi satu halaman (SPA) untuk membangun aplikasi web sisi klien interaktif dengan .NET. Blazor WebAssembly menggunakan standar web terbuka tanpa plugin atau kode kompilasi ulang ke dalam bahasa lain. Blazor WebAssembly berfungsi di semua browser web modern, termasuk browser seluler.

Menjalankan kode .NET di dalam browser web dimungkinkan oleh WebAssembly (disingkat wasm). WebAssembly adalah format bytecode ringkas yang dioptimalkan untuk unduhan cepat dan kecepatan eksekusi maksimum. WebAssembly adalah standar web terbuka dan didukung di browser web tanpa plugin.

Kode WebAssembly dapat mengakses fungsionalitas penuh browser melalui JavaScript, yang disebut interoperabilitas JavaScript, sering disingkat menjadi interop JavaScript atau interop JS. Kode .NET yang dijalankan melalui WebAssembly di browser berjalan di kotak pasir JavaScript browser dengan perlindungan yang disediakan kotak pasir terhadap tindakan berbahaya pada komputer klien.

Untuk informasi selengkapnya, lihat Pengenalan kueri LINQBlazor.

Memilih Kerangka Kerja SPA

Saat mempertimbangkan opsi mana yang paling sesuai untuk mendukung SPA Anda, ingatlah pertimbangan berikut:

  • Apakah tim Anda terbiasa dengan kerangka kerja dan dependensinya (termasuk TypeScript dalam beberapa kasus)?

  • Seberapa berpendapat kerangka kerja tersebut, dan apakah Anda setuju dengan cara defaultnya untuk melakukan sesuatu?

  • Apakah itu (atau pustaka pendamping) menyertakan semua fitur yang diperlukan aplikasi Anda?

  • Apakah didokumenkan dengan baik?

  • Seberapa aktif komunitasnya? Apakah proyek baru sedang dibangun dengannya?

  • Seberapa aktif tim intinya? Apakah masalah diselesaikan dan versi baru dikirim secara teratur?

Kerangka kerja terus berkembang dengan kecepatan breakneck. Gunakan pertimbangan yang tercantum di atas untuk membantu mengurangi risiko memilih kerangka kerja yang nantinya Anda akan menyesal bergantung padanya. Jika Anda sangat berisiko, pertimbangkan kerangka kerja yang menawarkan dukungan komersial dan/atau sedang dikembangkan oleh perusahaan besar.

Referensi – Teknologi Web Klien

SebelumnyaBerikutnya