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

Perpustakaan dan Kerangka JavaScript yang Perlu Anda Ketahui

by
Length:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

JavaScript telah wujud selama 20+ tahun, dan ia adalah salah satu bahasa yang tidak pernah berhenti berkembang. Bahasa ini telah mengalami pertumbuhan pantas baru-baru ini yang membuat saya tertanya-tanya sama ada teknologi JavaScript terkini yang terkenal hari ini akan relevan beberapa tahun kemudian.

Walau bagaimanapun, penting untuk berada di hadapan permainan dengan bekerja dengan alat dan rangka kerja terkini untuk aliran kerja pembangunan yang lebih baik. Artikel ini meneroka pelbagai perpustakaan JavaScript, kerangka kerja, dan alat yang perlu anda pertimbangkan untuk belajar sekarang.

Pengenalan

Persekitaran JavaScript telah berkembang pesat. Ia mempunyai ekosistem perpustakaan, kerangka, alat, pengurus paket dan bahasa baru yang dikompil ke JavaScript. Menariknya, npm, yang merupakan pengurus pakej de facto untuk JavaScript, juga merupakan perisian perisian terbesar di dunia. Berikut adalah petikan daripada jawatan yang diterbitkan pada Linux.com pada Januari 2017.

Di lebih daripada 350,000 pakej, pendaftaran npm mengandungi lebih daripada dua kali ganda bungkusan pendaftaran yang paling ramai penduduk (yang merupakan repositori Apache Maven). Malah, ia kini merupakan registri pakej terbesar di dunia.

Maju lapan bulan, dan kini terdapat kira-kira 500,000 pakej dalam pendaftaran npm. Itu pertumbuhan besar berbanding dengan repositori pakej lain.

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

Sebagai pemaju JavaScript front-end, penting untuk bersaing dengan alat dan perpustakaan JavaScript moden. Apabila teknologi menjadi popular, permintaan untuknya tinggi, yang pada gilirannya bermakna lebih banyak pekerjaan pengkodan yang membayar gaji tertinggi dalam industri. Jadi saya telah mengumpulkan senarai teknologi JavaScript popular yang saya fikir anda harus sedar.

Perpustakaan

Perpustakaan adalah kod yang boleh diguna semula yang menawarkan fungsi tertentu. Ia adalah koleksi fungsi, objek, dan kelas yang boleh anda gunakan dalam aplikasi anda. Pustaka abstrak lapisan berbeza supaya anda tidak perlu bimbang tentang butiran pelaksanaannya.

Anda boleh memanggil fungsi perpustakaan dan lulus beberapa parameter, dan perpustakaan mengeksekusi dan mengembalikan semula kawalan kepada anda. Walau bagaimanapun, ia tidak meletakkan sebarang kekangan struktur yang menyekat bagaimana anda menggunakan perpustakaan. Perpustakaan JavaScript popular termasuk:

Bertindak

React adalah pustaka JavaScript yang dibina oleh pemaju Facebook dan Instagram. Reaktik dipilih sebagai teknologi yang paling dikasihi di kalangan pemaju, menurut Suruhanjaya Stack Overflow 2017. React juga memegang kredit sebagai projek JavaScript yang paling popular berdasarkan kiraan bintang GitHub.

Jadi mengapa React mendapat semua perhatian? Dengan React, dimungkinkan untuk membuat UI interaktif menggunakan pendekatan deklaratif di mana anda boleh mengawal keadaan aplikasi dengan mengatakan 'pandangan sepatutnya kelihatan seperti ini''. Ia menggunakan model berasaskan komponen di mana komponen boleh digunakan semula elemen UI dan setiap komponen mempunyai keadaan sendiri.

React a JavaScript library for building interactive views

React menggunakan DOM Virtual sehingga anda tidak perlu prihatin tentang memanipulasi DOM secara langsung. Ciri-ciri penting lain React termasuk aliran data sehala, sintaks JSX pilihan, dan alat baris arahan untuk membuat projek React dengan konfigurasi binaan kosong.

Sekiranya anda percaya bahawa React adalah perkara terbaik yang akan datang dan ingin belajar React, periksa kursus React Crash untuk siri tutorial Beginners.

jQuery

jQuery adalah perpustakaan yang menjadikan JavaScript lebih mudah didekati dan manipulasi DOM lebih mudah daripada sebelum ini. Keluk pembelajaran jQuery yang lembut dan sintaks yang mudah menimbulkan generasi pemaju pelanggan baru. Beberapa tahun yang lalu, jQuery dianggap sebagai penyelesaian yang kukuh untuk membina laman web yang mantap dengan sokongan merentas pelayar. Ciri teras jQuery seperti manipulasi DOM berdasarkan seleksi CSS, pengendalian acara, dan membuat panggilan AJAX memicu popularitinya.

