Keahlian yang Harus Dikuasai untuk Menjadi Frontend Developer

Pernahkah Kamu memperhatikan website semisal Facebook dan bagaimana ia dapat menampilkan data status dan komentar dari teman-temanmu? Atau semisal website Pinterest yang layoutnya dapat tersusun dan tertata rapi meskipun setiap kontennya memiliki ukuran tinggi yang berbeda-beda? Pernahkah Kamu memperhatikan hal semisal itu sambil berkata "kok bisa begitu ya?" atau "kalo aku bisa bikin kayak gitu keren juga" ? Nah, semua hal tersebut dapat dijelaskan dalam satu istilah frontend development.

Seorang frontend developer menggunakan HTML, CSS dan JavaScript untuk menulis kode website dalam mengimlementasikan desain web yang sebelumnya sudah dibuat oleh web desainer. Bila kita mengamati setiap lowongan pekerjaan terkait frontend development, HTML, CSS dan JavaScript hampir selalu menjadi keahlian wajib bagi calon pelamar. Pada artikel ini, kita akan bahas persyaratan atau kemampuan apa saja yang umumnya dibutuhkan sebagai seorang frontend developer. Kamu dapat memulai mempelajari keahlian-keahlian berikut sesuai urutan penulisan.

HTML dan CSS

HTML dan CSS adalah materi sangat dasar yang harus dikuasai oleh seorang frontend developer. Tidak bisa tidak. Dan kabar baiknya, kita dapat menguasai HTML dan CSS relatif singkat, dalam hitungan minggu saja. Kamu dapat menemukan banyak sekali konten belajar HTML dan CSS di internet, seperti tutorial intensif yang disajikan oleh w3schools.com dan sitepoint.com maupun tutorial interaktif seperti yang disediakan oleh CodePolitan dan Codecademy.

Pemahaman yang mendalam terkait HTML dan CSS akan sangat berguna saat membuat halaman web dengan spesifikasi seperti apapun. Seringkali kita akan menemukan desain web yang dibuat oleh web desainer begitu kompleks dengan bentuk objek yang beragam. Dan pemahaman yang mendalam akan Kamu dapatkan seiring jumlah halaman web yang sudah Kamu buat.

Terakhir, bilapun Kamu hanya menguasai HTML dan CSS, paling tidak Kamu sudah dapat membuat sebuah website dengan konten statis.

JavaScript

JavaScript hampir tidak dapat terpisahkan dengan kawannya HTML dan CSS. JavaScript-lah yang membuat sebuah halaman web menjadi lebih dinamis. Berbeda dengan HTML yang berupa markup atau struktur halaman dan CSS yang berfungsi sebagai pengatur gaya pada halaman web, JavaScript adalah bahasa pemrograman yang berguna untuk mengatur logika dan menambahkan lebih banyak lagi fungsionalitas pada sebuah halaman web.

Hal sederhana yang sering kita jumpai seperti popup konfirmasi saat hendak menghapus suatu data pada sebuah web, hingga membuat aplikasi dan permainan berbasis web, semuanya ditangani oleh JavaScript.

Dan ternyata kini JavaScript adalah bahasa pemrograman yang paling populer di dunia. Sehingga memiliki keahlian dalam bahasa pemrograman JavaScript akan sangat menunjang karirmu di dunia IT.

jQuery

jQuery adalah library JavaScript, sekumpulan plugin dan ekstensi yang membuat proses pengembangan dengan JavaScript lebih mudah dan cepat. Daripada menulis kode JavaScript dari nol, kita dapat memanfaatkan jQuery untuk membuat suatu fitur menggunakan plugin yang sudah tersedia dengan sintaks yang lebih ringkas. Kita dapat membuat fungsi seperti countdown timers, form autocomplete, load data asynchronous, mengatur ulang layout halaman, hingga membuat dan menghapus elemen HTML.

JavaScript Framework

JS framework (seperti AngularJS, Backbone, Ember, ReactJS) menawarkan struktur kerja JavaScript yang siap pakai. JS framework memangkas proses produksi dengan menyediakan sejumlah aturan struktur penulisan kode. Kita dapat mengkombinasikan pengunaan JS framework dengan library JavaScript seperti jQuery. Setiap JS framework menawarkan metode dan struktur penulisan kode yang beragam. Kamu dapat membandingkan berbagai framework dan juga library JavaScript yang bertebaran di dunia maya sebelum memilih hendak menggunakan framework mana. Website seperti todomvc.com dapat menjadi acuan referensi cepat terkait framework dan library JavaScript. Tapi paling tidak, beberapa yang disebutkan di bagian awal paragraf ini adalah framework yang umumnya dicari di job listing.

Frontend Framework

Frontend framework seperti Bootstrap dan Foundation akan sangat membantu mempercepat proses produksi sebuah halaman web. Alih-alih membuat CSS dari nol untuk menyusun tampilan, kita dapat memanfaatkan tampilan bawaan framework baru kemudian memodofikasi beberapa bagian agar sesuai dengan desain yang diinginkan. Selain itu frontend framework juga umumnya dilengkapi dengan library JavaScript yang umum digunakan pada sebuah proyek web. Selain Bootstrap dan Foundation, Kamu dapat temukan banyak sekali CSS framework lainnya sebagai alternatif style dasar sesuai ukuran proyek.

CSS Preprocessor

Preprocessor adalah elemen lain di dunia frontend development yang dapat mempercepat proses produksi. CSS preprocessor menawarkan fungsi tambahan saat membangun style sehingga file CSS kita lebih rapi dan mudah dikembangkan. Kita cukup mengikuti sedikit aturan penulisan CSS seperti yang dianjurkan preprocessor dan sisanya seperti format penulisan baku CSS dan kompatibilitas antarbrowser sudah ditangani oleh preprocessor. Beberapa CSS preprocessor yang populer diantaranya adalah SASS, LESS, dan SCSS. Dan umumnya bila kita menggunakan frontend framework, file preprocessor sudah disertakan didalamnya sehingga kita dapat mengembangkan tampilan langsung melalui file preprocessornya.

