ไลบรารี JavaScript และ WordPress: สิ่งที่คุณต้องรู้

ฉันเคยพูดไปแล้ว และฉันจะพูดอีกครั้ง: หากคุณเป็นผู้ใช้ WordPress คุณต้องทำความคุ้นเคยกับ JavaScript นั่นเป็นเพียงวิธีการของเว็บ ปัญหาที่แท้จริงคือจำนวนไลบรารี JavaScript ที่น่ารำคาญที่คุณต้องจัดเรียง

มี Ember, React, Angular Vue และ Preact และอย่าลืมเกี่ยวกับ Ionic, Express หรือ Node jQuery, Meteor และ Bootstrap ก็สมควรได้รับการกล่าวถึงเช่นกัน อ้อ แล้ว...

คุณได้รับจุดของฉัน (และนี่เป็นเพียงสิ่งที่ฉันสามารถตั้งชื่อได้โดยไม่ต้องเปิดแท็บใหม่) ไลบรารี JavaScript ทิ้งแนวความคิดไว้เพราะมันจำเป็นมากสำหรับการพัฒนา

ไม่ว่าคุณจะต้องการการจัดการ DOM, กรอบงาน MVC, การเรียก AJAX หรืออย่างอื่นทั้งหมด มีความเป็นไปได้ที่จะมีไลบรารีที่คุณสามารถดึงออกมาเพื่อช่วยคุณได้

ในฐานะผู้ใช้ WordPress นั่นควรเป็นเพลงที่ติดหูของคุณ และนี่คือเหตุผล

JavaScript Libraries คืออะไรกันแน่?

ง่าย ๆ : รหัสที่เขียนไว้ล่วงหน้าเป็นมัด ไม่มีอะไรแฟนซี คุณสามารถทำสิ่งแฟนซีกับพวกเขาได้ นั่นเป็นเหตุผลที่พวกเขายอดเยี่ยม

ด้วยการใช้โค้ดที่เขียนไว้ล่วงหน้าและดึงเข้าไปในเว็บไซต์ของคุณ คุณสามารถเพิ่มฟังก์ชันการทำงานที่ช่วยคุณประหยัดเวลา แต่ยังช่วยอุดช่องว่างในความเชี่ยวชาญของคุณได้อีกด้วย คุณทำได้ดีในสิ่งที่ทำ แต่คุณเป็นนักพัฒนา WordPress ไม่ใช่นักพัฒนา JavaScript

ไม่เป็นไร.

เมื่อคุณใช้ไลบรารี JavaScript กับ WordPress คุณกำลังใช้ความเชี่ยวชาญของผู้อื่นเพื่อปรับปรุงไซต์ของคุณและประสบการณ์ของผู้ใช้

สิ่งแรก สิ่งแรก

ในฐานะผู้ใช้ WordPress คุณมีสิทธิ์เข้าถึงไลบรารี JavaScript จำนวนมากและการพึ่งพาที่มีอยู่แล้วใน Core ตรวจสอบ Codex สำหรับรายการทั้งหมดและวิธีใช้ wp_enqueue_script กับ JS ในตัวและภายนอก

ไลบรารี JavaScript ... มีไว้เพื่ออะไร?

ผู้คนจำนวนมากสับสนเมื่อพูดถึงไลบรารี JavaScript เนื่องจากพวกเขามักติดป้ายกำกับผิดว่าเป็น เฟรมเวิร์ก JavaScript ซึ่งแตกต่างกัน เฟรมเวิร์กเป็นไลบรารีชนิดหนึ่ง แต่ทำงานแตกต่างไปจากส่วนใหญ่เล็กน้อย

กรอบงานคือสิ่งที่คุณใช้สร้างแอปพลิเคชันหรือเว็บไซต์เต็มรูปแบบ โดยพื้นฐานแล้ว JS frameworks ทำหน้าที่เหมือนกับ WordPress ซึ่งเป็นกระดูกสันหลังของโปรเจ็กต์ใด ๆ ที่คุณกำลังทำงานอยู่ มีโครงสร้างในแง่ของการใช้งานมากกว่าไลบรารีที่ไม่ใช่เฟรมเวิร์ก

