A never-ending battle
Photo by Joan Gamell on Unsplash
Sebenernya cerita semacam ini udah pasti banyak ditemui di luaran sana, bahkan saking banyaknya tinggal kita tulis keyword “best javascript framework” dan kita tinggal pilih aja salah satu artikel secara random. Saya juga sebenernya agak ragu untuk nge-publish cerita ini karena saya masih ngerasa pengalaman saya belum sebanyak itu untuk bisa ngebahas topik ini. Hmm… Mari kita buat a la saya cerita aja deh ya.
BTW udah lama saya enggak nulis gini… Prepare your tea and have a seat, everibadeee.
Secara umum, setahu saya ada tiga framework yang sampe sekarang masih jadi “the big 3” javascript framework, tentu seperti yang sudah kita duga, jQuery, heh bukan bukan, React, Vue, dan Angular. Banyak praktisi Javascript yang sebenernya kurang suka melakukan hal-hal kaya gini, membanding-bandingkan framework — kita sebut saja framework ya — Javascript yang satu dengan lainnya. Alasannya sederhana, karena sebenernya semuanya hampir-hampir sama, at least untuk sekarang ini, top framework Javascript punya fitur yang kurang lebih hampir sama, kemudahan yang sama, support dari komunitas yang cukup besar juga. Jadi daripada dibandingkan, lebih baik kalo penasaran ya tinggal dicoba aja gitu lo maksudnya.
React JS
Saya akan mulai dari framework yang paling familiar buat saya, React JS. Framework bikinan facebook yang saya mulai kenal di 2016 silam dan sejak 2018 saya pake sebagai daily “driver” saya. Sebenernya React ini kurang pas disebut framework, lebih tepat kalo disebut UI library. Alasannya sederhana karena semua hal lain seperti routing, global state management, dll, perlu library lain, ini kalau kasusnya kita pengin bikin aplikasi React yang full javascript. React juga bisa kita pasang layaknya library javascript lainnya dengan cukup tulis di bagian body HTML kita.
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
React punya komunitas yang besar banget di dunia, serta banyak library yang bisa dipake macem-macem di React, bahkan hampir semua library yang dulu kita pake di jQuery, kini udah ada wrappernya di React. React juga punya dua framework yang terkenal yaitu Next JS dan Gatsby JS.
React juga bisa kita tulis menggunakan Typescript, bisa dibilang bahasa pemrograman advancenya javascript yang kayaknya akhir-akhir ini lagi naik daun. Juga dilengkapi dengan salah satu library favorit saya bernama styled-components yang bikin kita styling component di React jauh lebih mudah.
Awalnya saya sih biasa aja sama styled-components saya nyoba bikin web dengan stack HTML+CSS, baru kerasa betapa saya take styled-components for granted.
Tapi masalahnya… Sebagai frontend developer yang lebih banyak main di React sendiri, saya bisa bilang learning curve React ini cukup nganu. Untuk web developer yang belum pernah nyobain library JS pasti akan kaget karena biasanya kita nulis script javascript di dalam body HTML, sedangkan React dengan JSX nya memutar balikkan persepsi kita dengan nulis tag HTML di dalam script javascript.
Selain terkait JSX, ada juga yang mungkin bisa bikin agak bingung yaitu implementasi class component, sepengalaman saya banyak temen-temen yang bingung dengan penggunaan class component di React. Ya meskipun sekarang udah ada juga fitur bernama hooks yang memudahkan bikin component pake function instead of a class. Katanya sih hooks bikin lebih clean, tapi saya sebagai penganut class component garis keras, sebenernya lebih suka class component, lebih gampang ditest pake Enzyme soalnya, hohoho.
Ohiya, karena masih populer, peluang kerja frontend developer yang bisa React ini masih terbuka sangat lebar kok, masih banyak perusahaan yang pake teknologi ini atau beralih ke teknologi ini.
Untuk junior level mungkin pengetahuan tentang vanilla javascript, React, Redux, hooks, udah cukup. Sedangkan untuk level yang lebih tinggi bisa explore terkait unit testing (Enzyme, Jest, React testing library), Typescript, framework (Next JS, Gatsby JS), state management selain Redux (Recoil JS, Context).
Vue
Vue JS (dibaca vyu je es) bisa dibilang framework yang naik daun dengan cepat 2–3 tahun terakhir ini. Framework yang diinisiasi oleh Mas Evan You ini menurut saya fiturnya yang paling mirip-mirip sama React JS, misalnya fitur virtual DOM nya, atau yang bisa dipasang sebagai CDN dengan menambahkan tag script di body HTML kita.
Ohiya Vue juga bisa langsung dipasang di Laravel, kayaknya diantara yang lain Vue ini satu-satunya yang saya temui bisa diembed langsung ke framework PHP. Bahkan jadi recommended javascript library buat Laravel kalo enggak salah.
Vue sendiri udah ngalain jumlah star nya React di Github, jadi support komunitas di Vue ini juga besar banget di dunia, banyak banget juga library untuk support kita bikin aplikasi Vue. Saya sejujurnya belum terlalu deep belajar Vue, jadi enggak begitu tau apakah Vue punya framework semacam Next JS atau Gatsby JS gitu. Tapi yang pasti library untuk styling component udah support Vue, meskipun implementasinya cukup beda dibandingkan ketika diimplementasi di React.
Vue juga punya keunggulan sendiri terkait learning curve, menurut saya learning curve Vue cukup tolerable. Karena untuk ngebikin componentnya masih hampir-hampir sama ketika kita develop web dengan stack HTML+CSS, orang-orang yang masih awam dengan library javascript yang belajar Vue akan lebih gampang ngeh-nya dibanding belajar React. It’s really a good point anyway.
Saya enggak begitu bisa bahas lebih jauh terkait Vue, karena cuma pernah nyoba sekali dua kali, itu pun mindset saya masih rekat sama React, jadi belajarnya juga enggak optimal.
Tenang, meskipun begitu saya cukup tau kok kalo perusahaan yang minat untuk pake Vue ini juga makin banyak, malah saya dulu ketika proses nyari kerja lebih banyak nemu requirement yang membutuhkan frontend developer yang pake Vue dibandingkan React.
Angular
Nah ini yang saya paling enggak bisa bahas, framework javascript yang bisa dibilang karirnya paling lama. Dibacking oleh perusahaan yang pasti kita udah familiar, tidak lain dan tidak bukan, Google. Angular ini bisa dibilang framework yang beneran framework, karena ketika kita install, kita akan dikasih segelondong lengkap, se routing-routingnya, tinggal diconfig aja.
Di awal kemunculannya Angular (AngularJS) masih dengan cara binding data ke HTML tag atau bikin component dengan HTML tag, yang saya rasa cara ini diadopsi oleh Vue JS. Tapi sejak muncul Angular, implementasinya bener-bener berubah, dan saya cuma berkesempatan untuk nyobain AngularJS.
Berbeda dengan dua library sebelumnya yang bisa kita install cukup dengan CDN, saya nyari tau di dokumentasi resmi Angular ini enggak nemu instalasi lewat CDN, jadi kayaknya emang harus full javascript gitu.
Angular sendiri udah make implementasi Typescript, jadi ini jadi drawback tersendiri ketika kita mau belajar Angular tapi pengetahuan javascript kita masih basic. Kita musti belajar proses MVC yang ada di Angular serta Typescript itu sendiri.
Dulu AngularJS punya masalah terkait performa yang bakal lambat banget ketika codebase kita makin besar, jane ya wajar kalo makin berat, tapi enggak tolerable gitu lo, jadi sejak berevolusi jadi Angular banyak issue terkait performa yang diperbaiki sama tim pengembangnya.
Saya enggak bisa bahas lebih lanjut, karena blas belum pernah nyobain framework ini. Terkait kesempatan kerja juga saya enggak begitu tau, setau saya perusahaan di Indonesia jarang yang pakai Angular, tapi banyak perusahaan di luar negeri yang pakai Angular, jadi mungkin kesempatannya justru lebih terbuka lebar kalau kita apply di perusahaan luar negeri.
Rising Star: Svelte
Svelte juga jadi hot topic di tahun lalu, library yang digadang-gadang punya performa jauh lebih baik dari ketiga framework Javascript di atas, learning curve yang lebih mudah karena implementasinya hampir-hampir sama kaya Vue yang main-main di tag HTML dan tanpa adanya Virtual DOM. Menarik!
Udah banyak perusahaan yang pake teknologi ini kaya Gojek, Tokopedia, GoDaddy, Rakuten, dll.
Saya sempet nyobain Svelte ini sekilas sih, dan emang asyik main-main Svelte ini juga potensinya besar banget. Karena Svelte yang newcomer ini tentu komunitas dan supportnya masih belum sebesar “the big 3”, tapi saya yakin Svelte juga akan segera punya komunitas yang besar.
Mari kita lihat apakah framework satu ini bisa menggeser trend top javascript framework.
Recap
Sejatinya, saya enggak bisa bilang mana framework terbaik, alasan pertama karena saya belum nyobain semuanya jadi masih kurang pengalaman; alasan kedua semua framework ini punya pasar sendiri dan memenuhi kebutuhan masing-masing, selama kebutuhan kita untuk develop web app terpenuhi dengan salah satu framework di atas yaudah, cukup aja gitu; alasan ketiga, familiarity dan preference, preferensi orang-orang untuk nulis kode serta rasa familiarnya bener-bener berbeda, orang yang lebih suka bisa dipisah-pisah dan bisa diimport lebih gampang mungkin memilih React, orang yang suka main di tag-tag HTML mungkin akan memilih Vue atau Svelte, orang yang suka implementasi Typescript mungkin akan pilih Angular atau React.
Menurut saya cobain aja semuanya dulu, terus pilih satu yang paling cocok, dalami sampe paham, baru nanti pindah. Karena untuk belajar framework di atas sebenernya kamu cukup punya fundamental javascript yang cukup kok, selebihnya tinggal penyesuaian nulis kodenya aja.
That’s it, selamat belajar. Have a great day.