Sebuah cerita mengenal teknologi baru
Di dunia frontend development, perkembangan framework sungguh sesuatu yang jauh lebih cepat daripada perubahan topik pembahasan di sosial media. Silir berganti, baru baca framework A eh udah muncul framework B.
Di satu sisi ini merupakan hal yang menarik karena berarti banyak orang yang ada di komunitas frontend development sehingga bisa dibilang belajar frontend development di tahun ini masih relevan dengan kebutuhan industri. Tapi di sisi yang lain, perkembangan yang secepat ini bisa bikin banyak dari kita kecapekan sendiri ngikutinnya alias burnout.
Maka dari itu kita harus pandai pilah pilih apa yang harus dipelajari, ingat pandai pilah-pilih lo ya, bukan berarti enggak mau belajar. That’s two different things. Supaya kita belajarnya itu mampu menambah value kita ke depannya, meskipun tidak ada namanya belajar yang sia-sia, namun alangkah baiknya belajar yang memang bisa dapat hasil segera, ya to.
So here are a few tips from mehhh on how to start on a new framework, ceilah… Kita akan mulai dari non-technical (decision makingnya) dan baru masuk ke technical.
The non-technicals
Kebutuhan industri
Seperti yang saya mention di atas, belajar itu boleh, justru malah harus banget. Tapi misalnya untuk seorang frontend developer di level junior atau intermediate, alangkah baiknya untuk belajar framework yang memang sedang ramai di industri. Jadi misal nanti sudah lumayan pede dengan skillnya, bisa dijadikan value tambahan di company sendiri atau di calon company baru untuk meningkatkan taraf hidup. Taraf hidup jare~
Ya soalnya eman-eman, misal ada framework X muncul, ngehype di Twitter, tapi di industri belum terlalu urgent untuk di adaptasi. Yaaa meskipun a good thing untuk belajar framework tsb, kalo pandanganku sih tetep mendingan kalo mau explore coba yang emang industrinya lagi rame. Sehingga kita enggak perlu nyari “kolam” nya lagi ketika sudah cukup skillful. Tinggal pilih aja kolamnya.
Misal udah biasa pake React, yaa coba belajar ke Vue atau Svelte dulu, baru Remix. Gitu gitu lah~
Support komunitas
Karena kita sebagai developer di Indonesia belum sepenuhnya menjadi kreator di industri per-frontend-an, kita sejatinya adalah consumer at the same time. Nah, namanya sebuah produk yang dikembangkan oleh manusia yang sumbernya salah dan dusta, pasti produk itu juga tidak sempurna. Barangkali ada bumbu ghibah saat developnya, bukan deng.
Setiap product pasti punya flaw nya sendiri-sendiri, menurut consumernya yang mana ini adalah kita, frontend developer. Maka dari itu… support komunitas yang kuat sangatlah penting dalam pertimbangan memilih framework yang akan dipelajari.
Dulu semasa saya masih sering ikut untuk jadi facilitator, saya dikasih tau bahwa “Problem yang kamu temui saat ngoding itu pasti orang lain di luar sana sudah pernah menemui juga”. Makanya dengan adanya komunitas yang besar dan baik, insyaAllah ketika kita ngoding dan nemu issue, the solution is one Google search away (atau ya one ChatGPT prompt away, terserah si). Jadi ya gitu, adanya komunitas juga bisa menjadi pelipur lara bahwa banyak developer yang lain stumble dengan issue kita lo, jadi kawan sepernasiban lah ibaratnya.
Enggak asik banget kalo misalnya udahlah belajar teknologi baru, nemu issue, eh enggak ada solusinya. (Kalo kamu udah level pro dan bisa bikin proposal untuk solve issuenya, kamu pengecualian ya bang jago, saya nggak lagi ngomong sama kamu -_-)
The technicals
Dua poin di atas tadi adalah biasanya pertimbangan saya untuk mempelajari teknologi baru, utamanya framework. Nah untuk beberapa poin di bawah ini akan jadi pertimbangan yang biasa saya pikirkan saat belajar framework baru. Jadi katakanlah kamu sudah mantep memilih sebuah framework untuk dipelajari, here are the key points I usually take a look at:
Writing Component
Hal paling basic adalah gimana sih cara kita bikin component-component di framework itu. Apakah pake JSX atau pake HTML biasa, atau gimana. Terus misal kita udah punya component itu kalo mau dipake penulisannya gimana a.k.a splitting component nya gimana. Yakali mau ditulis semua di satu file.
Interactivitynya
Interactivity atau reactivity kayaknya sudah jadi fitur wajib sebuah framework frontend, karena kan ya kita ingin dapat feedback langsung ketika ada perubahan data. Kalo enggak ada interactivity/reactivity ya ngapain pake framework, pake HTML5 basic aja lah kalo begitchu~
Biasanya reactivity diwakili dengan penggunaan State dan Data binding ke componentnya. Nah ini perlu dilihat gimana penggunaan local state dan data binding di suatu framework.
Misal di React mah kita biasa
function SomeComponent() {
const [count, setCount] = useState(0);
return (
<>
{ setCount(prev => prev + 1) }}
Tambah bro {count}
</>
)
}
Sedangkan di Svelte dia bakal kaya gini
let count = 0;
function increment() {
count += 1;
}
Tambah bro {count}
Nah sebenernya kan keduanya sama, tapi penulisannya aja yang beda.
Populate datanya
Setelah kita tau gimana komponen itu reactive terhadap perubahan data, selanjutnya kita juga perlu tau gimana data itu bisa dishare ke component yang lain. Kan enggak lucu masak datanya cuma bisa dipake di component Button doang, atau masak kita harus bikin suatu component kompleks jadi satu.
Makanya itu kita perlu tau misal kita mau passing data ke child componentnya itu gimana, apakah props drilling kah atau apakah, gitu. Terus kalo kita ketemu case kita harus populate data ke 3 level di bawahnya itu harus gimana, kan enggak mungkin kita props drill sampe ke bawah-bawah.
Kembali lagi, misal di React
// Case untuk 1 level
function ParenComponent {
return (
);
}
// Case untuk level yang banyak, kita bisa pake React Context API
function SomeLowLevelComponent() {
const data = useContext(ParentContext);
return (
{data}
);
}
Sedangkan di Svelte mungkin kurleb kaya gini
# Case 1 level
import ChildComponent from './Child.svelte'
# Case multiple level
let value
value.subscribe(val => {
value = val
})
Nah ini kita harus clear karena data-data ini kan krusial untuk mendukung interactivitynya, jangan sampe datanya enggak bisa diintegrasikan ke component yang lain. Ya kalo begitu buat apa ya to, mending pake jQuery aja atau malah enggak usah pake framework aja. Pake vanilla JS dan mainan innerHTML nya aja.
Another thing to note adalah… support data store nya. Misal kaya di React selain punya Context API, kita bisa integrate data store kita pake Redux, zustand, jotai, dll. Enggak semua framework perlu integrasi third-party ini, tapi kalo ada dan bisa ini juga bisa dikulik. Barangkali bisa bikin management data kita lebih rapi secara flow maupun codingan.
Routingnya
Part terakhir yang saya lihat ketika saya udah tau gimana cara saya buat manage component, data dan interactivitinya, adalah gimana kita bikin routingnya. Again… enggak semua hal bisa ditaruh dalam satu halaman. Bahkan mostly untuk real-world application kita perlu memisahkan menjadi beberapa routes.
Karena dengan begitu kita bisa lebih mudah untuk track historicalnya user, kemudian memudahkan logic yang kompleks atau logic untuk render-render component maupun data fetchingnya.
Di React sendiri kalau kita pake standalone, kita bisa pake react router, kalo kita pake framework Next JS kita malah udah bisa pake folder-based. Nah ini juga perlu dicek di framework yang mau kamu pelajari baik secara standalone itu gimana terus kalau misalnya lebih advanced gimana.
Kenapa perlu tau keduanya, barangkali suatu saat kamu enggak perlu fitur yang terlalu advance, biar tidak overkill ya abangku.
(Bonus) UI and Testing environments
Ini bonus, tapi kayaknya ya tetep aja cukup penting. Tidak lain dan tidak bukan adalah gimana kita ngestyling componentnya karena tidak munqin user mau dikasih tampilan basic HTML. Styling ini aku biasanya cari tahu alternatifnya:
- Apakah pakai CSS file terus diimport
- Apakah bisa di styling langsung componentnya
- Apakah bisa pake library styling components (misalnya styled-components)
- Support UI library/UI kit di luarannya itu gimana, mudah dan lengkap enggaknya
Kalo semua aspek di UI ini terjawab, biasanya saya udah ready to go untuk coba cari use case untuk diimplement pake framework baru ini.
Bonus tambahan, jelas kita perlu juga tau gimana kita kalo mau setup dan jalanin testing di aplikasi kita. Supaya apa? Supaya value kita juga bertambah, semua orang mungkin bisa ngoding, tapi belum tentu semua orang bisa bikin testing yang baik.
Maka dari itu… step terakhir yang kadang saya enggak lewatkan (seringnya dilewatkan soalnya), gimana unit testnya, integration testnya, kalo bisa juga masuk ke end-to-end testingnya tipis-tipis.
Dengan begitu setelah belajar framework baru, kamu bisa semakin las les sat set untuk tau arahnya gimana. Enggak cuma yang “cobain ah, terus ngapain ya ini” dan setelahnya bisa kamu jadikan bahan show-off untuk meningkatkan value kamu sendiri.
Well, it’s quite a long story for me too, semoga kamu membaca sampai akhir dan menikmati tulisan saya kali ini. Have a nice day everibadee!