Cara menjadi Frontend Developer

Bagian satu:

Yes, I open this Google job post via Mozilla Firefox. Browser diversity starts with us.

Sebenarnya ingin menghindari sebisa mungkin kata “Bagian”, karena memang tidak ada niatan untuk membuatnya secara sistematis. Anggap saja yang tadi sebagai clickbait ya, please, atau silahkan bisa ganti kata “Bagian satu” menjadi “Postingan pertama”.

What the industry needs from me?

Diawal saya menyisipkan tangkapan layar dari halaman lowongan pekerjaan di Google. Mengapa Google? Think big aja ya, siapa tau kalian bisa kerja di Google dan bilang ke mertuamu kalau kamu kerja di situs yang setiap hari beliau buka.

Oke, gak mungkin suatu perusahaan iseng mau nge-hire lu. Pasti mereka membutuhkan orang-orang yang sekiranya memiliki keahlian yang sudah ditulis di Job Requirements, dan jika orangnya itu adalah kamu, maka kemungkinan kamu bisa diterima ditempat itu.

Pede aja dulu bos.

Spoiler: Oya ini bakal tulisan yang panjang sepertinya. No TL;DR, loser.

Nah, kita lihat minimal kualifikasinya terlebih dahulu dan yang akan kita fokuskan adalah:

  • Experience in JavaScript, …blablabla

Dan kualifikasi yang disenangi oleh mereka adalah (yang akan kita fokuskan terlebih dahulu):

  • Experience with HTML5 and CSS3 web standards

Nah kenapa gue selalu bawa-bawa “fokuskan”, karena ya itu. Mau gue buat bagian-bagian disini. Hadeeh langkah-langkah deh, intinya tidak ada sistematis disini. Karena setiap orang pasti memiliki pengetahuan yang berbeda-beda, kan?

Oke untuk memenuhi kualifikasi tersebut, fokus pertama yang akan kita pelajari adalah berpengalaman dengan JavaScript. Ya, lo harus tau JavaScript itu apa, hate-love relationshipnya, sampai ke lu ga tau javascript siih moment nya.

Karena bila langsung belajar “JavaScript” terlalu abstrak, dan seharusnya lebih dianjurkan belajar dari sumber yang terpercaya dan valid (from the one of browser maker. Nanti gue share linknya dibawah), jadi disini kita akan langsung praktik membuat sebuah aplikasi sederhana yang mainstream.

Aplikasi apa yang kita buat?

Todo App. Meskipun masih mainstream, tapi gue rasa cocok untuk pemula seperti kita. Apa alasan membuat Todo App ini?

Motivasi

Budi (maafkan aku untuk semua makhluk bernama Budi di dunia ini) adalah seorang yang pelupa. Dan juga sedikit sulit dalam mengatur waktu. Dia merasa seperti orang sibuk setiap hari, entah karena banyak kegiatan atau karena kurang pintar dalam mengatur kegiatan.

Budi tersadar akan hal itu dan ingin memprioritaskan kegiatan apa saja yang harus dia lakukan pada hari itu. Dia bisa saja menuliskan daftar kegiatan yang harus dia lakukan disebuah kertas/buku, namun membawa buku/kertas dan pulpen terlihat sedikit ribet dibanding hanya dengan membawa handphone, karena bisa diasumsikan kita setiap hari membawa handphone kemana-mana.

Maka dari itu, kita akan membuat aplikasi Todo App tersebut untuk Budi, yang mana Budi tersebut adalah anda. Yes, I’m talking with you, the reader!

Spesifikasi

Segala sesuatu yang dibuat pasti memiliki karakteristik yang sudah dirancang sebelum dibuat. Hanya orang iseng yang membuat sesuatu tanpa ada spesifikasi dari apa yang akan dia buat tersebut.

Dikonteks ini, kita akan membuat sebuah aplikasi yang bisa:

  • Membuat daftar baru aktifitas yang akan kita lakukan
  • Membuat daftar tersebut bertanda “Selesai”
  • Menghapus daftar tersebut bila ingin.
  • Mengubah daftar yang ada
  • Membuat daftar tersebut yang sebelumnya bertanda “Selesai” menjadi normal lagi (Halo “Bismillah ngasih judul dan di acc”)

