Perkenalan

Jika Anda mengikuti bagian sebelumnya dari tutorial ini dan berinteraksi dengan bilah navigasi melalui "tautan" yang disediakan, Anda mungkin memperhatikan bahwa bilah navigasi mengalami kelambatan setelah mengklik tombol. Sayangnya, kelambatan ini dapat berdampak negatif pada pengalaman pengguna, menyebabkan frustrasi, penurunan interaksi, dan pada akhirnya mengakibatkan pengguna meninggalkan aplikasi.

Untungnya, Dash memberikan solusi untuk masalah ini dengan panggilan balik sisi klien. Di bagian ini, kita akan mengeksplorasi penggunaan callback sisi klien dan melihat bagaimana kita dapat menerapkannya untuk meningkatkan kinerja komponen sidebar kita.

Masalah

Ketika sebuah tombol diklik, itu memicu komunikasi dengan perender dasbor. Perender dasbor kemudian mengidentifikasi callback yang sesuai yang harus dijalankan sebagai respons terhadap masukan pengguna.

Proses mengeksekusi panggilan balik biasanya melibatkan tiga langkah: mengirimkan permintaan ke server, menunggu server merespons, dan mengunduh konten yang diperbarui. Keseluruhan proses ini dapat memakan waktu sekitar 300+ ms, dengan sebagian besar waktu dihabiskan untuk menunggu respons server.

Larutan

Salah satu solusi untuk mengatasi kelambatan dan meningkatkan kinerja aplikasi Dash adalah dengan menggunakan panggilan balik sisi klien. Dengan menerapkan callback sisi klien, kami dapat meminimalkan waktu yang dihabiskan untuk menunggu respons server dan memberikan pengalaman pengguna yang lebih responsif dan lancar.

Callback sisi klien memungkinkan kita mengeksekusi callback langsung di sisi klien, tanpa perlu melakukan perjalanan bolak-balik ke server. Artinya, hanya data penting yang dikirim ke server, sehingga waktu respons lebih cepat dan beban server berkurang.

Untuk menggunakan callback sisi klien di Dash, kita perlu mendefinisikan Output dan Input seperti yang kita lakukan, namun juga harus mendefinisikan fungsi JavaScript sebagai argumen pertama ke dekorator @app.callback.

Mari Membuat Kode

Kita bisa mulai dengan fokus pada callback yang sesuai dengan klik tombol yang merender ukuran navbar. Callback ini adalah kandidat yang baik untuk pengoptimalan sisi klien, karena melibatkan pembaruan satu nilai sebagai respons terhadap masukan pengguna.

@dash.callback(
    Output("sidebar", "width"),          #what we wanted to change
    Input("sidebar-button", "n_clicks"), #width will change when btn is triggered
    State('sidebar','width')             #store inital width
    )
def sidebar(opened, width):
    if opened:
        if width['base'] == 300:         #if initial width is 300 then return 70
            return {"base": 70}
        else:
            return {'base':300}


# will update it to

app.clientside_callback(
    ClientsideFunction(namespace='clientside',
                       function_name='handle_click_sidebar_width'),
    Output("sidebar", "width"),
    [Input("sidebar-button", "n_clicks")],
    [State('sidebar','width')]
)

Ya, tiga argumennya sama dan satu fungsi sisi klien. ClientsideFunction(namespace='clientside',function_name='handle_click_sidebar_width'): Argumen ini menentukan fungsi sisi klien yang harus dipicu ketika panggilan balik dipanggil. Parameter namespace menentukan namespace fungsi JavaScript (dalam hal ini, 'sisi klien'), dan parameter function_name menentukan nama fungsi ('handle_click_sidebar_width').

Buat file baru script.js di folder assets/. Ini akan berisi semua Javascript yang akan kita gunakan.

const handle_click_sidebar_width = (n_clicks, width) => {
  const current_width = parseInt(width.base)
  if (n_clicks > 0 & current_width == 300) {
   return {base:70};
  } else {
    return {base:300};
  }
}

Kami telah membuat fungsi JavaScript bernama handle_click_sidebar_width. Dibutuhkan dua parameter: n_clicks dan width.

Fungsi ini pertama-tama mengekstrak lebar komponen sidebar saat ini dari parameter width, yang merupakan kamus dengan kunci base, menggunakan parseInt() dan menyimpannya di current_width.

Selanjutnya, ia memeriksa apakah jumlah klik (n_clicks) lebih besar dari nol dan lebar saat ini sama dengan 300. Jika kedua kondisi benar, ia mengembalikan objek dengan nilai lebar baru 70 untuk properti base. Ini mengurangi lebar sidebar dari 300 menjadi 70 saat tombol sidebar diklik.

Jika kondisi tidak terpenuhi, berarti lebar navbar saat ini adalah 70, sehingga fungsi mengembalikan objek dengan nilai lebar baru 300 untuk properti base. Ini mengembalikan lebar asli sidebar ketika tombol diklik lagi.

Dengan cara serupa, callback untuk tombol kedua, yang merender laci, juga dapat memperoleh manfaat dari pengoptimalan sisi klien. Hal ini karena callback mengembalikan nilai Boolean sebagai respons terhadap input pengguna, sehingga dapat dieksekusi dengan lebih efisien di sisi klien.

@dash.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
    )
def drawer_dem(n_clicks):
    return True

# will update it to
dash.clientside_callback(
    ClientsideFunction(namespace='clientside', function_name='handle_click'),
    Output("drawer-simple2", "opened"),
    [Input("drawer-demo-button2", "n_clicks")]
)

Dan dalam javascript, kita akan menambahkan fungsi handle_click dan sebuah objek dalam JavaScript yang menyediakan cara untuk mendefinisikan fungsi sisi klien yang dapat dipanggil dari aplikasi Dash. Properti clientside objek ini digunakan untuk menyimpan objek yang berisi fungsi sisi klien. Dalam kasus kami, objek memiliki dua properti: handle_click dan handle_click_sidebar_width, yang sesuai dengan dua fungsi sisi klien yang digunakan dalam aplikasi Dash.

const handle_click = (n_clicks) => {
  if (n_clicks > 0) {
    return true;
  } else {
    return '';
  }
};

window.dash_clientside = { clientside: { handle_click,handle_click_sidebar_width }};

Hasilnya sungguh fenomenal, bisa dicek di sini.

Kesimpulan

Kesimpulannya, penggunaan callback sisi klien dapat meningkatkan kinerja dan pengalaman pengguna aplikasi Dash secara signifikan. Dengan mengoptimalkan callback tertentu untuk dieksekusi di sisi klien, aplikasi dapat mengurangi waktu yang dihabiskan untuk menunggu respons server dan memberikan interaksi yang lebih cepat dan responsif. Komponen ClientsideFunction dan objek window.dash_clientside menyediakan alat canggih untuk mendefinisikan dan mengelola fungsi sisi klien dalam aplikasi Dash. Oleh karena itu, sangat disarankan untuk mengeksplorasi dan memanfaatkan alat-alat ini untuk membuat aplikasi Dash yang berkinerja tinggi dan ramah pengguna.

Seseorang dapat melihat kodenya dengan mengunjungi link GitHub. Saya harap panduan ini informatif dan bermanfaat bagi Anda dalam membuat dasbor yang menarik secara visual dengan Dash.

Silakan tinggalkan komentar di bawah. Saran atau pertanyaan apa pun akan membantu kami meningkatkan konten di masa mendatang dan melayani kebutuhan Anda dengan lebih baik. Terima kasih telah membaca dan bertepuk tangan tidak ada salahnya, bukan?