WWWID-PWA

Tantangan Web Developer Untuk Membuat Aplikasi Web Bisa Digunakan Kurang Dari 5 Detik

Yohan Totting

2018-02-13 07:45:58

Ada banyak jalan menuju Roma, sama dengan ada banyak cara membuat sebuah aplikasi web dan banyak teknik untuk mengoptimalkan sebuah aplikasi web. Cara membuat saat ini sudah cukup banyak tutorialnya, tapi bagaimana dengan teknik mengoptimalkannya?

Tantangan ini ingin mengajak teman-teman web developer Indonesia untuk mencoba membuat sebuah aplikasi RSS reader sederhana dengan goal membuat time to interactive dibawah 5 detik di kondisi jaringan 3G yang lambat dan mobile phone dengan spesifikasi menengah rata-rata.

Sebagai gambaran teknis untuk bisa mencapai 5 detik sendiri sebenarnya di kondisi jaringan 3G yang lambat (diasumsikan di 400kbps) maka kita sebenarnya cuma punya waktu sekitar 3,4 detik. Karena sekitar 1,6 detik itu sudah terpakai untuk waktu pemrosesan request lewat jaringan seperti DNS query, TCP handshake, atau HTTPS handshake. Dan dengan perhitungan 3,4 detik dengan kondisi jaringan 400ms round trip atau kecepatan 400kbps, maka kita hanya punya budget ukuran file aplikasi kita sekitar 170KB. Kalau tidak terkompresi dengan GZIP mungkin sekitar 800KB.

Time to interactive budget

Nah terinpirasi dari tantangan yang sebelumnya sudah ada di luar seperti di Hackernews PWA ini. Maka kita ingin mencoba membuat tantangan untuk teman-teman web developer Indonesia. Bagaimana bisa membuat sebuah aplikasi web sederhana yang bisa digunakan dalam waktu 5 detik. Nah aturan tantangannya kurang lebih sebagai berikut:

  1. Membuat sebuah aplikasi content reader dengan menggunakan feed publication WWWID ini yang sudah diubah menjadi JSON sehingga bisa dikonsumsi langsung. Silakan menggunakan URL berikut untuk mengakses feed JSON.
    https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2Fwwwid
  2. Bebas menggunakan library atau framework apapun selama bisa diakses melalui browser modern seperti Chrome, Firefox, Safari, Opera, dll.
  3. Aplikasi content reader ini cukup memiliki 2 halaman, yaitu halaman home dengan daftar latest feed di mana pada daftar konten cukup memunculkan :
    * judul artikel
    * nama penulis
    * thumbnail artikel
    * satu paragraf artikel.
    * tanggal artikel di-publish
    Dan halaman konten detail di mana sama seperti daftar konten namun memunculkan konten artikel keseluruhan, bukan hanya 1 paragraf.
  4. Feed bisa di-filter menggunakan kategori, di mana kategori ini bisa diambil dari field categories di tiap konten. Feed filter harus punya unique URL sehingga kita bisa mengakses konten terkait kategori tersebut langsung via URL misalnya https://my-reader.app/cat/pwa yang otomatis menampilkan konten PWA saja.
  5. Bisa mencapai skor Lighthouse untuk PWA dan Performance diatas 90.
  6. Melakukan testing menggunakan Webpagetest mode yang easy dan mengaktifkan Lighthouse audit pada saat melakukan test.
  7. Menuliskan bagaimana aplikasi web tersebut dikembangkan dan teknik optimasi yang digunakan seperti apa untuk mencapai skor Lighthouse tersebut.
  8. Bergabung di group Telegram untuk tanya jawab dan update lebih lanjut. Bergabung di https://t.me/wwwid_pwa
  9. Mendaftarkan aplikasi web tersebut di form submission dengan mencantumkan URL web app, Github repo URL, dan Medium article URL.
  10. Update progress di Twitter dengan hashtag #WWWIDChallenge
  11. Menambahkan topic wwwid dan wwwidchallenge di Github repo agar muncul di daftar repo para peserta tantangan.

Tantangan ini hanya sekedar untuk pembelajaran, bukan untuk berkompetisi. Dengan demikian kita bisa melihat bagaimana di setiap framework/library mengoptimasi sebuah aplikasi agar dapat ditampilkan dalam 5 detik. Update akan dilakukan secara bertahap di artikel ini.

Update

  1. Menambahkan filter kategori di point 4 dan update progress di Twitter via hashtag di point 10 — 12 Feb 2018
  2. Mengganti Lighthouse audit menggunakan Webpagetest di-point 6 — 15 Feb 2018
  3. Menambahkan topic di Github repo untuk membuat list di halaman Github topic di-point 11. — 15 Feb 2018
  4. Menambahkan URL form submission dan menghilangkan score pada submission. Score akan dihitung automatis dengan tes Lighthouse yang tersentralisasi. — 6 Mar 2018

Tantangan Web Developer Untuk Membuat Aplikasi Web Bisa Digunakan Kurang Dari 5 Detik was originally published in WWWID on Medium, where people are continuing the conversation by highlighting and responding to this story.