5 Strategi Jitu Untuk Menjadikan Website No. 1


Pengembangan web lebih rumit sekarang daripada beberapa tahun yang lalu. Alat desain web, fitur browser, kerangka kerja dan praktik terbaik berubah hampir setiap bulan dan selalu ada sesuatu untuk diperbarui. Dan dengan ini datanglah risiko. Bagaimana kita bisa yakin perubahan ini tidak akan memiliki efek samping yang tidak diinginkan?


Pengujian adalah semua tentang mengurangi risiko. Jika seorang pengguna mengalami kesulitan menggunakan situs, mereka cenderung untuk kembali dan lebih mungkin untuk melompat ke pesaing. Dengan memeriksa setiap keputusan yang dibuat saat mengembangkan situs, itu mengurangi kemungkinan bahwa pengguna akan memiliki pengalaman sub-par.


Jelas ada lebih banyak pengujian pengguna daripada hanya memastikan basis kode bebas dari kesalahan. Ada langkah-langkah untuk menguji jalan melalui proses desain yang dapat memastikan semua hal yang dibuat dipandu oleh kebutuhan pengguna yang sebenarnya.


01. Tulis banyak tes unit


Kode tidak terstruktur adalah prekursor untuk bug dan masalah lebih lanjut di jalan. Itu tidak hanya membuat sulit untuk dipahami dan tidak mungkin untuk ditingkatkan, itu juga membuat sulit untuk menguji. Dengan begitu banyak bagian yang saling mengandalkan satu sama lain, tes harus dijalankan pada semua kode sekaligus. Ini menyulitkan untuk melihat apa yang tidak berhasil ketika saatnya tiba.


Setiap bagian dari aplikasi harus dipecah menjadi perhatiannya sendiri. Sebagai contoh, form login dapat terdiri dari query database, otentikasi dan routing selain input dan tombol gaya. Masing-masing dari mereka adalah kandidat yang bagus untuk memiliki kelas, fungsi atau komponen sendiri.


Landasan dari basis kode yang solid adalah serangkaian tes unit yang bagus. Ini harus mencakup semua kode dan harus cepat dijalankan. Sebagian besar tes unit dan kerangka kerjanya memiliki struktur yang sama:


Blok menunjukkan bagian kode apa yang sedang diuji. Di dalamnya ada sejumlah tes yang mengatur skenario dan membandingkan hasil yang kami harapkan dengan hasil aktual. Jika tidak cocok, pengujian gagal dan kami dapat menyelidiki lebih lanjut.


Dengan membuat dan menjalankan pengujian unit saat kita mengubah file, kita dapat yakin bahwa tidak ada yang secara tidak sengaja merusak fungsi yang diharapkan dari setiap bagian kode. Potongan-potongan ini juga bisa dimasukkan ke proyek lain jika diperlukan. Karena tes sudah ditulis untuk itu, kita dapat yakin bahwa unit khusus ini bebas dari masalah apa pun sejak awal.


Ada banyak alat untuk membantu menulis tes unit, seperti Jest, Jasmine, dan AVA. Kesesuaian terbaik akan bergantung pada kebutuhan setiap proyek, setiap kerangka kerja yang terlibat dan pada akhirnya preferensi pengembang.


02. Gunakan tes ganda bila diperlukan


Meskipun mungkin tampak kontra-produktif, itu bisa lebih mudah untuk menguji lebih dari yang dimaksudkan. Jika suatu fungsi bergantung pada pustaka eksternal, misalnya, semua bug yang berasal dari pustaka tersebut akan gagal dalam pengujian lain bahkan jika kode yang kita tulis adalah suara.


Solusi untuk ini adalah dengan menambahkan placeholder - atau 'test doubles' - untuk fungsi ini yang berperilaku dengan cara yang sama tetapi akan selalu memberi kita hasil yang diharapkan. Tiga tes utama ganda adalah 'mengolok-olok', 'bertopik' dan 'mata-mata'.


Sebuah tiruan adalah kelas atau objek yang hanya memegang tempat yang asli. Mereka memiliki antarmuka yang sama tetapi tidak akan menyediakan fungsionalitas praktis apa pun.


Sebuah rintisan mirip dengan tiruan tetapi akan merespon dengan perilaku yang sudah diprogram sebelumnya. Ini akan digunakan sesuai kebutuhan untuk mensimulasikan bagian-bagian tertentu dari aplikasi saat sedang diuji.


