Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Library dan Framework JavaScript Penting yang Harus Anda Ketahui

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

JavaScript telah ada selama lebih dari 20 tahun, dan ini adalah salah satu bahasa yang selalu berkembang. Bahasa ini telah mengalami pertumbuhan yang serba cepat akhir-akhir ini yang membuat saya bertanya-tanya apakah teknologi modern front-end JavaScript yang terkenal hari ini akan relevan beberapa tahun kemudian.

Namun demikian, penting untuk berada di depan permainan dengan bekerja dengan tools dan framwork terbaru untuk alur kerja pengembangan yang lebih baik. Artikel ini membahas berbagai library JavaScript, framework, dan tools yang harus Anda pertimbangkan untuk dipelajari saat ini.

Pembukaan

Lingkungan JavaScript telah berkembang pesat. Memiliki ekosistem library, framework, tools, manajer paket dan bahasa baru yang dikompilasi ke JavaScript.  Menariknya, npm, yang merupakan manajer paket de facto untuk JavaScript, juga merupakan perangkat lunak registri terbesar di dunia. Berikut adalah kutipan dari sebuah posting yang diterbitkan di Linux.com kembali pada bulan Januari 2017. 

Pada lebih dari 350.000 paket, registri npm berisi lebih dari dua kali lipat paket registri terpadat berikutnya (yang merupakan repositori Apache Maven). Sebenarnya, saat ini merupakan paket registry terbesar di dunia. 

Berkembang pesat dalam delapan bulan, dan saat ini ada sekitar 500.000 paket di registri npm. Merupakan pertumbuhan besar dibandingkan dengan repositori paket lainnya.

A comparison of different package registries based on number of modules
Sumber: ModuleCounts.com

Sebagai pengembang front-end JavaScript, penting untuk mengikuti tools dan library modern JavaScript.  Ketika sebuah teknologi menjadi populer, permintaan akan hal itu tinggi, yang pada gilirannya berarti lebih banyak pekerjaan pengkodean yang dibayar dengan gaji tinggi di industri ini. Jadi, saya telah mengumpulkan daftar teknologi JavaScript populer yang menurut saya harus Anda ketahui.

Library

Library adalah bagian kode yang dapat digunakan kembali yang menawarkan fungsionalitas tertentu. Merupakan kumpulan fungsi, objek, dan kelas yang dapat Anda gunakan di aplikasi Anda.  Library mengabstraksi lapisan yang berbeda sehingga Anda tidak perlu khawatir dengan detail implementasinya.

Anda dapat memanggil sebuah fungsi library dan menyebarkannya beberapa parameter, dan library menjalankannya dan mengembalikan kontrolnya kembali kepada Anda. Namun, tidak ada kendala struktural yang membatasi bagaimana Anda menggunakan library. Library JavaScript yang populer meliputi:

React

React adalah library JavaScript yang dibangun oleh para pengembang Facebook dan Instagram. React terpilih sebagai teknologi yang paling dicintai di kalangan pengembang, menurut Stack Overflow Survey 2017.  React juga memegang kredit karena menjadi proyek JavaScript paling populer berdasarkan jumlah bintang GitHub.

Jadi mengapa React mendapatkan diperhatikan oleh pengembang? Dengan React, kita dapat membuat UI interaktif menggunakan pendekatan deklaratif di mana Anda dapat mengontrol status aplikasi dengan mengatakan "tampilan seharusnya terlihat seperti ini". Menggunakan model berbasis komponen dimana komponen merupakan elemen UI yang dapat digunakan kembali dan masing-masing komponen memiliki keadaan tersendiri.

React a JavaScript library for building interactive views

React menggunakan DOM Virtual sehingga Anda tidak perlu khawatir tentang memanipulasi DOM secara langsung. Fitur penting lainnya dari React termasuk aliran data satu arah, sintaks opsional JSX, dan tools perintah-baris untuk membuat proyek React dengan konfigurasi zero build.

Jika Anda percaya bahwa React merupakan sesuatu yang bagus dan ingin mempelajarinya, silakan cek Materi React untuk Pemula seri tutorial.

jQuery

