Pengalaman Menjadi Frontend Engineer Selama 4 Tahun
Hi, kali ini saya mau cerita sedikit soal pengalaman sebagai Frontend Engineer selama 4 tahun terakhir (dari tahun 2015). Jika saya ingat-ingat kembali, frontend hari ini dengan frontend saat saya pertama kali menggelutinya itu jaaauuuh sekali berbeda. Dulu HTML CSS dengan bumbu jQuery sedikit sudah cukup, sekarang 😱.
Sebenarnya saya belajar frontend pun secara terpaksa, sebelumnya saya justru lebih suka desain dari pada ngoding, sebagai bukti cek akun behance saya di sini. Sekarang sudah jarang update, kan dah fokus ngoding 🙈. Jadi dulu saya pernah ditawari project sama dosen, awalnya sih dari bahasanya dia bilang desain web. Setelah saya desainkan, saya pun menjelaskan konsep desainnya dengan yakin karena jelas desainku jauh lebih baik dari web existing-nya yang masih bergaya web birokrasi. Alhamdulillah ia pun sangat menyukainya dan saya pun ikut senang. Namun kesenangan itu hilang seketika setelah ia mulai menyentuh touchpad laptopku dan mulai mengklik bagian-bagian desain website yang sudah saya buat. Dosenku pun berkata,
“kok webnya tidak bisa diklik yah?”
Dalam hatiku 😱😱😱. Masalahnya, uang projectnya dikasih di depan 50% dan saya pun sudah menghabiskannya 🥶. Saya pun tidak ingin mengecewakan dosenku sehingga saya pun bergegas pulang setelah pertemuan tadi dan belajar dengan keras bagaimana mengimplementasi desain menjadi HTML CSS. Alhamdulillah setelah googling mencari tutorial, saya pun mendapatkan video tutorial gratis dari tutsplus yang berjudul 30 Days to Learn HTML & CSS. Saya pun menontonnya hingga selesai.
Setelah saya menyelesaikan video tutorial tersebut, saya pun mulai mengimplementasi desain tadi menjadi HTML CSS dengan panduan tutorial tersebut. Singkat cerita web pertamaku sekaligus project pertamaku selesai dalam waktu dua hari. Saya menamakannya “The Power of Kepepet”. Saya pun menikmati dua hari tersebut sehingga saya pun memutuskan untuk fokus di bidang Frontend Web Development.
HTML & CSS
HTML dan CSS adalah ilmu yang paling dasar ketika kita terjun ke dunia web. Ibaratnya HTML adalah tulangnya, CSS adalah kulitnya. HTML tidak boleh dianggap remeh loh, karena penggunaan tag HTML sangatlah berpengaruh dengan SEO. Sebagai contoh <h1> atau Heading 1, sebenarnya tidak boleh digunakan lebih dari satu kali dalam satu page dan bukan digunakan karena ukuran fontnya, karena fungsi utama heading 1 adalah menggambarkan apa isi halaman tersebut, kemudian contoh lainnya adalah attribute alt pada tag img, memperjelas nama gambar tersebut karena di google dominan user mencari dengan kata.
Soal CSS, menurut saya ini hal yang paling menarik saat mempelajari web pertama kali karena linear dengan keahlian saya sebelumnya yaitu mendesain. Dengan CSS, kita dapat membuat desain menjadi hidup. Namun sayang sekali tidak banyak frontend hari ini yang menguasai CSS 😞.
jQuery
Kita semua pasti taulah apa itu jQuery, library JS yang exist paling lama hingga hari ini. Bagaimana pun saya tetap respect dengan apa yang telah dilakukan jQuery, terutama dengan selector DOMnya yang khas. Yang baru menggeluti Frontend mana tau keseruan mengeksplore plugin-plugin menarik jQuery, mulai dari carousel dengan berbagai animasi unik hingga efek-efek air hujan pada web 😆.
Bootstrap
Framework css satu ini sangat banyak membantu saya menyelesaikan project. Saya tidak menggunakannya secara mentah-mentah seperti kebanyakan orang yang tidak paham css. Namun saya memodifikasinya dan menyesuaikannya dengan tema desain yang ada. Hal paling keren di bootstrap adalah grid-nya, dimana layouting sangatlah mudah. Tidak hanya itu, grid-nya juga mendukung responsive. Di bootstrap saya belajar banyak tentang bagaimana membuat class css yang reusable dan konsep layouting yang baik pada css.
SCSS
Bagi yang belum tau SCSS sederhananya bisa dilihat dari kode berikut ini:
Nah bedanya, di CSS kita harus menulis berulang kali parent element hingga child target sedangkan SCSS mempermudah penulisan tersebut dengan menulisnya dalam bentuk sub-element. Tidak hanya itu, SCSS juga membuat kita dapat menulis variable, if-then-else, loop, dsb . Yang belum pernah coba, monggo langsung ke web officialnya.
Bower
Nah bagi yang belum tau apa itu bower, sebenarnya sama dengan npm yaitu package manager. Sebelum NPM berkembang jauh seperti saat ini, dulu setiap package biasanya menyediakan dua pilihan install yaitu npm install atau bower install. Sekarang yah, jarang ada frontend yang pake bower lagi. Now, everything in node_modules 🙈.
Grunt / Gulp
Saya sudah mencoba keduanya dan saya lebih senang menggunakan gulp karena penulisannya lebih rapi. Bagi yang belum pernah coba, grunt/gulp adalah compiler dimana kita bisa membuat script atau command yang berisi perintah-perintah sesuai kebutuhan kita. Pertama kali mencoba grunt/gulp rasanya hebat sekali kita bisa membuat command untuk minify css atau js, bisa menggabungkan file-filenya menjadi satu, support sass/scss dan banyak hal-hal menarik lainnya.
Webpack
Nah yang tadi belum pernah ketemu grunt/gulp, saya yakin kalian taunya ini. Webpack hampir mirip dengan grunt dan gulp tadi, bedanya webpack lebih keren lagi. Fungsinya sangat jelas pada gambar berikut:
Sekarang webpack biasanya sudah included di boilerplate. Tapi itu justru membuat kita tidak tau cara konfigurasi webpack dari awal, saran saya coba buat satu project latihan menggunakan webpack supaya kita bisa lebih memahami apa saja yang bisa dilakukan webpack.
Angular v1
Framework javascript yang pertama kali saya coba adalah Angular. Menggunakan framework penting bagi yang sudah bekerja secara tim supaya ada standarisasi atau rule yang kita ikuti. Ketika kita menggunakan jQuery, kita tidak memiliki rule untuk struktur program secara standar sehingga ketika orang baru bergabung ke dalam tim, butuh waktu yang lama untuk memahami struktur folder dan kode-kode yang telah kita buat.
Angular buatan om google ini menggunakan konsep Single Page Aplication, dimana sebenarnya yang berubah ketika kita berpindah page hanyalah element di dalam container yang kita buat.
Contoh seperti kode HTML di atas ini ketika kita mengakses home, Angular akan memasukkan kode home ke dalam id root. Selanjutnya, ketika kita berpindah halaman maka seluruh kode HTML di dalam root itu di dikosongkan kembali dan digantikan dengan kode yang baru. Itulah sebabnya mengapa ketika kita mengakses web dengan konsep SPA terasa lebih cepat dan tidak men-trigger loading di title bar bawaan browser ketika berpindah halaman.
Saya berhenti menggunakan Angular karena sangat kecewa dengan update v2 yang begitu jauh dari konsep v1. Sehingga saya membutuhkan refactor besar-besaran terhadap aplikasi yang saya buat jika ingin upgrade ke v2. Saya pun memilih tidak menggunakannya lagi.
Vue
Setelah saya berhenti menggunakan Angular, saya pun mencoba vue dan ternyata sangat mudah. Konsepnya pun sangat mirip dengan Angular v1, cuman merubah attribute ng-* menjadi v-* 😆. Bukan cuma itu sebenarnya, banyak lagi fitur-fitur baru yang di-support oleh Vue. Tapi yah kesannya tidak jauh beda dengan Angular jadi saya mungkin tidak bisa terlalu banyak bercerita soal Vue. Next yah hehe
React
Nah tibalah kita pada framework javascript paling fenomenal beberapa tahun belakangan ini. Konsepnya jauh berbeda dengan Angular dan Vue, React memasukkan kode HTML di dalam JS 😱. Kok bisa? Belum lagi melihat dokumentasinya yang memang betul-betul tidak newbie friendly. Anehnya, kok banyak yang pake yah. Saya pun mulai mempelajarinya dengan bantuan teman kerja saya di kantor yaitu Muhammad Rusdi. Saya pun mulai mengerti dan wah… memang react sangat keren. Saya mulai mencoba membuat komponen-komponen kecil seperti button, input, dropdown dan rasanya sangat mudah setelah paham caranya. Saya malah merasa bisa membuat framework sendiri bersama tim di kantor saat itu.
Emotion.js
Emotion adalah salah satu library yang mendukung CSS in JS. Jadi sekarang dengan meng-combine react dan emotion, maka lengkaplah HTML dan CSS dalam JS. Emotion juga memiliki banyak pilihan gaya penulisan, bisa menggunakan gaya styled component, css props maupun css in object. Dengan emotion, styling component menjadi jauh lebih mudah.
Next.js
Pertama kali menggunakan React saya langsung menggunakan Next.js, dokumentasinya mudah dimengerti dan sangat interaktif. Konsep Next.js adalah SSR atau Server Side Rendering, dimana kode HTML yang telah dirender dapat dibaca oleh browser saat pertama kali page di load. Tujuannya adalah untuk support SEO, karena kelemahan web SPA adalah SEO karena tag HTML yang sulit terbaca. Sebenarnya ada banyak cara untuk men-support SEO dan cukup tricky, namun cukup sulit untuk pemula.
Hal yang perlu diperhatikan saat menggunakan Next.js adalah penggunaan kode-kode javascript yang run hanya di browser seperti window, localStorage, dll. pasti menimbulkan error karena Next.js run di sisi server. Sehingga kode-kode seperti window dan localStorage hanya berlaku saat componentDidMount. Terkadang juga package-package yang kita download error ketika kita panggil karena menggunakan syntax window. Di Next.js ada fitur yang namanya Dynamic Import, dimana kita dapat melakukan import pada saat yang kita butuhkan. Kita bisa melakukan import ketika masuk fase componentDidMount sehingga error tadi dapat teratasi.
Create React App
Boilerplate ini juga termasuk the most popular. Berbeda dengan Next.js, CRA menggunakan konsep Client Side Rendering (CSR) sehingga kita tidak akan mendapati error saat menjalankan syntax window dan localStorage. Namun yah kembali lagi semua punya kelebihan dan kekurangan, SEOnya jadi susah lagi di-handle hehe. Menurut saya kecepatan compile pada saat development di CRA jauh lebih cepat dari Next.js sehingga saya pribadi merasa sangat nyaman bekerja di CRA.
Typescript
Nah ini mungkin hal paling baru yang saya pelajari, belum sampai sebulan sebenarnya. Typescript ternyata sangat memudahkan kita saat development. Dengan memberikan static type kepada seluruh variable dalam kode kita, editor pun lebih mudah memahami cara membantu kita bekerja dengan cepat. Misal variable A kita definisikan sebagai string, ketika kita menuliskan A, maka editor akan memberikan kita pilihan fungsi yang bisa digunakan untuk manipulasi string. Berbeda dengan sebelumnya yang dynamic type, editor menampilkan seluruh fungsi pada javascript dan mensortirnya berdasarkan fungsi yang sering kita gunakan. Tidak hanya itu, sebenarnya typing juga mengurangi jumlah bugs yang kemungkinan terjadi karena salah input type.
Itulah mungkin pengalaman-pengalaman saya sejak menjadi frontend engineer, mungkin tidak banyak jika dibandingkan dengan lamanya saya bekerja. 4 tahun harusnya saya sudah jauh lebih expert. Setelah saya mencoba merantau ke Jakarta saya sadar, banyak hal yang perlu saya kembangkan terutama soal algoritma dan struktur data. Fundamental is the most important. Keep growing!!! Sekian dan terima kasih.