Seorang mata-mata lebih fokus pada bagaimana metode di antarmuka itu dipanggil. Ini sering digunakan untuk memeriksa ketika suatu fungsi sedang berjalan, berapa kali ia berlari dan juga argumen apa yang diberikan ketika itu terjadi. Ini agar kita tahu hal-hal yang benar sedang dikendalikan pada waktu yang tepat.


03. Periksa bagaimana komponen bekerja bersama


Setelah kode dipecah menjadi komponen yang terpisah, kita perlu menguji apakah mereka dapat bekerja bersama. Jika lapisan otentikasi tidak mengerti apa yang dikembalikan dari database, misalnya, tidak ada yang bisa masuk. Ini dikenal sebagai 'tes integrasi'. Mereka memeriksa bagaimana satu bagian dari aplikasi bekerja dengan yang lain. Sementara tes unit sengaja diisolasi dari satu sama lain, tes integrasi mendorong komunikasi antara kedua pihak ini.


Seperti halnya tes unit, tujuan dari tes integrasi adalah untuk memeriksa hasil akhir yang dimaksudkan. Di contoh proses masuk kami, itu mungkin merupakan pemeriksaan untuk melihat apakah stempel waktu "terakhir masuk" telah diperbarui dalam basis data.


Karena lebih banyak yang ditangani pada satu waktu, tes integrasi biasanya lebih lambat daripada tes unit. Dengan demikian harus ada lebih sedikit dari mereka dan mereka harus berjalan lebih jarang. Idealnya, ini hanya akan berjalan setelah fitur selesai untuk memastikan tidak ada yang berubah.


Suite yang sama digunakan untuk tes unit dapat digunakan untuk menulis tes integrasi, tetapi mereka harus dapat mengeksekusi secara terpisah untuk menjaga semuanya berjalan dengan cepat.


04. Ikuti jalur setiap pengguna


Tingkat atas pengujian teknis otomatis dikenal sebagai pengujian 'end-to-end' atau 'fungsional'. Seperti namanya, tingkat ini mencakup semua tindakan yang dapat dilakukan pengguna dari awal hingga selesai. Mereka mensimulasikan skenario nyata dan bagaimana seorang pengguna cenderung berinteraksi dengan produk jadi.


Struktur tes ini sering mencerminkan cerita pengguna yang dibuat sebagai bagian dari proses pengembangan. Untuk memperluas contoh dari sebelumnya, mungkin ada tes untuk memastikan pengguna dapat memasukkan nama pengguna dan kata sandi mereka di formulir masuk.


Karena mereka bergantung pada UI untuk dijalankan, mereka perlu diperbarui saat antarmuka berubah. Waktu muat yang lama juga dapat menyebabkan masalah. Jika tindakan apa pun tidak dapat diselesaikan dengan cukup cepat, tes akan gagal, yang akan menghasilkan positif palsu.


Tes-tes ini juga akan berjalan lambat. Kemacetan cenderung datang dari menjalankan browser, yang tidak secepat baris perintah tetapi diperlukan untuk meniru lingkungan yang tepat. Dengan demikian ini akan berjalan lebih jarang daripada tes integrasi - biasanya sebelum mendorong serangkaian perubahan ke dalam produksi.


Alat-alat seperti Selenium dan Puppeteer dapat membantu menulis tes end-to-end. Mereka memungkinkan browser dikontrol melalui kode untuk mengotomatiskan apa yang seharusnya menjadi proses manual berulang.


05. Atur anggaran kinerja

Pengembangan front-end modern sering kali melibatkan pembuatan bundel untuk setiap proyek dengan banyak aset berat. Tanpa berhati-hati, ini dapat berdampak merusak pada kinerja.

Webpack dilengkapi dengan cara untuk melacak masalah kinerja seperti bundel dan ukuran aset. Dengan mengutak-atik objek 'kinerja' di webpack.config.js, itu dapat memancarkan peringatan ketika file bertambah besar dan cara terbaik untuk mengatasinya. Ini bahkan dapat membuang kesalahan yang dapat menghentikan pembangunan berhasil untuk memastikan pengguna akhir tidak terpengaruh secara negatif.

Ini juga penting untuk menguji pada berbagai perangkat yang serupa dengan yang digunakan oleh pengunjung ke situs. Pendekatan seluler pertama untuk desain dan pengembangan memastikan pengguna pada perangkat kelas bawah tidak dibiarkan menunggu laman dirender.

WebPagetest memberikan gambaran umum yang komprehensif tentang kinerja situs web bersama petunjuk tentang cara meningkatkannya..

Subscribe to receive free email updates: