DE{CODE}: Headless 101 สำหรับนักพัฒนา WordPress

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

สไลด์เซสชัน

การถอดเสียงแบบเต็ม

GRACE ERIXON : ยินดีต้อนรับสู่ Headless 101 สำหรับนักพัฒนา WordPress ฉันชื่อ Grace Erixon และฉันเป็นผู้ช่วยนักพัฒนาร่วมที่ WP Engine เข้าร่วมกับฉันคือสตีฟจาก Haus วันนี้เราจะมาแนะนำสั้นๆ ว่า WordPress คืออะไร และคุณจะเริ่มต้นใช้งานมันได้อย่างไร

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

ในสถาปัตยกรรมดั้งเดิม ผู้เผยแพร่สร้างและจัดการเนื้อหา เช่น บล็อกโพสต์และหน้าต่างๆ ภายใน WordPress นักพัฒนาเขียนโค้ดเพื่อควบคุมลักษณะและการทำงานของไซต์โดยใช้ API ธีมของ PHP และ WordPress จากนั้น WordPress จะสร้างหน้า HTML ที่ส่งไปยังผู้เยี่ยมชม

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

นักพัฒนาเขียนโค้ดเพื่อควบคุมลักษณะและการทำงานของไซต์ใน JavaScript รวมถึงการใช้ WPGraphQL หรือ REST API เพื่อดึงข้อมูลออกจาก WordPress เฟรมเวิร์ก เช่น Faust.js, Next.js, Nuxt.js หรือ SvelteKit มักจะใช้เพื่อขับเคลื่อนแอปพลิเคชันส่วนหน้านี้ จากนั้นแอปพลิเคชัน JavaScript ส่วนหน้าจะสร้างและให้บริการหน้า HTML ที่ส่งไปยังผู้เยี่ยมชมเว็บไซต์

ไม่เหมือนกับสถาปัตยกรรมแบบดั้งเดิม WordPress จะไม่รับผิดชอบในการสร้างหน้า HTML อีกต่อไป ดังนั้นการโต้ตอบเพื่อแลกเปลี่ยนเนื้อหาระหว่างส่วนหลังของ WordPress และแอปพลิเคชัน JavaScript ส่วนหน้าจึงเกิดขึ้นผ่านเลเยอร์ API ตัวเลือกสองตัวเลือกสำหรับเลเยอร์ API คือ WordPress REST API หรือ WPGraphQL

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

ในทางตรงกันข้าม WPGraphQL ช่วยให้เราสามารถขอเนื้อหา ผู้เขียน และหมวดหมู่ของโพสต์ได้ในคำขอเดียว ด้วยเหตุนี้ WPGraphQL จึงเป็นเลเยอร์ API ที่เราต้องการ WPGraphQL เป็นปลั๊กอินฟรีที่ให้สคีมา GraphQL และ API ที่ขยายได้สำหรับเว็บไซต์ WordPress ของคุณ WPGraphQL เร็วกว่า REST API เนื่องจากได้รับข้อมูลตรงตามที่ขอ และส่งผลให้มีฟังก์ชันที่ดำเนินการผ่านการเพิ่มประสิทธิภาพการสืบค้นน้อยลง ดาวน์โหลดข้อมูลน้อยลง โหลดข้อมูลมีประสิทธิภาพมากขึ้น และรวมทรัพยากรหลายรายการไว้ในคำขอเดียว

สถาปัตยกรรมแบบไร้หัวช่วยให้นักพัฒนามีอิสระในการเลือกจากสแต็กเทคโนโลยีส่วนหน้าใดก็ได้ โดยเฟรมเวิร์ก JavaScript เป็นที่นิยมมากที่สุด เฟรมเวิร์ก JavaScript ส่วนหน้ายอดนิยมบางส่วน ได้แก่ React, Vue.js และ Svelte เฟรมเวิร์กใหม่ๆ ถูกปล่อยออกมาตลอดเวลา ดังนั้นรายการนี้จึงยังไม่ครอบคลุมทั้งหมด

