Membangun Frontend yang Tangguh dengan Progressive Enhancement

 (gov.uk)
1 poin oleh GN⁺ 2024-09-30 | 1 komentar | Bagikan ke WhatsApp

Cara membangun frontend yang tangguh: progressive enhancement

  • Mulai dengan HTML

    • Layanan pemerintah harus tetap fungsional hanya dengan HTML
    • Lapisan HTML bersifat fault-tolerant, sehingga dapat tetap bekerja di browser lama
    • Gunakan semantic markup yang benar dan susun struktur dokumen secara logis

  • Menggunakan CSS

    • CSS dapat digunakan untuk memberi gaya pada layanan
    • Lapisan CSS bersifat fault-tolerant karena deklarasi individual dapat diabaikan
    • Teknologi seperti CSS-in-JS sebaiknya dihindari

  • Menggunakan JavaScript

    • JavaScript digunakan untuk menambahkan elemen interaktif
    • Lapisan JavaScript tidak fault-tolerant dan dapat mengalami error
    • Kompatibilitas dapat ditingkatkan melalui deteksi fitur untuk browser API, menyertakan polyfill, transpiling, dan sebagainya
    • JavaScript harus berperan sebagai pelengkap bagi HTML dan CSS

  • Alternatif JavaScript

    • Pertimbangkan solusi sederhana yang dapat memenuhi kebutuhan pengguna tanpa JavaScript
    • Alternatifnya meliputi menampilkan tabel data, mengekspor data, dan melakukan pre-render grafik sebagai gambar

  • Menggunakan framework JavaScript sisi klien

    • Jika bukan untuk antarmuka pengguna yang kompleks, penggunaan framework sebaiknya dihindari
    • Penggunaan framework dapat menimbulkan masalah seperti membesarnya ukuran codebase, masalah performa, dan ketergantungan pada kode pihak ketiga
    • Jika menggunakan framework, setiap antarmuka pengguna harus dirancang sebagai komponen terpisah

  • Alasan CSS atau JavaScript tidak dimuat atau tidak berjalan

    • Penyebabnya bisa berupa error jaringan, browser extension, downtime vendor pihak ketiga, kegagalan lookup DNS, atau bug akibat pembaruan browser
    • Sebagian pengguna mungkin sengaja menonaktifkan fitur browser

  • Single-page application (SPA)

    • Jangan membangun layanan sebagai single-page application
    • SPA dapat menghambat aksesibilitas dan menimbulkan masalah seperti pengelolaan fokus saat berpindah halaman, serta tombol back/forward yang tidak berfungsi

  • Pengujian layanan

    • Komponen yang sangat bergantung pada JavaScript atau framework JavaScript harus dapat berjalan di berbagai browser dan perangkat
    • Pengujian juga harus dilakukan untuk aksesibilitas

  • Studi kasus dan panduan terkait

    • Mengapa menggunakan progressive enhancement
    • Mendesain untuk berbagai perangkat
    • Cara menguji performa frontend
    • Memahami WCAG 2.2

Ringkasan GN⁺

  • Progressive enhancement adalah metode membangun situs web dengan urutan HTML, CSS, lalu JavaScript
  • Metode ini meningkatkan fault tolerance layanan dan memungkinkan situs bekerja di berbagai browser serta perangkat
  • JavaScript harus berperan sebagai pelengkap, dan solusi alternatif perlu dipertimbangkan
  • Single-page application sebaiknya dihindari karena masalah aksesibilitas
  • Pengujian layanan harus memastikan aksesibilitas di berbagai lingkungan

Bacaan terkait

1 komentar

 
GN⁺ 2024-09-30
Komentar Hacker News

  • Saat menggunakan framework JavaScript, harus bisa dibuktikan manfaatnya bagi pengguna

    • Jika aplikasinya bisa bekerja seperti aplikasi desktop bahkan saat offline, maka lebih baik dibuat sebagai single-page application (SPA)
    • Contohnya Photopea, Google Docs/Sheets, tldraw, dan lain-lain
    • Jika aplikasinya memerlukan koneksi internet dan memiliki banyak halaman, lebih baik biarkan browser yang menangani navigasi

  • Hal-hal yang ditunjuk sebagai kekurangan SPA

    • Pengguna teknologi bantu tidak menyadari perubahan konteks saat berpindah halaman
    • Tidak dapat menangani fokus saat berpindah halaman
    • Tombol kembali dan maju di browser tidak bisa digunakan
    • Tidak dapat pulih dari error jika koneksi jaringan terputus
    • Namun, masalah-masalah ini juga bisa diatasi dalam SPA

  • Andai seluruh internet mengikuti saran ini

  • Solusi yang sederhana harus diprioritaskan

  • Penasaran kenapa Linux tidak ada dalam daftar

  • Sepertinya banyak orang menyukai pendekatan ini

    • Penasaran kenapa tren umumnya justru memakai JavaScript dan framework seperti React secara tidak perlu

  • Menggunakan HTML dan data yang sudah diambil lebih dulu dari server, lalu menangani di klien apa yang memang bisa dikerjakan di klien

    • Menggunakan CSS seminimal mungkin dan vanilla JS
    • Mungkin terlihat kuno bagi rekan kerja, tetapi tidak ada yang terlewat

  • Banyak SPA memang bermasalah, tetapi tidak semua SPA bermasalah

    • Contoh seperti VitePress dan SolidJS menunjukkan bahwa ini bisa bekerja dengan baik
    • Hampir tidak ada orang yang tidak menggunakan JS
    • Bahkan di perangkat berspesifikasi rendah pun tidak ada masalah berarti dalam memproses JS
    • Masalah aksesibilitas tidak terkait dengan apakah memakai SPA atau tidak
    • Svelte bahkan punya fitur peringatan aksesibilitas bawaan

  • Server-side rendering juga tidak selalu baik tanpa syarat

    • Perlu berhati-hati saat menggunakan framework JavaScript sisi klien
    • Codebase menjadi lebih besar, dan karena lebih banyak pekerjaan harus ditangani di sisi klien, masalah performa bisa muncul
    • Bisa jadi bergantung pada kode pihak ketiga sehingga pemeliharaan menjadi lebih sulit
    • Saat menggunakan framework JavaScript, harus bisa dibuktikan manfaatnya bagi pengguna
    • Harus memahami dampak negatifnya dan mampu menguranginya
    • Framework hanya boleh digunakan untuk bagian yang tidak bisa dibangun hanya dengan HTML dan CSS
    • Setiap bagian antarmuka pengguna harus dirancang sebagai komponen terpisah
    • Bahkan jika JavaScript tidak dimuat, sisa halaman tetap dimuat dengan normal