Kita tidak akan banyak membuat spesifikasi terlebih dahulu untuk sekarang, mungkin seiring berjalannya waktu akan kita tambahkan bila dibutuhkan. Sekarang mari persiapkan alat-alat yang akan kita gunakan untuk membuat itu (seperti arsitek yang sedang mempersiapkan pensil dan kertas untuk menulis, atau mamang gojek yang men-swipe statusnya menjadi “Sedang menjemputmu” untuk siap mengantarmu. No affiliated with gojek, but my gopay is here).

Alat-alat

  • HTML untuk membuat tampilan (fikirkan tentang bata, keramik dan genteng ketika ingin membuat rumah)
  • CSS untuk mendekorasi tampilan (fikirkan tentang cat, wallpaper dan pot untuk mempercantik ruangan)
  • JavaScript untuk membuatnya interaktif (fikirkan tentang bagaimana cara membuka jendela secara horizontal/vertikal)

Tidak ada framework atau library. Murni. Demi menghindari berurusan dengan abstraksi diawal, sehingga harus berurusan dengan detail langsung. Dan mengetahui apa yang terjadi dan akan terjadi dari kode yang kita tulis.

Mulai

Karena kita membuat aplikasi web, maka kita membutuhkan browser untuk menjalankan aplikasi kita tersebut. Lalu kita membutuhkan Code Editor untuk menuliskan kode-kode kita tersebut. Rekomendasiku VSCode, silahkan unduh, gratis.

