Pustaka JavaScript dan WordPress: Yang Perlu Anda Ketahui

Saya sudah mengatakannya sebelumnya, dan saya akan mengatakannya lagi: jika Anda pengguna WordPress, Anda harus terbiasa dengan JavaScript. Itu hanya cara web. Masalah sebenarnya, kemudian, adalah jumlah perpustakaan JavaScript yang mengganggu yang harus Anda pilah.

Ada Ember, React, Angular. Vue dan Preact. Dan jangan lupa tentang Ionic, Express, atau Node.js. jQuery, Meteor, dan Bootstrap juga layak disebutkan. Oh, dan bagaimana dengan…

Anda mengerti maksud saya. (Dan hanya itu yang bisa saya sebutkan di atas kepala saya tanpa membuka tab baru.) Pustaka JavaScript mengotori lanskap karena mereka cukup penting untuk pengembangan.

Apakah Anda menginginkan manipulasi DOM, kerangka kerja MVC, panggilan AJAX, atau yang lainnya, kemungkinan besar ada perpustakaan di luar sana yang dapat Anda tarik untuk membantu Anda dalam perjalanan.

Sebagai pengguna WordPress, itu harus menjadi musik di telinga Anda, dan inilah alasannya.

Apa itu Pustaka JavaScript?

Sederhana: kode yang sudah ditulis sebelumnya. Tidak ada yang mewah. Anda dapat melakukan banyak hal mewah dengan mereka. Itulah mengapa mereka luar biasa.

Dengan menggunakan kode yang telah ditulis sebelumnya dan menariknya ke situs web Anda, Anda dapat menambahkan fungsionalitas yang menghemat waktu Anda, tetapi juga mungkin mengisi kekosongan dalam keahlian Anda. Anda ahli dalam apa yang Anda lakukan, tentu saja, tetapi Anda adalah pengembang WordPress – bukan pengembang JavaScript.

Tidak apa-apa.

Saat Anda menggunakan pustaka JavaScript dengan WordPress, Anda menggunakan keahlian orang lain untuk meningkatkan situs Anda dan pengalaman pengguna Anda.

Hal Pertama Pertama

Sebagai pengguna WordPress, Anda memiliki akses ke banyak perpustakaan JavaScript dan dependensinya sudah ada di Core. Lihat Codex untuk daftar lengkap dan cara menggunakan wp_enqueue_script dengan JS internal dan eksternal.

Pustaka JavaScript… Untuk Apa Mereka Baik?

Banyak orang menjadi bingung ketika berbicara tentang perpustakaan JavaScript karena mereka sering disalahartikan sebagai kerangka kerja JavaScript , yang berbeda. Kerangka kerja adalah sejenis perpustakaan, tetapi fungsinya sedikit berbeda dari kebanyakan.

Kerangka kerja adalah apa yang Anda gunakan untuk membangun aplikasi atau situs web skala penuh. Intinya, kerangka kerja JS memiliki fungsi yang sama dengan WordPress itu sendiri – menyediakan tulang punggung proyek apa pun yang sedang Anda kerjakan. Mereka jauh lebih terstruktur dalam hal penggunaan daripada perpustakaan non-kerangka.

Kerangka kerja dapat dipecah menjadi beberapa kategori: kerangka kerja front-end, kerangka kerja back-end, dan kerangka kerja tumpukan penuh. Jika Anda tidak terbiasa dengan istilah tersebut, front-end adalah apa yang berinteraksi dengan pengguna, back-end adalah apa yang berhubungan dengan masalah sisi server, dan full-stack menangani kedua ujung depan dan belakang.

Anda mungkin pernah mendengar beberapa kerangka kerja paling umum/populer:

• sudut
• Node.js
• Vue.js
• Reaksi
• Bara

Bagaimana Semua Ini Dimainkan ke WordPress?

Beberapa dari perpustakaan itu tidak. Yang merupakan inti yang ingin saya sampaikan: Anda tidak memerlukan kerangka kerja back-end (dan dalam nada itu, kerangka kerja tumpukan penuh) jika Anda bekerja dengan WordPress. Core kami yang menyenangkan sudah menangani tingkat struktur itu untuk kami. (Perhatikan bahwa itu adalah poin yang bisa diperdebatkan jika Anda seorang pengembang yang secara khusus berkontribusi pada Core dan/atau melakukan banyak penyesuaian sendiri.)

