Tech Stack yang Saya gunakan dalam 1 Project Web App
Memutuskan untuk menggunakan tools atau tech apa saja yang akan digunakan dalam project merupakan satu bagian penting dalam proses development jangka pendek dan panjang.
Di sini saya akan membagikan kepada kalian tech stack apa saja yang saya gunakan dalam proses development 1 project Web App mulai dari frontend sampai backend.
Tulisan ini bukan menjadi patokan bahwa project kalian juga harus gunakan apa yang saya sampaikan. Karena itu semua tergantung dari kebutuhan project kalian masing-masing.
Kita mulai dari front end.
Untuk front end seperti umum nya pasti ya menggunakan 3 hal ini, yaitu HTML, CSS dan Javascript.
CSS, saya menggunakan Bootstrap, untuk membantu mendesain kerangka desain dari front end nya. Di tambah dengan modifikasi css saya sendiri. Jujur saya enggak jago desain, jadi buat sesimpel dan minimalist aja.
Javascript, saya cenderung menggunakan React.js, kadang menggunakan Vue.js . Kenapa saya milih React.js di banding Vue itu sebenarnya cuma masalah selera aja ya.
Kalau Menurut saya, React.js itu javascript banget. Pembuatan component di React itu menggunakan Class atau function, sedangkan di Vue itu kayak ada template-template gitu, jadi kayak bukan javascript. Sesekali saya tetap menggunakan jquery untuk beberapa hal yang ribet di lakuin kalau pakai React.js.
Tak lupa kalau pakai React saya susah lepas dari penggunaan Redux untuk state management.
Baru mau mulai gunakan Redux? Jangan lupa baca ini.
Masih di front end, jangan sampai lupa untuk melakukan testing dengan Jest + Enzyme.
Jangan malas nge test broo.
Lanjut ke Back End.
Tentu saja, Node.js haha. Javascript is Everywhere. Lengkap dengan Express.js the minimalist web framework for Node.js.
Sebelumnya saya php developer, dan gunakan framework laravel. Kalian tahu sendiri ya di laravel itu udah banyak banget fitur yang manjaain developer nya. Serba otomatis. Tapi itu yang ngebuat saya jadi kurang suka.
Kalau menurut saya, hal yang seperti itu membuat saya merasa framework ini di luar dari kendali saya. Maka, saya lebih memilih Express.js yang minimalist banget. Jadi merasa kembali ke konsep website yang sederhana.
Yaitu hanya soal request dan response saja.
Pakai database SQL, yaitu mysql, gak bisa di tinggal pakai sequelize untuk ORM (Object Relation Mapping).
Karena dengan sequelize akan membawa fitur-fitur keren seperti migration yang ngebantu banget untuk mencatat semua perubahan yang terjadi terhadap schema database kita, apalagi kalau kerja tim jadi gak akan kejadian database di komputer kita beda dengan database rekan kita.
Serius ini pernah terjadi di tim saya, sampai kita harus kirim pesan ke grup kalau kita nambahin table atau nama kolom baru di table A, sampe kirim-kirim database lewat flashdisk. OMG.
Seed juga berguna banget untuk membuat sample data ke web app kita, jadi gak perlu repot-repot bikin sample data manual, cukup jalanin aja seeder nya. Seed juga berguna banget buat test, karena test juga butuh sampel data.
SELECT Data, atau pengambilan data langsung ke database adalah sesuatu yang mahal. Mahal dari resourcenya, berarti nanti mahal ke biaya server nya.
Karena server nya bakal capek ngurusin pengambilan data yang berulang kali ke database SQL. Ini prinsip, jangan sampai web kita down cuma gara-gara ini ya. Maka saya lebih baik lakuin cache terhadap data yang sama dan berulang kali di SELECT dengan Redis In Memory Data Store.
Redis ini bisa berguna buat cache, tapi juga bisa buat database ya. Tapi sering nya sih buat cache, karena sifat nya yang in-memory, jadi pengaksesan data nya jadi jauh lebih cepat di banding database SQL.
Baca di sini untuk tahu strategi saya dalam cache dengan Redis.
Tidak bisa di pungkiri, pencarian data dalam web kita merupakan sesuatu yang penting. Coba aja kalian kunjungi web manapun, kemungkinan besar pasti ada kolom pencarian yang di buat khusus. Misal untuk mecari produk, mencari artikel dan sebagai nya.
Untuk Pencarian data saya tidak mengandalkan WHERE Clause di SQL, sekali lagi, karena itu mahal dan berat. Jadi saya akan gunakan search-as-a-service seperti Algolia, atau kalau mau yang gratis dan bisa di install di server kita sendiri yaitu elastic search. Pencarian data jadi jauh lebih cepat dan ringan.
Butuh sesuatu yang bisa bersifat realtime, maka saya pilih firebase database. Database di firebase sekarang ada dua, Realtime database dan Cloud Firestore. Saya sendiri sudah menggunakan Cloud Firestore walapun masih BETA. Sejauh ini belum ada kendala. Dan saya merasa walaupun Cloud Firestore, bukan database khusus untuk Realtime, tapi Firestore tetap punya fitur Realtime. Dan dia bersifat NoSQL dan bisa lakukan query macam where dan data lebih terstruktur di banding Realtime Database. Jadi lebih enak dalam pencarian nya.
Buat perbandingan mau pakai yang mana, baca aja di website resmi nya ya.
Dengan front-end dan backend yang terpisah seperti ini. Biasanya saya buat server sendiri untuk front-end dan server sendiri untuk back-end nya. Maka tentu saja, request dan response akan sering bolak-balik terjadi. Karena front-end kalau butuh data, harus request ke back-end biasa nya dengan Axios.
Tapi ada suatu saat dimana harus request beberapa data dalam satu waktu. Misal di Halaman Home, saya butuh data produk, user dan toko. Berarti saya harus nge axios ke 3 route, produk, user dan toko. Dan ini borosss. Server nya bakal capek.
Ya ginilah, kayak kita ke rumah makan ya. Datang pelayan nya nanyain mau pesan apa. Terus kita bilang mau pesan nasi goreng. Di catat sama pelayan terus di sampaikan ke koki untuk di masak. Selesai di masak, pelayanan anterin nasi goreng nya ke kita. Terus kita bilang ke pelayan mau pesan mie goreng juga. Oke, di catat sama pelayan di teruskan ke koki, di masak, selesai, langsung di anterin ke kita. Terus kita bilang lagi, “mas pesan mie rebus juga”.
Bayangin betapa pusing nya si pelayan dan koki.
Untuk mengatasi masalah di atas, tentunya lebih baik kita langsung pesan saja di awal mau pesan apa, nasi goreng, mie goreng dan mie rebus. Jadi si pelayan gak perlu bolak-balik. Dan si koki juga akan jadi lebih ringan kerja nya, karena mungkin mie goreng dan mie rebus bisa di masak bareng-bareng.
Kalau di dunia web, saya akan gunakan GraphQL untuk mengatasi masalah tersebut. Dengan Query GraphQL kita bisa meminta beberapa data dalam satu request ke server. Kita juga gak perlu pusing harus nge request ke route mana. Kita cukup tuliskan di query nya mau ambil data apa. Kerennya lagi, misal kita hanya butuh beberapa kolom dari data yang di minta, itu bisa di lakukan. Sehingga response yang di berikan tidak mubazir.
Lebih mantap lagi, kalau GraphQL ini di barengi dengan Redis. Makin wuush.
Terakhir. Selalu dan selalu, jangan lupakan test.
Menyesal itu datang nya belakangan. Mungkin kita mengira Web App yang kita buat terlalu simple untuk sampai di bikin test. Tapi dari Web yang simple ini akan membuat stress kita di masa yang akan datang. Sampai kita pusing sendiri kenapa hal ini dan itu bisa terjadi.
Perasaan kita sudah ngoding dengan benar tapi kenapa ada bug ini itu ya. Aduuh, Kenapa saya gak buat test ya.
Mungkin itu yang di pikirkan oleh kita di masa chaos itu datang.
Di Express.js saya gunakan mocha dan chai untuk melakukan test nya. Ada 3 test yang saya lakukan. Test unit function terkecil, Test Request (Chai Request), Test Database (SQL, Redis, Algolia, Elastic Search).
Sekali lagi guys, jangan sampai menyesal dan kesal karena waktu libur dan istirahat kita akan di gunakan membenahi bug yang terjadi di web app yang kita buat.
Originally published at programmerjourney.com on September 22, 2018.
Jika anda merasa artikel ini menarik dan bermanfaat, silahkan berikan claps 👏 👏 sebanyak-sebanyaknya dan bagikan ke lingkaran pertemanan anda, agar mereka dapat membaca artikel ini. Dan jangan lupa follow saya di medium untuk terus dapatkan tulisan seperti ini setiap minggunya.