jQuery adalah library yang membuat JavaScript lebih mudah dipelajari dan manipulasi DOM lebih mudah dari sebelumnya. Kurva pembelajaran lembut jQuery dan sintaks yang mudah memunculkan generasi pengembang baru client-side. Beberapa tahun yang lalu, jQuery dianggap sebagai solusi solid untuk membangun situs web yang tangguh dengan dukungan lintas browser. Fitur utama jQuery seperti manipulasi DOM yang didasarkan pada penyeleksi CSS, penanganan event, dan membuat AJAX mendapatkan popularitasnya.

jQuery library for DOM manipulation using JavaScript

Namun, semuanya telah berubah, dan lingkungan JavaScript terus berkembang. Beberapa fitur jQuery telah dimasukkan ke dalam spesifikasi ECMAScript yang lebih baru. Selain itu, library dan framework baru yang digunakan saat ini memiliki cara pengikatan DOM yang asli, dan karenanya teknik manipulasi DOM biasa tidak diperlukan lagi. Popularitas jQuery sedang menurun, tapi saya tidak melihatnya menghilang dalam waktu dekat.

D3: Data-Driven Documents

D3 (atau D3.js) adalah library JavaScript yang bagus untuk menghasilkan visualisasi interaktif dengan menggunakan standar web seperti SVG, HTML, dan CSS. Tidak seperti library visualisasi lainnya, D3 menawarkan kontrol yang lebih baik terhadap hasil visual akhir.

D3 bekerja dengan mengikat data ke DOM dan kemudian melakukan transformasi ke dokumen. Memiliki ekosistem tersendiri, yang terdiri dari plugin dan library yang memperluas fungsionalitas dasarnya.  Library sudah ada sejak 2011, dan memiliki banyak dokumentasi dan tutorial yang dapat membantu Anda memulai mempelajrinya.

D3 interactive visualization for the web

Jika Anda ingin membuat visualisasi sederhana tanpa menginvestasikan terlalu banyak waktu di dalamnya, Anda harus memeriksa Chart.js. Kami memiliki rangkaian pengantar di Chart.js yang mencakup sebagian besar visualisasi yang dapat Anda buat dengan Chart.js

Frameworks

Framework memiliki arsitektur yang menentukan aliran kontrol dalam aplikasi Anda. Framework ini menggambarkan kerangka dan memberitahu Anda bagaimana segala sesuatu harus diatur.  Fungsi dasar yang dibutuhkan untuk menjalankan aplikasi juga disediakan untuk Anda. Selain itu, Anda harus mengikuti prinsip dan pola desain framework.  Perbedaan antara framework dan library adalah jika Anda memanggil library, maka framework memanggil Anda.

Framework bisanya terdiri dari banyak library dan memiliki tingkat abstraksi yang lebih tinggi. Fungsionalitas seperti penanganan event, membuat panggilan AJAX, template dan pengikatan data, dan pengujian dibangun ke dalam framework.

Angular

AngularJS pernah menjadi teknologi JavaScript terpopuler di kalangan pengembang front-end. Ini didukung oleh Google dan komunitas individu dan perusahaan. Terlepas dari kepopulerannya, AngularJS memiliki kekurangan tersendiri. Tim Angular menghabiskan dua tahun mengerjakan versi Angular yang lebih baru, yang akhirnya dirilis pada bulan September 2016.

Angular framework for mobile and desktop

Peluncuran Angular 2 adalah kelanjutan dari AngularJS. Beberapa fitur dari Angular 2 meliputi:

  • TypeScript over JavaScript sebagai bahasa default
  • Arsitektur berbasis komponen
  • Meningkatkan kinerja pada platform seluler dan web.
  • Pilihan tooling dan scaffolding yang lebih baik

Namun, peningkatan dari Angular 1.x ke Angular 2 mahal karena Angular 2 adalah dua hal yang sama sekali berbeda. Itulah salah satu alasan mengapa Angular 2 tidak mengalami tingkat adopsi yang sama dengan pendahulunya. Tapi Angular and AngularJS terus menjadi salah satu teknologi yang paling umum digunakan menurut Stack Overflow (2017). Proyek Angular memiliki sekitar 28.000 bintang di GitHub.

Vue.js

Vue.js adalah frmaework JavaScript ringan yang telah menjadi tren pada tahun ini. Merupakan framework JavaScript terpopuler di GitHub dalam hal jumlah bintang GitHub.  Vue diklaim sebagai framework yang kurang berpendirian dan mudah bagi pengembang untuk mengejar ketinggalan. Sintaks template berbasis HTML Vue mengikat DOM yang diberikan ke data instance.

