Cara Memilih Kerangka Kerja Front-end Terbaik

Dunia JavaScript adalah lingkungan yang kaya dengan lusinan alat, pustaka, dan kerangka kerja. Tapi, dengan banyak pilihan muncul banyak kebingungan. Ini benar-benar pedang bermata dua.

Meskipun Anda mendapatkan banyak ruang untuk kreativitas dan eksperimen, terkadang Anda tidak yakin tentang perpustakaan atau kerangka kerja apa yang harus dipilih.

Kerangka kerja front-end yang Anda pilih dapat membuat atau menghancurkan proyek Anda dalam jangka panjang.

Pada artikel ini, kita akan melihat beberapa kerangka kerja JavaScript paling populer, dan bagaimana mereka bersaing satu sama lain. Kami akan memeriksa lima perspektif berbeda dari kerangka kerja ini, yang umumnya memudahkan proses pengambilan keputusan tentang kerangka kerja JavaScript Anda berikutnya.

Apakah Anda memilih dari salah satu kerangka kerja JavaScript populer ini, atau dari sesuatu yang lebih esoteris, Anda harus mempertimbangkan setiap aspek ini.

Ketersediaan Sumber Belajar

Yang satu ini jelas tapi sering diabaikan. Sementara halaman rumah mewah dari beberapa kerangka kerja mungkin menarik perhatian Anda, Anda masih memerlukan beberapa kursus, buku, tutorial, dan artikel tambahan selain dokumentasi yang membosankan dan kering untuk membantu Anda memulai.

Membuat kerangka kerja yang luar biasa adalah satu hal dan mengomunikasikan ide inti di baliknya berbeda. Faktanya, ada banyak pengembang profesional di luar sana yang berspesialisasi dalam pembinaan. Sumber belajar yang dibuat dengan baik akan secara dramatis memotong kurva belajar Anda.

Cari sumber daya dari penulis tepercaya yang memiliki pengalaman sebelumnya dengan Anda — pada akhirnya akan sepadan dengan waktu Anda. Jika Anda kesulitan menemukan sesuatu yang berguna, berhati-hatilah: Kerangka kerja yang Anda coba pelajari mungkin baru, atau belum diadopsi dengan baik oleh komunitas.

Meskipun saya menyebutkan bahwa dokumentasi saja tidak cukup, ada pengecualian untuk ini. EmberJS, misalnya, memiliki dokumentasi yang bagus. Fitur inti dan kasus penggunaan dijelaskan dengan baik dengan contoh umum di sana-sini. Sayangnya, selain dokumentasi, kami hanya memiliki sedikit buku sumber, kursus video, atau materi lainnya.

Di sisi lain, ada banyak sumber daya untuk Angular dan React. Hampir semua situs web pendidikan berorientasi front-end akan memiliki satu atau dua artikel tentang mereka, bahkan mungkin kursus atau buku video lengkap.

Jenis Vue mencapai jalan tengah: Ini memiliki dokumentasi yang bagus dan ada beberapa kursus bagus yang dapat Anda pilih.

Aurelia, misalnya, hampir tidak memiliki sumber daya; satu-satunya harapan untuk Anda adalah dokumentasi dan keberuntungan.

Saya lebih suka memiliki pilihan.

Bahkan jika Anda membaca buku atau kursus yang bagus, ada kemungkinan Anda akan mempelajari sesuatu yang baru dengan memaparkan diri Anda pada sumber yang berbeda. Jika Anda terbiasa dengan subjeknya, seringkali Anda dapat menelusuri dan mencari kemungkinan area yang belum terlalu jelas.

Sayangnya, strategi ini tidak akan berhasil jika Anda dibatasi dengan pilihan Anda, yang membawa kita ke poin berikutnya.

Kepopuleran

Anda mungkin bangga mempelajari sesuatu yang eksotis, tetapi jika Anda melihat ini dari perspektif bisnis, itu tidak sama. Perusahaan atau klien Anda mungkin lebih memilih perangkat yang telah teruji pertempuran untuk digunakan.