Berdasarkan spesifikasi yang sudah kita buat, kita hanya membutuhkan satu halaman untuk aplikasi kita. Silahkan buat file bernama index.html , penggunaan nama index untuk memberitahu browser bahwa file tersebut adalah entry point dari aplikasi kita yang akan diakses oleh si Budi (misal: https://my-cool-todo.app).

Diasumsikan kalian sudah mengenal tentang HTML, dan tau element apa yang akan kita gunakan. Disini kita membutuhkan 3 elemen inti:

  • Heading untuk membuat judul aplikasi kita
  • Input text untuk menulis aktifitas yang akan dilakukan
  • Input checkbox untuk menandakan apakah aktifitas tersebut “Selesai” atau tidak (dan untuk mengubah aktifitas yang ada juga)

Mari kita buat file HTML nya:

Hasilnya adalah seperti ini:

Meskipun sudah terlihat seperti aplikasi akhir kita, namun masih terlihat kurang enak dan masih belum ada fungsionalitas tambah aktifitas. Karena daftar tersebut masih statis.

Sekarang mari kita buat “dekorasi” sederhananya terlebih dahulu, agar terlihat lebih enak dipandang.

Silahkan buat file bernama style.css , dan tulis kode dibawah:

Penulisan styling diatas sangat tidak direkomendasikan ketika kita sudah terbiasa dengan Web Development, tapi untuk sekarang kita tidak akan fokus kesitu terlebih dahulu.

Hasil kode diatas adalah seperti ini:

Lumayan lah ya, clean. Simple. Yang penting kelar.

Setelah kosmetik sudah diterapkan, sekarang waktunya kita membuatnya interaktif. Yakni, menambahkan kode JavaScript ke aplikasi kita. Kode JavaScript disini akan melakukan beberapa proses, seperti:

  • Tambahkan aktifitas baru ke daftar ketika Budi menekan tombol Enter
  • Beri gaya garis bila Budi telah menandakan aktifitas tersebut selesai
  • Hilangkan gaya garis tersebut bila Budi tidak jadi menandakan aktifitas tersebut selesai
  • Buat tombol baru untuk hapus atau edit ketika aktivitas telah ditambahan ke daftar

Kita ubah terlebih dahulu kode file index.html kita menjadi seperti ini:

Dan sekarang mari kita buat fungsi-fungsinya.

Tampilkan daftar aktifitas

Sebelum bisa menambah aktifitas, kita harus bisa menampilkan daftar aktifitas tersebut terlebih dahulu secara dinamis. Kita membutuhkan satu variable ber-tipe array yang menampung aktifitas-aktifitas tersebut, lalu buat perulangan sebanyak jumlah data tersebut, dan tampilkan ke browser.

Berikut kodenya. Penjelasannya ada dikomentar. Buat file app.js , dan tulis kode dibawah:

Hasilnya masih sama dengan screenshot terakhir diatas.

Tambah aktifitas baru

Sekarang kita akan menambahkan fitur “Tambah Aktifitas Baru”, yang mana membutuhkan “Listener” jadi ketika si Input ini ke-trigger “Enter”, maka tambahkan nilai yang ada di input tersebut ke daftar aktifitas paling atas.

Ini adalah kode terbaru kita:

Silahkan coba.

Gagal?

Tapi kan data nilai dari activities tersebut sudah bertambah!

Ya, karena data baru ditambah sedangkan instruksi untuk me-render element-element tersebut sudah dieksekusi. Ada 2 cara sebenarnya untuk menyelesaikan masalah ini: Pertama dengan membuat observer yang pastinya tidak akan kita pilih, yang kedua dengan membungkus instruksi untuk merender element tersebut. Sehingga, ketika ada data baru masuk, maka fungsi tersebut kita panggil lagi dan tampilan akan berubah.

Berikut kodenya:

Silahkan ketik aktifitas baru dan klik enter! Wow data nya berubah!

Sayangnya, ini masih ada bug.

Data yang baru ditampilkan, namun data yang sebelumnya ngikut juga! Mengapa ini terjadi? Tidak ada yang salah dengan kode yang kita tulis, melainkan logika yang pilih!

Akar permasahalannya ada dilogika dalam “merender” daftar aktifitas-aktifitas kita. Logika dari cara render kita diatas adalah:

Lakukan interasi sebanyak jumlah dari nilai yang ada di array activities , lalu render semua nilai tersebut dan dibungkus didalam <li><input> . Karena itu yang kita inginkan, kan? Masa harus nunggu Budi “meng-enter” terlebih dahulu (berarti “trigger” render data-data sebelumnya hanya ketika ada aktifitas baru ditambahkan)?

Mari kita ubah logikanya. Kodenya menjadi seperti ini:

Logika nya menjadi: Lakukan interasi dan render hanya ketika pertama kali kode ter-eksekusi. Bila ada data aktifitas baru, sisipkan element baru tersebut ke element yang sudah didefinisikan

Kita buat instruksi untuk membuat element “instruksi baru” tersebut dibungkus ke function sehingga kita tidak perlu menulis kode yang yang sama berulang-ulang.

Silahkan coba, dan yeaay berhasil!

Tapi, ada satu masalah lagi.

Meskipun nilai dari aktifitas baru tersembut disimpan di urutan awal array tersebut, namun ketika ditampilkan dibrowser berada diakhir. Mengapa? Karena kode ini:

return activitiesContainer.appendChild(list)

Kita menambahkan element barunya diakhir dari daftar element yang ada di container #activities . Meskipun bisa kita solve dengan mudah dengan cara jangan memberikan nilai inisial di konstanta activities , tapi itu tidak sesuai dengan spesifikasi yang sudah kita buat.

Karena ini berdampak terhadap behavior dari aplikasi kita. Maka kita perlu buat “kondisi” kapan element baru tersebut harus disisipkan diawal atau diakhir. Let’s code it!

Maka sekarang aplikasi sesuai dengan keinginan kita!

Sekarang mari kita sedikit rapihkan agar kode tersebut enak dibaca dan efisien

Atau versi yang tidak ada komentarnya:

Lumayan. Hasilnya bisa dicek disini

Your turn

Lihat kan ketika kita menambahkan “aktifitas” baru, nilai di input tersebut masih ada? Ini kurang bagus untuk pengalaman pengguna. Karena secara intuisi, kita berharap bahwa bila data sudah berhasil dimasukkan, maka seharusnya nilai di input tersebut menghilang.

Dan juga, ketika user tidak mengetik apapun, maka seharusnya data tersebut tidak ditambahkan ke array, dan tidak ditampilkan dibrowser.

Itu tugas anda, silahkan latihan:

  • Hilangkan nilai yang ada di input ketika user menekan enter
  • Jangan tambahkan data tersebut ke array bila nilai dari input tersebut kosong
  • Dan pastinya, jangan dirender.

Untuk sumber kode lengkap dari contoh diatas ada di CodeSandbox. Silahkan fork atau clone dimesin kalian. Untuk spesifikasi lain seperti:

  • Beri gaya garis bila Budi telah menandakan aktifitas tersebut selesai
  • Hilangkan gaya garis tersebut bila Budi tidak jadi menandakan aktifitas tersebut selesai
  • Buat tombol baru untuk hapus atau edit ketika aktivitas telah ditambahan ke daftar

Akan kita bahas dilain postingan. Jangan sungkan untuk bertanya atau mengirim hasil kalian ke saya ya! You can always reach me on Twitter or Telegram.

Hasil Akhir