RESTful Service dan API

REST singkatan dari Representational State Transfer. Singkatnya, REST adalah arsitektur ringkas yang menyederhanakan komunikasi jaringan web. RESTful service adalah layanan web yang mengikuti arsitektur REST. RESTful API adalah bahasa yang dapat dimengerti oleh kedua sisi jaringan untuk saling berkomunikasi dan bertukar data.

RESTful service akan dijumpai seorang frontend developer ketika membuat aplikasi sisi klien dengan akses data yang sudah terdefinisi. RESTful service sendiri biasanya dikembangkan oleh backend developer dan frontend developer cukup menggunakannya untuk menampilkan dan mengirim data ke server data. Dengan demikian frontend developer tidak perlu berurusan langsung dengan administrasi database.

Responsive dan Mobile Design

Perkembangan industri mobile kian marak berkembang. Porsi akses internet dunia kini sebagiannya datang dari perangkat mobile. Oleh karena itu halaman web yang kita buat pun harus mendukung berbagai ukuran layar perangkat. Di CSS kita akan temukan kata kunci media query untuk mengatur CSS mana yang akan digunakan sesuai dengan ukuran layar. Dengan demikian kita dapat mengatur elemen mana harus ditampilkan seperti apa di masing-masing ukuran perangkat yang umum. Ini sangat diperlukan agar pengalaman pengguna dapat tetap optimal dari manapun dia mengakses.

Cross-browser Development

Browser terkini sudah mampu menampilkan website dengan baik dan konsisten. Namun kadangkala antara satu browser dengan browser yang lain ada sedikit perbedaan dalam menampilkan suatu style. Di sisi lain kita tidak dapat membatasi pengguna aplikasi kita untuk hanya menggunakan satu jenis browser saja. Melainkan kita harus dapat memastikan aplikasi yang kita buat dapat tampil dengan sempurna bila dibuka dari browser apapun, sekalipun kita harus menambahkan beberapa baris CSS tambahan untuk mendukung kompatibilitas browser tertentu.

Testing dan Debugging

Satu keniscayaan dalam proses pengembangan sebuah aplikasi: kesalahan/error pasti terjadi. Namun bayangkan bila aplikasi yang kita buat sudah semakin besar, dan kita mesti mengecek ulang semua bagian aplikasi setiap kali kita menambahkan fitur baru hanya untuk memastikan fitur terdahulu tidak terganggu oleh datangnya fitur baru. Oleh karena itu terbiasa dengan proses testing dan debugging adalah sangat vital, tidak hanya bagi backend programmer, namun juga frontend programmer. Terlebih bila kita sudah menggunakan pemrograman JavaScript, library atau framework cukup dalam dan kompleks, testing dan debugging mesti ada di bagian pondasi kode.

Testing adalah proses pengecekan otomatis setiap unit atau blok kode untuk memastikan apakah kode yang kita tulis selalu menghasilkan output yang diharapkan. Debugging sederhananya adalah menampilkan pesan error apa yang muncul setiap kali tes dijalankan, agar kita tahu bagian mana yang harus diperbaiki. Testing adalah pekerjaan yang memang menguras tenaga, waktu dan fokus yang cukup besar di awal, namun akan sangat terasa manfaatnya ketika basis kode kita sudah cukup besar yang akan sulit bila harus dites secara manual.

Version Control System (VCS)

Version control system (VCS) mencatat setiap perubahan kode kita sepanjang kita membuat aplikasi. VCS juga memudahkan kita untuk kembali ke kondisi kode sebelumnya bilamana kode yang kita lanjutkan tulis error. Daripada kita menyelisik bagian demi bagian untuk menemukan error, kita dapat lebih mudah kembali ke state kode sebelumnya baru kemudian menulis kembali.

VCS yang umum digunakan diantaranya Git, SVN, dan Mercurial. Git adalah satu yang yang paling populer. Bila Kamu dapat menggunakan Git, itu akan sangat membantu terutama ketika mengembangkan aplikasi di dalam sebuah tim. Umumnya VCS selalu menjadi persyaratan wajib di banyak job listing.

Apa Selanjutnya?

Mungkin diantara Kamu ada yang sudah akrab dengan beberapa keahlian di atas, atau bahkan ada yang sudah menguasai semuanya. Adapun bagi Kamu yang baru mau belajar sebagai frontend developer, Kamu dapat mempelajari sendiri dari sumber belajar yang ada di internet atau mengikuti pelatihan penuh seperti HACKTIV8 Coding Bootcamp. Bootcamp ini adalah program pelatihan intensif selama 3 bulan penuh dari Senin sampai Jumat, selama 11 jam setiap harinya. Disana bahkan Kamu tidak hanya belajar frontend development, tapi lebih lengkap lagi fullstack development. Dan bagi calon murid yang mendaftarkan diri untuk batch 10 dan 11, murid cukup melakukan pembayaran sebensar 50% saja, dan sisanya dapat dibayarkan oleh murid setelah murid lulus dan mendapatkan pekerjaan

Selain itu Kamu juga dapat mengikuti program singkat kelas frontend developer yang diselenggarakan oleh HACKTIV8. Kelas tersebut diselenggarakan secara part-time (tidak seperti program intensif HACKTIV8 lainnya), sehingga Kamu dapat meluangkan waktu di sela-sela aktivitas rutinmu seperti sekolah, kulaih atau bekerja.