เฟรมเวิร์ก JavaScript จำนวนมากเหล่านี้ใช้ร่วมกับเมตาเฟรมเวิร์กที่เพิ่มโซลูชันสำหรับสิ่งต่างๆ เช่น การกำหนดเส้นทาง การแสดงผลฝั่งเซิร์ฟเวอร์ และอื่นๆ React ใช้ร่วมกับ Next.js, Vue.js ใช้ร่วมกับ Nuxt.js และ Svelte ใช้ร่วมกับ SvelteKit Gatsby เป็นอีกหนึ่งเมตาเฟรมเวิร์กยอดนิยม

WP Engine ได้พัฒนา Faust.js ซึ่งเป็นเฟรมเวิร์ก JavaScript ที่สร้างขึ้นบน React และ Next.js Faust ถูกสร้างขึ้นโดยเฉพาะเพื่อรองรับเว็บแอปพลิเคชัน WordPress ที่ไม่มีส่วนหัว รองรับการตรวจสอบสิทธิ์และโพสต์ตัวอย่างแบบแกะกล่อง มี React hooks ในตัวที่สะดวกสำหรับการเข้าถึงข้อมูล WordPress และอื่นๆ อีกมากมาย

ดังนั้นเราจึงได้พูดคุยเกี่ยวกับความหมายของสถาปัตยกรรม WordPress แบบไร้หัวและประเภทของเทคโนโลยีที่คุณจะใช้ แต่มาสัมผัสกันอย่างรวดเร็วว่าทำไมคุณถึงเลือกหัวขาด WordPress นั้นเป็น CMS ที่ใช้งานหนัก และใช้ PHP ซึ่งไม่ใช่ภาษาที่รวดเร็ว Headless WordPress ใช้ภาษาฟอสเตอร์ผ่าน JavaScript และโหลดเฉพาะไฟล์ที่จำเป็นผ่านการเรียก API น้ำหนักเบากว่ามาก ดังนั้นเว็บไซต์ของคุณจะโหลดเร็วขึ้น

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

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

ดังนั้นมาสร้างไซต์ Blueprint ใหม่เพื่อที่เราจะได้ดำดิ่งลงไปในโค้ด จากภายในแดชบอร์ดของ WP Engine เราจะไปที่ Atlas คลิกสร้างแอป เลือกเริ่มต้นด้วยพิมพ์เขียว จากนั้นเราจะเลือกพิมพ์เขียวที่เราต้องการใช้ ฉันจะเลือกพิมพ์เขียวพอร์ตโฟลิโอ

จากนั้น คุณจะเชื่อมต่อบัญชี WP Engine ของคุณกับบัญชี GitHub และโคลนพิมพ์เขียวนั้นลงในที่เก็บใหม่ จะใช้เวลาสองสามวินาทีในการสร้าง สุดท้าย คุณจะต้องเลือกชื่อของพื้นที่เก็บข้อมูลที่คุณเพิ่งสร้างขึ้น ภูมิภาคที่คุณอยู่ใกล้ที่สุด จากนั้นคลิกสร้างแอป

ตอนนี้ หากคุณคลิกที่ URL ของ Atlas เราจะสามารถดูได้ว่าไซต์ WordPress แบบไม่มีหัวของเรามีลักษณะอย่างไร เราสนใจเฉพาะหน้าโพสต์ อย่างที่คุณเห็น ไซต์กำลังดึงโพสต์ล่าสุดทั้งหมดมาไว้ในหน้าบล็อกของเรา และแต่ละโพสต์ยังมีหน้ามุมมองของตัวเอง แต่ข้อมูลทั้งหมดนี้มาจากไหน?

