[Part 1] Ini Dia Skill yang Harus Dimiliki Programmer Masa Kini  - Frontend

Sebagai CTO, saya selalu dituntut untuk memilih teknologi yang tepat untuk membuat sebuah mobile atau web app. Mulai dari bahasa pemprograman atau framework yang akan digunakan, serta memastikan fleksibilitas jika melakukan scaling dan penambahan fitur. Pemilihan teknologi dan infrastruktur yang digunakan harus lah tepat, ringan, scalable, dan kokoh.

Belajar dari startup-startup atau brand besar yang aplikasi nya digunakan oleh jutaan bahkan milyaran user, mereka menggunakan approach dan bahasa pemprograman “modern”, agar aplikasinya berjalan dengan ringan dan memproses data dengan cepat meskipun traffic nya tinggi.

Sayangnya, banyak dari anggota team saya yang sama sekali belum mengerti, dan semakin mengejutkan ketika tidak ada satupun fresh graduate yang pernah mencobanya ketika saya wawancarai ketika lowker dibuka untuk posisi ini*.

there are some serious problems how our current education system is run today, or this industry rapidly changes?

Frontend Programmer di Industri Digital

Bicara tentang sebuah project, setelah mockup disetujui oleh klien, tentunya tahap awal biasanya dimulai oleh Frontend Programmer, lalu apa aja sih bahasa pemprograman dan skill yang harus dimiliki seorang Frontend Programmer masa kini?

Jika anda tidak pernah bekerja menggunakan salah satu front-end builders (grunt, gulp, webpack), tidak pernah mendengar kata “transpiler” (babel), tidak tau bahwa kamu bisa melakukan serangkaian test pada frontend (Jasmine, mocha, chai) dan otomatis menjalankannya di semua tipe browser (karma), maka anda sedang dalam posisi yang serius, out of date or expired!

Jangan sampai salah sangka, saya sepakat! yang penting adalah hasil nya, tidak perduli bagaimanapun cara anda membangun frontend sebuah aplikasi/web, selama hasil pekerjaan anda berjalan dengan baik, maka itu yang terbaik.

Tetapi tidak ada salahnya menambah keahlian anda, kan? terlebih perusahaan-perusahaan startup/digital kini banyak men-setup Environtment produknya menggunakan teknologi-teknologi baru, sehingga membutuhkan programmer yang faham betul mengenai teknologi tersebut.

Brace Yourself, Semuanya Benar-Benar Berubah

var pada Javascript telah mati? Kita harus menggunakan standar EcmaScript let dan const sekarang!?

CSS kini sudah bisa menggunakan variabel, nesting, scoping dan custom selectors. Preprocessors seperti Sass dan Stylus telah ditinggalkan?, digantikan PostCSS !?

Sudah bisa Grunt? Oh! kamu harus mencoba Gulp — Eh jangan! coba Webpack!

Baru saja belajar AngularJS? Wah, AngularJS sudah berubah semua sejak versi 2.0 (Angular tanpa JS). Tunggu, tidakah sebaiknya kita menggunakan React dibandingkan Angular? tapi pernahkah mendengar Aurelia atau JSBlocks?

Begitu kira-kiranya kebingungan para Frontend Programmer ketika sebuah framework, tool, atau teknik baru diperkenalkan, lebih banyak kebingungan daripada tepuk tangan!

“Bagaimana semua pekerjaan kita dapat selesai, jika semuanya terus berubah?”

Sayangnya, teknologi akan tetap terus berubah, suka atau tidak suka. Akan selalu ada orang yang melakukan inovasi untuk melakukan sesuatu dengan efisien dan cepat.

Skill-skill Modern Untuk Frontend Programmer

Saya sebut “modern”, karena tools dan approach yang digunakan tidak seperti programming umum yang biasa dipelajari di kampus, karena kampus hanya mengajarkan basic dan logic. Misalnya apa saja?

1. Client Side Rendering

Umumnya, browser menerima HTML dari server dan merendernya. Saat user menavigasi ke halaman lain, halaman browser akan melakukan refresh dan server mengirimkan HTML baru untuk halaman baru. Ini disebut server-side rendering.

Namun dalam pemprograman modern, client-side rendering digunakan sebagai gantinya. Browser memuat halaman awal dari server, beserta script dan stylesheet yang dibutuhkan untuk keseluruhan aplikasi/website. Saat user membutuhkan data baru, halaman tidak perlu di refresh. Data yang dibutuhkan untuk halaman baru, biasanya dalam format JSON, diambil oleh browser melalui script AJAX ke server (kita mengenalnya dengan sebutan REST API). Browser kemudian secara dinamis memperbarui content halaman menggunakan Javascript DOM Manipulation, yang telah disiapkan sebelumnya ketika memuat halaman awal.

Kenapa harus seperti itu? bukankah data yang disiapkan untuk AJAX juga diproses secara server-side? lalu apa bedanya? hanya biar keren gitu halaman gak loading? Nah, data yang disiapkan menggunakan API untuk dipanggil menggunakan AJAX ini, tidak benar-benar “server-side” dari database langsung. Kadang ia adalah “Memory” atau “Index”, jadi data yang kita terima dalam format JSON, sudah pernah dirender sebelumnya.

Biasanya ini diterapkan di web e-commerce besar, ketika user A mencari data untuk kategori X misalnya, maka user B yang berikutnya, ketika mencari data untuk kategori yang sama, data yang ditampilkan adalah hasil render dari user A sebelumnya.

