Cara menggunakan framework javascript

JavaScript telah ada selama lebih dari 20 tahun, dan ini adalah salah satu bahasa yang selalu berkembang. Bahasa ini telah mengalami pertumbuhan yang begitu pesat akhir-akhir ini sehingga membuat saya bertanya-tanya apakah teknologi front-end JavaScript modern yang populer saat ini akan relevan dalam beberapa tahun.

Namun, penting untuk tetap menjadi yang terdepan dengan menggunakan alat dan kerangka kerja terbaru untuk alur kerja pengembangan yang lebih baik. Artikel ini membahas berbagai pustaka, kerangka kerja, dan alat JavaScript yang harus Anda pertimbangkan untuk dipelajari saat ini

Pembukaan

Lingkungan JavaScript telah berkembang pesat. Ini memiliki ekosistem perpustakaan, kerangka kerja, alat, pengelola paket, dan bahasa baru yang dikompilasi ke dalam JavaScript. Menariknya, npm, yang merupakan pengelola paket de facto untuk JavaScript, juga merupakan perangkat lunak registri terbesar di dunia. Berikut ini adalah kutipan dari posting yang diterbitkan di Linux. com kembali pada Januari 2017.  

Lebih dari 350. 000 paket, registri npm berisi lebih dari dua kali paket registri terpadat berikutnya (yang merupakan repositori Apache Maven). Faktanya, saat ini merupakan paket registri terbesar di dunia.  

Tumbuh pesat dalam delapan bulan, dan saat ini ada sekitar 500. 000 paket dalam registri npm. Merupakan pertumbuhan yang sangat besar dibandingkan dengan repositori paket lainnya

Sebagai pengembang front-end JavaScript, penting untuk mengikuti alat dan pustaka JavaScript modern. Ketika suatu teknologi menjadi populer, permintaan untuk itu tinggi, yang pada gilirannya berarti lebih banyak pekerjaan pengkodean bergaji tinggi di industri. Jadi, saya telah menyusun daftar teknologi JavaScript populer yang menurut saya harus Anda ketahui

Perpustakaan

Perpustakaan adalah potongan kode yang dapat digunakan kembali yang menawarkan fungsionalitas tertentu. Merupakan kumpulan fungsi, objek, dan kelas yang dapat Anda gunakan dalam aplikasi Anda. Pustaka mengabstraksi lapisan yang berbeda sehingga Anda tidak perlu khawatir tentang detail penerapannya

Anda dapat memanggil fungsi pustaka dan meneruskannya beberapa parameter, dan pustaka mengeksekusinya dan mengembalikan kendali kembali kepada Anda. Namun, tidak ada batasan struktural yang membatasi cara Anda menggunakan perpustakaan. Pustaka JavaScript populer termasuk

Reaksi

React adalah perpustakaan JavaScript yang dikembangkan oleh pengembang Facebook dan Instagram. React terpilih sebagai teknologi yang paling dicintai di kalangan developer, menurut Survei Stack Overflow 2017. React juga mendapat penghargaan sebagai proyek JavaScript paling populer berdasarkan jumlah bintang GitHub

Jadi mengapa React diperhatikan oleh pengembang? . Menggunakan model berbasis komponen dimana komponen adalah elemen UI yang dapat digunakan kembali dan setiap komponen memiliki statusnya masing-masing

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

Jika Anda percaya bahwa React adalah hal yang baik dan ingin mempelajarinya, silakan lihat seri tutorial React Materials for Beginners

jQuery

jQuery adalah pustaka yang membuat JavaScript lebih mudah dipelajari dan manipulasi DOM lebih mudah dari sebelumnya. Kurva pembelajaran lembut jQuery dan sintaks yang mudah melahirkan generasi baru pengembang sisi klien. Beberapa tahun yang lalu, jQuery dianggap sebagai solusi yang solid untuk membangun situs web yang kuat dengan dukungan lintas browser. Fitur utama jQuery seperti manipulasi DOM berdasarkan pemilih CSS, penanganan event, dan membuat AJAX mendapatkan popularitas

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

D3. Dokumen Berbasis Data

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

D3 bekerja dengan mengikat data ke DOM dan kemudian melakukan transformasi ke dokumen. Ini memiliki ekosistemnya sendiri, yang terdiri dari plugin dan pustaka yang memperluas fungsionalitas dasarnya. Pustaka ini sudah ada sejak 2011, dan memiliki banyak dokumentasi dan tutorial yang dapat membantu Anda mulai mempelajarinya

Jika Anda ingin membuat visualisasi sederhana tanpa menghabiskan terlalu banyak waktu di dalamnya, Anda harus memeriksa Bagan. js. Kami memiliki jaringan rujukan di Chart. js yang mencakup sebagian besar visualisasi yang dapat Anda buat dengan Bagan. js