หากเรากลับไปที่แดชบอร์ด WP Engine เราจะเห็นปุ่มสำหรับผู้ดูแลระบบ WP มีส่วนหลังสำหรับไซต์ WordPress ที่ไม่มีส่วนหัวของเรา ถ้าฉันคลิกที่โพสต์ คุณจะเห็นรายการเดียวกันกับเว็บแอปที่ดึงเข้ามา ตอนนี้เราสามารถเปิดที่เก็บ GitHub ที่พิมพ์เขียวของเราถูกโคลนเข้าไปได้ และมาโคลน repo นั้นลงไปยังสภาพแวดล้อมในท้องถิ่นของเรา

จากนั้นฉันจะเปิด repo นี้ใน Visual Studio Code ตัวแก้ไขโค้ดที่ฉันโปรดปราน ดูรายละเอียดในไดเร็กทอรีโครงการ ไฟล์สำหรับหน้าบล็อกสามารถพบได้ที่ SRC, หน้า, โพสต์, Index.js โครงการนี้สร้างขึ้นโดยใช้ React, Next.js, Faust.js และ WPGraphQL หากคุณไม่คุ้นเคยกับ React หรือแม้แต่ JavaScript สิ่งนี้อาจดูสับสนในตอนแรก

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

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

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

กลับไปที่ไฟล์ Index.js ที่แสดงโพสต์ทั้งหมด เราจบสิ่งนี้ด้วยการแสดงคอมโพเนนต์โหลดเพิ่มเติมที่ด้านล่างของหน้าเพื่อดึงโพสต์เพิ่มเติมหากมีการร้องขอและส่วนท้าย ฟังก์ชันสุดท้าย getStaticProps เป็นฟังก์ชันสร้างเว็บไซต์แบบสแตติก Next.js ที่บอกให้แสดงหน้านี้ล่วงหน้าในเวลาสร้างโดยใช้อุปกรณ์ประกอบที่ส่งคืนโดยฟังก์ชัน และนั่นแหล่ะ

ขอบคุณ Blueprints ที่จัดการการตั้งค่า Headless ให้เรา เป็นเรื่องง่ายที่จะแยกย่อยสิ่งที่เข้าสู่หน้าโพสต์เพื่อรับข้อมูลจากแบ็กเอนด์ของ WordPress โดยใช้ WPGraphQL และเพื่อแสดงโพสต์โดยใช้ส่วนประกอบ React ขอบคุณสำหรับการปรับ คุณสามารถพบฉันได้ที่ Twitter @graceerixon

ตรวจสอบที่ developer.wpengine.com สำหรับเนื้อหาเพิ่มเติมเกี่ยวกับ Headless WordPress เรามีบทช่วยสอนเกี่ยวกับวิธีสร้างเว็บไซต์ WordPress แบบไม่มีหัวเรื่องแรกของคุณตั้งแต่เริ่มต้นโดยใช้ Faust.js และเรากำลังทำงานกับชุดเนื้อหาแบบไม่มีหัว 101 อยู่ในขณะนี้ คุณสามารถรับเครื่องมือทั้งหมดที่ Atlas นำเสนอได้หากคุณสมัครบัญชี Sandbox ฟรี ตอนนี้ฉันจะส่งต่อให้ Steve เพื่อพูดคุยเกี่ยวกับสาเหตุที่ Haus เลือก Headless WordPress สำหรับโครงการ leoburnett.com ของพวกเขา

สตีฟ สกาโว: ขอบคุณ เกรซ สวัสดี ฉันชื่อ Steve Scavo, CTO ที่ Haus เราเป็นสตูดิโอและเอเจนซี่ด้านเทคโนโลยีที่สร้างสรรค์จากลอสแอนเจลิส แคลิฟอร์เนีย การพูดคุยนี้มีชื่อว่า Headless 101 สำหรับนักพัฒนา WordPress อย่างเหมาะสม ฉันไม่ใช่ผู้พัฒนา WordPress โดยการแลกเปลี่ยน แต่ฉันคิดว่านั่นเป็นส่วนหนึ่งของความสวยงามของสถาปัตยกรรมแบบไร้หัว