กรอบงานสามารถแบ่งออกเป็นสองสามประเภท: เฟรมเวิร์กส่วนหน้า เฟรมเวิร์กส่วนหลัง และเฟรมเวิร์กฟูลสแต็ก หากคุณไม่คุ้นเคยกับคำศัพท์นี้ ส่วนหน้า คือสิ่งที่ผู้ใช้โต้ตอบด้วย ส่วน แบ็คเอนด์ จะเกี่ยวข้องกับปัญหาฝั่งเซิร์ฟเวอร์ และ ฟูลสแต็ก จะจัดการทั้งส่วนหน้าและส่วนหลัง

คุณคงเคยได้ยินเกี่ยวกับกรอบงานทั่วไป/ยอดนิยมบางส่วน:

• เชิงมุม
• Node.js
• Vue.js
• ปฏิกิริยา
• Ember

ทั้งหมดนี้เล่นใน WordPress ได้อย่างไร?

ห้องสมุดบางแห่งไม่มี นั่นคือประเด็นทั้งหมดที่ฉันต้องการจะทำ: คุณไม่จำเป็นต้องมีเฟรมเวิร์กแบ็คเอนด์ (และในกรอบนั้นคือเฟรมเวิร์กฟูลสแตก) หากคุณทำงานกับ WordPress Core อันน่ารื่นรมย์ของเราจัดการโครงสร้างระดับนั้นสำหรับเราแล้ว (หมายเหตุว่าเป็นจุดที่สงสัยถ้าคุณเป็น dev ที่เป็น specifcally เอื้อกับ Core และ / หรือทำตันของการปรับแต่งด้วยตัวคุณเอง.)

สิ่งที่คุณต้องเรียนรู้เพื่อใช้ (หรืออย่างน้อยก็เข้าใจ) คือเฟรมเวิร์กส่วนหน้าและไลบรารีการจัดการ DOM เหล่านี้เข้ามาเล่นไกลบ่อยกว่าชนิดอื่น ๆ ของห้องสมุด JavaScript

PHP เป็นภาษาที่ยอดเยี่ยม มันให้ WP แก่เราอย่างที่เราทราบในวันนี้ และมันใช้งานได้ดีมากที่จะนำตรรกะและการทำงานทุกประเภทมาไว้ในมือของผู้ใช้ แต่ไลบรารี JavaScript ใช้พลังและเพิ่มทวีคูณ

ปลั๊กอินบางตัวเช่น NinjaForms ในขณะที่เขียนด้วย PHP เนื่องจาก WordPress บอกว่าให้ใช้ไลบรารี JavaScript เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นและมีฟังก์ชันการทำงานมากกว่าที่จะเป็นไปได้ WPNinjas ใช้ไลบรารี Backbone และ Marionette เพื่อทำสิ่งนี้ให้สำเร็จ

Heck แม้ที่นี่ที่ Elegant Themes, Divi 3.0 (ซึ่งยอดเยี่ยมและคุณควรเข้าร่วมใช้งานบนเว็บไซต์ทั้งหมดของคุณโดยสิ้นเชิง) เขียนใน React

ตัวแก้ไข Gutenberg ที่กำลังจะมีขึ้น (อย่างน้อยก็ในตอนนี้) และแผงผู้ดูแลระบบ WordPress.com ชื่อ Calypso (เช่นเดียวกับ Jetpack) เฮค แทบทุกสิ่งที่คุณทำในแดชบอร์ด .org นั้นขับเคลื่อนโดย JavaScript จนกว่าจะมีการเปลี่ยนแปลง บนเซิร์ฟเวอร์และจำเป็นต้องบันทึก

แต่ถึงอย่างนั้นก็อาจมีการเปลี่ยนแปลงในไม่ช้า…ขอบคุณ WP REST API

WP REST API + ไลบรารี JavaScript = BFF