Kerangka kerja

Framework memiliki arsitektur yang menentukan alur kontrol dalam aplikasi Anda. Kerangka kerja ini menjelaskan kerangka kerja dan memberi tahu Anda bagaimana semuanya harus diatur. Fungsi dasar yang diperlukan untuk menjalankan aplikasi juga disediakan untuk Anda. Selain itu, Anda harus mengikuti prinsip dan pola desain kerangka. Perbedaan antara framework dan library adalah jika Anda memanggil library, framework akan memanggil Anda

Framework biasanya terdiri dari banyak library dan memiliki tingkat abstraksi yang lebih tinggi. Fungsionalitas seperti penanganan peristiwa, membuat panggilan AJAX, templat dan pengikatan data, serta pengujian dibangun ke dalam kerangka kerja

Sudut

AngularJS dulunya adalah teknologi JavaScript paling populer di kalangan pengembang front-end. Ini didukung oleh Google dan komunitas individu dan bisnis. Terlepas dari popularitasnya, AngularJS memiliki kekurangannya sendiri. Tim Angular menghabiskan dua tahun mengerjakan versi Angular yang lebih baru, yang akhirnya dirilis pada September 2016

Peluncuran Angular 2 merupakan kelanjutan dari AngularJS. Beberapa fitur Angular 2 termasuk

• TypeScript melalui JavaScript sebagai bahasa default
• Arsitektur berbasis komponen
• Tingkatkan kinerja pada platform seluler dan web
• Opsi perkakas dan perancah yang lebih baik

Namun, peningkatan dari Angular 1. x ke Angular 2 mahal karena Angular 2 adalah dua hal yang sangat berbeda. Itulah salah satu alasan mengapa Angular 2 belum mengalami tingkat adopsi yang sama seperti pendahulunya. Tetapi menurut Angular dan AngularJS terus menjadi salah satu teknologi yang paling umum digunakan. Proyek Angular memiliki sekitar 28. 000 bintang di GitHub

Melihat. js

Melihat. js adalah framework JavaScript ringan yang sedang menjadi tren tahun ini. Apakah kerangka kerja JavaScript paling populer di GitHub dalam hal bintang GitHub. Vue diklaim sebagai framework yang kurang asertif dan mudah dikejar developer. Sintaks templat berbasis HTML Vue mengikat DOM yang diberikan ke data instan

Framework ini menawarkan pengalaman seperti React dengan Virtual DOM dan komponen yang dapat digunakan kembali yang dapat Anda gunakan untuk membuat widget dan seluruh aplikasi web. Selain itu, Anda juga dapat 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 komponen dalam jumlah minimal. Melihat. js juga mendukung integrasi library lain ke dalam framework tanpa banyak kerumitan

Keranjang. js

Keranjang. js adalah framework front-end berdasarkan pola Model-View-ViewModel (MVVM). Ini mengikuti konvensi pendekatan konfigurasi yang populer di antara kerangka kerja sisi server seperti Ruby on Rails dan Laravel. Keranjang. js menggabungkan idiom dan praktik terbaik ke dalam framework sehingga Anda dapat mengaktifkan dan menjalankan aplikasi tanpa terlalu banyak kesulitan

Tumpukan Ember biasanya terdiri dari

• CLI Ember. Menyediakan opsi leveling dasar dan mendukung ratusan add-on
• Data Batubara. Pustaka persistensi data yang dapat dikonfigurasi untuk bekerja dengan server ujung belakang
• Inspektur Ember. Ekstensi tersedia untuk Chrome dan Firefox
• Api Cair. Pengaya untuk transisi dan animasi

Peralatan

Alat adalah sekelompok rutinitas yang membantu Anda dalam proses pengembangan. Tidak seperti perpustakaan, alat biasanya menjalankan tugas pada kode klien. Dibutuhkan kode Anda sebagai input, melakukan tugas di atasnya, dan kemudian mengembalikan output. Alat yang biasa digunakan termasuk transpiler dan alat bangun, minifier aset, bundler modul, dan alat scaffolding

Peralatan. Pelari Tugas Tujuan Umum

Pelari tugas tujuan umum adalah alat yang digunakan untuk mengotomatiskan tugas berulang tertentu. Pelari tugas tujuan umum yang populer termasuk

Meneguk