ดังนั้นเราจึงสามารถเรียกสิ่งนี้ว่า Headless 101 ได้อย่างง่ายดายสำหรับนักพัฒนาที่ไม่ใช่ WordPress ที่ต้องการใช้ประโยชน์จาก WordPress นั่นอาจเป็นเพียงชื่อที่เหมาะสม นั่นคือสิ่งที่สวยงามเกี่ยวกับหัวขาด เป็น win-win จากทุกฝ่ายอย่างที่คุณเห็น

แล้วทำไมหัวขาด? มีเหตุผลระดับสูงมากมายที่เราสามารถพูดถึงได้ แต่ฉันคิดว่าการพูดถึงตัวอย่างการผลิตจริงและตัวอย่างในโลกแห่งความเป็นจริงเมื่อมันส่องแสงนั้นมีประโยชน์จริงๆ และฉันต้องการแสดงโครงการที่เราทำเพื่อ Leo Burnett โดยใช้หัวขาดภายใต้สถาปัตยกรรมหัวขาด สำหรับบริบทแล้ว Leo Burnett เป็นเอเจนซี่โฆษณาที่มีเรื่องราวนอกเมืองชิคาโก แต่พวกเขามีสำนักงานหลายแห่งทั่วโลกและทั่วโลก ดังนั้นพวกเขาจึงมีเนื้อหามากมาย มีงานมากมาย

ไซต์เก่าใช้งานธีม WordPress เดียว มันแยกส่วนจริงๆ ค่อนข้างช้า ทำงานได้ไม่ดีนัก การอัปเดตทำได้ยาก และไม่ค่อยแสดงประเภทของแคชและแบรนด์ที่ Leo Burnett ต้องการสื่อ นั่นคือสิ่งที่เราได้ทำงานร่วมกันจากมุมมองการออกแบบ และเราเลือกหัวขาดเพื่อปรับปรุงสแต็คของพวกเขาให้ทันสมัย

เราแค่ต้องการให้มันรู้สึกมีชีวิตชีวาและสดใหม่ และมีความสามารถแบบที่เราต้องการเพื่อรวบรวมประสบการณ์ผู้ใช้และ UI ที่ยอดเยี่ยมจริงๆ เราต้องการเพิ่มพลังในการเผยแพร่ของพวกเขา เราต้องการเพิ่มจังหวะที่พวกเขาสามารถเผยแพร่เนื้อหาได้ เราต้องการสร้างเอกลักษณ์ของแบรนด์ขึ้นมาใหม่ และมี UI และการโต้ตอบ ความรู้สึกต่อเว็บไซต์ที่ทำให้ Leo Burnett แสดงออกอย่างแท้จริง และสัมผัสเล็กๆ น้อยๆ ทั้งหมดเหล่านี้ ตลอดจนการจัดเรียงของบทบรรณาธิการ การพิมพ์ และการโต้ตอบที่พวกเขาต้องการสื่อ

และเราต้องการเตรียมฐานรหัสและเว็บไซต์สำหรับอนาคต เราไม่เพียงแค่ต้องการให้ไซต์มีความเกี่ยวข้องในอีก 12 เดือนข้างหน้า เราต้องการให้มันเกี่ยวข้องกับทศวรรษหน้าบางที และฉันคิดว่าสถาปัตยกรรมแบบไร้หัวนี้ กองแบบไร้หัวนี้ทำแบบนั้นได้จริงๆ