คุณคงเคยได้ยินเกี่ยวกับ WP REST API แล้ว โดยสรุปแล้ว การพัฒนา JavaScript ของ WordPress นั้นมีชีวิตขึ้นมามากมาย เพราะคุณไม่จำเป็นต้องส่งคำขอเซิร์ฟเวอร์ผ่าน JavaScript แทนที่จะต้องพึ่งพา PHP

ใช่ ตอนนี้คุณสามารถเข้าถึงส่วนหลังของไซต์ของคุณได้โดยตรงจากด้านหน้าโดยไม่ต้องวุ่นวายกับ PHP ทำให้เวลาตอบสนองช้าลงและจำกัดการทำงาน WPMU มีรายละเอียดการใช้ REST API ที่คุณควรตรวจสอบด้วย

คุณสามารถทำอะไรได้มากมายด้วย JS และ REST ที่แทบจะคิดไม่ถึง เมื่อคุณใช้ React (และโดยเฉพาะ React Native) คุณสามารถใช้ฐานข้อมูล WordPress เป็นแบ็คเอนด์สำหรับแอปมือถือของคุณได้โดยไม่ต้องแตะ PHP คุณสามารถโต้ตอบกับ MySQL ได้โดยตรงผ่าน JSON ผ่าน REST API

ในแง่หนึ่ง การโต้ตอบนี้ทำให้ WordPress ทำงานได้เหมือนกับเฟรมเวิร์ก JavaScript แบ็คเอนด์ที่เราพูดถึงข้างต้น โดยให้โครงสร้างของแอปพลิเคชันและการจัดการฐานข้อมูลโดยไม่มี PHP ตัวกลางใดๆ ไม่มีอะไรใหม่เลยสำหรับ WP ที่จะทำงานเช่นนี้ นั่นคือสิ่งที่ CMS ทำ แต่การใช้งานและการผสานรวมกับไลบรารี JavaScript และ JSON นั้น

แม้ว่า React Native จะทำสิ่งนั้นได้โดยเฉพาะสำหรับแอปบนอุปกรณ์เคลื่อนที่ คุณยังสามารถใช้เฟรมเวิร์กส่วนหน้าหรือไลบรารีใดๆ เพื่อทำสิ่งเดียวกันได้ เช่น Vue.js และ Ember และ React แบบเก่าปกติ (หรือ Preact หากน่ารังเกียจ)

และถ้าคุณน่ารังเกียจ จริงๆ คุณสามารถใช้หนึ่งในไลบรารีเหล่านี้ สร้างไซต์ของคุณ และใช้ Swift ของ Java ให้เพียงพอเพื่อรวมไว้ในมุมมองเว็บและโยนมันขึ้นไปบน App Store ด้วย REST API มันค่อนข้างน่าเกลียด แต่ควรใช้งานได้

อนาคตของ WordPress

Matt กล่าวเมื่อปีที่แล้วว่านักพัฒนา WordPress ทุกคนควร "เรียนรู้ JavaScript อย่างลึกซึ้ง"

ฉันคิดว่าถึงเวลาที่เราทุกคนฟังแล้ว จริงๆ แล้ว ไม่สำคัญหรอกว่าไลบรารี JavaScript หรือไลบรารี่ใดที่คุณเลือกเรียนรู้ก่อน เมื่อคุณคุ้นเคยกับวิธีทำงานหนึ่งหรือสองวิธีและโต้ตอบกับ WordPress แล้ว คุณก็พร้อมที่จะเป็นส่วนหนึ่งของระบบนิเวศ JS และในที่สุดก็ถึงอนาคตของ WP

ไม่ว่าคุณจะต้องการสร้างประสบการณ์ที่ยอดเยี่ยมให้กับลูกค้าสำหรับปลั๊กอินของคุณ เช่น Divi หรือ Ninja Forms เว็บแอปที่ยอดเยี่ยมที่ผู้ใช้ของคุณต้องการการอัปเดตที่รวดเร็วและราบรื่น หรือแอปบนอุปกรณ์เคลื่อนที่ที่ใช้ WordPress เป็นฐานข้อมูลส่วนหลัง ก็มี JavaScript ห้องสมุดออกมีสำหรับมัน

ภาพขนาดย่อของบทความโดย Creative Thoughts / shutterstock.com