jQuery library for DOM manipulation using JavaScript

Walau bagaimanapun, perkara telah berubah, dan persekitaran JavaScript telah berkembang dengan pesat. Beberapa ciri jQuery telah dimasukkan ke dalam spesifikasi ECMAScript yang lebih baru. Selain itu, perpustakaan dan rangka kerja baru yang digunakan hari ini mempunyai cara asli mengikat DOM, dan teknik DOM manipulasi biasa tidak diperlukan lagi. Populariti jQuery adalah penurunan, tetapi saya tidak melihatnya hilang dalam masa terdekat.

D3: Dokumen Dipacu Data

D3 (atau D3.js) adalah pustaka JavaScript yang kuat untuk menghasilkan visualisasi interaktif menggunakan standard web seperti SVG, HTML, dan CSS. Tidak seperti perpustakaan visualisasi lain, D3 menawarkan kawalan yang lebih baik ke atas hasil akhir visual.

D3 berfungsi dengan mengikat data ke DOM dan kemudian membuat transformasi ke dokumen tersebut. Ia juga mempunyai ekosistem sendiri, yang terdiri daripada pemalam dan perpustakaan yang memanjangkan fungsi asasnya. Perpustakaan telah wujud sejak tahun 2011, dan ia mempunyai banyak dokumentasi dan tutorial yang dapat membantu anda memulakannya.

D3 interactive visualization for the web

Jika anda ingin membuat visualisasi mudah tanpa melabur terlalu banyak masa di dalamnya, anda perlu menyemak Chart.js. Kami mempunyai siri pengenalan pada Chart.js yang merangkumi kebanyakan visualisasi yang anda boleh buat dengan Chart.js

Rangka Kerja

Rangka kerja mempunyai senibina yang menentukan aliran kawalan dalam permohonan anda. Kerangka ini menerangkan rangka dan memberitahu anda bagaimana segala sesuatu perlu dianjurkan. Fungsi asas yang diperlukan untuk mendapatkan aplikasi dan berjalan juga diberikan kepada anda. Selain itu, anda pasti mematuhi prinsip dan corak reka bentuk rangka kerja. Perbezaan antara kerangka dan perpustakaan adalah bahawa anda memanggil perpustakaan, sedangkan rangka kerja memanggil anda.

Rangka kerja sering terdiri daripada banyak perpustakaan dan mempunyai tahap abstraksi yang lebih tinggi. Fungsi seperti pengendalian peristiwa, membuat panggilan AJAX, template dan mengikat data, dan ujian dibina dalam rangka kerja.

Sudut

AngularJS pernah menjadi teknologi JavaScript yang paling popular di kalangan pemaju front-end. Ia disokong oleh Google dan komuniti individu dan syarikat. Walaupun populariti, AngularJS mempunyai bahagian kecacatan sendiri. Pasukan Angular menghabiskan dua tahun bekerja pada versi Angular yang lebih baru, yang akhirnya dikeluarkan pada September 2016.

Angular framework for mobile and desktop

Siaran Angular 2 adalah penulisan semula latar AngularJS. Beberapa ciri Angular 2 termasuk:

  • TypeScript melalui JavaScript sebagai bahasa lalai
  • seni bina berasaskan komponen
  • prestasi yang lebih baik di kedua-dua platform mudah alih dan web.
  • pilihan perkakas dan perancah yang lebih baik

Walau bagaimanapun, peningkatan dari Angular 1.x ke Angular 2 adalah mahal kerana Angular 2 adalah binatang yang sama sekali berbeza. Itulah salah satu sebab mengapa Angular 2 tidak mengalami kadar pengambilan yang sama seperti pendahulunya. Tetapi Angular dan AngularJS terus menjadi antara teknologi yang paling biasa digunakan mengikut Stack Overflow (2017). Projek Angular mempunyai kira-kira 28,000 bintang di GitHub.

Vue.js

Vue.js adalah rangka JavaScript yang ringan yang telah menjadi trend tahun ini. Ia adalah rangka JavaScript yang paling popular di GitHub dari segi bilangan bintang GitHub. Vue mendakwa menjadi rangka kerja yang kurang pantas dan dengan demikian mudah bagi pemaju untuk mengejarnya. Sintaks template template Vue mengikat DOM yang diberikan kepada data contoh.