Vuejs The progressive JavaScript framework

Framework menawarkan pengalaman React-like dengan komponen DOM Virtual dan dapat digunakan kembali yang dapat Anda gunakan untuk membuat widget dan keseluruhan aplikasi web. Selain itu, Anda juga bisa menggunakan sintaks JSX untuk menulis fungsi render secara langsung.  Ketika keadaan berubah, Vue.js menggunakan sistem reaktivitas untuk menentukan apa yang telah berubah dan merender jumlah komponen minimal. Vue.js juga mendukung integrasi library lain ke dalam framework tanpa banyak kerumitan.

Ember.js

Ember.js adalah framework front-end berdasarkan pola Model-View-ViewModel (MVVM). Ini mengikuti konvensi mengenai pendekatan konfigurasi yang populer di antara framework sisi server seperti Ruby on Rails dan Laravel.  Ember.js menggabungkan idiom dan praktik terbaik ke dalam framework sehingga Anda bisa mendapatkan aplikasi dan berjalan tanpa banyak kendala.

Emberjs a framwork for creating ambitious web apps

Tumpukan Ember biasanya terdiri dari:

  • Ember CLI: Menyediakan opsi perataan dasar dan mendukung ratusan add-on.
  • Data Ember: Library ketekunan data yang dapat dikonfigurasi untuk bekerja dengan server back end.
  • Ember Inspector: Ekstensi tersedia untuk Chrome dan Firefox.
  • Cairan Api: Add-on untuk transisi dan animasi.

Tools

Tool merupakan kumpulan rutinitas yang membantu Anda dalam proses pengembangan. Tidak seperti library, tool biasanya menjalankan tugas pada kode klien.  Dibutuhkan kode Anda sebagai masukan, melakukan tugas di atasnya, dan kemudian mengembalikan sebuah output. Tools yang umum digunakan mencakup transpiler dan build tools, asset minifiers, module bundlers, dan scaffolding tools.

Tools: General-Purpose Task Runners

General-purpose task runners adalah tool yang digunakan untuk mengotomatisasi tugas berulang tertentu. General-purpose task runners yang populer meliputi:

Gulp

Gulp merupakan toolkit JavaScript yang digunakan sebagai penjalan tugas dan sebagai sistem pengembangan dalam pengembangan web. Kompilasi, kode minification, optimasi gambar, testing unit, linting dll adalah tugas berulang yang harus otomatis. Gulp membuat proses penulisan tugas menjadi lebih mudah, bahkan bagi orang yang kurang familiar dengan JavaScript.

Gulp menggunakan jaringan pipa untuk mengalirkan data dari satu plugin ke plugin lainnya, dan hasil akhirnya dikirim ke folder tujuan. Gulp berkinerja lebih baik dibandingkan dengan Grunt karena tidak membuat file sementara untuk menyimpan hasil lanjutan, yang menghasilkan lebih sedikit panggilan I/O.

Automate and enhance your workflow using Gulp

Grunt

Grunt adalah penjalan tugas dan tool otomasi untuk JavaScript. Grunt memiliki antarmuka baris perintah yang memungkinkan Anda menjalankan tugas kustom yang didefinisikan dalam file bernama Gruntfile. Grunt memiliki ribuan plugin untuk dipilih, yang seharusnya mencakup sebagian besar tugas berulang umum yang Anda hadapi. Dengan Grunt, Anda dapat menjalankan semua tugas di bawah satu perintah, membuat hidup Anda lebih mudah.

Grunt the JavaScript task runner

npm

Gulp dan Grunt mengharuskan Anda meluangkan waktu untuk belajar dan menguasai tool baru, yang membutuhkan waktu. Memperkenalkan dependensi tambahan ke dalam proyek Anda dapat dihindari dengan memilih alternatif yang sudah dibundel dengan Node.js. Meskipun npm lebih dikenal sebagai manajer paket, skrip npm dapat digunakan untuk melakukan sebagian besar tugas di atas.

npm task runner

Tools: Testing (Pengujian)