ดังนั้นหนึ่งในปัญหาเริ่มต้นของ Headless คือมีการตัดสินใจมากมายเกี่ยวกับโฮสติ้ง การปรับใช้ และโครงสร้างพื้นฐานอยู่เสมอ และมันก็เป็นปัญหาใหญ่เสมอ ดังนั้นการตัดสินใจแบบสแต็กเหล่านี้จึงขึ้นอยู่กับนักพัฒนาเสมอ และคุณค้นหาไปรอบๆ และคิดไปรอบๆ ตกลง บุคคลที่สามรายใด คุณอาจต้องใช้แอปพลิเคชัน CI/CD เราจะโฮสต์สิ่งนี้บน AWS หรือไม่ เราจะทำอย่างนั้นได้อย่างไร? บริการอะไรบ้าง? จากนั้นคุณก็นำโซลูชันเฉพาะกิจเหล่านี้ไปใช้ตามโฟลว์นั้น

แพลตฟอร์ม Atlas และ WordPress Engine Atlas ช่วยแก้ปัญหานี้ได้จริงๆ นี่คือที่มาของการเล่น เราเลือกที่จะใช้ Atlas ด้วยเหตุผลทั้งหมดนี้ และพวกเขามีโครงสร้างพื้นฐานบริการที่มีการจัดการนี้ พวกเขาสร้างมาตรฐานไปป์ไลน์ CI/CD คุณไม่จำเป็นต้องคิดเกี่ยวกับมัน

มีการย้ายข้อมูลระหว่างสภาพแวดล้อมที่โดยพื้นฐานแล้วลงไปยังโฟลว์เพียงคลิกเดียว นั่นเป็นปัญหาใหญ่มาโดยตลอดในการย้ายจาก QA ไปสู่การแสดงละครเป็นการผลิต โดยพื้นฐานแล้ว WordPress Engine และแพลตฟอร์ม Atlas นำมาซึ่งการคลิกเพียงครั้งเดียว

และจากนั้นก็มีความเหนื่อยล้าเกี่ยวกับไมโครเซอร์วิสและ DevOps มีเพียงภาระทางความคิดที่หนักหนาสาหัสที่คุณต้องคิดและสนับสนุนและตระหนักในเรื่องนั้นในฐานะนักพัฒนาและดำเนินการต่อและดำเนินการต่อไป นี่คือทุกสิ่งที่แพลตฟอร์ม Atlas นำออกจากมือคุณและแก้ไขด้วยวิธีที่เป็นประโยชน์

เรามาพูดถึงพลวัตบางอย่างที่ฉันคิดว่าหัวขาดส่งเสริมและเน้นย้ำจริงๆ เสาแรกที่นี่- มีสามเสา เสาหลักแรกคือประสบการณ์ของนักพัฒนา ช่วยให้เราเลือกเครื่องมือได้เหมาะสมกับงาน และเมื่อฉันพูดว่าเรา ฉันหมายถึงนักพัฒนา

ช่วยให้เราเลือก stack ที่เราต้องการเขียนโค้ดได้ และนั่นคือที่ Haus นั่นคือ Next.js และ React Next.js เป็นเพียงเฟรมเวิร์กที่ยอดเยี่ยมเกี่ยวกับแบบแผนที่ดีจริงๆ สำหรับการกำหนดเส้นทางและประสิทธิภาพและสถาปัตยกรรมแอปพลิเคชัน และเรายังต้องการนำระบบการออกแบบมาใช้ด้วย ไม่ใช่แค่ระบบการออกแบบด้วยภาพ แต่เป็นระบบการออกแบบที่มีรหัส นี่คือสิ่งที่ทำให้แอปพลิเคชันของเราสอดคล้อง ทดสอบ และสวยงาม

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

เรายังต้องการความคิดสร้างสรรค์อีกมาก คุณสามารถเห็นเมื่อคุณเยี่ยมชม leoburnett.com มีการเปลี่ยนหน้าที่สวยงาม มี – เราไม่ผูกมัดกับสแต็ก WordPress แบบดั้งเดิมว่าควรแสดงผลอย่างไร WordPress ไม่รับผิดชอบในการแสดงผลส่วนหน้าอีกต่อไป