Vuejs The progressive JavaScript framework

Rangka kerja ini menawarkan pengalaman seperti Reaksi dengan DOM Virtual dan komponen yang boleh diguna semula yang boleh anda gunakan untuk membuat kedua-dua widget dan seluruh aplikasi web. Lebih-lebih lagi, anda juga boleh menggunakan sintaks JSX untuk menulis fungsi render secara langsung. Apabila keadaan berubah, Vue.js menggunakan sistem kereaktifan untuk menentukan apa yang telah berubah dan mereparasi bilangan komponen minimum. Vue.js juga menyokong integrasi perpustakaan lain ke dalam kerangka tanpa banyak kerumitan.

Ember.js

Ember.js adalah kerangka depan berdasarkan pola Model-View-ViewModel (MVVM). Ia mengikuti konvensyen mengenai pendekatan konfigurasi yang popular di kalangan kerangka sampingan sisi pelayan seperti Ruby on Rails dan Laravel. Ember.js memasukkan amalan biasa dan amalan terbaik ke dalam kerangka supaya anda boleh mendapatkan aplikasi dan berjalan tanpa banyak usaha.

Emberjs a framwork for creating ambitious web apps

Tumpukan Ember biasanya terdiri daripada:

  • Ember CLI: Menyediakan pilihan perancah asas dan menyokong beratus-ratus add-ons.
  • Data Ember: Perpustakaan berterusan data yang boleh dikonfigurasikan untuk berfungsi dengan mana-mana hujung pelayan.
  • Ember Inspector: Pelanjutan yang tersedia untuk Chrome dan Firefox.
  • Kebakaran Cecair: Tambahan untuk peralihan dan animasi.

Alat

Alat adalah koleksi rutin yang membantu anda dalam proses pembangunan. Tidak seperti perpustakaan, alat biasanya menjalankan tugas pada kod klien. Ia mengambil kod anda sebagai input, melakukan tugas di atasnya, dan kemudian mengembalikan output. Alat yang biasa digunakan termasuk transpiler dan alat binaan, pengecam aset, bundler modul, dan alat perancah.

Alat: Pelari Tugas Umum-Tujuan

Pelari tugas umum ialah alat yang digunakan untuk mengautomasikan tugas-tugas yang berulang-ulang. Pelari tugas umum yang umum termasuk:

Gulp

Gulp adalah toolkit JavaScript yang digunakan sebagai pelari tugas dan sebagai sistem binaan dalam pembangunan web. Penyusunan, pengurangan kod, pengoptimuman imej, pengujian unit, linting dan lain-lain adalah tugas berulang yang harus diautomatikasikan. Gulp membuat proses tugas menulis lebih mudah, bahkan untuk orang yang kurang akrab dengan JavaScript.

Gulp menggunakan talian paip untuk mengalirkan data dari satu plugin ke satu lagi, dan hasil akhir dihasilkan ke folder tujuan. Gulp melakukan lebih baik berbanding Grunt kerana ia tidak membuat fail sementara untuk menyimpan hasil pertengahan, yang mengakibatkan kurang panggilan I / O.

Automate and enhance your workflow using Gulp

Grunt

Grunt adalah pelari tugas dan alat automasi untuk JavaScript. Grunt mempunyai antara muka baris arahan yang membolehkan anda menjalankan tugas khusus yang ditentukan dalam fail yang dipanggil Gruntfile. Grunt mempunyai beribu-ribu plugin untuk dipilih, yang sepatutnya meliputi kebanyakan tugas berulang yang biasa yang anda hadapi. Dengan Grunt, anda boleh menjalankan semua tugas di bawah arahan tunggal, menjadikan hidup anda lebih mudah.

Grunt the JavaScript task runner

npm

Gulp dan Grunt menghendaki anda menghabiskan masa belajar dan menguasai alat baru, yang memerlukan masa. Memperkenalkan dependensi tambahan ke dalam projek anda boleh dielakkan dengan memilih alternatif yang sudah digabungkan dengan Node.js. Walaupun npm lebih dikenali sebagai pengurus pakej, skrip npm boleh digunakan untuk melaksanakan sebahagian besar tugas-tugas yang disebutkan di atas.

npm task runner

Alat: Ujian

Pengujian adalah proses mengesahkan dan mengesahkan bahawa aplikasi memenuhi keperluan perniagaan dan teknikal yang diharapkan. Pendekatan Pembangunan yang Dipandu Ujian juga membantu dalam menemui pepijat dan dengan itu harus dianggap sebagai bahagian penting dari susunan pembangunan front-end moden.