Bukankah ini “Cache” istilahnya? kurang tepat, bagaimana dengan web pembelian tiket online, yang harganya terus berubah-ubah? kan tidak mungkin menampilkan cache. Mereka menggunakan ElasticSearch namanya, dan ElasticSearch ini output formatnya JSON. Sehingga AJAX adalah salah satu cara untuk mengambil dan memanipulasi data dengan format ini.

Kesimpulannya, banyak desakan agar Frontend Programmer membangun web/app menggunakan approach Client-Side Rendering, sehingga mudah dicolokin ke API yang telah dibuat oleh Backend Programmer.

2. HTML dan CSS Dirender Menggunakan Javascript

Kalau tadi hanya data yang dirender, sekarang HTML dan CSS itu sendiri yang dirender menggunakan Javascript, kenapa harus seperti itu? bukankah pure HTML saja sudah sangat ringan?

Selama bertahun-tahun, Frontend Developer diajari bahwa penulisan coding yang baik adalah HTML, JavaScript dan CSS ditulis secara terpisah. Tetapi tidak hari ini, justru sebaliknya! HTML dan CSS ditulis di dalam Javascript.

Itu adalah approach yang diajarkan oleh Facebook dengan Frontend Frameworknya bernama React. Awalnya ini seperti ide gila, tapi setelah mencobanya, sebenarnya tidak separah kedengarannya.

Approach seperti ini diperlukan agar dapat berjalan dengan baik pada server stack yang saat ini sedang naik daun, NodeJS. Selain itu, membuat tampilan web/app lebih scalable dan dinamis jika suatu saat dilakukan perubahan. Dan HTML terlalu kaku untuk itu.

React mungkin bukan framework frontend tercepat saat ini, masih ada Angular, Ember, Vue, Cycle, dll diluar sana. Namun React merupakan salah satu framework (library) yang banyak dipakai para developer saat ini. Sehingga lebih mudah mencari referensi jika kita mengalami kendala.

Dan ketika develop Frontend menggunakan React, ada baiknya menggunakan Redux, untuk State Management. Akan saya jelaskan lebih lanjut dalam kesempatan lain.

3. Testing dan Linting

Linter adalah istilah tools untuk menganalisa dan menemukan bugs pada kode, dan Linting adalah istilah ketika menjalankannya.

Karena Frontend dibuat menggunakan banyak Library dan Javascript, maka testing ini bukan sekedar mencari bugs pada tampilan saja, tetapi lebih kepada apakah frontend sudah memanggil API dengan benar dan efisien? Apakah Callbacks yang dilakukan sudah benar?

Terlebih ketika bekerja di startup / perusahaan digital yang produk nya berupa aplikasi, testing itu harus, jika tidak bisnis mereka akan terganggu.

Ada Jest, tools yang digunakan untuk testing library yang kita gunakan dalam frontend. Dengan Jest, kita bisa mengetahui library apa saja yang terload ketika sebuah halaman/action dipanggil, dan apakah ada error disana. Jika mau lebih asik, kombinasikan dengan Enzyme, sebuah tools dari Airbnb.

Untuk linting kode-kode Javascript, Frontend Programmer biasanya menggunakan ESLint, karena console pada browser saja tidak cukup untuk itu. Apa sebabnya? Terkadang kodingan javascript yang kita tulis, berjalan dengan baik dan pada console browser tidak ada error, tetapi ESLint akan memastikan apakah kita sudah mendeklarasikan variabel dengan benar dan sesuai standar ES2015 (Ecma Script) atau jangan-jangan kita menggunakan code yang sebenarnya sudah deprecated, jalan sih tapi tidak dianjurkan digunakan.

Begitu juga ; (titik koma), kadang dalam beberapa script bisa berjalan meski tidak mencantumkan titik koma (serius) pada ending codingan, tetapi ketika script tersebut di minify, yang terjadi adalah error.

Bagaimana Selanjutnya?

Oke, lalu bagaimana dengan Frontend Programmer yang masih belum mengerti itu semua diatas? haruskah sekarang juga meninggalkan Jquery dan menggunakan Angular? atau menggunakan React daripada bootstrap?

Jawabannya tidak! seperti yang saya tegaskan diatas, yang penting adalah hasilnya. Tidak apa-apa sementara menggunakan cara yang anda pahami saat ini untuk mengerjakan proyek-proyek yang masuk, tetapi ada tips agar tidak ketinggalan tergerus oleh perkembangan teknologi;

1. Perbanyaklah membaca berita dan artikel mengenai perkembangan dunia programming saat ini.
2. Buatlah sebuah Side Project menggunakan framework, tools dan approach terbaru seperti diatas. Sehingga anda mengetahui batas dan kemampuan anda.
3. Selipkan sesuatu yang baru, pada setiap project anda. Meskipun hanya menampilkan data tabel menggunakan API, atau menggunakan Javascript untuk membuat halaman Form.
4. Ikut les / workshop online atau offline yang khusus membahas framework baru, datang saja dan dengarkan. Diterapkan atau tidak, bisa paham atau tidak, itu urusan belakangan.

Yup! Itu saja.. industri digital memang bergerak sangat cepat, dan itu dikarenakan setiap hari ditemukan cara yang lebih baik dan efisien. Dan jika Anda selalu mengasah kemampuan menggunakan skill — skill baru sedikit demi sedikit, Anda akan baik-baik saja — jangan khawatir expired! [cp