เฮดรูมของเราแทบจะไร้ขีดจำกัด เราสามารถเลือกคลังแอนิเมชั่นของเราได้ เราสามารถเลือกวิธีการที่ส่วนประกอบของเรามีปฏิสัมพันธ์ซึ่งกันและกัน เป็นประโยชน์อย่างมากในด้าน DX

ประสบการณ์การดูแลระบบนั้นยกระดับขึ้น และฉันคิดว่าเราได้ปรับปรุงสิ่งนี้เพราะเราไม่เคยเปลี่ยนจากความคุ้นเคยเดิมของพวกเขา ไม่มีการตัดต่อแบ็กเอนด์ เราเปลี่ยนจาก WordPress เป็น WordPress เราไม่ต้องส่งออกข้อมูลและเขียนสคริปต์เพื่อย้ายไปยังระบบอื่นที่เป็นกรรมสิทธิ์ ความคุ้นเคยจึงมีมาก เราต้องการรักษากระแสดังกล่าวสำหรับผู้ดูแลระบบคนปัจจุบันของ leoburnett.com

การนำมาใช้และเอกสารประกอบ – หากคุณใช้เวลาห้านาทีบนเว็บ คุณอาจเคยสัมผัสกับระบบแบ็คเอนด์ของ WordPress แล้ว และนั่นไม่สามารถพูดเกินจริงได้ Leo Burnett ยังมีจุดเนื้อหาและฟิลด์แบบกำหนดเองที่เฉพาะเจาะจงจำนวนมาก WordPress เสนอสิ่งนั้นและให้พลังนั้นแก่คุณ แต่เราสามารถใช้ปลั๊กอิน Advanced Custom Fields ซึ่งเป็นแบบแผนที่ดีมากเกี่ยวกับการปรับ UI ของผู้ดูแลระบบเพื่อให้เป็นมิตรและใช้งานได้จริง นั่นเป็นชัยชนะจากประสบการณ์ของผู้ดูแลระบบ

แน่นอนว่าเสาหลักที่สามคือประสบการณ์ของผู้ใช้ มันเป็นสิ่งสำคัญจริงๆ ผู้ใช้ ฉันคิดว่าเหมือนกับที่เราเชื่อว่าเว็บแอปพลิเคชันที่ Haus ควรรู้สึกเหมือนเป็นแอปพลิเคชันพื้นฐาน ไม่ควรมีการทิ้ง ฉันคิดว่าผู้ใช้ก็ชื่นชมเช่นกัน

พวกเขาไร้รอยต่อ พวกเขากำลังตอบสนอง พวกเขารู้สึกดี และฉันคิดว่าเราต้องการให้ Leo Burnett และแอปพลิเคชันทั้งหมดของเรารู้สึกอย่างนั้น การเลือกสแต็กที่เราต้องการในส่วนหน้าทำให้เราทำเช่นนั้นได้

แอพแบบเนทีฟนั้นแยกออกจากโครงสร้างพื้นฐานเนื้อหาแบ็คเอนด์โดยเนื้อแท้ และเว็บแอพของเราก็เช่นกัน และนี่คือสิ่งที่ Atlas ส่งเสริม นี่คือสิ่งที่สถาปัตยกรรมไร้หัวโดยทั่วไปส่งเสริม นอกจากนี้ยังส่งเสริมประสิทธิภาพ เราสามารถเรนเดอร์ UI ของเราได้ในระดับสากล นั่นหมายถึงโหลดเริ่มต้นอยู่ที่ฝั่งเซิร์ฟเวอร์ และหลังจากนั้นลูกค้าก็เข้ามาแทนที่

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

สำหรับ Leo Burnett ในแง่ของ API เนื้อหาที่เราเลือกใช้งาน เราได้ตั้งค่าตำแหน่งข้อมูล GraphQL นั่นหมายความว่าจะมีน้ำหนักบรรทุกที่น้อยลงกลับมา เรากำลังกำหนดเนื้อหาที่เราต้องการอย่างชัดเจน มีน้ำน้อยลงหลังจากที่ฝั่งเซิร์ฟเวอร์เรนเดอร์ไปสู่เรนเดอร์ฝั่งไคลเอนต์