Ada beberapa alasan untuk ini. Jika suatu kerangka kerja tidak begitu populer, itu berarti ada beberapa pengembang yang berspesialisasi di dalamnya. Apa yang terjadi jika Anda meninggalkan proyek atau mencari pekerjaan baru? Majikan Anda akhirnya terjebak dalam mencari pengembang yang mengetahui kerangka kerja yang Anda gunakan.

Proses ini mungkin menjadi beban nyata bagi sebuah perusahaan. Hal yang sama berlaku bahkan jika Anda tetap dengan proyek dan berkembang. Sekarang pengusaha membutuhkan lebih banyak pengembang untuk mempercepat pembangunan.

Ada beberapa alasan pribadi lainnya mengapa Anda mungkin memilih kerangka kerja yang populer dan banyak digunakan. Apa yang terjadi jika Anda menemukan diri Anda terjebak dengan beberapa masalah dan tidak ada komunitas yang benar-benar dapat Anda mintai bantuan? Karena Anda sendirian dengan dokumentasi, kemungkinan besar Anda akan membuang banyak waktu.

Selain itu, Anda ingin memikirkan masa depan, peluang yang lebih menarik dalam karir Anda. Jika Anda berspesialisasi dalam sesuatu yang populer dan benar-benar ahli dalam hal itu, akan ada banyak proyek di luar sana untuk Anda.

Pemimpin yang jelas di sini adalah Angular dan React.

Sebagian besar daftar pekerjaan terkait front-end di luar sana membutuhkan satu atau yang lain. Mereka didukung oleh Google dan Facebook masing-masing, dan oleh karena itu pengusaha merasa "aman" tentang pilihan mereka.

Terkadang, pilihan kerangka kerja untuk perusahaan atau klien Anda tidak terserah Anda; mungkin itu dibuat oleh karyawan sebelumnya atau orang lain dalam tim. Kemungkinan itu akan menjadi Angular atau Bereaksi. Sekarang ada opsi lain di luar sana seperti Ember dan Vue. Tapi, Anda harus dengan sengaja mencari perusahaan yang menggunakannya.

Anda dapat menentukan popularitas kerangka kerja dengan melihat dengan cepat seberapa baik kinerja proyek di GitHub dan tempat lain. Berikut adalah beberapa statistik yang dikumpulkan pada saat penulisan artikel ini:

Meskipun perpustakaan ini telah ada cukup lama untuk membuktikan diri sebagai pilihan populer, jika Anda mencoba sesuatu yang benar-benar baru, statistik serupa untuk mereka dapat membantu Anda membuat pilihan.

Belajar hanya Angular atau React hanya akan membawa Anda sejauh ini dalam karir Anda. Tentu saja, Anda akan memiliki banyak peluang, tetapi ada alasan mengapa kerangka kerja lain ada di luar sana. Cobalah mempelajarinya di waktu luang Anda dan sesekali lakukan eksperimen. Bahkan jika Anda tidak pernah menggunakannya dalam proyek nyata, Anda akan mendapatkan wawasan berharga yang membantu Anda dalam pekerjaan pengembangan sehari-hari.

Fitur Inti

Mari kita sedikit teknis sekarang.

Pada awalnya, Anda ingin meninjau secara singkat fitur inti dari kerangka kerja untuk memiliki harapan yang memadai ketika Anda akan mulai coding. Untuk tujuan itu, pindai melalui dokumentasi. Anda perlu memahami tentang kerangka kerja ini secara umum. Apakah itu hanya lapisan tampilan, sepenuhnya matang, atau sesuatu di antaranya?

Jika Anda memiliki pengalaman yang kaya sebelumnya dengan kerangka kerja lain, proses ini mudah dan cepat. Cari topik berikut dalam dokumentasi: templating, manajemen status, komunikasi HTTP, pemrosesan dan validasi formulir, dan perutean. Itu adalah hal sehari-hari yang Anda lakukan sebagai pengembang. Tidak semua ini dapat disajikan dalam kerangka inti, atau mungkin ada beberapa pendekatan yang berbeda untuk masalah tertentu.