Pengujian adalah proses untuk memvalidasi dan memverifikasi bahwa aplikasi memenuhi persyaratan bisnis dan teknis yang diharapkan. Pendekatan Test-Driven Development juga membantu menemukan bug dan oleh karena itu harus diperlakukan sebagai bagian integral dari tumpukan pengembangan front-end modern.

Jest

Jest adalah framework pengujian yang relatif baru yang ditulis oleh Facebook dan diterima dengan baik oleh komunitas Reaktan. Ada kesalahpahaman umum bahwa Jest dirancang khusus untuk bekerja dengan React; Namun, menurut Dokumentasi Jest:

Meskipun Jest dapat dianggap sebagai pelacak uji React-specific, sebenarnya ini adalah platform pengujian universal, dengan kemampuan untuk menyesuaikan dengan library atau framework JavaScript. Anda dapat menggunakan Jest untuk menguji kode JavaScript.

Keuntungan terbesar menggunakan Jest di atas suite uji lainnya adalah Anda memerlukan konfigurasi nol atau minimal untuk memulai tes tulis. Framework ini memiliki library penegasan built-in dan mendukung penggunaan fungsi pura-pura atau mata-mata.

Delightful JavaScript testing using Jest

Jest memiliki fitur yang disebut pengujian snapshot yang memungkinkan Anda memastikan bahwa UI aplikasi tidak berubah secara tidak terduga. Pengembang di Facebook dan kontributor lainnya telah banyak menuangkan proyek ke proyek ini baru-baru ini, jadi tidak mengherankan jika Jest ternyata merupakan framework pengujian paling populer untuk JavaScript di tahun-tahun mendatang.

Mocha

Mocha adalah framework pengujian JavaScript yang dilengkapi dukungan browser, dukungan async termasuk perjanjian, laporan cakupan uji, dan API JavaScript untuk menjalankan tes. Mocha sering dipasangkan dengan library pernyataan seperti Chai, should.js, expect.js, atau lebih baik-menegaskan karena tidak memiliki library asertifikasi sendiri.

Mocha test runner and testing framework

Jasmine

Jasmine adalah framework pengujian berbasis perilaku untuk JavaScript. Jasmine bertujuan untuk menjadi browser, platform, dan deretan tes framework-independent.  Jasmine memiliki library assersi sendiri yang disebut matchers yang memberikan sintaks yang bersih dan mudah dibaca. Jasmine tidak memiliki penjalan uji built-in, dan Anda mungkin harus menggunakan penjalan tes generik seperti Karma.

Jasmine test runner and testing framework

Rangkuman

JavaScript, bahasa web, tetap relevan sejak awal tahun 1995. Mungkin akan tetap seperti itu selama browser tidak memutuskan untuk membuangnya untuk bahasa lain. Meskipun ada banyak bahasa lain yang dikompilasi ke JavaScript, tidak ada bahasa scripting lain yang akan menggantikan JavaScript di masa yang akan datang. Mengapa? Karena JavaScript sudah berkembang terlalu populer untuk diganti.

Bahasa bukan tanpa kurva belajar, dan ada banyak framework dan library untuk membuat Anda tetap. Jika Anda mencari sumber daya tambahan untuk dipelajari atau digunakan dalam pekerjaan Anda, lihat apa yang tersedia di Envato Market.

Lingkungan JavaScript pasti berkembang, yang terbukti dari tren saat ini dalam pengembangan web. Library dan framework yang lama telah diganti dengan teknologi baru.  jQuery, yang dulunya adalah library JavaScript yang paling disukai, mengalami penurunan dalam hal daya tarik, penggunaan, dan popularitas. Generasi baru library front-end, framework, dan tools mulai berkembang dan mendapat penerimaan universal.

Beradaptasi dengan tren baru dalam teknologi juga memiliki manfaat. Pekerjaan pengodean yang memerlukan React memiliki beberapa gaji tertinggi di industri ini, dengan gaji rata-rata sebesar $ 105.000 di A.S. menurut Stack Overflow (2016). Jadi Anda perlu terus belajar dan bereksperimen dengan tools dan framework terbaru untuk mendapatkan yang terbaik dari JavaScript.

Jika Anda pikir saya telah melewatkan framework JavaScript, library atau tools yang layak disebutkan, beri tahu saya melalui komentar.

Lebih Lanjut

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.