Apa yang perlu Anda pelajari untuk digunakan (atau setidaknya pahami) adalah kerangka kerja front-end dan pustaka manipulasi DOM. Ini berperan jauh lebih sering daripada jenis perpustakaan JavaScript lainnya.

PHP adalah bahasa yang luar biasa. Ini memberi kami WP seperti yang kita kenal sekarang, dan berfungsi sangat baik untuk menempatkan semua jenis logika dan fungsionalitas di tangan pengguna. Tetapi perpustakaan JavaScript mengambil kekuatan dan meningkatkannya secara eksponensial.

Plugin tertentu seperti NinjaForms, sementara ditulis dalam PHP–karena WordPress mengatakan demikian–gunakan pustaka JavaScript untuk memberi pengguna pengalaman yang lebih baik dan fungsionalitas yang jauh lebih banyak daripada yang mungkin. WPInjas menggunakan perpustakaan Backbone dan Marionette untuk mencapai ini.

Heck, bahkan di sini di Elegant Themes, Divi 3.0 (yang luar biasa dan Anda harus benar-benar bergabung untuk digunakan di semua situs Anda) ditulis dalam React.

Begitu juga editor Gutenberg yang akan datang (setidaknya untuk saat ini), dan panel admin WordPress.com bernama Calypso (dan juga Jetpack.) Heck, hampir semua yang Anda lakukan di dasbor .org diberdayakan oleh JavaScript hingga sesuatu berubah di server dan perlu disimpan.

Tetapi bahkan itu mungkin akan segera berubah… berkat WP REST API.

WP REST API + Pustaka JavaScript = BFF

Anda mungkin pernah mendengar tentang WP REST API sekarang. Singkatnya, ini menghembuskan banyak kehidupan ke dalam pengembangan JavaScript WordPress karena Anda tidak perlu membuat permintaan server melalui JavaScript daripada mengandalkan PHP.

Yap, sekarang Anda dapat langsung mengakses back-end situs Anda dari depan tanpa harus berurusan dengan PHP, memperlambat waktu respons, dan membatasi fungsionalitas. WPMU memiliki rincian penggunaan REST API yang harus Anda periksa juga.

Anda dapat melakukan banyak hal dengan JS dan REST sehingga hampir menakutkan untuk dipikirkan. Saat Anda menggunakan React (dan khususnya React Native), Anda dapat menggunakan database WordPress sebagai back-end untuk aplikasi seluler Anda tanpa harus menyentuh PHP. Anda dapat langsung berinteraksi dengan MySQL melalui JSON melalui REST API.

Di satu sisi, interaksi ini membuat WordPress bekerja sangat mirip dengan kerangka kerja JavaScript back-end yang kita bicarakan di atas, menyediakan struktur aplikasi dan manajemen basis data tanpa PHP perantara. Bukan hal baru bagi WP untuk bekerja seperti ini–bagaimanapun juga, itulah yang dilakukan CMS–tetapi implementasi dan integrasi dengan pustaka JavaScript dan JSON adalah

Sementara React Native secara khusus dapat melakukan itu untuk aplikasi seluler, Anda juga dapat menggunakan kerangka kerja front-end atau pustaka apa pun untuk melakukan hal yang sama–Vue.js dan Ember dan React lama yang normal (atau Preact, jika Anda jahat).

Dan jika Anda benar - benar jahat, Anda dapat mengambil salah satu perpustakaan ini, membuat situs Anda, dan menggunakan cukup Swift Java untuk membungkusnya dalam tampilan web dan menampilkannya di App Store berkat REST API. Ini agak jelek, tetapi harus berhasil.

Masa Depan WordPress

Matt mengatakan tahun lalu bahwa semua pengembang WordPress harus “mempelajari JavaScript secara mendalam”.

Sudah waktunya kita semua mendengarkan, saya pikir. Sejujurnya, tidak masalah library atau library JavaScript mana yang Anda pilih untuk dipelajari terlebih dahulu. Setelah Anda terbiasa dengan cara satu atau dua bekerja dan berinteraksi dengan WordPress, Anda siap menjadi bagian dari ekosistem JS dan, pada gilirannya, masa depan WP.

Apakah Anda ingin membuat pengalaman klien yang luar biasa untuk plugin Anda seperti Divi atau Ninja Forms, aplikasi web hebat di mana pengguna Anda membutuhkan pembaruan yang cepat dan lancar, atau aplikasi seluler yang hanya menggunakan WordPress sebagai database back-end, ada JavaScript perpustakaan di luar sana untuk itu.

Thumbnail artikel oleh Creative Thoughts / shutterstock.com