Mari kita sentuh opsi populer secara singkat.

Kita akan mulai dengan React dan Vue. Mereka tidak benar-benar kerangka kerja; mereka hanya mewakili lapisan tampilan aplikasi Anda. Ini berarti semua bagian lain—komunikasi HTTP, validasi formulir, dll.—terserah Anda.

Seperti yang telah saya sebutkan sebelumnya, itu mungkin pedang bermata dua. Pada akhirnya, Anda akhirnya akan membangun kerangka kerja kustom Anda sendiri. Keduanya memiliki ekosistem perpustakaan untuk memberikan solusi untuk masalah yang paling umum, tetapi struktur keseluruhan akan bervariasi dari proyek ke proyek.

BEJ React selalu membuat saya ngeri. Aku harus terbiasa. Namun templating Vue sangat bagus, terutama jika Anda berasal dari Angular.

Di sisi lain, Ember memiliki hampir segalanya. Cukup mengejutkan, inti Ember tidak menyediakan pemrosesan formulir tingkat lanjut. Itu hanya memiliki beberapa pembantu masukan dan hanya itu. Ini sangat berpendirian dan bahkan memiliki lapisan datanya sendiri. Semuanya harus dilakukan "cara Ember."

Jika Anda memiliki latar belakang dalam kerangka kerja lain atau JavaScript secara umum, Anda mungkin merasa frustrasi karena Ember menggunakan model objeknya sendiri. Kelas ES2015 standar tidak banyak digunakan, seperti yang dinyatakan dalam dokumentasinya. Anda mungkin menemukan diri Anda menetapkan nilai secara langsung ke sebuah properti dan Ember mengeluhkannya.

Hal lain yang sangat berbeda dari kerangka kerja lain adalah Ember Data. Ini adalah lapisan data untuk aplikasi Ember. Anda dapat memikirkannya seperti semacam ORM untuk front-end. Anda membuat model dan memetakan hubungan di antara mereka.

Sekarang, jika server Anda menggunakan JSON API (ini adalah spesifikasi untuk mengimplementasikan API JSON), Anda berada di tempat yang baik dengan Ember, tetapi sayangnya, sebagian besar server tidak. Jadi, Anda harus menulis adaptor dan serializer khusus. Namun, jika Anda melakukan sesuatu dengan cara Ember, itu mungkin sangat produktif. Itu hanya memiliki kurva belajar yang curam.

Angular 2 adalah kerangka kerja yang kaya fitur. Ini dikirimkan dengan banyak modul seperti Ember, jadi Anda memiliki banyak alat yang siap digunakan. Namun karena Angular ditujukan untuk aplikasi besar, Angular mempromosikan TypeScript, yang mungkin memicu beberapa resistensi sebelum Anda mencobanya.

Hal penting lainnya adalah penggunaan berat yang dapat diamati dari perpustakaan Rx, yang sangat bagus. Anda dapat mewakili hampir semua hal sebagai yang dapat diamati dan menerapkan operasi tingkat tinggi seperti peta, filter, dll. Jika Anda telah menggunakan Lodash atau Garis Bawah, Rx adalah jenis yang sama tetapi pada steroid.

Berikut adalah ringkasan fitur inti dari empat kerangka kerja yang kita bahas dalam artikel ini:

Semua fitur yang kami ulas secara singkat tidak berguna jika Anda perlu membakar lilin di kedua ujungnya untuk menggunakannya secara efektif—yang merupakan poin berikutnya.

Kegunaan

Jika pada titik ini Anda masih memiliki antusiasme untuk kerangka pilihan Anda, langkah selanjutnya adalah mengotori tangan Anda.