Gulp adalah toolkit JavaScript yang digunakan sebagai pelari tugas dan sebagai sistem pengembangan dalam pengembangan web. Kompilasi, minifikasi kode, pengoptimalan gambar, pengujian unit, linting, dll. adalah tugas berulang yang harus diotomatisasi. Gulp membuat proses menulis 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 bekerja lebih baik dibandingkan dengan Grunt karena tidak membuat file sementara untuk menyimpan hasil yang diperluas, yang menghasilkan lebih sedikit panggilan I/O

Mendengus

Grunt adalah pelari tugas dan alat otomatisasi untuk JavaScript. Grunt memiliki antarmuka baris perintah yang memungkinkan Anda menjalankan tugas khusus yang ditentukan dalam file bernama Gruntfile. Grunt memiliki ribuan plugin untuk dipilih, yang mencakup sebagian besar tugas berulang umum yang Anda temui. Dengan Grunt, Anda dapat menjalankan semua tugas di bawah satu perintah, membuat hidup Anda lebih mudah

npm

Gulp dan Grunt mengharuskan Anda meluangkan waktu untuk mempelajari dan menguasai alat 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 pengelola paket, skrip npm dapat digunakan untuk melakukan sebagian besar tugas di atas

Peralatan. 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 karenanya harus diperlakukan sebagai bagian integral dari tumpukan pengembangan front-end modern

Bersenda gurau

Jest adalah kerangka pengujian yang relatif baru yang ditulis oleh Facebook dan diterima dengan baik oleh komunitas React. Ada kesalahpahaman umum bahwa Jest dirancang khusus untuk bekerja dengan React;

Meskipun Jest dapat dianggap sebagai pelacak pengujian React-spesifik, ini sebenarnya adalah platform pengujian universal, dengan kemampuan untuk beradaptasi dengan pustaka atau kerangka kerja JavaScript apa pun. Anda dapat menggunakan Jest untuk menguji kode JavaScript

Keuntungan terbesar menggunakan Jest dibandingkan rangkaian pengujian lainnya adalah Anda memerlukan konfigurasi nol atau minimal untuk mulai menulis pengujian. Framework ini memiliki pustaka pernyataan bawaan dan mendukung penggunaan fungsi pura-pura atau mata-mata

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

Moka

Mocha adalah kerangka pengujian JavaScript yang dilengkapi dengan dukungan browser, dukungan asinkron termasuk kontrak, laporan cakupan pengujian, dan JavaScript API untuk menjalankan pengujian. Mocha sering dipasangkan dengan pustaka pernyataan seperti Chai, should. js, berharap. js, atau lebih baik menegaskan karena tidak memiliki perpustakaan pernyataan sendiri

Melati

Jasmine adalah kerangka pengujian berbasis perilaku untuk JavaScript. Jasmine bertujuan untuk menjadi rangkaian pengujian browser, platform, dan framework-independen. Jasmine memiliki pustaka pernyataannya sendiri yang disebut pencocokan yang menyediakan sintaks yang bersih dan mudah dibaca. Jasmine tidak memiliki test runner bawaan, dan Anda mungkin harus menggunakan test runner generik seperti Karma

Ringkasan

JavaScript, bahasa web, tetap relevan sejak awal 1995. Itu mungkin akan tetap seperti itu selama browser tidak memutuskan untuk membuangnya ke bahasa lain. Meskipun ada banyak bahasa lain yang dikompilasi ke JavaScript, tidak ada bahasa skrip lain yang akan menggantikan JavaScript dalam waktu dekat. Mengapa?

Bahasa bukannya tanpa kurva belajar, dan ada banyak kerangka kerja dan perpustakaan untuk membuat Anda terus maju. 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 terlihat dari tren saat ini dalam pengembangan web. Pustaka dan kerangka kerja lama telah diganti dengan teknologi baru. jQuery, yang pernah menjadi pustaka JavaScript yang paling disukai, telah mengalami penurunan daya tarik, penggunaan, dan popularitas. Generasi baru perpustakaan, kerangka kerja, dan alat front-end mulai berkembang dan mendapatkan penerimaan universal

Beradaptasi dengan tren baru dalam teknologi juga memiliki manfaat. Pekerjaan pengkodean yang membutuhkan React memiliki beberapa gaji tertinggi di industri ini, dengan gaji rata-rata $105. 000 di A. S. menurut Stack Overflow (2016). Jadi, Anda harus terus belajar dan bereksperimen dengan alat dan kerangka kerja terbaru untuk mendapatkan yang terbaik dari JavaScript

Jika menurut Anda saya melewatkan kerangka kerja, pustaka, atau alat JavaScript yang pantas disebutkan, beri tahu saya di komentar

Bagaimana JavaScript berjalan?

Adakah kerangka kerja JavaScript?

Aplikasi apa yang menggunakan JavaScript?

Apakah JavaScript cocok untuk pemula?