นั่นคือรหัสที่น้อยลงผ่านสาย การตอบสนองน้อยลง เวลาตอบสนองที่เร็วขึ้น เป็นชัยชนะอย่างแน่นอน และฉันขอแนะนำว่าหากคุณกำลังจะเปลี่ยนไปใช้เวิร์กโฟลว์ของ Atlas หรือเวิร์กโฟลว์ที่ไม่มีส่วนหัว ให้คุณพิจารณาอย่างละเอียดโดยใช้ GraphQL API เทียบกับ REST API

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

ผลลัพธ์คืออะไร? นี่เป็นเพียงชนิดของการม้วนขึ้นทั้งหมด เป็นแรงบันดาลใจให้นักพัฒนา ผู้ดูแลระบบที่มีประสิทธิผล และผู้ใช้ที่มีความสุข นี่คือสามกลุ่มและความหวังที่ฉันคิดว่าทีมพัฒนาเว็บทุกคนพยายามอย่างมาก

เมื่อนักพัฒนาได้รับแรงบันดาลใจ พวกเขากำลังใช้ชุดเครื่องมือที่ปรับให้เหมาะสม มันรู้สึกดี พวกเขามีความสุข พวกเขาเขียนโค้ดที่ดีกว่า

ผู้ดูแลระบบทราบดีว่าพวกเขากำลังผลิตเนื้อหาในระบบนิเวศที่สวยงาม มันเร็ว มันจัดส่งได้อย่างรวดเร็ว และผู้ใช้เห็นเนื้อหาที่อัปเดตแล้ว และพวกเขากำลังประสบกับส่วนหน้าที่ทันสมัย ​​สวยงาม ใช้งานได้ดี และปรับแต่งให้เหมาะสมที่สุด

ฉันคิดว่าจะสรุป - ความคิดสุดท้ายที่ฉันอยากจะให้คุณจำไว้ ฉันคิดว่าบทสรุปมักมีภาษาขาดหายไป ฉันคิดว่าบ่อยครั้งเกินไปที่เราพูดกันแค่ว่า สร้างเว็บไซต์ที่สวยงามให้ฉัน สร้างเว็บไซต์ที่น่าทึ่งให้ฉัน ฉันต้องการรูปลักษณ์และความรู้สึก - และเราได้ดำเนินการตรวจสอบเหล่านี้ทั้งหมดกับลูกค้าแล้ว

และทุกคนก็ตื่นเต้น แล้ว V1 ก็มาถึง และเปิดตัว แล้วคนที่ต้องรับช่วงต่อเว็บไซต์นั้น ก็เหมือนคุณส่งความยุ่งเหยิงมาให้ฉัน ฉันจะดูแลสิ่งนี้ได้อย่างไร นี่เป็นกระแสเฉพาะกิจที่คุณคิดขึ้นมาใช่ไหม

คุณไม่ต้องการสร้างเว็บไซต์ที่สวยงามและไม่ต้องแบกรับภาระใดๆ เราภูมิใจมากที่ Haus ที่จะไม่ทำเช่นนั้น และฉันคิดว่าสิ่งที่ยอดเยี่ยมเกี่ยวกับ Atlas และ Atlas ในฐานะแพลตฟอร์มก็คือมันสามารถแก้ปัญหานั้นได้

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

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

ดังนั้นฉันหวังว่าเกร็ดความรู้เล็ก ๆ น้อย ๆ จะช่วยให้คุณเข้าใจกองหัวขาดอย่างมีกลยุทธ์ในอนาคต หากนั่นคือทิศทางที่คุณต้องการ ฉันขอแนะนำให้คุณดูที่ Atlas ฉันหวังว่าคุณจะสนุกกับเซสชั่นนี้ และขอบคุณมาก