Mungkin kerangka kerja ini cocok untuk Anda karena latar belakang Anda. Mungkin ini sedikit berbeda dan menantang Anda dalam beberapa hal. Anda belum tahu, dan tidak ada jumlah membaca atau menonton tutorial yang akan membantu sampai Anda mencobanya sendiri.

Cara terbaik untuk merasakan kerangka kerja adalah dengan menggunakannya di beberapa proyek mini. Ini memberi Anda kesempatan untuk memecahkan masalah sehari-hari yang disebutkan di atas dengan kerangka kerja yang diberikan.

Saat mengerjakan sebuah proyek, luangkan waktu Anda dan renungkan apakah Anda produktif atau tidak. Seberapa mudah untuk mencapai hasil yang diinginkan? Apakah Anda harus mencari perpustakaan eksternal? Mungkin Anda memerlukan beberapa plugin dari komunitas. Apakah ada struktur atau pedoman konvensional dalam konteks kerangka kerja? Mungkin ada CLI untuk mempercepat proses pengembangan. Pada langkah ini, Anda mengumpulkan pengalaman dasar sehingga Anda dapat memikirkan seperti apa jadinya jika Anda menggunakan kerangka kerja ini untuk proyek yang akan datang atau bahkan mentransisikan yang sudah ada.

Ember dianggap sebagai kerangka kerja yang sangat produktif, setidaknya untuk pengguna intinya. Muncul dengan CLI, yang sangat membantu. Anda dapat membuat rute, pengontrol, komponen, dan model dengan rangkaian pengujian mereka sendiri. Melakukan semua itu secara manual adalah tugas yang membosankan. Menghasilkan proyek baru juga dimungkinkan. Ini akan membuat struktur folder dasar, menginstal paket yang diperlukan, membangun alat, lingkungan pengujian, dll. Jika Anda belum pernah menggunakan CLI sedemikian rupa, Anda akan sangat senang. Tapi, seperti yang saya sebutkan sebelumnya, Ember sangat berpendirian; terlepas dari semua kebaikan itu, Anda mungkin merasa frustrasi ketika mencoba menyelesaikan tugas-tugas umum.

Sekarang untuk React dan Vue, mereka memiliki semacam CLI, create-react-app dan vue-cli. Tetapi selain menghasilkan proyek awal dengan beberapa opsi, mereka tidak menawarkan banyak dibandingkan dengan Ember atau Angular. Dapat dimengerti karena keduanya mewakili lapisan tampilan. Jika Anda menyukai alur kerja yang disesuaikan, eksperimen, atau struktur yang berbeda berdasarkan proyek ke proyek, maka Anda berada di tempat yang baik. Untuk beberapa pengembang, fleksibilitas adalah kunci yang melekat pada penggunaan React atau Vue.

Angular 4 hadir dengan CLI seperti yang dilakukan Ember. Anda dapat menghasilkan komponen, arahan, layanan, dll. Ini juga menghasilkan struktur awal untuk aplikasi, jadi Anda hanya perlu khawatir tentang produk. Lingkungan pengujian sangat bagus karena, dengan setiap bagian aplikasi yang dihasilkan, rangkaian pengujian berada di dekatnya (secara harfiah). Selain itu, TypeScript mungkin memberikan peningkatan produktivitas yang nyata. Inilah alasannya:

Berapa kali Anda menemukan kode dengan garis seperti ini…

 function doSomething(someData) { // do something }

…dan bertanya-tanya apa someData itu, properti apa yang seharusnya dimilikinya, fungsi apa yang harus disediakannya, dan apa perilakunya? Dengan TypeScript, Anda menentukan tipe dan mengharapkan data yang sesuai. Ini dapat melangkah lebih jauh jika Anda menggunakan beberapa IDE dengan dukungan TypeScript. Anda dapat menjelajahi berbagai bagian aplikasi dengan mudah.

Kami belum menyentuh IDE tetapi, untuk sebagian besar kerangka kerja populer, ada beberapa plugin di luar sana, yang membuat pengembangan menjadi sangat mudah. WebStorm, misalnya, dikirimkan dengan dukungan bawaan untuk Angular, React, dan Vue.

Kemudahan Integrasi (dengan Perpustakaan Lain)

Last but not least, ini dapat dianggap sebagai bagian dari kegunaan, tetapi sangat penting sehingga memiliki bagiannya sendiri.

Tidak peduli seberapa kaya fitur kerangka kerja yang Anda pilih, kemungkinan Anda akan menghadapi masalah di mana alat tambahan diperlukan. Ada perpustakaan hebat di luar sana yang berfokus pada satu masalah, baik itu manipulasi DOM, pemrosesan data, pemformatan waktu, pengeditan teks kaya, dll. Jika Anda mencoba mengintegrasikan salah satunya dan menghabiskan waktu berjam-jam untuk itu setiap saat, mungkin itu bukan pilihan yang optimal .

Menguji ini sangat mudah. Anda dapat dengan cepat membuat beberapa skenario imajiner di mana Anda memerlukan perpustakaan tertentu. Lihatlah proyek-proyek masa lalu Anda; alat apa yang telah Anda gunakan dan dalam skenario apa? Kemungkinan Anda akan mengalami situasi yang sama lagi dan Anda ingin bersiap untuk itu, atau setidaknya memiliki harapan.

Tidak semua perpustakaan di luar sana mendukung TypeScript. Karena Angular banyak menggunakannya, beberapa kebaikan TypeScript mungkin hilang saat menggunakan perpustakaan semacam itu. Tentu saja, Anda dapat menemukan solusi, tetapi ini sedikit lebih merepotkan. Karena popularitas Angular, Anda dapat mengintegrasikan instruksi pada halaman perpustakaan itu sendiri.

Untuk Vue dan React, Anda bertanggung jawab untuk hampir semua hal, dan menggunakan perpustakaan lain tidak terkecuali. Jika Anda menggunakan Webpack atau alat build serupa, Anda dapat langsung merujuk ke pustaka yang diinstal menggunakan NPM. Saya merasa sedikit merepotkan bagi Vue untuk menggunakan plugin komunitas, terutama jika plugin tersebut juga mengandung logika antarmuka pengguna.

Ember memiliki EmberObserver, yang merupakan situs web plugin komunitas. Masing-masing dari mereka memiliki skor pada skala dari nol sampai sepuluh. Ini adalah tempat yang sangat bagus untuk mencari sesuatu yang Anda butuhkan. Jika Anda mengetik nama perpustakaan favorit Anda, seperti Lodash, Rx, atau Ramda, Anda akan menemukan plugin terkait mulai dari pembungkus sederhana hingga penulisan ulang lengkap. Tentu saja, ada repositori Awesome React dan Awesome Vue yang mengumpulkan sumber daya terkait, termasuk perpustakaan, tetapi menurut saya EmberObserver sangat berguna.

Berkomitmen pada Kerangka JavaScript

Memilih kerangka kerja JavaScript yang tepat adalah salah satu langkah terpenting untuk membuat proyek web Anda sukses. Apakah Anda sedang mengerjakan proyek kecil atau besar, apakah Anda bekerja sendiri atau dalam tim, masing-masing detail ini memainkan peran penting dalam menentukan kerangka kerja mana yang terbaik untuk proyek Anda (dan lebih sedikit kerangka kerja mana yang Anda pilih. ).

Adapun fitur inti dan kegunaan, saya telah membuat daftar poin yang akan mempengaruhi produktivitas pengembang dalam berbagai derajat. Kegunaan sangat rumit karena sangat bergantung pada pengalaman dan latar belakang Anda serta pada perusahaan atau organisasi tempat Anda bekerja.

Seiring waktu, kerangka kerja yang telah kita bahas dalam artikel ini dapat berkembang, popularitasnya dapat berubah, dan proyek yang cocok untuknya dapat berubah, tetapi artikel ini akan memberi Anda gambaran umum tentang di mana masing-masing kerangka kerja ini dapat bekerja paling baik.