Latihan 1 dari materi Framework DevTools: Vue & Angular di Debugging — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tulis tiga function yang meniru kerja framework DevTools.
findComponentByState(tree, predicate): tree adalah pohon komponen { name, state, children? }, dan predicate(state) mengembalikan true kalau state-nya cocok. Telusuri dari akar, lalu kembalikan array nama dari akar sampai komponen pertama yang cocok, seperti memilih komponen di tab Components. Kalau gak ada yang cocok, kembalikan array kosong [].analyzeChangeDetection(cycles): cycles adalah array { componentName, checked, duration, inputChanged }. Kembalikan object { unnecessaryChecks, avgDuration, recommendation }:
unnecessaryChecks: jumlah cycle dengan checked === true tapi inputChanged === false.avgDuration: rata-rata duration semua cycle, dibulatkan dengan Math.round.recommendation: "OnPush" kalau unnecessaryChecks lebih dari separuh jumlah cycle, selain itu "OK".pickDevTools(framework): untuk "react", "vue", dan "angular", kembalikan nama extension resminya persis: React Developer Tools, Vue.js devtools, Angular DevTools.Data dan console.log di kode awal biarkan saja. Yang dinilai tujuh baris console-nya, berurutan:
App>Main>ProductList
3
3
OnPush
Vue.js devtools
Angular DevTools
React Developer Tools
Ada juga cek tambahan: analyzeChangeDetection dengan satu cycle yang input-nya berubah harus memberi recommendation "OK", dan findComponentByState yang gak menemukan apa-apa harus mengembalikan array dengan panjang 0.