Jest

Jest adalah rangka kerja ujian yang agak baru yang ditulis oleh Facebook dan diterima dengan baik oleh komuniti React. Terdapat salah tanggapan umum bahawa Jest direka khusus untuk bekerja dengan React; bagaimanapun, menurut Dokumentasi Jest:

Walaupun Jest mungkin dianggap sebagai pelayar ujian khusus Reaktik, sebenarnya ia adalah platform uji universal, dengan keupayaan untuk menyesuaikan diri dengan mana-mana perpustakaan atau kerangka JavaScript. Anda boleh menggunakan Jest untuk menguji sebarang kod JavaScript.

Kelebihan terbesar menggunakan Jest di atas suite ujian lain ialah anda memerlukan sifar atau konfigurasi minimum untuk memulakan ujian. Rangka kerja ini mempunyai perpustakaan penegasan terbina dan menyokong penggunaan fungsi-fungsi mock atau mata-mata.

Delightful JavaScript testing using Jest

Jest mempunyai ciri yang dipanggil ujian snapshot yang membolehkan anda memastikan bahawa UI aplikasi tidak berubah tanpa diduga. Pemaju di Facebook dan penyumbang lain telah mencurahkan banyak kerja ke dalam projek ini baru-baru ini, jadi tidak akan menjadi kejutan jika Jest ternyata menjadi kerangka ujian yang paling popular untuk JavaScript pada tahun-tahun yang akan datang.

Mocha

Mocha adalah rangka kerja ujian JavaScript yang mempunyai sokongan penyemak imbas, sokongan async termasuk janji-janji, laporan liputan ujian, dan API JavaScript untuk menjalankan ujian. Mocha sering dipasangkan dengan pustaka pernyataan seperti Chai, should.js, expect.js, atau lebih baik-menegaskan kerana ia tidak mempunyai perpustakaan penegasan sendiri.

Mocha test runner and testing framework

Jasmine

Jasmine adalah rangka kerja ujian yang didorong oleh tingkah laku untuk JavaScript. Jasmine bermatlamat untuk menjadi suite ujian, pelantar, dan kerangka ujian bebas. Jasmine mempunyai perpustakaan penegasan sendiri yang dipanggil pertandingan yang memberikannya sintaks yang bersih dan mudah dibaca. Jasmine tidak mempunyai pelari ujian terbina dalam, dan anda mungkin perlu menggunakan pelari ujian generik seperti Karma sebaliknya.

Jasmine test runner and testing framework

Ringkasan

JavaScript, bahasa web, telah kekal relevan sejak zaman penubuhannya pada tahun 1995. Ia mungkin akan tetap seperti itu selagi pelayar tidak memutuskan untuk memecahkannya untuk bahasa lain. Walaupun terdapat banyak bahasa lain yang dikompil ke JavaScript, tidak ada bahasa skrip lain yang akan mengganti JavaScript pada masa hadapan. Mengapa? Kerana JavaScript telah berkembang terlalu popular untuk diganti.

Bahasa ini bukan tanpa lengkung pembelajarannya, dan terdapat banyak kerangka kerja dan perpustakaan untuk membuat anda sibuk, juga. Jika anda mencari sumber tambahan untuk belajar atau menggunakan dalam kerja anda, periksa apa yang ada di Pasar Envato.

Persekitaran JavaScript semestinya berkembang, yang terbukti dari trend semasa dalam pembangunan web. Perpustakaan lama dan kerangka telah digantikan dengan teknologi baru. jQuery, yang pernah menjadi perpustakaan JavaScript yang paling disukai, sedang mengalami penurunan dari segi rayuan, penggunaan, dan populariti. Generasi baru perpustakaan depan, kerangka, dan alat-alat semakin mendapat perhatian dan menerima penerimaan sejagat.

Menyesuaikan diri dengan trend baru dalam teknologi juga mempunyai manfaat. Pekerjaan pengkodan yang memerlukan Reacta mempunyai beberapa gaji tertinggi dalam industri, dengan gaji purata $ 105,000 di A.S. menurut Stack Overflow (2016). Oleh itu, anda perlu terus belajar dan bereksperimen dengan alat dan kerangka terkini untuk mendapatkan yang terbaik daripada JavaScript.

Jika anda fikir saya telah terlepas rangka kerja JavaScript, perpustakaan atau alat yang bernilai menyebut, beritahu saya melalui komen.

Bacaan 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.