Bagian 3: Strategi Keseluruhan & Arsitektur Dasar
Anda dapat membaca artikel sebelumnya dari seri ini di sini.
Perpustakaan
Saya harus berterima kasih banyak kepada semua pembaca yang membalas kritikan pokok bahasan seri artikel ini karena postingan mereka membuat saya memperbaiki artikel tersebut. Terutama, mereka menyadarkanku bahwa aku kehilangan sesuatu yang SANGAT penting: perpustakaan.
Tanpa perpustakaan, hasil terbaik dari rangkaian artikel ini adalah “Saya pernah membaca konsep menarik tentang membuat beberapa aplikasi web murni dengan kanvas. Demo sederhana sepertinya berfungsi dengan baik. Namun ini berarti banyak pekerjaan dan(bagi sebagian besar pengembang)Saya tidak terbiasa bermain-main dengan kanvas. Itu tidak layak bagi saya”.
Artikel terakhir dari seri ini akan merilis pustaka JavaScript yang sangat ramah, tingkat tinggi, intuitif, ringan, dan hanya berisi satu file, yang akan membuat semuanya berjalan lancar. Pengembang tidak perlu menulis “kanvas”, sekali pun!
Pantau terus ;)
Beberapa Pertimbangan
Saya telah menunjukkan beberapa kelemahan pendekatan kanvas:
- Tidak Ada Search Engine Optimization (karena teks berupa gambar). BENAR. Mungkin kita akan menemukan solusinya di masa depan.
- Tidak ada terjemahan bahasa oleh browser. BENAR. Meskipun Google, Mozilla, Microsoft, dan AWS tidak bergantung pada terjemahan browser. Mereka menghasilkan versi setiap halaman untuk setiap bahasa yang mereka targetkan. Tapi oke, kami memiliki situs web kecil; terjemahan otomatis akan menghemat banyak waktu dan uang. Selain itu, versi Chrome saat ini (untuk desktop saya) tidak lagi mengotak-atik tombol menu aplikasi lama itu (saya tidak tahu tentang perangkat browser X lainnya).
- Kami harus menyajikan lembar font, lebih banyak lalu lintas dan lebih banyak barang untuk cache klien. BENAR. Tapi itu tidak banyak. Dan kami menyajikannya dalam satu paket.
- Tidak ada peluang bagi pembaca layar. BENAR. Namun kami menggunakan kanvas untuk label tombol dan kontrol lainnya. Ini tidak seharusnya digunakan untuk teks (panjang). Bagaimanapun, ZIM menangani pembaca layar dengan menempatkan teks HTML di belakang kanvas.
- Kami tidak dapat memperbesar, ini buruk untuk aksesibilitas. Sebenarnya, kita dapat memperbesar dan memperkecilnya, tanpa merusak tata letak atau fungsi apa pun; hanya saja karakternya tidak akan terlihat bagus.
- Artinya BANYAK pekerjaan. Itulah alasan mengapa saya akan merilis perpustakaan untuk menangani semua hal ini.
- Halaman ini tidak akan otomatis menyesuaikan dengan ukuran layar yang berbeda. Ini hanya bergantung pada cara kita memprogramnya.
Strategi Keseluruhan
Aturan emasnya adalah TETAP menggunakan HTML/CSS kapan pun Anda mau.
Gunakan pendekatan kanvas saat Anda membutuhkannya. Bila Anda ingin benar-benar yakin bahwa setiap browser di setiap perangkat akan menampilkan apa yang Anda rencanakan dengan tepat. Saat aplikasi Anda lebih menuntut. Lihat balasan ini oleh Hans Garon:
Saya telah menggunakan kanvas untuk melukis halaman web sepenuhnya, terutama karena UI meniru aplikasi asli, dan memerlukan banyak (ribuan) contoh widget tertentu yang propertinya terus berkembang. Ini bukan permulaan untuk browser. Namun, hal ini relatif mudah untuk dimasukkan ke dalam struktur data, bahkan diteruskan ke modul wasm untuk pembaruan, lalu dikirim ke kanvas untuk melukisnya.
Kita sebaiknya menggunakan HTML/CSS untuk laman beranda: tidak ada masalah dengan SEO, tidak ada masalah dengan terjemahan otomatis, tidak ada masalah dengan pembaca layar.
Untuk aplikasi gaya kanvas, kita memerlukan setidaknya 3 versi berbeda (layar kecil, sedang, dan besar). Metode paling ampuh adalah membuat halaman berbeda (atau satu halaman yang memilih file JavaScript yang tepat). Saya tidak akan membuat satu kode JavaScript untuk semua skenario, terlalu berantakan!
Yang masuk akal adalah menentukan beberapa tata letak yang akan cocok dengan sempurna pada beberapa layar dan cukup cocok dengan layar lainnya.
Misalnya, kami membuat versi yang sangat cocok dengan layar IPhone5. Jika perangkat pengguna sudah sangat tua dan memiliki layar lebih kecil, ia akan menggunakan bilah gulir. Jika layar perangkat sedikit lebih besar dari layar iPhone5, aplikasi akan berada di tengah, tanpa penskalaan. Penskalaan aplikasi selalu memungkinkan (tidak pernah merusak tata letak). Hanya saja, penskalaan tidak terjadi secara otomatis.
Arsitektur Dasar
Tidak ada lagi bla-bla-bla!
Tubuh
Untuk menyederhanakannya, kami hanya akan membuat satu versi aplikasi hipotetis. Dan bodinya akan memiliki lebar 1300 piksel dan tinggi 660 piksel. Ukurannya bagus untuk laptop, berfungsi untuk desktop dengan layar resolusi tinggi; tapi gagal untuk smartphone. Karena kami adalah pengembang, kami semua memiliki komputer untuk bekerja.
Elemen-elemen
Elemen kami mirip dengan elemen HTML (tag). Tubuh tidak dianggap sebagai sebuah elemen, ia adalah tubuh, wadah utama.
Lapisan
Kita tidak dapat menambahkan elemen apa pun ke tubuh. Kami menambahkan elemen ke lapisan. Saat sebuah lapisan dibuat, lapisan tersebut secara otomatis melekat pada badannya (daftar allLayers). Tentu saja, kita juga dapat menghapus lapisan dan mengubah urutannya (bagaimanapun juga, allLayers, hanyalah sebuah daftar).
Elemen-elemen di dalam suatu lapisan tidak boleh saling tumpang tindih.
const allLayers = [ ]
function createLayer(id) {
//
const layer = new Layer(id)
Object.seal(layer)
//
allLayers.push(layer)
return layer
}
function Layer(id) {
this.id = id
this.visible = true
this.left = 0
this.top = 0
this.width = 300
this.height = 200
this.opacity = 1
this.background = null // "white"
// more attributes here
this.elements = [ ]
}
Mesin mencetak lapisan sesuai urutannya dalam daftar semuaLayers. Namun menerapkan peristiwa mouse dalam urutan sebaliknya.
Dalam CSS, yang setara dengan konsep lapisan kita adalah properti z-index.
Saya tidak menyukai properti z-indexCSS karena tiga alasan:
- Seperti semua hal di CSS, definisinya mungkin tersebar di mana-mana. Saya tidak dapat melihat “gambaran besarnya”. Oleh karena itu, saya tidak yakin semuanya baik-baik saja.
- Saat saya ingin menyisipkan layer baru, saya mungkin harus mengindeks ulang banyak elemen lainnya. Ini bukan sekedar pekerjaan; itu adalah risiko timbulnya bug.
- z-index hanya berfungsi pada elemen yang diposisikan (posisi: absolut, posisi: relatif, posisi: tetap, atau posisi: lengket) dan item fleksibel (elemen yang merupakan turunan langsung dari tampilan: elemen fleksibel).
Ya! CSS terlalu rumit bagi saya.
Di artikel selanjutnya, kami akan memiliki demo tentang body/layers/elements, dan kami akan menangani event mouse!
Konten lainnya di
