,
32 tweets,
8 min read
Read on Twitter
Di antara sekian web e-commerce di Indonesia yang saya kunjungi dan pakai utk berbelanja, baru Tokopedia yang memiliki pengalaman pengguna yang lebih baik dari segi mobile web dan desktop web.
Saya sering belanja menggunakan mobile PWA Tokopedia dibandingkan aplikasinya. Hanya saja ketika ada promo, saya tidak bisa menggunakan promo tersebut di PWA mereka dan mau tidak mau saya harus menginstal aplikasinya.
Untung HP saya memiliki penyimpanan data yang lebih buat instal, coba kalau ngga mana bisa saya pakai promo mereka? Kita ngga bisa berpikir semua orang punya HP yg memiliki penyimpanan data yang lebih.
Kemudian, baik dari sisi aplikasi dan web saat ini tidak menyediakan sebuah notifikasi yang menyediakan alur pengiriman sudah sampai mana dan bukan barang sudah sampai di tujuan.
Terlepas dari kendala-kendala di atas, kemarin Mas Dendi (Engineering Manager) dan Mas Irfan (Principal Engineer) dari Tokopedia menjelaskan bagaimana Tokopedia bisa membuat web yang stabil dan kokoh. Simak utas di bawah.
Gambar pertama menjelaskan bahwa e-commerce sedang tumbuh dan berkembang di platform web. Sekitar 35 persen pengguna menghabiskan waktu mereka di toko retail online di web (mobile atau desktop) dibandingkan aplikasi. Kemudian 51 persen pengguna mengunduh 0 aplikasi setiap bulan. 
Gambar kedua memaparkan persentase rata-rata penggunaan platform di Tokopedia berdasarkan jam. Kenaikan pada platform mobile terjadi di antara jam 7 pagi sampai 10 pagi dan di antara jam 8 malam sampai 12 malam.
Kenaikan pada platform tablet terjadi di antara jam 8 malam sampai 12 malam. Kenaikan pada platform desktop terjadi di antara jam 10 pagi sampai jam 8 malam.
Gambar ketiga menunjukkan bahwa Tokopedia mencintai web dengan alasan gesekan distribusi yang rendah, mudah ditemukan, menggunakan tautan untuk terhubung satu sama lain,
kemampuan untuk di bookmark, selalu baru baik dari segi tampilan dan konten, dapat diakses secara universal dan menghemat data yang sangat besar.
Gambar keempat menunjukkan jumlah software engineer yang terlibat saat membuat Progressive Web Apps di Tokopedia. Tahun 2016 sebanyak 2 orang, 2017 sebanyak 9 orang, 2018 sebanyak 14 orang dan 2019 lebih dari 55 orang.
Gambar kelima menunjukkan teknologi yang digunakan pada web Tokopedia dari sisi front-end: React, AMP, Graphql, Svelte, Web Assembly, Jest, TypeScript, Webpack, dan lain-lain yang mana ada yang saya ngga tahu karena logonya.
Gambar keenam menunjukkan untuk urusan performa web Tokopedia menekankan pada code splitting, defer third-party selain lazy loading, responsive images, images CDNs, remove costly libraries, prefetch, preconnect dan preload.
Gambar ketujuh menunjukkan saat kunjungan pertama ke mobile web Tokopedia maka akan menggunakan Svelte dan kunjungan selanjutnya menggunakan React yang dibantu oleh service worker dibalik layar.
Gambar kedelapan menunjukkan hasilnya ukuran mobile web Tokopedia saat halaman pertama dimuat menjadi sekitar 37kb yg sebelumnya sekitar 320kb.
Tokopedia berencana akan meluncurkan PWA desktop dalam waktu dekat.
Walau semua itu keren, Tokopedia juga memiliki tantangan di internal mereka dari segi organisasi, segi teknis dan pengukuran. Di bagian berikutnya, saya cuma bisa menjelaskan hal" yang saya tahu saja.
Urusan performa bukan cuma kerjaan dari tim teknis tetapi tim bisnis, desain dan marketing. Ini yang ditekankan oleh Tokopedia saat mengembangkan produk mereka.
Berikutnya, Tokopedia menjelaskan bagaimana mereka melakukan scaling terhadap produk mereka mulai dari basis kode, pemanggilan API dan rendering, ketergantungan terhadap library, dan performa.
Dari segi scaling basis kode Tokopedia menggunakan struktur monorepo. Linter, Type Checker, Unit test, E2E test, dan code review juga masuk dalam hitungan. Lalu design system utk mempertahankan konsistensi UI yang akan ditampilkan utk desktop dan mobile web.
Ada semua meme yang memaparkan bahwa semakin sedikit code reviewer mu bilang "WTF" di kode kamu maka kode kamu sudah dibilang baik dan siap di merge ke dalam branch sebuah fitur atau master.
Tokopedia juga mengandalkan GraphQL untuk urusan API dibandingkan REST. Singkatnya, bedanya REST dibandingkan GraphQL adalah kalau pakai GraphQL kamu bisa minta kolom data yang benar" kamu perlukan. Misalnya kalau misalnya mau minta nama product ya akan dikasih nama produk.
Untuk urusan rendering, Tokopedia membuat sendiri "engine" SSR mereka dari awal dibandingkan menggunakan NextJS. Seingat saya mereka membuat sendiri karena kebutuhan mereka yg beragam.
Kalau ngga salah disebutkan kalau koneksi internetnya ngadat maka akan diubah teknik rendering dari SSR ke Client Side Rendering.
Berikutnya hal yang menarik adalah mereka mengganti momentjs dengan dayjs, mengganti axios dengan fetch API yang sudah tertanam di browser.
Tentunya, ini akan menghemat COST OF JAVASCRIPT (FOR GOD'S SAKE!!!) apalagi karena Tokopedia juga menggunakan React yg mana basisnya juga JavaScript.
Dasar web performance ujung"nya pasti pertama adalah ukuran website. Kalau ukuran website kamu kegedean (MB-MBan) ya sama aja bohong. Kemudian ada critical path rendering, lazy loading, chunk splitting, defer, dan caching.
Satu lagi, Tokopedia buat monitoring tools yang rencananya akan seperti Lighthouse buatannya Chrome namanya Kratos.
Seingat saya, ketika kamu mengajukan pull request, Kratos akan mengecek apakah size JS yang dihasilkan lebih kecil dibandingkan yg sudah ada? Kalau iya maka proses kalau ngga maka kasih peringatan.
Tokopedia peduli tentang pengalaman pengguna terbaik. Performa bukan cuma prioritas utama tim teknis. Buat cepat, tetap cepat dan pertahankan tetap cepat. Software engineering adalah kerja kreatif tingkat tinggi.
Tidak ada "peluru perak" atau ramuan khusus. Jelajahi, bereksperimen dan berbagi.
Mereka masih punya banyak hal yang mesti dikerjakan. #KamiBaruMulai
